\\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\";\n\n let html = before\n .replace(\"{{TITLE}}\", escHtmlAttr(title))\n .replace(\"{{CAMPAIGN_NAME}}\", escHtmlAttr(title))\n .replace(\"{{TAGLINE}}\", escHtmlAttr(tagline))\n .replace(\"{{VIDEO_URL}}\", escHtmlAttr(videoUrl));\n\n html += cardsJs + \";\\n\" + after;\n return html;\n}\n\nfunction escJs(s: string): string {\n return s.replace(/\\\\/g, \"\\\\\\\\\").replace(/'/g, \"\\\\'\").replace(/\"/g, '\\\\\"')\n .replace(/\\n/g, \"\\\\n\").replace(/\\r/g, \"\");\n}\n\nfunction escHtmlAttr(s: string): string {\n return s.replace(/&/g, \"&\").replace(//g, \">\")\n .replace(/\"/g, \""\").replace(/'/g, \"'\");\n}\n\nasync function handleDemo(): Promise {\n try {\n const r = await fetch(\n \"https://jgwynne7_4bf3679b--b30b6c6067ec11f196801607ee4eb77e.web.val.run/\",\n );\n const html = await r.text();\n return new Response(html, {\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n } catch (e: any) {\n return new Response(\n JSON.stringify({ error: \"Demo fetch failed: \" + e.message }),\n {\n status: 500,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n },\n );\n }\n}\n\nasync function handleApiChat(req: Request): Promise {\n try {\n const { anthropicKey, message, history } = await req.json();\n if (!anthropicKey || !message) {\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\n const system =\n 'You are Missy, the iTabs campaign builder AI. You help people build powerful swipeable card decks for political movements, causes, and campaigns.\\n\\nYOUR JOB: Have a conversation to collect the campaign story, then return a JSON object. You NEVER write HTML. You ONLY return JSON when ready to build.\\n\\nCONVERSATION FLOW:\\n\\nSTEP 1 — RECEIVE CAMPAIGN DETAILS: Acknowledge warmly. Ask 3 smart questions:\\n1. What is the single most important thing people must understand?\\n2. What is the most explosive/shareable claim or moment?\\n3. What YouTube URL should video buttons link to? (optional)\\nAsk all 3 in one message.\\n\\nSTEP 2 — AFTER ANSWERS: Build the JSON immediately. No more questions.\\n\\nJSON FORMAT — return EXACTLY this structure wrapped in tags:\\n\\n\\n{\\n \"campaignName\": \"Saving LA\",\\n \"tagline\": \"Phase Three — It\\'s War\",\\n \"videoUrl\": \"https://youtu.be/XXXX\",\\n \"cards\": [\\n {\\n \"heroClass\": \"hero-fire\",\\n \"tag\": \"The Origin\",\\n \"tagClass\": \"tag-orange\",\\n \"headline\": \"The night LA burned\",\\n \"summary\": \"2-3 sentence summary.\",\\n \"quote\": { \"text\": \"Direct quote.\", \"attr\": \"Speaker Name\" },\\n \"iButtons\": [\\n { \"label\": \"Button label\", \"term\": \"Modal title\", \"type\": \"context\", \"content\": \"2-3 sentences of deeper info.\", \"videoTime\": 0 },\\n { \"label\": \"Watch this moment\", \"term\": \"Modal title\", \"type\": \"video\", \"content\": \"What they will see.\", \"videoTime\": 45 }\\n ]\\n }\\n ]\\n}\\n\\n\\nCARD RULES — always 6 content cards:\\n1. THE ORIGIN — how it started\\n2. THE CAMPAIGN — what was built\\n3. THE PROBLEM — corruption, facts\\n4. THE BOMBSHELL — most explosive claim\\n5. THE ALLIANCE — who else is fighting\\n6. JOIN THE MISSION — call to action\\n\\nHERO CLASSES: hero-fire, hero-red, hero-dark, hero-war, hero-alliance, hero-steel\\nTAG CLASSES: tag-orange, tag-red, tag-white, tag-blue\\n\\ni-BUTTON TYPES: context, video (with videoTime in seconds), studio\\nEvery card needs exactly 2 i-buttons. Last card must have one studio type button.\\nKeep summaries punchy — 2 sentences max. Quotes max 15 words. i-button content max 1 sentence. Be brutal with length — the whole JSON must fit in one response.';\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 claudeMessages.push({ role: \"user\", content: message });\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 stream: true,\n system: system,\n messages: claudeMessages,\n }),\n });\n\n if (!r.ok) {\n const errText = await r.text();\n return new Response(JSON.stringify({ error: errText }), {\n status: r.status,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n return new Response(r.body, {\n headers: {\n \"Content-Type\": \"text/event-stream\",\n \"Cache-Control\": \"no-cache\",\n \"Connection\": \"keep-alive\",\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 handleBuild(req: Request): Promise {\n try {\n const { jsonData } = await req.json();\n if (!jsonData) {\n return new Response(JSON.stringify({ error: \"Missing jsonData\" }), {\n status: 400,\n headers: {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n },\n });\n }\n const html = buildCampaignHtml(jsonData);\n return new Response(JSON.stringify({ html: html }), {\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 } = await req.json();\n const valtownKey = Deno.env.get(\"VALTOWN_KEY\") || \"\";\n if (!valtownKey || !deployHtml) {\n return new Response(\n JSON.stringify({ error: \"Missing deployHtml 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-campaign-\" + 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/build\" && req.method === \"POST\") {\n return handleBuild(req);\n }\n if (url.pathname === \"/api/deploy\" && req.method === \"POST\") {\n return handleDeploy(req);\n }\n if (url.pathname === \"/api/demo\") return await handleDemo();\n if (url.pathname === \"/api/registry\" && req.method === \"POST\") {\n return handleRegistryPost(req);\n }\n\n const htmlParts = [\n '',\n '',\n \"iTabs Studio 6 — Campaign Builder\",\n '',\n \"\",\n '

',\n ' ',\n '

',\n '

',\n \"

\",\n '

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

\",\n '

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

\",\n \"

Search