[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_94":93,"_32":44,"_103":84,"_27":52,"_13":14,"_104":-5,"_11":105,"_106":107,"_108":109,"_110":111,"_112":113,"_20":-5,"_114":-5,"_115":-5,"_116":25,"_117":118,"_119":120,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":25,"_48":49,"_50":49,"_51":52,"_53":-5,"_18":54,"_55":-5,"_56":25,"_57":-5,"_58":-5,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":-5,"_66":-5,"_67":68,"_69":68,"_70":71,"_72":71,"_73":71,"_74":68,"_75":68,"_76":77,"_78":79,"_80":81,"_82":25},"version",9,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","b30b6c60-67ec-11f1-9680-1607ee4eb77e","name","fileType","http","content","// iTabs Studio 6 v3 — Campaign & Movement Builder\n// JSON-driven template — Missy returns JSON, server fills template\n// Black screen impossible — no Missy-generated HTML ever deployed\n// VALTOWN_KEY must be set as env var\n\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nconst REGISTRY_KEY = \"itabs-campaign-registry\";\nconst jsonHeaders = {\n \"Content-Type\": \"application/json\",\n \"Access-Control-Allow-Origin\": \"*\",\n};\n\nasync function readRegistry(): Promise {\n try {\n const reg = await blob.getJSON(REGISTRY_KEY);\n return Array.isArray(reg) ? reg : [];\n } catch (_e) {\n return [];\n }\n}\n\nasync function handleRegistryPost(req: Request): Promise {\n try {\n const entry = await req.json();\n if (!entry || !entry.valUrl) {\n return new Response(JSON.stringify({ error: \"Missing valUrl\" }), {\n status: 400,\n headers: jsonHeaders,\n });\n }\n const nowIso = new Date().toISOString();\n let id = (entry.id || entry.campaignName || \"\").toString().toLowerCase()\n .replace(/[^a-z0-9]+/g, \"-\").replace(/^-+|-+$/g, \"\");\n if (!id) id = \"campaign-\" + Date.now();\n const registry = await readRegistry();\n const idx = registry.findIndex((m: any) => m.id === id);\n const merged = {\n id,\n campaignName: entry.campaignName || \"Untitled\",\n location: entry.location || \"\",\n valUrl: entry.valUrl,\n deployedAt: idx >= 0 ? registry[idx].deployedAt : nowIso,\n lastUpdated: nowIso,\n };\n if (idx >= 0) registry[idx] = merged;\n else registry.unshift(merged);\n await blob.setJSON(REGISTRY_KEY, registry);\n return new Response(JSON.stringify({ ok: true, campaign: merged }), {\n headers: jsonHeaders,\n });\n } catch (e: any) {\n return new Response(JSON.stringify({ error: e.message }), {\n status: 500,\n headers: jsonHeaders,\n });\n }\n}\n\nfunction buildCampaignHtml(data: any): string {\n const title = data.campaignName || \"Saving LA\";\n const tagline = data.tagline || \"Phase Three\";\n const videoUrl = data.videoUrl || \"https://youtu.be/-cXHWfypBYo\";\n const cards = data.cards || [];\n\n // Build cards JS array as a string - no backticks, pure concatenation\n let cardsJs = \"var cards = [\\n { type: 'cover' }\";\n for (let i = 0; i < cards.length; i++) {\n const c = cards[i];\n cardsJs += \",\\n {\";\n cardsJs += \"\\n heroClass: '\" + (c.heroClass || \"hero-red\") + \"',\";\n cardsJs += \"\\n tag: '\" + escJs(c.tag || \"\") + \"',\";\n cardsJs += \"\\n tagClass: '\" + (c.tagClass || \"tag-red\") + \"',\";\n cardsJs += \"\\n headline: '\" + escJs(c.headline || \"\") + \"',\";\n cardsJs += \"\\n summary: '\" + escJs(c.summary || \"\") + \"',\";\n if (c.quote) {\n cardsJs += \"\\n quote: { text: '\" + escJs(c.quote.text || \"\") +\n \"', attr: '\" + escJs(c.quote.attr || \"\") + \"' },\";\n }\n if (c.iButtons && c.iButtons.length) {\n cardsJs += \"\\n iButtons: [\";\n for (let j = 0; j < c.iButtons.length; j++) {\n const b = c.iButtons[j];\n cardsJs += \"\\n { label: '\" + escJs(b.label || \"\") + \"', term: '\" +\n escJs(b.term || \"\") + \"', type: '\" + (b.type || \"context\") +\n \"', content: '\" + escJs(b.content || \"\") + \"', videoTime: \" +\n (b.videoTime || 0) + \" }\";\n if (j < c.iButtons.length - 1) cardsJs += \",\";\n }\n cardsJs += \"\\n ]\";\n }\n cardsJs += \"\\n }\";\n }\n cardsJs += \"\\n]\";\n\n const before =\n '\\n\\n\\n\\n\\n{{TITLE}}\\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\\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-3 sentences. Use real quotes where possible.';\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: 8000,\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 \"

Diff · v9