iTabs Studio

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_160":161,"_162":163},"routes/_app.x.$handle.$name",{"_101":100,"_38":51,"_110":91,"_33":59,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_26":-5,"_121":-5,"_122":-5,"_123":31,"_124":125,"_126":127,"_128":-5,"_129":-5,"_130":131},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_49":50,"_38":51,"_44":52,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":-5,"_63":31,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":84,"_85":86,"_87":88,"_89":31},"version",12,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","e789148b-57fe-473a-8ee3-b6dacc4fd37d","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":29,"_30":31,"_32":31,"_33":34,"_35":34},"file",{"_36":37,"_38":34,"_39":40,"_41":43,"_44":45,"_46":14,"_47":48,"_30":31},"previous",{"_36":37,"_38":34,"_39":40,"_41":42},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","f339b790-6992-11f1-9841-1607ee4eb77e","name","fileType","http","content","// iTabs Studio 7 — Production Base\n// Clean build from Studio 3. The factory. Jon's idea lab.\n// VALTOWN_KEY must be set as env var\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.\\n6. PILL-STYLE CATEGORY NAVIGATION - this is REQUIRED for every menu with more than one category, regardless of whether the build came from a text description or a photo upload. Never produce a single long flat scrolling list when there are multiple categories.\\n - A horizontal row of rounded pill buttons near the top, one per category (e.g. Main Food, Quick Bites, Sandwiches, Hot Drinks, Cold Drinks), each with a small emoji icon plus label.\\n - The row scrolls horizontally on mobile if it overflows (overflow-x:auto, white-space:nowrap, hide scrollbar).\\n - Tapping a pill scrolls/jumps to that category section and highlights the active pill (different background or underline colour using the theme accent).\\n - Each category section below still keeps its own bold section header (e.g. 'MAIN FOOD') exactly as today, so there are two layers: pills for fast navigation, headers for scroll context.\\n - This applies identically whether Missy is building from a typed description or extracting from an uploaded photo. The presence of a photo must never result in a flatter or less structured layout than a text-only build of the same kind of menu.\\n7. PIN-PROTECTED OWNER EDITOR - every menu must let the venue owner update their own item names and prices, no developer needed. Implementation, no exceptions:\\n - A small, subtle text link in the page footer reading exactly: 'itabs · edit' — NOT a visible button, must not draw customer attention.\\n - Tapping it opens a PIN modal: title 'Owner access', a 4-digit numeric input (type=\\\"tel\\\" inputmode=\\\"numeric\\\" maxlength=\\\"4\\\", NEVER type=\\\"password\\\" to avoid the browser password icon), an 'Unlock' button, and a 'Cancel' link.\\n - The correct PIN is a JS variable near the top of the script: var CORRECT_PIN = 'XXXX'; (Missy sets this to the PIN Jon specifies, or defaults to '0000' if none given — always tell Jon what PIN was set in your reply text before the tags).\\n - Wrong PIN: silently fail (shake the input or show 'Incorrect PIN' inline) and stay in customer view. Never reveal the correct PIN in the UI.\\n - DATA MODEL (required, no exceptions): maintain ONE JS array holding every menu item across every category, e.g. var MENU_ITEMS = [{id:'item-1', name:'Bacon Caesar Salad', price:13.50, category:'Main Food'}, ...]. Category sections, qty buttons, the cart, AND the owner editor must all read from this same array. Never build a second copy of item data, and never have the editor read from the visible DOM.\\n - Correct PIN: openEditor() builds its list by looping over the FULL MENU_ITEMS array — every item from every category — regardless of which pill tab is currently active or visible when the editor is opened. This is critical: the editor must never be scoped to only the currently-visible category section. Render it as one scrollable list, with each row showing the item's category as a small label so Jon can tell them apart, plus its name and price as editable inputs, plus 'Save Changes' and 'Cancel' buttons.\\n - On Save: saveEditor() writes each changed value back into MENU_ITEMS by matching on id (not by DOM position), persists the full updated MENU_ITEMS array to localStorage under a key like 'menu-[venue-slug]', then re-renders every category section from the updated array so the change is reflected the next time that category is viewed — not just the one that happened to be active during editing.\\n - On page load: check localStorage first for a saved MENU_ITEMS array under that key; if present, use it instead of the hardcoded defaults, so edits persist across visits on that device.\\n - This editor must be present in every single menu build, and it must always show every item from every category, never a subset. A menu without it, or with an editor that only shows part of the menu, is incomplete.\\n\\nThe JS must include these functions: increment(name, price), decrement(name, price), updateCart(), openOrder(), confirmOrder(), resetOrder(), openPinModal(), checkPin(), closePinModal(), openEditor(), saveEditor(), closeEditor(), scrollToCategory(id). 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. The menu must include pill-style category navigation exactly as required in the main instructions above — a photo source is not an excuse for a flatter layout than a text build would get. Include DEPLOY_HTML tags so it can be deployed immediately.\";\n const system = image ? baseSystem + photoAddon : baseSystem;\n\n const claudeMessages: any[] = [];\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 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-6\",\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: any) {\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 = Deno.env.get(\"VALTOWN_KEY\") || \"\";\n if (!valtownKey || !deployHtml) {\n return new Response(\n JSON.stringify({ error: \"Missing fields or VALTOWN_KEY not set\" }),\n {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\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 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 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({ content: tsWrapper, type: \"http\" }),\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 const liveUrl = (fileData.links && fileData.links.endpoint)\n ? fileData.links.endpoint\n : \"https://\" + name + \".web.val.run\";\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: any) {\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\n const html = [\n \"\",\n '',\n \"\",\n '',\n '',\n \"iTabs 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 \"

\",\n \"\",\n \"\",\n \"\",\n ].join(\"\\n\");\n return new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n}\n","// iTabs Studio 7 — Production Base\n// Clean build from Studio 3. The factory. Jon's idea lab.\n// VALTOWN_KEY must be set as env var\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:

',\n ' \",\n '

',\n '

',\n \"

\",\n '

',\n ' ',\n ' ',\n ' ',\n ' ',\n \"

\",\n ' \",\n '

',\n ' ',\n ' ',\n ' ',\n ' ',\n ' ',\n \"

\",\n \"

\",\n \"\",\n \"\",\n \"\",\n ].join(\"\\n\");\n return new Response(html, { headers: { \"Content-Type\": \"text/html\" } });\n}\n","createdAt",["D",1781859299676],"branchVersion","branchId","22465581-c57c-4a68-9411-0202f48feb80","id","9ba76b6c-b04b-4243-84cb-b1f6d16380d9","itabs-studio-7",["D",1781621529171],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","9e73754f-780d-46b7-924e-110519305b47","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","019d76ed-e14a-727a-b612-7191b6d5a9b7","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_19":61,"_106":107,"_108":31},"branch",{"_13":90,"_38":91,"_49":48,"_92":50,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":51,"_99":100},"isOwned",18,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","jgwynne7_4bf3679b","handle","displayName","iTabs-Menu","avatar","https://avatars.githubusercontent.com/u/177847225?v=4","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_49":50,"_38":51,"_44":156,"_53":-5,"_54":31,"_55":56,"_57":56,"_58":59,"_60":-5,"_19":61,"_62":-5,"_63":31,"_64":-5,"_65":-5,"_66":67,"_68":69,"_70":-5,"_71":-5,"_72":-5,"_73":-5,"_74":75,"_76":75,"_77":78,"_79":78,"_80":78,"_81":75,"_82":75,"_83":157,"_85":158,"_87":159,"_89":31},"tree",[151],"files",[151],"counts",{"_140":67,"_141":142,"_143":142,"_144":145,"_146":147},"contents",[132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_49":133,"_38":34,"_36":37,"_134":-5,"_47":48,"_46":14,"_135":31,"_44":136,"_13":137,"_39":40,"_41":43,"_30":31,"_138":51,"_33":139},"44ffadfe-bcff-47f2-9a40-245aacfe7607","parentId","latest",["D",1781859299676],11,"label",[34],"pulls","branches",1,"forks","envVars",{"_148":142,"_150":67},"connections",{"_148":67,"_149":67},"count","unfilledCount","emptyCount",{"_49":133,"_38":34,"_36":37,"_134":-5,"_47":48,"_46":14,"_135":31,"_44":152,"_13":137,"_39":40,"_41":43,"_30":31,"_138":51,"_153":154,"_33":155},["D",1781859299676],"children",[],[34],["D",1781621529171],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_19":61,"_106":107,"_108":31},{"_13":90,"_38":91,"_49":48,"_92":50,"_93":-5,"_94":-5,"_95":-5,"_96":-5,"_97":-5,"_98":51,"_99":100},"ctx",{"_83":-5,"_129":193,"_194":195,"_196":197,"_198":31,"_199":31,"_200":31,"_201":127,"_202":-5,"_203":-7,"_204":-7,"_205":67,"_206":31,"_207":31,"_208":-5,"_209":31,"_210":31,"_211":31,"_212":-5},"ENV",{"_164":165,"_166":167,"_168":91,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186,"_187":188,"_189":190,"_191":192},"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"]

Diff · v12