${esc(title)}

${k}

${esc(v)}

`;\n\nexport function chartSvg(rows: Signup[]) {\n const n = rows.length, W = 800, H = 170, padL = 14, padR = 10, padT = 10, padB = 20;\n const plotW = W - padL - padR, plotH = H - padT - padB;\n const maxY = Math.ceil(Math.max(...rows.map((r) => r.signups), 10) / 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;\n return `${Math.round(maxY * (1 - f))}`;\n }).join(\"\");\n const xl = rows.map((r, i) => (i % 6 === 0 || i === n - 1) ? `${r.date.slice(5)}` : \"\").join(\"\");\n const li = n - 1;\n return ``;\n}\n\nconst CSS = `\n:root{--bg:#0a0e1a;--bg2:#0e1322;--surface:#141a2e;--surface2:#1b2238;--border:#252e48;--border2:#313c5e;\n --text:#eef2fb;--muted:#9aa6c4;--faint:#6b7799;--accent:#818cf8;--accent-d:#6366f1;--accent2:#34d399;--amber:#fbbf24;--red:#f87171;}\n*{box-sizing:border-box}\nhtml,body{margin:0}\nbody{padding:13px;color:var(--text);background:radial-gradient(800px 400px at 25% -25%,#16203a 0%,var(--bg) 60%);\n font:13px/1.5 -apple-system,BlinkMacSystemFont,\"Segoe UI\",Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased}\n.wrap{max-width:856px;margin:0 auto}\n.card{background:linear-gradient(180deg,var(--surface),var(--bg2));border:1px solid var(--border);border-radius:16px;\n padding:16px 18px;box-shadow:0 18px 50px -22px rgba(0,0,0,.7)}\n.foot{display:flex;justify-content:space-between;align-items:center;margin-top:11px;color:var(--faint);font-size:10.5px}\n.foot .tag{background:#0e1322;border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}\n.note{color:var(--faint);font-size:12px}\n.nm2{font-size:15px;font-weight:700}.sub{color:var(--muted);font-size:12px;line-height:1.35}.sp{flex:1}\n.hdrow{display:flex;align-items:center;gap:11px;padding-bottom:11px;border-bottom:1px solid var(--border);margin-bottom:12px}\n/* contact card */\n.cl{display:flex;gap:20px}\n.clid{width:248px;flex:none}\n.clid .nm{font-size:18px;font-weight:700;margin-top:11px;letter-spacing:-.01em}\n.clid .sub{margin-top:3px}\n.idmeta{display:flex;align-items:center;gap:13px;margin-top:14px}\n.cldet{flex:1;min-width:0}\n.grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden}\n.cell{background:var(--bg2);padding:9px 12px}.cell .k{font-size:10px;color:var(--faint);letter-spacing:.04em}.cell .v{font-size:13px;margin-top:2px;word-break:break-word}\n/* timeline */\n.tlcols{display:grid;grid-template-columns:1fr 1fr;gap:9px 24px}\n.ti{display:flex;gap:10px;align-items:flex-start}\n.tib{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--surface2);border:1px solid var(--border2);font-size:13px;flex:none}\n.tibody{flex:1;min-width:0}\n.trow{display:flex;align-items:center;gap:6px}\n.tit{font-weight:600;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}\n.dir{font-size:9px;font-weight:700;padding:1px 5px;border-radius:5px;flex:none}\n.dir.in{background:#10331f;color:var(--accent2)}.dir.out{background:#1e2350;color:var(--accent)}\n.tmeta{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}\n/* email */\n.mailbar{display:flex;align-items:center;gap:7px;padding-bottom:11px;border-bottom:1px solid var(--border)}\n.dot{width:10px;height:10px;border-radius:50%}.mtitle{color:var(--muted);font-size:12px;margin-left:5px}\n.ai{background:#1a1f3d;border:1px solid var(--accent-d);color:var(--accent);font-size:10.5px;font-weight:600;padding:2px 9px;border-radius:999px}\n.mrow{display:flex;gap:9px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px}\n.lab{color:var(--faint);width:52px;flex:none}.subj{font-weight:700;font-size:14px}\n.mbody{white-space:pre-wrap;font-size:12.5px;line-height:1.5;color:#d8dffb;padding:11px 0}\n.mfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap}\n.btn{background:var(--surface2);border:1px solid var(--border2);color:var(--text);padding:7px 15px;border-radius:9px;font-size:12.5px;font-weight:600}\n.btn.primary{background:linear-gradient(180deg,var(--accent),var(--accent-d));border-color:transparent;color:#0b0f1c}\n.rat{color:var(--faint);font-size:11px;margin-left:auto}\n/* enrichment */\n.ecols{display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}\n.eh{font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);margin-bottom:7px}\n.kv{display:flex;justify-content:space-between;gap:12px;padding:4px 0;font-size:12.5px;border-bottom:1px dashed var(--border)}.kv .k{color:var(--faint)}\n.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}\n.chip{background:var(--surface2);border:1px solid var(--border2);color:var(--muted);padding:3px 9px;border-radius:8px;font-size:11.5px}\n.sig{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px}\n.wd{width:8px;height:8px;border-radius:50%;flex:none}.wd.high{background:var(--accent2)}.wd.medium{background:var(--amber)}.wd.low{background:var(--faint)}\n.wlab{color:var(--faint);font-size:9.5px;text-transform:uppercase}\n.meter{height:6px;background:var(--surface2);border-radius:999px;overflow:hidden;margin-top:8px}.meter>div{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent))}\n/* signups */\n.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:10px}\n.stat{background:var(--bg2);border:1px solid var(--border);border-radius:11px;padding:9px 12px}.stat .n{font-size:18px;font-weight:700}.stat .l{font-size:10.5px;color:var(--faint)}\n.up{color:var(--accent2)}.down{color:var(--red)}\n.legend{display:flex;gap:14px;font-size:11.5px;color:var(--muted);margin-top:8px}.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:-1px}\n/* index */\n.lead{display:flex;align-items:center;gap:12px;padding:9px 11px;border:1px solid var(--border);border-radius:11px;margin-top:8px;background:var(--bg2)}\n.lead .nm{font-weight:600;font-size:13.5px}.lead .co{color:var(--muted);font-size:12px}\n.scorepill{font-weight:700;font-size:12.5px;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${esc(title)}\n\n

${body}\n

${esc(opts.tag ?? \"demo\")}dcm31/crm-mcp-demo

`;\n}\n\nconst STAGE: Record = { Hot: \"Evaluation\", Warm: \"Engaged\", New: \"New lead\" };\n\nexport function contactCard(c: Contact) {\n return `

${avatar(c, 78)}\n

${esc(c.name)}

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

${statusPill(c.status)}${scoreRing(c.score, 50)}

\n ${cell(\"EMAIL\", c.email)}${cell(\"PHONE\", c.phone)}\n ${cell(\"LOCATION\", c.location)}${cell(\"ADDED\", c.created_at)}\n ${cell(\"LEAD SOURCE\", c.source)}${cell(\"STAGE\", STAGE[c.status] || \"—\")}\n

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

\n ${chGlyph(t.channel)}\n

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

${esc(t.ts)} · ${esc(t.detail)}

`;\n const mid = Math.ceil(tps.length / 2);\n return `

${avatar(c, 38)}

${esc(c.name)}

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

${statusPill(c.status)}

${tps.slice(0, mid).map(item).join(\"\")}

${tps.slice(mid).map(item).join(\"\")}

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

New message✦ AI drafted

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

Subject${esc(draft.subject)}

${esc(draft.body)}

SendScheduleEdit✦ ${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 tech = (co.tech || []).map((t: string) => `${esc(t)}`).join(\"\");\n const skills = (p.skills || []).map((t: string) => `${esc(t)}`).join(\"\");\n const social = [\n p.linkedin && `in · ${esc(p.linkedin)}`, p.twitter && `𝕏 · ${esc(p.twitter)}`, p.github && `⌥ · ${esc(p.github)}`,\n ].filter(Boolean).map((s) => `${s}`).join(\"\");\n const sigs = (e.signals || []).map((s: any) => `

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

`).join(\"\");\n const conf = Math.round((e.confidence || 0) * 100);\n return `

${avatar(c, 38)}

${esc(c.name)}

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

conf ${conf}%

🏢 ${esc(co.name)}

Industry${esc(co.industry)}

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

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

\n ${co.funding?.round ? `

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

` : \"\"}\n

${tech}

⚡ Intent signals

${sigs}\n

👤 Person

${social}

${skills}

`;\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.at(-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, 36)}

${esc(c.name)}

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

${statusPill(c.status)}${c.score}

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

CRM — rendered from a val

${contacts.length} leads from SQLite. Routes: /c/<id>, /c/<id>/timeline, /email, /enrich, /signups

\n${leads}`;\n}\n","deleted","label",[116],"4ce555c8-5e95-11f1-839a-1607ee4eb77e","main.ts","42479296-5e92-11f1-b371-1607ee4eb77e",11,["D",1780413075827],5,"http","/**\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(\"/ruler\", (c) => {\n const bands = Array.from({ length: 16 }, (_, i) => {\n const px = (i + 1) * 50;\n const bg = i % 2 ? \"#141a2e\" : \"#0e1322\";\n const hint = i === 0 ? '← biggest number you can fully see = frame HEIGHT (px)' : \"\";\n return `

${px}${hint}

`;\n }).join(\"\");\n const ticks = [100, 200, 300, 400, 500, 600, 700, 800].map((x) =>\n `${x}`).join(\"\");\n return c.html(`\n\n

width →${ticks}

\n${bands}`);\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",[133],"541b5a48-5e97-11f1-9950-1607ee4eb77e","data.ts","6d779c2c-5e92-11f1-8503-1607ee4eb77e",13,["D",1780413946918],2,"/**\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}` : \"\"} — moving a team of 14 off cron jobs is exactly what Val Town makes painless, and a Q2 eval 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 SSO + audit logs: both ship on the Team plan. I can switch them on in a trial workspace for your platform team to poke at.`);\n }\n if (sig) {\n lines.push(`I also clocked the repeat pricing visits — I'll bring a short, ${c.company}-specific migration plan.`);\n }\n lines.push(`Thursday or Friday for a 20-min walkthrough?`);\n lines.push(`Best,\\nCharlie · DevRel, 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",[142],"44dfdb46-5e95-11f1-9ab6-1607ee4eb77e","app.ts","565e3184-5e94-11f1-85c5-1607ee4eb77e",10,["D",1780413062369],"/** Single interactive CRM widget.\n * IMPORTANT: this render sizes the iframe to the document's CONTENT height,\n * then clips inside a fixed frame. So we use NORMAL FLOW + explicit px — never\n * 100vh / position:fixed (those collapse to 0 height → blank).\n * Tabs use a pure-CSS mechanism (radio + :checked) → interactive without JS.\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",[150],"2fa5b504-5e93-11f1-b3fc-1607ee4eb77e","README.md","2fa5b5c2-5e93-11f1-b3fc-1607ee4eb77e",["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",[157],"pulls","branches","forks","envVars",{"_169":40,"_171":40},"connections",{"_169":40,"_170":40},"count","unfilledCount","emptyCount",{"_18":156,"_20":157,"_117":158,"_119":-5,"_120":69,"_121":137,"_122":105,"_22":190,"_66":40,"_125":98,"_127":160,"_129":26,"_130":-5,"_178":191,"_87":192},{"_18":149,"_20":150,"_117":151,"_119":-5,"_120":69,"_121":152,"_122":105,"_22":187,"_66":124,"_125":126,"_127":154,"_129":26,"_130":-5,"_178":188,"_87":189},{"_18":141,"_20":142,"_117":143,"_119":-5,"_120":69,"_121":144,"_122":105,"_22":184,"_66":146,"_125":126,"_127":147,"_129":26,"_130":-5,"_178":185,"_87":186},{"_18":132,"_20":133,"_117":134,"_119":-5,"_120":69,"_121":135,"_122":105,"_22":181,"_66":137,"_125":138,"_127":139,"_129":26,"_130":-5,"_178":182,"_87":183},{"_18":115,"_20":116,"_117":118,"_119":-5,"_120":69,"_121":67,"_122":105,"_22":177,"_66":124,"_125":126,"_127":128,"_129":26,"_130":-5,"_178":179,"_87":180},["D",1780414023933],"children",[],[116],["D",1780413075827],[],[133],["D",1780413946918],[],[142],["D",1780413062369],[],[150],["D",1780412167740],[],[157],["D",1780411768835],["D",1789492855745],{"_16":17,"_85":81},{"_16":17,"_78":79,"_80":81,"_33":34,"_82":83,"_84":26},{"_66":67,"_20":68,"_18":69,"_70":19,"_71":-5,"_72":-5,"_73":-5,"_74":-5,"_75":-5,"_76":21,"_77":17},"ctx",{"_59":-5,"_107":231,"_232":233,"_234":235,"_236":26,"_237":26,"_238":26,"_239":105,"_240":-5,"_241":-7,"_242":-7,"_243":40,"_244":26,"_245":26,"_246":-5,"_247":26,"_248":26,"_249":26,"_250":-5},"ENV",{"_202":203,"_204":205,"_206":68,"_207":208,"_209":210,"_211":212,"_213":214,"_215":216,"_217":218,"_219":220,"_221":222,"_223":224,"_225":226,"_227":228,"_229":230},"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"]

Search