[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_105":106,"_107":108},"routes/embed.x.$handle.$name.$",{"_9":10,"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":-5},"handle","amotivv","name","commerce-agent-demo","path","frontend.ts","project",{"_22":45,"_11":12,"_33":46,"_47":-5,"_48":42,"_49":50,"_51":50,"_52":53,"_54":-5,"_55":56,"_57":58,"_59":32,"_60":-5,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":69,"_70":71,"_72":-5,"_73":74,"_75":74,"_76":77,"_78":77,"_79":77,"_80":74,"_81":74,"_82":83,"_84":85,"_86":87,"_88":42},"file",{"_22":23,"_11":14,"_24":25,"_26":-5,"_27":28,"_29":30,"_31":32,"_33":34,"_35":36,"_37":38,"_39":40,"_41":42,"_43":-5,"_13":44},"permalink","https://www.val.town/x/amotivv/commerce-agent-demo/code/frontend.ts","extension","id","81a66c2f-c1cf-483a-8d5b-1301107656e1","fileId","4548112e-a7d4-11f1-9f87-1607ee4eb77e","parentId","branchId","91477ced-c741-45c7-a880-925e822a0d85","branchVersion",15,"latest",true,"createdAt",["D",1788467253259],"version",2,"fileType","script","content","// frontend.ts\n// Vanilla client for the chat demo — no framework needed for a single chat\n// page. Talks to /api/chat, /api/reset, /api/forget. Renders the assistant's\n// text plus any \"events\" (present_products / view_cart / checkout) as cards,\n// in the order the agent produced them during the turn.\n\ninterface ProductCard {\n id: string;\n name: string;\n category: string;\n price: number;\n stock: number;\n attributes: Record;\n}\n\ninterface CartItem {\n product_id: string;\n name: string;\n category: string;\n price: number;\n quantity: number;\n line_total: number;\n}\n\ntype UiEvent =\n | { type: \"products\"; layout: \"carousel\" | \"list\"; message?: string; products: ProductCard[] }\n | { type: \"cart\"; items: CartItem[]; subtotal: number }\n | { type: \"checkout\"; items: CartItem[]; subtotal: number; note: string };\n\nconst SESSION_KEY = \"commerce-demo-session-id\";\n\n// Category → { icon, gradient } for the card art. Purely cosmetic — the\n// catalog has no real photography, so each category gets a distinct\n// gradient swatch and emoji instead of a broken .\nconst CATEGORY_STYLE: Record = {\n tent: { icon: \"⛺\", gradient: \"linear-gradient(135deg, #2f6fed, #1a3f8f)\" },\n backpack: { icon: \"🎒\", gradient: \"linear-gradient(135deg, #e8792a, #b6501a)\" },\n \"sleeping-bag\": { icon: \"🛏️\", gradient: \"linear-gradient(135deg, #7c53d6, #4a2a99)\" },\n footwear: { icon: \"🥾\", gradient: \"linear-gradient(135deg, #4a5568, #1f2733)\" },\n jacket: { icon: \"🧥\", gradient: \"linear-gradient(135deg, #0bb8a2, #067a6c)\" },\n cook: { icon: \"🔥\", gradient: \"linear-gradient(135deg, #e2483d, #a02318)\" },\n light: { icon: \"🔦\", gradient: \"linear-gradient(135deg, #f2b705, #c98a02)\" },\n water: { icon: \"💧\", gradient: \"linear-gradient(135deg, #1a9dff, #0b5fb0)\" },\n};\n\nfunction categoryStyle(cat: string) {\n return CATEGORY_STYLE[cat] ?? { icon: \"🏔️\", gradient: \"linear-gradient(135deg, #1a7fff, #005ebe)\" };\n}\n\nfunction getSessionId(): string {\n let id = localStorage.getItem(SESSION_KEY);\n if (!id) {\n id = crypto.randomUUID();\n localStorage.setItem(SESSION_KEY, id);\n }\n return id;\n}\n\nconst messagesEl = document.getElementById(\"messages\")!;\nconst inputEl = document.getElementById(\"input\") as HTMLInputElement;\nconst sendBtn = document.getElementById(\"send-btn\") as HTMLButtonElement;\nconst resetBtn = document.getElementById(\"reset-btn\") as HTMLButtonElement;\nconst forgetBtn = document.getElementById(\"forget-btn\") as HTMLButtonElement;\nconst debugEl = document.getElementById(\"debug\")!;\nconst suggestionsEl = document.getElementById(\"suggestions\")!;\n\nconst sessionId = getSessionId();\n\nfunction el(tag: string, className?: string): HTMLElement {\n const e = document.createElement(tag);\n if (className) e.className = className;\n return e;\n}\n\nfunction addBubble(role: \"user\" | \"assistant\" | \"system\", text: string): HTMLElement {\n const b = el(\"div\", `bubble ${role}`);\n b.textContent = text;\n messagesEl.appendChild(b);\n scrollToBottom();\n return b;\n}\n\nfunction addTyping(): HTMLElement {\n const b = el(\"div\", \"bubble assistant\");\n const dots = el(\"span\", \"typing-dots\");\n dots.innerHTML = \"\";\n b.appendChild(dots);\n messagesEl.appendChild(b);\n scrollToBottom();\n return b;\n}\n\nfunction fmtAttrKey(k: string): string {\n return k.replace(/_/g, \" \");\n}\n\nfunction fmtAttrValue(k: string, v: unknown): string {\n if (typeof v === \"boolean\") return v ? \"yes\" : \"no\";\n if (k.includes(\"weight_oz\")) return `${v} oz`;\n if (k.includes(\"waterproof_rating_mm\")) return `${v}mm`;\n if (k === \"capacity_people\") return `${v}p`;\n if (k === \"volume_l\") return `${v}L`;\n if (k === \"rating_f\") return `${v}°F`;\n return String(v);\n}\n\nfunction productCardEl(p: ProductCard): HTMLElement {\n const style = categoryStyle(p.category);\n const card = el(\"div\", \"card\") as HTMLDivElement;\n card.style.setProperty(\"--art-gradient\", style.gradient);\n\n const art = el(\"div\", \"card-art\");\n art.textContent = style.icon;\n const catChip = el(\"span\", \"cat-chip\");\n catChip.textContent = p.category.replace(/-/g, \" \");\n art.appendChild(catChip);\n\n const body = el(\"div\", \"card-body\");\n const h = el(\"h4\");\n h.textContent = p.name;\n\n const priceRow = el(\"div\", \"card-price-row\");\n const price = el(\"span\", \"price\");\n price.textContent = `$${p.price.toFixed(2)}`;\n const stock = el(\"span\", `stock-dot${p.stock > 0 ? \"\" : \" out\"}`);\n stock.textContent = p.stock > 0 ? `${p.stock} in stock` : \"out of stock\";\n priceRow.append(price, stock);\n\n const chipRow = el(\"div\", \"chip-row\");\n const attrs = Object.entries(p.attributes || {}).slice(0, 4);\n for (const [k, v] of attrs) {\n const chip = el(\"span\", \"chip\");\n chip.textContent = `${fmtAttrKey(k)}: ${fmtAttrValue(k, v)}`;\n chipRow.appendChild(chip);\n }\n\n const addBtn = el(\"button\", \"card-add\") as HTMLButtonElement;\n addBtn.textContent = p.stock > 0 ? \"+ Add to cart\" : \"Out of stock\";\n addBtn.disabled = p.stock <= 0;\n addBtn.addEventListener(\"click\", () => {\n addBtn.disabled = true;\n addBtn.textContent = \"Adding…\";\n sendMessage(`Add the ${p.name} to my cart`);\n });\n\n body.append(h, priceRow, chipRow, addBtn);\n card.append(art, body);\n return card;\n}\n\nfunction renderEvent(evt: UiEvent) {\n const wrap = el(\"div\", \"bubble event\");\n const head = el(\"div\", \"event-head\");\n\n if (evt.type === \"products\") {\n const chip = el(\"span\", \"tool-chip\");\n chip.textContent = \"present_products\";\n head.appendChild(chip);\n if (evt.message) {\n const cap = el(\"span\", \"caption\");\n cap.textContent = evt.message;\n head.appendChild(cap);\n }\n wrap.appendChild(head);\n const grid = el(\"div\", evt.layout === \"list\" ? \"list-layout\" : \"carousel\");\n for (const p of evt.products) grid.appendChild(productCardEl(p));\n wrap.appendChild(grid);\n } else if (evt.type === \"cart\") {\n const chip = el(\"span\", \"tool-chip\");\n chip.textContent = \"view_cart\";\n head.appendChild(chip);\n wrap.appendChild(head);\n wrap.appendChild(cartCard(evt.items, evt.subtotal));\n } else if (evt.type === \"checkout\") {\n const chip = el(\"span\", \"tool-chip\");\n chip.textContent = \"checkout\";\n head.appendChild(chip);\n wrap.appendChild(head);\n wrap.appendChild(cartCard(evt.items, evt.subtotal));\n const note = el(\"div\", \"checkout-note\");\n const tick = el(\"span\", \"tick\");\n tick.textContent = \"✓\";\n const text = document.createElement(\"span\");\n text.textContent = evt.note;\n note.append(tick, text);\n wrap.appendChild(note);\n }\n\n messagesEl.appendChild(wrap);\n scrollToBottom();\n}\n\nfunction cartCard(items: CartItem[], subtotal: number): HTMLElement {\n const wrap = el(\"div\", \"cart-card\");\n if (items.length === 0) {\n const empty = el(\"div\", \"empty-cart\");\n empty.textContent = \"Cart is empty.\";\n wrap.appendChild(empty);\n return wrap;\n }\n const table = document.createElement(\"table\");\n const thead = document.createElement(\"thead\");\n thead.innerHTML = \"ItemQtyPriceLine total\";\n table.appendChild(thead);\n const tbody = document.createElement(\"tbody\");\n for (const i of items) {\n const style = categoryStyle(i.category);\n const tr = document.createElement(\"tr\");\n const itemTd = document.createElement(\"td\");\n const lineItem = el(\"div\", \"line-item\");\n const icon = el(\"div\", \"line-icon\") as HTMLDivElement;\n icon.style.setProperty(\"--art-gradient\", style.gradient);\n icon.textContent = style.icon;\n const label = document.createElement(\"span\");\n label.textContent = i.name;\n lineItem.append(icon, label);\n itemTd.appendChild(lineItem);\n tr.appendChild(itemTd);\n tr.innerHTML += `${i.quantity}$${i.price.toFixed(2)}$${i.line_total.toFixed(2)}`;\n tbody.appendChild(tr);\n }\n table.appendChild(tbody);\n const tfoot = document.createElement(\"tfoot\");\n tfoot.innerHTML = `Subtotal$${subtotal.toFixed(2)}`;\n table.appendChild(tfoot);\n wrap.appendChild(table);\n return wrap;\n}\n\nfunction scrollToBottom() {\n messagesEl.scrollTop = messagesEl.scrollHeight;\n}\n\nfunction setBusy(busy: boolean) {\n inputEl.disabled = busy;\n sendBtn.disabled = busy;\n sendBtn.textContent = busy ? \"…\" : \"Send\";\n}\n\nasync function sendMessage(text: string) {\n if (!text.trim()) return;\n suggestionsEl.style.display = \"none\";\n addBubble(\"user\", text);\n setBusy(true);\n const typingEl = addTyping();\n try {\n const res = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ session_id: sessionId, message: text }),\n });\n typingEl.remove();\n if (!res.ok) {\n const errText = await res.text().catch(() => res.statusText);\n addBubble(\"system\", `Error: ${errText}`);\n return;\n }\n const data = await res.json();\n for (const evt of data.events ?? []) renderEvent(evt);\n if (data.reply) addBubble(\"assistant\", data.reply);\n if (data.usage) {\n debugEl.textContent = `model calls: ${data.usage.model_calls} · input: ${data.usage.input_tokens} · output: ${data.usage.output_tokens} · cache read: ${data.usage.cache_read_input_tokens} · cache write: ${data.usage.cache_creation_input_tokens}`;\n }\n } catch (err) {\n typingEl.remove();\n addBubble(\"system\", `Request failed: ${(err as Error).message}`);\n } finally {\n setBusy(false);\n inputEl.focus();\n }\n}\n\nsendBtn.addEventListener(\"click\", () => {\n const text = inputEl.value;\n inputEl.value = \"\";\n sendMessage(text);\n});\n\ninputEl.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\") {\n const text = inputEl.value;\n inputEl.value = \"\";\n sendMessage(text);\n }\n});\n\nsuggestionsEl.addEventListener(\"click\", (e) => {\n const target = e.target as HTMLElement;\n const q = target.getAttribute(\"data-q\");\n if (q) sendMessage(q);\n});\n\nresetBtn.addEventListener(\"click\", async () => {\n await fetch(\"/api/reset\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ session_id: sessionId }),\n });\n messagesEl.innerHTML = \"\";\n suggestionsEl.style.display = \"flex\";\n debugEl.textContent = \"\";\n addBubble(\"system\", \"Started a new chat. Cart and conversation history were cleared; remembered preferences were kept.\");\n});\n\nforgetBtn.addEventListener(\"click\", async () => {\n await fetch(\"/api/forget\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ session_id: sessionId }),\n });\n addBubble(\"system\", \"Forgot all remembered preferences for this session.\");\n});\n\naddBubble(\n \"system\",\n \"Try: “I need a 2-person tent under $250”, “outfit me for a weekend backpacking trip”, or “what's your return policy?”\"\n);\n","deleted",false,"label",[14],"6ede9d2d-f26e-485b-b372-68e2f242148e",["D",1788466284516],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Claude shopping-agent demo: skills, cart safety, memory","imageUrl","userId","37e6867c-c774-45b4-89db-f0c7df1ca90f","pinnedFileId","4ade477a-a7d4-11f1-9892-1607ee4eb77e","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","7c7dcd2d-23ec-4a0a-a38e-7bc06ae69422","tursoName","6ede9d2df26e485bb37268e2f242148e","tursoHostname","6ede9d2df26e485bb37268e2f242148e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789514495229],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_9":10,"_104":100},"org",{"_9":10,"_98":-5,"_99":100,"_55":56,"_101":102,"_103":42},"branch",{"_35":30,"_11":89,"_22":28,"_90":45,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":-5,"_96":12,"_97":10},"isOwned","main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yaUx0RVZQQ1BSd0o3NHY3QzBVN21OaW1rVlUifQ","tier","pro","canRestrictVals","profileImageUrl","ctx",{"_82":-5,"_138":139,"_140":141,"_142":143,"_144":42,"_145":42,"_146":42,"_147":32,"_148":-5,"_149":-7,"_150":-7,"_151":63,"_152":42,"_153":42,"_154":-5,"_155":42,"_156":42,"_157":42,"_158":-5},"ENV",{"_109":110,"_111":112,"_113":89,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":127,"_128":129,"_130":131,"_132":133,"_134":135,"_136":137},"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","orgs",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]