iTabs Studio

\\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 - ADD NEW ITEM (required, no exceptions): below the existing editable item list, include an 'Add New Item' row with three inputs — Item Name (text), Price (number, positive only), and a Category select populated from the distinct categories already in MENU_ITEMS — plus an 'Add Item' button. On tap: validate the name is non-empty and price is a positive number (silently ignore the tap otherwise, no alert popups), generate a new unique id such as 'item-' + Date.now(), push a new {id, name, price, category} object into MENU_ITEMS, persist the full updated MENU_ITEMS array to localStorage exactly as saveEditor() does, then re-render both the editor's item list and every live category section so the new item appears immediately without closing the editor. Clear the Item Name and Price fields after a successful add so the owner can keep adding multiple items in a row without reopening the editor.\\n - CHANGE PIN (required, no exceptions): inside the editor, below the Add New Item control, include a separate small 'Change PIN' section with two inputs — New PIN (type=\\\"tel\\\" inputmode=\\\"numeric\\\" maxlength=\\\"4\\\") and Confirm New PIN (same attributes) — plus an 'Update PIN' button. On tap: validate both fields are exactly 4 digits and match each other (show 'PIN must be 4 digits' or 'PINs do not match' inline if not, no alert popups). On success: update the CORRECT_PIN value used for future unlock checks, persist it to localStorage under a key like 'pin-[venue-slug]' so it survives page reloads, clear both fields, and show a brief inline confirmation such as 'PIN updated'. On page load: check localStorage first for a saved PIN under that key; if present, use it instead of the hardcoded CORRECT_PIN default, exactly the same pattern already used for loading saved MENU_ITEMS.\\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, and must always include the Add New Item control described above. A menu without it, or with an editor that only shows part of the menu or has no way to add new items, is incomplete.\\n\\n8. BLANK STARTER MODE - if Jon explicitly asks for a 'blank starter', 'empty menu', 'blank shell', or says something like 'just set up [venue] and let them fill it in', skip the requirement to know every menu item up front. In this mode you only need: venue name, an accent colour (ask if not given, or pick one that suits the venue name/vibe), and 2-3 starter category names (default to 'Food', 'Drinks' and 'Specials' if Jon doesn't specify any — most venues end up wanting a Specials category since daily/weekly specials are exactly what owners change most often through the editor). Build the full interactive menu exactly as required above — cart, qty buttons, pill nav, PIN editor with Add New Item and Change PIN — but set MENU_ITEMS = [] (empty array) so each category section renders with no items, just its header and pill, ready for the owner to populate entirely through the Add New Item control in the owner editor. Still set a CORRECT_PIN as normal (ask Jon for one, or default to '0000') so the venue owner can unlock the editor and start adding their own items immediately after deploy. Tell Jon clearly that this menu has been built with empty categories ready for the owner to fill in themselves.\\n\\n9. SPECIALS HIGHLIGHTING - this applies to every menu, not just Blank Starter builds: whenever a category named 'Specials' (or 'Special', case-insensitive) exists, items rendered inside it must look visually distinct from the regular menu, since specials need to catch the eye and rotate often. Give Specials items a small badge or accent treatment — e.g. a coloured left border or a small 'SPECIAL' pill tag next to the item name, using the theme accent colour — so they read as different from standard menu rows at a glance. This styling must come from the item's category, not a separate flag, so it applies automatically the moment an owner adds a new item under Specials through the editor, with zero extra steps.\\n\\n10. SHARE / REFERRAL CARD - every menu must include a quiet share/referral card near the bottom of the page, after the menu content and before the footer. This is not a popup or interruption — just an extra row that sits in the normal page flow, styled consistently with the rest of the page (dark theme, theme accent colour for the button). Copy: a small line of text reading exactly 'This is an iTabs. Want one for your business?' followed by a button reading exactly 'Get yours free'. The button's href must be computed at runtime, not hardcoded: on page load, read the page's own hostname (window.location.hostname), take the first segment before the first dot as the venue slug, and set the button link to 'https://itabs.ai/build?via=' + that slug (URL-encoded). If the hostname has no dot (e.g. localhost during testing), fall back to a slug of 'demo'. This card must be present in every menu build, including Blank Starter builds.\\n\\nThe JS must include these functions: increment(name, price), decrement(name, price), updateCart(), openOrder(), confirmOrder(), resetOrder(), openPinModal(), checkPin(), closePinModal(), openEditor(), addNewItem(), changePin(), saveEditor(), closeEditor(), scrollToCategory(id), buildShareLink(). 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 and wants the FULL extraction. 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 styleOnlyAddon =\n \"\\n\\nThe user has attached a photo of a physical menu but ONLY wants you to use it for visual style — do NOT attempt to read or extract menu item names or prices from the photo. The user will type or paste their menu items separately in the chat, either in this message or a follow-up message.\\n\\nFrom the photo, identify only:\\n- A dominant/accent colour suited to the brand\\n- Overall vibe/style in a few words (e.g. 'warm rustic', 'modern minimal', 'bold and playful')\\n\\nIf the user's text message in this same turn already includes menu items and categories, go ahead and build the complete interactive iTabs menu using those items, applying the colour and vibe detected from the photo as the theme. Use pill-style category navigation and all other requirements from the main instructions above.\\n\\nIf the user's text message does NOT yet include menu items, do not build yet. Instead reply with exactly: 'Got the style and colours from the photo. Now just paste or type your menu items (with prices) and I will build it.' Then wait for their reply.\\n\\nYou still need the venue name before building, following the same rule as a normal build — ask for it if it has not been given.\";\n\n // CACHING: baseSystem is the same on nearly every call — mark it as an\n // ephemeral cache block so repeat requests are billed at ~10% input price\n // for this block and don't count against ITPM rate limits.\n const systemBlocks: any[] = [\n { type: \"text\", text: baseSystem, cache_control: { type: \"ephemeral\" } },\n ];\n if (image) {\n systemBlocks.push({\n type: \"text\",\n text: imageMode === \"style\" ? styleOnlyAddon : photoAddon,\n });\n }\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 (imageMode === \"style\"\n ? \"Use this photo for colour and style only. I will provide the menu items separately in chat.\"\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: systemBlocks,\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\nfunction slugifyValName(raw: string): string {\n let s = String(raw || \"\").toLowerCase().replace(/[^a-z0-9]+/g, \"-\");\n s = s.replace(/^-+/, \"\").replace(/-+$/, \"\");\n if (s.length > 63) s = s.slice(0, 63).replace(/-+$/, \"\");\n if (s.length < 3) s = \"itabs-\" + s;\n return s || \"itabs-menu\";\n}\n\nasync function createValWithUniqueName(\n valtownKey: string,\n baseName: string,\n): Promise<{ createData: any; name: string } | null> {\n let attemptName = baseName;\n for (let i = 0; i < 5; i++) {\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: attemptName, privacy: \"public\" }),\n });\n const createData = await createRes.json();\n if (createData.id) return { createData: createData, name: attemptName };\n // Name likely taken — retry with a short random suffix\n attemptName = baseName + \"-\" + Math.floor(Math.random() * 900 + 100);\n }\n return null;\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 baseName = valName\n ? slugifyValName(valName)\n : \"itabs-menu-\" + Date.now();\n const created = await createValWithUniqueName(valtownKey, baseName);\n if (!created) {\n return new Response(\n JSON.stringify({\n error:\n \"Failed to create val — name may be taken, try a different one\",\n }),\n {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n },\n );\n }\n const createData = created.createData;\n const name = created.name;\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}","deleted","label",[121],"pulls","branches","envVars",{"_143":24,"_145":22},"connections",{"_143":22,"_144":22},"count","unfilledCount","emptyCount",{"_27":120,"_13":121,"_122":123,"_124":-5,"_125":87,"_126":85,"_127":48,"_49":147,"_84":129,"_130":131,"_132":133,"_134":20,"_135":14,"_148":149,"_97":150},["D",1782743478027],"children",[],[121],["D",1781621529171],{"_11":12,"_59":55},{"_11":12,"_52":53,"_54":55,"_36":37,"_56":57,"_58":20},{"_84":85,"_13":86,"_27":87,"_88":60,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":14,"_95":12},"ctx",{"_41":-5,"_116":188,"_189":190,"_191":192,"_193":20,"_194":20,"_195":20,"_196":48,"_197":-5,"_198":-7,"_199":-7,"_200":22,"_201":20,"_202":20,"_203":-5,"_204":20,"_205":20,"_206":20,"_207":-5},"ENV",{"_159":160,"_161":162,"_163":86,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187},"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"]

Remixes1

Remixes
1