${esc(title)}

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_208":209,"_210":211},"routes/_app.x.$handle.$name",{"_98":97,"_32":45,"_107":88,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":125,"_126":-5,"_127":-5,"_128":129},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":69,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":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":37,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","42479296-5e92-11f1-b371-1607ee4eb77e","name","fileType","http","content","/**\n * CRM UI demo — HTML rendered straight from a val's own data.\n * / leads index (SQLite)\n * /c/:id contact card (SQLite)\n * /c/:id/timeline touchpoint timeline (SQLite)\n * /c/:id/email AI-drafted email (generated from data)\n * /c/:id/enrich enrichment panel (Blob)\n * /signups signup chart (SQLite)\n * Try id = c1 (Maya Krishnan) for the richest example.\n */\nimport { Hono } from \"npm:hono@4\";\nimport * as db from \"./data.ts\";\nimport * as ui from \"./ui.ts\";\nimport { appView } from \"./app.ts\";\n\nconst app = new Hono();\n\napp.use(\"*\", async (c, next) => {\n await db.seedIfEmpty();\n await next();\n});\n\napp.get(\"/\", async (c) =>\n c.html(ui.shell(\"CRM demo\", ui.indexView(await db.listContacts()), { tag: \"SQLite · contacts\" })));\n\napp.get(\"/c/:id\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n return c.html(ui.shell(ct.name, ui.contactCard(ct), { tag: \"SQLite · contacts\" }));\n});\n\napp.get(\"/c/:id/timeline\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n const tps = await db.getTouchpoints(ct.id);\n return c.html(ui.shell(`${ct.name} — timeline`, ui.timelineView(ct, tps), { tag: \"SQLite · touchpoints\" }));\n});\n\napp.get(\"/c/:id/email\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n const [tps, enr] = await Promise.all([db.getTouchpoints(ct.id), db.getEnrichment(ct.id)]);\n const draft = db.buildDraft(ct, tps, enr);\n return c.html(ui.shell(`${ct.name} — email`, ui.emailView(ct, draft), { tag: \"generated text\" }));\n});\n\napp.get(\"/c/:id/enrich\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n const enr = await db.getEnrichment(ct.id);\n return c.html(ui.shell(`${ct.name} — enrichment`, ui.enrichView(ct, enr), { tag: \"Blob · crm_enrich_*\" }));\n});\n\napp.get(\"/signups\", async (c) =>\n c.html(ui.shell(\"Signups\", ui.signupView(await db.getSignups()), { tag: \"SQLite · signups\" })));\n\napp.get(\"/probe\", (c) =>\n c.html(`\n\n

JS did not run

viewport size (CSS px)

All four green corners visible = nothing is clipped

\n◤ TLTR ◥\n◣ BLBR ◢\n

\n`));\n\napp.get(\"/source\", (c) => c.redirect(\"https://www.val.town/x/dcm31/crm-mcp-demo\"));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","/**\n * CRM UI demo — HTML rendered straight from a val's own data.\n * / leads index (SQLite)\n * /c/:id contact card (SQLite)\n * /c/:id/timeline touchpoint timeline (SQLite)\n * /c/:id/email AI-drafted email (generated from data)\n * /c/:id/enrich enrichment panel (Blob)\n * /signups signup chart (SQLite)\n * Try id = c1 (Maya Krishnan) for the richest example.\n */\nimport { Hono } from \"npm:hono@4\";\nimport * as db from \"./data.ts\";\nimport * as ui from \"./ui.ts\";\nimport { appView } from \"./app.ts\";\n\nconst app = new Hono();\n\napp.use(\"*\", async (c, next) => {\n await db.seedIfEmpty();\n await next();\n});\n\napp.get(\"/\", async (c) =>\n c.html(ui.shell(\"CRM demo\", ui.indexView(await db.listContacts()), { tag: \"SQLite · contacts\" })));\n\napp.get(\"/c/:id\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n return c.html(ui.shell(ct.name, ui.contactCard(ct), { tag: \"SQLite · contacts\" }));\n});\n\napp.get(\"/c/:id/timeline\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n const tps = await db.getTouchpoints(ct.id);\n return c.html(ui.shell(`${ct.name} — timeline`, ui.timelineView(ct, tps), { tag: \"SQLite · touchpoints\" }));\n});\n\napp.get(\"/c/:id/email\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n const [tps, enr] = await Promise.all([db.getTouchpoints(ct.id), db.getEnrichment(ct.id)]);\n const draft = db.buildDraft(ct, tps, enr);\n return c.html(ui.shell(`${ct.name} — email`, ui.emailView(ct, draft), { tag: \"generated text\" }));\n});\n\napp.get(\"/c/:id/enrich\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n const enr = await db.getEnrichment(ct.id);\n return c.html(ui.shell(`${ct.name} — enrichment`, ui.enrichView(ct, enr), { tag: \"Blob · crm_enrich_*\" }));\n});\n\napp.get(\"/signups\", async (c) =>\n c.html(ui.shell(\"Signups\", ui.signupView(await db.getSignups()), { tag: \"SQLite · signups\" })));\n\napp.get(\"/app\", (c) => c.redirect(\"/app/c1\"));\napp.get(\"/app/:id\", async (c) => {\n const ct = await db.getContact(c.req.param(\"id\"));\n if (!ct) return c.notFound();\n const [tps, enr, signups] = await Promise.all([\n db.getTouchpoints(ct.id), db.getEnrichment(ct.id), db.getSignups(),\n ]);\n const draft = db.buildDraft(ct, tps, enr);\n return c.html(appView({ c: ct, tps, enr, draft, signups }));\n});\n\napp.get(\"/probe\", (c) =>\n c.html(`\n\n

JS did not run

viewport size (CSS px)

All four green corners visible = nothing is clipped

\n◤ TLTR ◥\n◣ BLBR ◢\n

\n`));\n\napp.get(\"/source\", (c) => c.redirect(\"https://www.val.town/x/dcm31/crm-mcp-demo\"));\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","createdAt",["D",1780412681498],"branchVersion","branchId","41e0f1ee-5e92-11f1-b371-1607ee4eb77e","id","41dbcc78-5e92-11f1-b371-1607ee4eb77e","crm-mcp-demo",["D",1780411768835],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","CRM UI demo: HTML rendered from val SQLite + blob data","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","41dbcc785e9211f1b3711607ee4eb77e","tursoHostname","41dbcc785e9211f1b3711607ee4eb77e-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789492855745],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":55,"_103":104,"_105":25},"branch",{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"isOwned",14,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789559999&sig=78019e07e4ced3d68c9df61b037dd9640810f47ba2d971eaac41b98f18b7827c","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_43":44,"_32":45,"_38":203,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":-5,"_57":25,"_58":-5,"_59":-5,"_60":61,"_62":63,"_64":65,"_66":67,"_68":204,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":205,"_82":206,"_84":207,"_86":25},"tree",[182,183,184,185,186],"files",[182,183,184,185,186],"counts",{"_171":61,"_172":173,"_174":61,"_175":176,"_177":178},"contents",[130,131,132,133,134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_43":164,"_32":165,"_30":166,"_138":-5,"_41":42,"_40":167,"_140":125,"_38":168,"_13":61,"_33":20,"_35":169,"_24":25,"_144":-5,"_27":170},{"_43":157,"_32":158,"_30":159,"_138":-5,"_41":42,"_40":160,"_140":25,"_38":161,"_13":61,"_33":142,"_35":162,"_24":25,"_144":-5,"_27":163},{"_43":150,"_32":151,"_30":152,"_138":-5,"_41":42,"_40":153,"_140":25,"_38":154,"_13":61,"_33":142,"_35":155,"_24":25,"_144":-5,"_27":156},{"_43":146,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_140":25,"_38":147,"_13":148,"_33":34,"_35":37,"_24":25,"_144":-5,"_27":149},{"_43":135,"_32":136,"_30":137,"_138":-5,"_41":42,"_40":139,"_140":25,"_38":141,"_13":61,"_33":142,"_35":143,"_24":25,"_144":-5,"_27":145},"cf5cf4c8-5e92-11f1-93f3-1607ee4eb77e","ui.ts","cf5cf586-5e92-11f1-93f3-1607ee4eb77e","parentId",3,"latest",["D",1780412006226],"script","/** Rendering layer: self-contained HTML (inline CSS + SVG, base64 images, no scripts). */\nimport type { Contact, Touchpoint, Signup } from \"./data.ts\";\n\nconst SOURCE_URL = \"https://www.val.town/x/dcm31/crm-mcp-demo\";\n\nconst esc = (s: unknown) =>\n String(s ?? \"\").replace(/[&<>\"]/g, (c) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\" }[c]!));\n\nconst CSS = `\n:root{\n --bg:#0a0e1a;--bg2:#0e1322;--surface:#141a2e;--surface2:#1b2238;\n --border:#252e48;--border2:#313c5e;--text:#eef2fb;--muted:#9aa6c4;--faint:#6b7799;\n --accent:#818cf8;--accent-d:#6366f1;--accent2:#34d399;--amber:#fbbf24;--red:#f87171;\n}\n*{box-sizing:border-box}\nbody{margin:0;padding:20px;color:var(--text);\n background:radial-gradient(900px 500px at 25% -10%,#16203a 0%,var(--bg) 55%);\n font:15px/1.55 -apple-system,BlinkMacSystemFont,\"Segoe UI\",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}\na{color:inherit;text-decoration:none}\n.wrap{max-width:560px;margin:0 auto}\n.card{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--border);\n border-radius:18px;padding:22px;box-shadow:0 18px 50px -20px rgba(0,0,0,.7)}\n.hd{display:flex;gap:16px;align-items:center}\n.hd .nm{font-size:20px;font-weight:700;letter-spacing:-.01em}\n.hd .sub{color:var(--muted);font-size:13.5px;margin-top:2px}\n.spacer{flex:1}\n.eyebrow{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);font-weight:600}\n.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:18px}\n.cell{background:var(--bg2);padding:11px 13px}\n.cell .k{font-size:11px;color:var(--faint);letter-spacing:.04em}\n.cell .v{font-size:14px;margin-top:2px;word-break:break-word}\n.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px}\n.chip{background:var(--surface2);border:1px solid var(--border2);color:var(--muted);\n padding:4px 10px;border-radius:8px;font-size:12.5px}\n.btns{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}\n.btn{flex:1;min-width:120px;text-align:center;background:var(--surface2);border:1px solid var(--border2);\n color:var(--text);padding:10px 12px;border-radius:11px;font-size:13.5px;font-weight:600;cursor:pointer}\n.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-d));border-color:transparent;color:#0b0f1c}\n.btn:hover{border-color:var(--accent)}\n.foot{display:flex;align-items:center;justify-content:space-between;margin-top:16px;color:var(--faint);font-size:11.5px}\n.foot .tag{background:#0e1322;border:1px solid var(--border);border-radius:7px;padding:3px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}\n.sec{margin-top:18px}.sec h4{margin:0 0 10px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}\n.divider{height:1px;background:var(--border);margin:16px -22px}\n/* timeline */\n.tl{position:relative;margin-top:18px}\n.tl .item{position:relative;display:flex;gap:14px;padding-bottom:18px}\n.tl .item:last-child{padding-bottom:0}\n.rail{display:flex;flex-direction:column;align-items:center}\n.badge{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;\n background:var(--surface2);border:1px solid var(--border2);font-size:15px;flex:none}\n.line{flex:1;width:2px;background:var(--border);margin-top:4px}\n.tl .body{padding-top:4px;flex:1}\n.tl .time{font-size:11.5px;color:var(--faint)}\n.tl .ttl{font-weight:600;margin:1px 0 3px;font-size:14.5px}\n.tl .det{color:var(--muted);font-size:13px}\n.dir{font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:6px;margin-left:6px;vertical-align:1px}\n.dir.in{background:#10331f;color:var(--accent2)}.dir.out{background:#1e2350;color:var(--accent)}\n/* email */\n.mail .bar{display:flex;align-items:center;gap:7px;margin:-22px -22px 0;padding:13px 18px;border-bottom:1px solid var(--border);\n background:#0e1322;border-radius:18px 18px 0 0}\n.dot{width:11px;height:11px;border-radius:50%}\n.mrow{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--border);font-size:14px}\n.mrow .lab{color:var(--faint);width:62px;flex:none}\n.subj{font-weight:700;font-size:16px}\n.mbody{white-space:pre-wrap;font-size:14px;line-height:1.6;color:#d8dffb;padding:14px 0 4px}\n.aibadge{background:#1a1f3d;border:1px solid var(--accent-d);color:var(--accent);font-size:11px;font-weight:600;padding:3px 9px;border-radius:999px}\n/* enrichment */\n.kv{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:13.5px;border-bottom:1px dashed var(--border)}\n.kv .k{color:var(--faint)}.kv:last-child{border-bottom:0}\n.sig{display:flex;align-items:center;gap:10px;padding:8px 0}\n.wd{width:9px;height:9px;border-radius:50%;flex:none}\n.wd.high{background:var(--accent2)}.wd.medium{background:var(--amber)}.wd.low{background:var(--faint)}\n.meter{height:7px;background:var(--surface2);border-radius:999px;overflow:hidden;margin-top:7px}\n.meter>div{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}\n/* stats */\n.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:16px 0 12px}\n.stat{background:var(--bg2);border:1px solid var(--border);border-radius:12px;padding:10px 12px}\n.stat .n{font-size:19px;font-weight:700;letter-spacing:-.02em}\n.stat .l{font-size:11px;color:var(--faint);margin-top:1px}\n.up{color:var(--accent2)}.down{color:var(--red)}\n.legend{display:flex;gap:16px;font-size:12px;color:var(--muted);margin-top:8px}\n.swatch{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:-1px}\n/* index */\n.lead{display:flex;align-items:center;gap:13px;padding:12px;border:1px solid var(--border);border-radius:13px;margin-top:9px;background:var(--bg2)}\n.lead:hover{border-color:var(--accent)}\n.lead .nm{font-weight:600}.lead .co{color:var(--muted);font-size:13px}\n.scorepill{font-weight:700;font-size:13px;padding:3px 9px;border-radius:8px;background:var(--surface2);border:1px solid var(--border2)}\n`;\n\nexport function shell(title: string, body: string, opts: { tag?: string } = {}) {\n return `\n\n${esc(title)}\n

${body}\n

${esc(opts.tag ?? \"demo\")}view source ↗

`;\n}\n\nconst PALETTE = [\"#6366f1\", \"#0ea5e9\", \"#10b981\", \"#f59e0b\", \"#ec4899\", \"#8b5cf6\"];\nfunction monogram(name: string, size: number) {\n const p = String(name).trim().split(/\\s+/);\n const ini = ((p[0]?.[0] || \"\") + (p[1]?.[0] || \"\")).toUpperCase();\n let h = 0; for (const ch of name) h = (h * 31 + ch.charCodeAt(0)) >>> 0;\n const col = PALETTE[h % PALETTE.length];\n const r = (size * 0.28).toFixed(0);\n return ``;\n}\nfunction avatar(c: Contact, size: number) {\n if (c.avatar_b64) return ` $\"\"$ `;\n return monogram(c.name, size);\n}\nfunction statusPill(s: string) {\n const m: Record = { Hot: [\"#3a1620\", \"#f87171\"], Warm: [\"#3a2c12\", \"#fbbf24\"], New: [\"#15233f\", \"#60a5fa\"] };\n const [bg, fg] = m[s] || [\"#1c2540\", \"#9aa6c4\"];\n return `${esc(s)}`;\n}\nfunction scoreRing(score: number, size = 60) {\n const r = (size - 9) / 2, cx = size / 2, cy = size / 2, circ = 2 * Math.PI * r;\n const off = circ * (1 - score / 100);\n const col = score >= 80 ? \"var(--accent2)\" : score >= 60 ? \"var(--amber)\" : \"var(--faint)\";\n return ``;\n}\n\nconst CH: Record = { email: \"✉️\", call: \"📞\", site: \"🌐\", webinar: \"🎥\", slack: \"💬\", meeting: \"🤝\", event: \"🎟️\" };\nfunction channelBadge(ch: string) {\n if (ch === \"linkedin\") return `in`;\n return `${CH[ch] || \"•\"}`;\n}\n\n// ---------- Views ----------\n\nexport function contactCard(c: Contact) {\n return `

\n ${avatar(c, 72)}\n

${esc(c.name)}

${esc(c.title)} · ${esc(c.company)}

${statusPill(c.status)}

${scoreRing(c.score)}\n

${esc(c.email)}

PHONE

${esc(c.phone)}

LOCATION

${esc(c.location)}

ADDED

${esc(c.created_at)}

📡 ${esc(c.source)}

\n Draft email\n Timeline\n Enrichment\n

`;\n}\n\nexport function timelineView(c: Contact, tps: Touchpoint[]) {\n const items = tps.map((t, i) => `

${channelBadge(t.channel)}${i < tps.length - 1 ? '

' : \"\"}

${esc(t.ts)}

${esc(t.title)}${t.direction === \"in\" ? \"Inbound\" : \"Outbound\"}

${esc(t.detail)}

`).join(\"\");\n return `

${avatar(c, 46)}\n

${esc(c.name)}

${tps.length} touchpoints · ${esc(c.company)}

${statusPill(c.status)}

Engagement timeline

${items}

`;\n}\n\nexport function emailView(c: Contact, draft: { to: string; subject: string; body: string; rationale: string }) {\n const body = esc(draft.body);\n return `

\n New message

✦ AI drafted

To${esc(c.name)} <${esc(draft.to)}>

Subject${esc(draft.subject)}

${body}

\n SendScheduleEdit\n

✦ ${esc(draft.rationale)}

`;\n}\n\nexport function enrichView(c: Contact, e: any) {\n if (!e) return `

No enrichment on file for ${esc(c.name)}.

`;\n const co = e.company, p = e.person;\n const techChips = (co.tech || []).map((t: string) => `${esc(t)}`).join(\"\");\n const skillChips = (p.skills || []).map((t: string) => `${esc(t)}`).join(\"\");\n const social = [\n p.linkedin && `in · ${esc(p.linkedin)}`,\n p.twitter && `𝕏 · ${esc(p.twitter)}`,\n p.github && `⌥ · ${esc(p.github)}`,\n ].filter(Boolean).join(\"\");\n const funding = co.funding?.round\n ? `

Funding${esc(co.funding.round)} · ${esc(co.funding.amount)} (${esc(co.funding.date)})

`\n : \"\";\n const investors = co.funding?.investors?.length\n ? `

Investors${esc(co.funding.investors.join(\", \"))}

` : \"\";\n const sigs = (e.signals || []).map((s: any) =>\n `

${esc(s.label)}${esc(s.weight)}

`).join(\"\");\n return `

${avatar(c, 46)}\n

${esc(c.name)}

${esc(p.seniority)} · ${esc(p.department)} · ${esc(p.tenure)}

conf ${Math.round((e.confidence || 0) * 100)}%

🏢 ${esc(co.name)}

Industry${esc(co.industry)}

Size · Revenue${esc(co.employees_band)} · ${esc(co.revenue)}

HQ · Founded${esc(co.hq)} · ${esc(co.founded)}

\n ${funding}${investors}\n

${techChips}

👤 Person

${social}

${skillChips}

⚡ Intent signals

${sigs}\n

Match confidence ${Math.round((e.confidence || 0) * 100)}%

`;\n}\n\nexport function chartSvg(rows: Signup[]) {\n const n = rows.length, W = 520, H = 188, padL = 8, padR = 8, padT = 12, padB = 20;\n const plotW = W - padL - padR, plotH = H - padT - padB;\n const max = Math.max(...rows.map((r) => r.signups), 10);\n const maxY = Math.ceil(max / 10) * 10;\n const X = (i: number) => padL + (n <= 1 ? 0 : i / (n - 1)) * plotW;\n const Y = (v: number) => padT + (1 - v / maxY) * plotH;\n const line = (k: \"signups\" | \"qualified\") => rows.map((r, i) => `${i ? \"L\" : \"M\"}${X(i).toFixed(1)} ${Y(r[k]).toFixed(1)}`).join(\" \");\n const area = `${line(\"signups\")} L${X(n - 1).toFixed(1)} ${(padT + plotH).toFixed(1)} L${X(0).toFixed(1)} ${(padT + plotH).toFixed(1)} Z`;\n const grid = [0, 0.5, 1].map((f) => {\n const y = padT + plotH * f, val = Math.round(maxY * (1 - f));\n return `${val}`;\n }).join(\"\");\n const xl = rows.map((r, i) => (i % 6 === 0 || i === n - 1)\n ? `${r.date.slice(5)}` : \"\").join(\"\");\n const li = n - 1;\n return ``;\n}\n\nexport function signupView(rows: Signup[]) {\n const sum = (k: \"signups\" | \"qualified\") => rows.reduce((a, r) => a + r[k], 0);\n const total = sum(\"signups\"), totalQ = sum(\"qualified\");\n const conv = total ? Math.round((totalQ / total) * 100) : 0;\n const last7 = rows.slice(-7).reduce((a, r) => a + r.signups, 0);\n const prev7 = rows.slice(-14, -7).reduce((a, r) => a + r.signups, 0);\n const wow = prev7 ? Math.round(((last7 - prev7) / prev7) * 100) : 0;\n return `

Signups

${esc(rows[0]?.date)} → ${esc(rows[rows.length - 1]?.date)} · last 30 days

${total}

New signups

${totalQ}

Qualified

${conv}%

Conversion

= 0 ? \"up\" : \"down\"}\">${wow >= 0 ? \"+\" : \"\"}${wow}%

WoW

\n${chartSvg(rows)}\n

SignupsQualified

`;\n}\n\nexport function indexView(contacts: Contact[]) {\n const leads = contacts.map((c) => `${avatar(c, 40)}\n

${esc(c.name)}

${esc(c.title)} · ${esc(c.company)}

\n ${statusPill(c.status)}${c.score}`).join(\"\");\n return `

CRM — rendered from a val

${contacts.length} leads from SQLite · enrichment from blob · open one to see the card, timeline, email draft & enrichment.

\n${leads}\n

📈 Signup chart

`;\n}\n","label",[136],"61dbaf32-5e94-11f1-83ef-1607ee4eb77e",["D",1780412681498],4,[28],"6d779b46-5e92-11f1-8503-1607ee4eb77e","data.ts","6d779c2c-5e92-11f1-8503-1607ee4eb77e",2,["D",1780411841989],"/**\n * Fake CRM data.\n * - SQLite (per-val): contacts, touchpoints, signups\n * - Blob: per-contact enrichment payloads + cached avatar base64\n * Self-seeds on first request (idempotent).\n */\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\nexport interface Contact {\n id: string; name: string; title: string; company: string;\n email: string; phone: string; location: string;\n avatar_url: string; avatar_b64: string;\n score: number; status: string; source: string; created_at: string;\n}\nexport interface Touchpoint {\n id: number; contact_id: string; ts: string; channel: string;\n direction: \"in\" | \"out\"; title: string; detail: string;\n}\nexport interface Signup { date: string; signups: number; qualified: number; }\n\nconst CONTACTS: Omit[] = [\n { id: \"c1\", name: \"Maya Krishnan\", title: \"VP Engineering\", company: \"Northwind Logistics\",\n email: \"maya.k@northwind.io\", phone: \"+1 (415) 555-0142\", location: \"San Francisco, CA\",\n avatar_url: \"https://randomuser.me/api/portraits/med/women/68.jpg\", score: 92, status: \"Hot\",\n source: \"Webinar — Serverless at Scale\", created_at: \"2026-05-12\" },\n { id: \"c2\", name: \"Daniel Okafor\", title: \"Staff Platform Engineer\", company: \"Cobalt Health\",\n email: \"d.okafor@cobalthealth.com\", phone: \"+1 (312) 555-0188\", location: \"Chicago, IL\",\n avatar_url: \"https://randomuser.me/api/portraits/med/men/52.jpg\", score: 78, status: \"Warm\",\n source: \"GitHub star → docs signup\", created_at: \"2026-05-19\" },\n { id: \"c3\", name: \"Sofia Marchetti\", title: \"Head of DevEx\", company: \"Lumen Retail\",\n email: \"sofia@lumenretail.eu\", phone: \"+39 02 5550 199\", location: \"Milan, IT\",\n avatar_url: \"https://randomuser.me/api/portraits/med/women/44.jpg\", score: 64, status: \"Warm\",\n source: \"Inbound — pricing page\", created_at: \"2026-05-24\" },\n { id: \"c4\", name: \"Marcus Bell\", title: \"CTO\", company: \"Drift Analytics\",\n email: \"marcus@driftanalytics.co\", phone: \"+1 (206) 555-0117\", location: \"Seattle, WA\",\n avatar_url: \"https://randomuser.me/api/portraits/med/men/32.jpg\", score: 55, status: \"New\",\n source: \"Conference — AIE Summit\", created_at: \"2026-05-28\" },\n { id: \"c5\", name: \"Aisha Rahman\", title: \"Engineering Manager\", company: \"Tinabox\",\n email: \"aisha@tinabox.app\", phone: \"+44 20 7946 0991\", location: \"London, UK\",\n avatar_url: \"https://randomuser.me/api/portraits/med/women/12.jpg\", score: 71, status: \"Warm\",\n source: \"Slack community\", created_at: \"2026-05-30\" },\n { id: \"c6\", name: \"Tom Becker\", title: \"Founder\", company: \"Hatchway\",\n email: \"tom@hatchway.dev\", phone: \"+1 (512) 555-0163\", location: \"Austin, TX\",\n avatar_url: \"https://randomuser.me/api/portraits/med/men/76.jpg\", score: 48, status: \"New\",\n source: \"Product Hunt\", created_at: \"2026-06-01\" },\n];\n\nconst TOUCHPOINTS: Omit[] = [\n // c1 — Maya (showcase: rich history)\n { contact_id: \"c1\", ts: \"2026-05-12 09:14\", channel: \"webinar\", direction: \"in\", title: \"Attended “Serverless at Scale” webinar\", detail: \"Stayed the full 45 min. Asked about cold starts and SQLite limits in the Q&A.\" },\n { contact_id: \"c1\", ts: \"2026-05-12 16:40\", channel: \"email\", direction: \"out\", title: \"Sent webinar recording + follow-up\", detail: \"Sequence step 1. Opened 3×, clicked the docs link.\" },\n { contact_id: \"c1\", ts: \"2026-05-13 11:02\", channel: \"site\", direction: \"in\", title: \"Browsed pricing + docs (6 pages)\", detail: \"8m 12s on site. Lingered on the Team plan and /docs/sqlite.\" },\n { contact_id: \"c1\", ts: \"2026-05-15 13:30\", channel: \"email\", direction: \"in\", title: \"Replied: SSO + audit logs?\", detail: \"Asked whether Team supports SAML SSO and exportable audit logs.\" },\n { contact_id: \"c1\", ts: \"2026-05-16 10:00\", channel: \"call\", direction: \"out\", title: \"Discovery call (30 min)\", detail: \"Team of 14 migrating cron jobs off Lambda. Wants an eval done by end of Q2.\" },\n { contact_id: \"c1\", ts: \"2026-05-22 15:20\", channel: \"linkedin\", direction: \"out\", title: \"Connected on LinkedIn\", detail: \"Shared the Cobalt Health migration case study.\" },\n { contact_id: \"c1\", ts: \"2026-05-28 09:05\", channel: \"site\", direction: \"in\", title: \"Created a val: northwind-poc\", detail: \"High intent — spun up a proof-of-concept and read /docs/mcp.\" },\n // c2 — Daniel\n { contact_id: \"c2\", ts: \"2026-05-19 08:22\", channel: \"site\", direction: \"in\", title: \"Signed up after starring the repo\", detail: \"Came from a GitHub README link.\" },\n { contact_id: \"c2\", ts: \"2026-05-20 09:00\", channel: \"email\", direction: \"out\", title: \"Welcome + getting started\", detail: \"Onboarding sequence step 1.\" },\n { contact_id: \"c2\", ts: \"2026-05-26 14:11\", channel: \"site\", direction: \"in\", title: \"Deployed first val: cobalt-etl\", detail: \"Activated — a working HTTP endpoint.\" },\n { contact_id: \"c2\", ts: \"2026-05-31 17:48\", channel: \"slack\", direction: \"in\", title: \"Asked about HIPAA / data residency\", detail: \"Posted in #help. Healthcare compliance is a gating concern.\" },\n // c3 — Sofia\n { contact_id: \"c3\", ts: \"2026-05-24 10:30\", channel: \"site\", direction: \"in\", title: \"Viewed pricing — Team plan\", detail: \"Compared Team vs Pro twice.\" },\n { contact_id: \"c3\", ts: \"2026-05-25 11:15\", channel: \"email\", direction: \"out\", title: \"Pricing follow-up\", detail: \"Offered a walkthrough; no reply yet.\" },\n // c5 — Aisha\n { contact_id: \"c5\", ts: \"2026-05-30 12:02\", channel: \"slack\", direction: \"in\", title: \"Joined community + intro post\", detail: \"Evaluating internal tooling platforms.\" },\n { contact_id: \"c5\", ts: \"2026-06-01 19:40\", channel: \"site\", direction: \"in\", title: \"Read the MCP docs\", detail: \"Interested in MCP servers for an internal agent.\" },\n // c4, c6\n { contact_id: \"c4\", ts: \"2026-05-28 13:05\", channel: \"event\", direction: \"in\", title: \"Badge scan at AIE Summit booth\", detail: \"Brief chat about agent infra.\" },\n { contact_id: \"c6\", ts: \"2026-06-01 08:50\", channel: \"site\", direction: \"in\", title: \"Product Hunt → homepage\", detail: \"First-touch, anonymous until signup.\" },\n];\n\n// Enrichment (blob). c1 richest; others lighter but present.\nconst ENRICHMENT: Record = {\n c1: {\n company: { name: \"Northwind Logistics\", domain: \"northwind.io\", industry: \"Logistics & Supply Chain\",\n employees: 850, employees_band: \"501–1,000\", revenue: \"$120M\", hq: \"San Francisco, CA\", founded: 2014,\n tech: [\"AWS Lambda\", \"Postgres\", \"Datadog\", \"Snowflake\", \"React\", \"GitHub Actions\"],\n funding: { round: \"Series C\", amount: \"$60M\", date: \"Mar 2025\", investors: [\"Index Ventures\", \"Bessemer\"] } },\n person: { seniority: \"VP\", department: \"Engineering\", tenure: \"3 yr 2 mo\",\n linkedin: \"in/mayakrishnan\", twitter: \"@maya_builds\", github: \"mayak\",\n skills: [\"Platform Eng\", \"Serverless\", \"Developer Experience\", \"Team Leadership\"] },\n signals: [\n { label: \"Visited pricing 3× in 14 days\", weight: \"high\" },\n { label: \"Created a val (northwind-poc)\", weight: \"high\" },\n { label: \"Hiring 2 platform engineers\", weight: \"medium\" },\n { label: \"Flagged Lambda cost on the call\", weight: \"medium\" },\n ],\n confidence: 0.93,\n },\n c2: {\n company: { name: \"Cobalt Health\", domain: \"cobalthealth.com\", industry: \"Digital Health\",\n employees: 240, employees_band: \"201–500\", revenue: \"$30M\", hq: \"Chicago, IL\", founded: 2018,\n tech: [\"GCP\", \"Kubernetes\", \"Go\", \"BigQuery\"], funding: { round: \"Series B\", amount: \"$45M\", date: \"Sep 2024\", investors: [\"a16z Bio\"] } },\n person: { seniority: \"Staff\", department: \"Platform\", tenure: \"1 yr 8 mo\",\n linkedin: \"in/danielokafor\", twitter: \"\", github: \"dokafor\",\n skills: [\"Kubernetes\", \"Compliance\", \"Data Eng\"] },\n signals: [\n { label: \"Activated — deployed a val\", weight: \"high\" },\n { label: \"Asked about HIPAA in Slack\", weight: \"medium\" },\n ],\n confidence: 0.81,\n },\n c3: {\n company: { name: \"Lumen Retail\", domain: \"lumenretail.eu\", industry: \"Retail / E-commerce\",\n employees: 1200, employees_band: \"1,001–5,000\", revenue: \"€210M\", hq: \"Milan, IT\", founded: 2009,\n tech: [\"Azure\", \"Next.js\", \"Shopify\"], funding: { round: \"Private\", amount: \"—\", date: \"—\", investors: [] } },\n person: { seniority: \"Director\", department: \"Developer Experience\", tenure: \"2 yr 4 mo\",\n linkedin: \"in/sofiamarchetti\", twitter: \"@sofiadx\", github: \"\",\n skills: [\"DX\", \"Internal Platforms\", \"Frontend\"] },\n signals: [{ label: \"Compared Team vs Pro twice\", weight: \"medium\" }],\n confidence: 0.66,\n },\n c4: {\n company: { name: \"Drift Analytics\", domain: \"driftanalytics.co\", industry: \"Analytics SaaS\",\n employees: 60, employees_band: \"51–200\", revenue: \"$8M\", hq: \"Seattle, WA\", founded: 2021,\n tech: [\"AWS\", \"Python\", \"dbt\", \"Snowflake\"], funding: { round: \"Seed\", amount: \"$6M\", date: \"Jan 2024\", investors: [\"Founders Co-op\"] } },\n person: { seniority: \"C-Level\", department: \"Engineering\", tenure: \"4 yr 1 mo\",\n linkedin: \"in/marcusbell\", twitter: \"@marcusb\", github: \"mbell\",\n skills: [\"Data\", \"Leadership\", \"Architecture\"] },\n signals: [{ label: \"Met at AIE Summit\", weight: \"low\" }],\n confidence: 0.58,\n },\n c5: {\n company: { name: \"Tinabox\", domain: \"tinabox.app\", industry: \"Productivity SaaS\",\n employees: 35, employees_band: \"11–50\", revenue: \"$4M\", hq: \"London, UK\", founded: 2022,\n tech: [\"Vercel\", \"TypeScript\", \"Postgres\"], funding: { round: \"Seed\", amount: \"$3M\", date: \"Jun 2025\", investors: [\"Seedcamp\"] } },\n person: { seniority: \"Manager\", department: \"Engineering\", tenure: \"1 yr 1 mo\",\n linkedin: \"in/aisharahman\", twitter: \"\", github: \"arahman\",\n skills: [\"Eng Management\", \"Tooling\", \"MCP\"] },\n signals: [{ label: \"Reading MCP docs\", weight: \"medium\" }],\n confidence: 0.7,\n },\n c6: {\n company: { name: \"Hatchway\", domain: \"hatchway.dev\", industry: \"Dev Tools\",\n employees: 6, employees_band: \"1–10\", revenue: \"—\", hq: \"Austin, TX\", founded: 2025,\n tech: [\"Bun\", \"React\"], funding: { round: \"Pre-seed\", amount: \"$0.6M\", date: \"Apr 2025\", investors: [\"Angels\"] } },\n person: { seniority: \"Founder\", department: \"—\", tenure: \"1 yr\",\n linkedin: \"in/tombecker\", twitter: \"@tombuilds\", github: \"tombecker\",\n skills: [\"Full-stack\", \"Founder\"] },\n signals: [{ label: \"First touch from Product Hunt\", weight: \"low\" }],\n confidence: 0.44,\n },\n};\n\nfunction genSignups(): Signup[] {\n const out: Signup[] = [];\n const today = new Date(\"2026-06-02T00:00:00Z\");\n let base = 16;\n for (let i = 29; i >= 0; i--) {\n const d = new Date(today);\n d.setUTCDate(today.getUTCDate() - i);\n base += (Math.random() - 0.32) * 2.4; // gentle upward drift\n const weekend = [0, 6].includes(d.getUTCDay());\n const noise = Math.round(Math.sin(i / 2.5) * 3 + Math.random() * 5);\n const signups = Math.max(4, Math.round(base) + noise - (weekend ? 5 : 0));\n const qualified = Math.max(1, Math.round(signups * (0.27 + Math.random() * 0.13)));\n out.push({ date: d.toISOString().slice(0, 10), signups, qualified });\n }\n return out;\n}\n\nasync function fetchAvatarB64(url: string): Promise {\n try {\n const r = await fetch(url, { headers: { \"User-Agent\": \"valtown-crm-demo\" } });\n if (!r.ok) return \"\";\n const buf = new Uint8Array(await r.arrayBuffer());\n let bin = \"\";\n for (let i = 0; i < buf.length; i++) bin += String.fromCharCode(buf[i]);\n return `data:image/jpeg;base64,${btoa(bin)}`;\n } catch {\n return \"\";\n }\n}\n\nexport async function seedIfEmpty(): Promise {\n await sqlite.batch([\n { sql: `CREATE TABLE IF NOT EXISTS contacts (id TEXT PRIMARY KEY, name TEXT, title TEXT, company TEXT, email TEXT, phone TEXT, location TEXT, avatar_url TEXT, avatar_b64 TEXT, score INTEGER, status TEXT, source TEXT, created_at TEXT)` },\n { sql: `CREATE TABLE IF NOT EXISTS touchpoints (id INTEGER PRIMARY KEY AUTOINCREMENT, contact_id TEXT, ts TEXT, channel TEXT, direction TEXT, title TEXT, detail TEXT)` },\n { sql: `CREATE TABLE IF NOT EXISTS signups (date TEXT PRIMARY KEY, signups INTEGER, qualified INTEGER)` },\n ]);\n\n const { rows } = await sqlite.execute(`SELECT COUNT(*) AS n FROM contacts`);\n if (Number((rows[0] as any).n) > 0) return;\n\n // Fetch + cache avatars (best effort; falls back to SVG monogram in UI).\n const avatars = await Promise.all(CONTACTS.map((c) => fetchAvatarB64(c.avatar_url)));\n\n const stmts: { sql: string; args: any[] }[] = [];\n CONTACTS.forEach((c, i) => {\n stmts.push({\n sql: `INSERT INTO contacts (id,name,title,company,email,phone,location,avatar_url,avatar_b64,score,status,source,created_at) VALUES (?,?,?,?,?,?,?,?,?,?,?,?,?)`,\n args: [c.id, c.name, c.title, c.company, c.email, c.phone, c.location, c.avatar_url, avatars[i], c.score, c.status, c.source, c.created_at],\n });\n });\n for (const t of TOUCHPOINTS) {\n stmts.push({\n sql: `INSERT INTO touchpoints (contact_id,ts,channel,direction,title,detail) VALUES (?,?,?,?,?,?)`,\n args: [t.contact_id, t.ts, t.channel, t.direction, t.title, t.detail],\n });\n }\n for (const s of genSignups()) {\n stmts.push({ sql: `INSERT INTO signups (date,signups,qualified) VALUES (?,?,?)`, args: [s.date, s.signups, s.qualified] });\n }\n await sqlite.batch(stmts);\n\n for (const [id, payload] of Object.entries(ENRICHMENT)) {\n await blob.setJSON(`crm_enrich_${id}`, payload);\n }\n}\n\nexport async function listContacts(): Promise {\n const { rows } = await sqlite.execute(`SELECT * FROM contacts ORDER BY score DESC`);\n return rows as unknown as Contact[];\n}\nexport async function getContact(id: string): Promise {\n const { rows } = await sqlite.execute({ sql: `SELECT * FROM contacts WHERE id = ?`, args: [id] });\n return (rows[0] as unknown as Contact) ?? null;\n}\nexport async function getTouchpoints(id: string): Promise {\n const { rows } = await sqlite.execute({ sql: `SELECT * FROM touchpoints WHERE contact_id = ? ORDER BY ts DESC`, args: [id] });\n return rows as unknown as Touchpoint[];\n}\nexport async function getSignups(): Promise {\n const { rows } = await sqlite.execute(`SELECT * FROM signups ORDER BY date ASC`);\n return rows as unknown as Signup[];\n}\nexport async function getEnrichment(id: string): Promise {\n try { return await blob.getJSON(`crm_enrich_${id}`); } catch { return null; }\n}\n\n/** Build a personalized email draft from contact + history + enrichment. */\nexport function buildDraft(c: Contact, tps: Touchpoint[], enr: any) {\n const lastCall = tps.find((t) => t.channel === \"call\");\n const lastQuestion = tps.find((t) => /\\?$/.test(t.title));\n const firstName = c.name.split(\" \")[0];\n const sig = enr?.signals?.[0]?.label;\n const lines: string[] = [];\n lines.push(`Hi ${firstName},`);\n if (lastCall) {\n lines.push(`Great talking through your Lambda migration${enr?.company?.name ? ` at ${enr.company.name}` : \"\"} — a team of 14 moving cron jobs over is exactly the kind of thing Val Town makes painless, and an eval before end of Q2 is very doable.`);\n } else {\n lines.push(`Thanks for checking out Val Town — looks like ${c.company} is exploring how we fit.`);\n }\n if (lastQuestion) {\n lines.push(`On your question about SSO + audit logs: SAML SSO and exportable audit logs are both included on the Team plan. I can turn them on for a trial workspace so your platform team can poke at them directly.`);\n }\n if (sig) {\n lines.push(`I also noticed ${sig.toLowerCase()} — happy to put together a short migration plan tailored to that.`);\n }\n lines.push(`Would Thursday or Friday work for a 20-min walkthrough? I'll come with a Northwind-specific plan.`);\n lines.push(`Best,\\nCharlie · Developer Relations, Val Town`);\n return {\n to: c.email,\n subject: `${c.company} × Val Town — SSO, audit logs & your Q2 eval`,\n body: lines.join(\"\\n\\n\"),\n rationale: lastCall\n ? \"Drafted from the discovery call + the SSO/audit-logs reply + top intent signal.\"\n : \"Drafted from recent site activity and enrichment.\",\n };\n}\n",[151],"565e30da-5e94-11f1-85c5-1607ee4eb77e","app.ts","565e3184-5e94-11f1-85c5-1607ee4eb77e",7,["D",1780412662223],"/** Single interactive CRM widget tuned for a fixed, no-scroll frame.\n * - Pure-CSS tabs (radio + :checked) → interactive even if JS is blocked.\n * - Fills the viewport (100vh); the panel area scrolls internally so the\n * outer frame itself never scrolls.\n */\nimport { chartSvg } from \"./ui.ts\";\nimport type { Contact, Touchpoint, Signup } from \"./data.ts\";\n\nconst esc = (s: unknown) =>\n String(s ?? \"\").replace(/[&<>\"]/g, (c) => ({ \"&\": \"&\", \"<\": \"<\", \">\": \">\", '\"': \""\" }[c]!));\n\nconst PAL = [\"#6366f1\", \"#0ea5e9\", \"#10b981\", \"#f59e0b\", \"#ec4899\", \"#8b5cf6\"];\nfunction mono(name: string, size: number) {\n const p = String(name).trim().split(/\\s+/);\n const ini = ((p[0]?.[0] || \"\") + (p[1]?.[0] || \"\")).toUpperCase();\n let h = 0; for (const ch of name) h = (h * 31 + ch.charCodeAt(0)) >>> 0;\n const r = (size * 0.28).toFixed(0);\n return ``;\n}\nfunction avatar(c: Contact, size: number) {\n if (c.avatar_b64) return ` $\"\"$ `;\n return mono(c.name, size);\n}\nfunction pill(s: string) {\n const m: Record = { Hot: [\"#3a1620\", \"#f87171\"], Warm: [\"#3a2c12\", \"#fbbf24\"], New: [\"#15233f\", \"#60a5fa\"] };\n const [bg, fg] = m[s] || [\"#1c2540\", \"#9aa6c4\"];\n return `${esc(s)}`;\n}\nfunction ring(score: number, size = 42) {\n const r = (size - 7) / 2, cx = size / 2, circ = 2 * Math.PI * r, off = circ * (1 - score / 100);\n const col = score >= 80 ? \"var(--accent2)\" : score >= 60 ? \"var(--amber)\" : \"var(--faint)\";\n return ``;\n}\nconst CH: Record = { email: \"✉️\", call: \"📞\", site: \"🌐\", webinar: \"🎥\", slack: \"💬\", meeting: \"🤝\", event: \"🎟️\" };\nfunction badge(ch: string) {\n if (ch === \"linkedin\") return `in`;\n return `${CH[ch] || \"•\"}`;\n}\n\nexport function appView(d: { c: Contact; tps: Touchpoint[]; enr: any; draft: { to: string; subject: string; body: string; rationale: string }; signups: Signup[] }) {\n const { c, tps, enr, draft, signups } = d;\n\n const cardPanel = `\n

${esc(c.email)}

PHONE

${esc(c.phone)}

LOCATION

${esc(c.location)}

ADDED

${esc(c.created_at)}

📡 ${esc(c.source)}

\n Draft email\n Timeline\n Enrichment\n

`;\n\n const timePanel = `

${tps.map((t, i) => `

${badge(t.channel)}${i < tps.length - 1 ? '

' : \"\"}

${esc(t.title)}${t.direction === \"in\" ? \"IN\" : \"OUT\"}

${esc(t.ts)}

${esc(t.detail)}

`).join(\"\")}

`;\n\n const mailPanel = `

To${esc(c.name)} <${esc(draft.to)}>

Subject${esc(draft.subject)}

${esc(draft.body)}

SendScheduleEdit

✦ ${esc(draft.rationale)}

`;\n\n const e = enr;\n const enrPanel = e ? `\n

🏢 ${esc(e.company.name)}

Industry${esc(e.company.industry)}

Size · Revenue${esc(e.company.employees_band)} · ${esc(e.company.revenue)}

HQ · Founded${esc(e.company.hq)} · ${esc(e.company.founded)}

\n ${e.company.funding?.round ? `

Funding${esc(e.company.funding.round)} · ${esc(e.company.funding.amount)}

` : \"\"}\n

${(e.company.tech || []).map((t: string) => `${esc(t)}`).join(\"\")}

⚡ Intent signals

${(e.signals || []).map((s: any) => `

${esc(s.label)}${esc(s.weight)}

`).join(\"\")}\n

Match confidence ${Math.round((e.confidence || 0) * 100)}%

`\n : `

No enrichment on file.

`;\n\n const total = signups.reduce((a, r) => a + r.signups, 0);\n const totalQ = signups.reduce((a, r) => a + r.qualified, 0);\n const conv = total ? Math.round((totalQ / total) * 100) : 0;\n const last7 = signups.slice(-7).reduce((a, r) => a + r.signups, 0);\n const prev7 = signups.slice(-14, -7).reduce((a, r) => a + r.signups, 0);\n const wow = prev7 ? Math.round(((last7 - prev7) / prev7) * 100) : 0;\n const sigPanel = `\n

${total}

Signups

${totalQ}

Qualified

${conv}%

Conv.

= 0 ? \"up\" : \"down\"}\">${wow >= 0 ? \"+\" : \"\"}${wow}%

WoW

\n ${chartSvg(signups)}\n

SignupsQualified

`;\n\n return `\n${esc(c.name)}\n\n

\n\n\n

${avatar(c, 40)}

${esc(c.name)}

${esc(c.title)} · ${esc(c.company)}

${pill(c.status)}${ring(c.score)}

\n\n

${cardPanel}

${timePanel}

${mailPanel}

${enrPanel}

${sigPanel}

`;\n}\n",[158],"2fa5b504-5e93-11f1-b3fc-1607ee4eb77e","README.md","2fa5b5c2-5e93-11f1-b3fc-1607ee4eb77e",5,["D",1780412167740],"# crm-mcp-demo\n\nA tiny CRM where **every screen is HTML rendered straight from the val** — pulled live from the val's own SQLite + Blob. Built to probe how far the Val Town MCP's HTTP rendering goes inside a chat.\n\n## Views\n| Route | Renders | Data source |\n|---|---|---|\n| `/` | Leads index | SQLite `contacts` |\n| `/c/:id` | Lead card (+ photo) | SQLite `contacts` |\n| `/c/:id/timeline` | Touchpoint timeline | SQLite `touchpoints` |\n| `/c/:id/email` | AI-drafted email | generated from data |\n| `/c/:id/enrich` | Enrichment panel | Blob `crm_enrich_*` |\n| `/signups` | 30-day signup chart | SQLite `signups` |\n\nTry `c1` (Maya Krishnan) for the richest record; `c2`–`c6` also seeded.\n\n## How it works\n- **Self-seeds** fake data on first request (idempotent — checks `COUNT(*)`).\n- **Photos** are fetched once from randomuser.me and cached as base64 in the contact row, so they render even inside a sandboxed iframe with no network access.\n- Every view is **static HTML + inline SVG, zero client JS** — so it renders anywhere the response is shown.\n\n```mermaid\nflowchart LR\n R[\"HTTP routes — Hono\"] --> C[\"SQLite: contacts / touchpoints / signups\"]\n R --> B[\"Blob: crm_enrich_*\"]\n R --> G[\"generated email text\"]\n C --> H[\"self-contained HTML + SVG\"]\n B --> H\n G --> H\n H --> V[\"rendered inline by Val Town MCP\"]\n```\n\nFiles: `main.ts` (routes) · `data.ts` (seed + queries) · `ui.ts` (rendering).\n",[165],"pulls","branches",1,"forks","envVars",{"_179":61,"_181":61},"connections",{"_179":61,"_180":61},"count","unfilledCount","emptyCount",{"_43":164,"_32":165,"_30":166,"_138":-5,"_41":42,"_40":167,"_140":125,"_38":200,"_13":61,"_33":20,"_35":169,"_24":25,"_144":-5,"_188":201,"_27":202},{"_43":157,"_32":158,"_30":159,"_138":-5,"_41":42,"_40":160,"_140":25,"_38":197,"_13":61,"_33":142,"_35":162,"_24":25,"_144":-5,"_188":198,"_27":199},{"_43":150,"_32":151,"_30":152,"_138":-5,"_41":42,"_40":153,"_140":25,"_38":194,"_13":61,"_33":142,"_35":155,"_24":25,"_144":-5,"_188":195,"_27":196},{"_43":146,"_32":28,"_30":31,"_138":-5,"_41":42,"_40":14,"_140":25,"_38":191,"_13":148,"_33":34,"_35":37,"_24":25,"_144":-5,"_188":192,"_27":193},{"_43":135,"_32":136,"_30":137,"_138":-5,"_41":42,"_40":139,"_140":25,"_38":187,"_13":61,"_33":142,"_35":143,"_24":25,"_144":-5,"_188":189,"_27":190},["D",1780412006226],"children",[],[136],["D",1780412681498],[],[28],["D",1780411841989],[],[151],["D",1780412662223],[],[158],["D",1780412167740],[],[165],["D",1780411768835],["D",1789492855745],{"_98":97,"_106":102},{"_98":97,"_99":100,"_101":102,"_18":55,"_103":104,"_105":25},{"_13":87,"_32":88,"_43":42,"_89":44,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":45,"_96":97},"ctx",{"_80":-5,"_127":241,"_242":243,"_244":245,"_246":25,"_247":25,"_248":25,"_249":125,"_250":-5,"_251":-7,"_252":-7,"_253":61,"_254":25,"_255":25,"_256":-5,"_257":25,"_258":25,"_259":25,"_260":-5},"ENV",{"_212":213,"_214":215,"_216":88,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240},"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 · v9