{appName} · Val Town

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_426":427,"_428":429},"routes/_app.x.$handle.$name",{"_103":102,"_33":47,"_112":93,"_27":113,"_13":14,"_114":-5,"_11":115,"_116":117,"_118":119,"_120":121,"_122":123,"_20":-5,"_124":-5,"_125":-5,"_126":25,"_127":128,"_129":62,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_45":46,"_33":47,"_40":48,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":74,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":86,"_87":88,"_89":90,"_91":25},"version",179,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":30},"file",{"_31":32,"_33":34,"_35":36,"_37":39,"_40":41,"_42":14,"_43":44,"_24":25},"previous",{"_31":32,"_33":34,"_35":36,"_37":38},"deleted",false,"deletedHere","path","frontend/pages/page-cron.tsx","latestPath","frontend/pages/docs/page-schedule.tsx","fileId","09169642-4c96-11f1-9b18-ee650bb23af1","name","page-cron.tsx","fileType","interval","content","/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n// page-cron.tsx — Cron Trigger: live run log + task architecture.\n\nimport { Badge, CodeBlock, CollapsedSnippets, PageHeader, SectionTitle } from \"../ui/components.tsx\";\n\n// ── Snippets (collapsed) ──────────────────────────────────────────────────────\n\nconst ENTRY_SNIPPET = {\n filename: \"cron.ts — entry point\",\n code: `export default async function (\n _interval: { lastRunAt: Date | undefined },\n): Promise {\n const now = new Date();\n await pulse(now);\n await daily(now);\n}`,\n};\n\nconst PULSE_SNIPPET = {\n filename: \"cron.ts — pulse()\",\n code: `// Runs on every cron tick. Writes a hello log to SQLite.\nasync function pulse(now: Date): Promise {\n console.log(\\`⚡ [\\${APP_NAME}] pulse \\${now.toISOString()}\\`);\n await logCronRun(\"pulse\", \\`hello at \\${now.toISOString()}\\`);\n}`,\n};\n\nconst DAILY_SNIPPET = {\n filename: \"cron.ts — daily()\",\n code: `// Runs once per day when UTC hour matches DAILY_HOUR_UTC (default: 2).\n// Stateless — no SQLite gating needed.\nasync function daily(now: Date): Promise {\n const targetHour = Number(env(\"DAILY_HOUR_UTC\", \"2\"));\n if (now.getUTCHours() !== targetHour) return;\n await pruneOldVisits(30);\n await logCronRun(\"daily\", \"pruned visits older than 30 days\");\n}`,\n};\n\nconst LOG_SNIPPET = {\n filename: \"backend/db.ts — logCronRun()\",\n code: `export async function logCronRun(task: string, note?: string): Promise {\n await migrate();\n await sqlite.execute({\n sql: \"INSERT INTO template_cron_runs (task, note) VALUES (?, ?)\",\n args: [task, note ?? null],\n });\n}`,\n};\n\n// ── Page ──────────────────────────────────────────────────────────────────────\n\nexport function CronPage() {\n return (\n

\n \n\n Live run log\n

\n Loading…\n

\n \n \n \n \n \n \n \n \n \n \n

\n\n Key rules\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

Constraint	Detail
	Set a standard cron expression (e.g. `/15 * * *`) in Val Town UI
	Free: 15 min · Pro: 1 min
	All times evaluated in UTC — offset in code for local time
	Multiplex tasks inside `cron.ts`; use a UTC-hour window for daily tasks
	Tasks should tolerate being called twice — Val Town doesn't guarantee exactly-once

\n\n \n \n \n \n \n \n

\n );\n}\n","/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n// page-cron.tsx — Cron Trigger: live run log + task architecture.\n\nimport { Badge, CodeBlock, CollapsedSnippets, PageHeader, SectionTitle } from \"../ui/components.tsx\";\n\n// ── Snippets (collapsed) ──────────────────────────────────────────────────────\n\nconst ENTRY_SNIPPET = {\n filename: \"cron.ts — entry point\",\n code: `export default async function (\n _interval: { lastRunAt: Date | undefined },\n): Promise {\n const now = new Date();\n await pulse(now);\n await daily(now);\n}`,\n};\n\nconst PULSE_SNIPPET = {\n filename: \"cron.ts — pulse()\",\n code: `// Runs on every cron tick. Writes a hello log to SQLite.\nasync function pulse(now: Date): Promise {\n console.log(\\`⚡ [\\${APP_NAME}] pulse \\${now.toISOString()}\\`);\n await logCronRun(\"pulse\", \\`hello at \\${now.toISOString()}\\`);\n}`,\n};\n\nconst DAILY_SNIPPET = {\n filename: \"cron.ts — daily()\",\n code: `// Runs once per day when UTC hour matches DAILY_HOUR_UTC (default: 2).\n// Stateless — no SQLite gating needed.\nasync function daily(now: Date): Promise {\n const targetHour = Number(env(\"DAILY_HOUR_UTC\", \"2\"));\n if (now.getUTCHours() !== targetHour) return;\n await pruneOldVisits(30);\n await logCronRun(\"daily\", \"pruned visits older than 30 days\");\n}`,\n};\n\nconst LOG_SNIPPET = {\n filename: \"backend/db.ts — logCronRun()\",\n code: `export async function logCronRun(task: string, note?: string): Promise {\n await migrate();\n await sqlite.execute({\n sql: \"INSERT INTO cron_runs (task, note) VALUES (?, ?)\",\n args: [task, note ?? null],\n });\n}`,\n};\n\n// ── Page ──────────────────────────────────────────────────────────────────────\n\nexport function CronPage() {\n return (\n

\n \n\n Live run log\n

\n Loading…\n

\n \n \n \n \n \n \n \n \n \n \n

\n\n Key rules\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

Constraint	Detail
	Set a standard cron expression (e.g. `/15 * * *`) in Val Town UI
	Free: 15 min · Pro: 1 min
	All times evaluated in UTC — offset in code for local time
	Multiplex tasks inside `cron.ts`; use a UTC-hour window for daily tasks
	Tasks should tolerate being called twice — Val Town doesn't guarantee exactly-once

\n\n \n \n \n \n \n \n

\n );\n}\n","createdAt",["D",1778445693591],"branchVersion","branchId","5a0a7ac8-4895-11f1-80ec-42b51c65c3df","id","5a09ae54-4895-11f1-80ec-42b51c65c3df","Quickstart-Full-Stack",["D",1777994172310],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","An elegant template for an elegant single-person full stack app.","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3ed9401e-3850-4a69-dec2-1bdd924c0900/square512?exp=1789538399&sig=8ded5b974bfebef9817e2fbdffe4de4e1704e0d4cab9518c811db2594c0af107","173e7424-8658-428f-a3bc-ae4faeaabd1c","pinnedFileId","e1c705aa-4b18-11f1-b4ae-ee650bb23af1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",1,"orgId","019df771-9af8-7238-99a4-541e39355038","tursoName","5a09ae54489511f180ec42b51c65c3df","tursoHostname","5a09ae54489511f180ec42b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789511441255],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_103":102,"_111":107},"org",{"_103":102,"_104":105,"_106":107,"_18":58,"_108":109,"_110":25},"branch",{"_13":92,"_33":93,"_45":44,"_94":46,"_95":-5,"_96":-5,"_97":-5,"_98":-5,"_99":-5,"_100":47,"_101":102},"isOwned",384,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","pikachu","handle","displayName","Minion","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/22c8ba37-42c8-4af4-8daf-8cdd2f5f1800/square512?exp=1789538399&sig=21cdba23f818845c8391e88088eb5ea9255dbc43e05efe79e25bd70ab9ddb43a","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_45":46,"_33":47,"_40":421,"_49":-5,"_50":25,"_51":52,"_53":52,"_54":55,"_56":57,"_18":58,"_59":60,"_61":62,"_63":-5,"_64":-5,"_65":66,"_67":68,"_69":70,"_71":72,"_73":422,"_75":-5,"_76":77,"_78":77,"_79":80,"_81":80,"_82":80,"_83":77,"_84":77,"_85":423,"_87":424,"_89":425,"_91":25},"tree",[219,224,240,241,242,243,244,245],"files",[219,220,221,222,223,224,225,226,227,228,229,230,231,232,233,234,235,236,237,238,239,240,241,242,243,244,245],"counts",{"_209":200,"_210":66,"_211":66,"_212":213,"_214":215},"contents",[134,135,136,137,138,139,140,141],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_45":203,"_33":204,"_31":205,"_145":-5,"_43":44,"_42":206,"_147":62,"_40":207,"_13":200,"_35":201,"_37":-5,"_24":25,"_151":-5,"_27":208},{"_45":195,"_33":196,"_31":197,"_145":-5,"_43":44,"_42":198,"_147":62,"_40":199,"_13":200,"_35":201,"_37":-5,"_24":25,"_151":-5,"_27":202},{"_45":187,"_33":188,"_31":189,"_145":-5,"_43":44,"_42":190,"_147":25,"_40":191,"_13":192,"_35":20,"_37":193,"_24":25,"_151":-5,"_27":194},{"_45":179,"_33":180,"_31":181,"_145":-5,"_43":44,"_42":182,"_147":25,"_40":183,"_13":184,"_35":36,"_37":185,"_24":25,"_151":-5,"_27":186},{"_45":171,"_33":172,"_31":173,"_145":-5,"_43":44,"_42":174,"_147":25,"_40":175,"_13":176,"_35":20,"_37":177,"_24":25,"_151":-5,"_27":178},{"_45":162,"_33":163,"_31":164,"_145":-5,"_43":44,"_42":165,"_147":25,"_40":166,"_13":167,"_35":168,"_37":169,"_24":25,"_151":-5,"_27":170},{"_45":153,"_33":154,"_31":60,"_145":-5,"_43":44,"_42":155,"_147":25,"_40":156,"_13":157,"_35":158,"_37":159,"_24":25,"_151":160,"_27":161},{"_45":142,"_33":143,"_31":144,"_145":-5,"_43":44,"_42":146,"_147":25,"_40":148,"_13":149,"_35":20,"_37":150,"_24":25,"_151":-5,"_27":152},"b83d6d90-4cae-11f1-916f-ee650bb23af1","val.yml","aa729402-48c5-11f1-87ca-42b51c65c3df","parentId",163,"latest",["D",1778444872084],5,"name: \"sample-val\"\npublic: true\nfiles:\n index.http.ts: http\n cron.ts: interval\n email.ts: email\n# env vars this val reads. Set them in the Val Town UI sidebar — never in code.\n# required: val will not work without it | optional: has a safe default\nenv:\n DAILY_HOUR_UTC: optional # 0-23 UTC hour for the daily task (default: \"2\")\n","label",[143],"1b6ebcb0-4cb0-11f1-ab86-ee650bb23af1","index.http.ts",176,["D",1778445468295],9,"http","// index.http.ts — Single HTTP trigger: serves the Preact SPA and JSON APIs.\n// Docs: https://docs.val.town/vals/http\n\nimport { getCronRuns, getRecentVisits, getVisitCount, recordVisit } from \"./backend/db.ts\";\nimport { listKeys, loadJSON, saveJSON } from \"./backend/storage.ts\";\nimport { jsonError, jsonOk } from \"./backend/api-utils.ts\";\nimport { APP_NAME } from \"./backend/shared.ts\";\nimport { renderApp } from \"./frontend/app.tsx\";\n\n// Valid SPA page slugs — anything else falls back to \"home\".\nconst PAGES = new Set([\"home\", \"http\", \"sqlite\", \"cron\", \"email\", \"blob\", \"ui\"]);\n\n// -----------------------------------------------------------------------------\n// entry\n// -----------------------------------------------------------------------------\n\nexport default async function handler(req: Request): Promise {\n const url = new URL(req.url);\n if (url.pathname.startsWith(\"/api/\")) return await routeApi(req, url);\n return await serveSpa(req, url);\n}\n\n// Server reads theme from cookie and page from pathname — SSR is fully hydrated,\n// no client-side init script needed to avoid FOUC.\nasync function serveSpa(req: Request, url: URL): Promise {\n try {\n await recordVisit(url.pathname);\n } catch { /* off-platform */ }\n const theme = cookieTheme(req);\n const page = pathToPage(url.pathname);\n const html = renderApp({ appName: APP_NAME, renderedAt: new Date().toISOString(), theme, page });\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}\n\n/** Extract the `theme` cookie value, or empty string if absent. */\nfunction cookieTheme(req: Request): string {\n const cookie = req.headers.get(\"Cookie\") ?? \"\";\n const m = cookie.match(/(?:^|;\\s*)theme=([^;]+)/);\n return m ? decodeURIComponent(m[1]) : \"\";\n}\n\n/** Map a URL pathname to a page slug. `/http` → `\"http\"`, `/` → `\"home\"`. */\nfunction pathToPage(pathname: string): string {\n const seg = pathname.slice(1); // strip leading /\n return PAGES.has(seg) ? seg : \"home\";\n}\n\n// -----------------------------------------------------------------------------\n// api routes\n// -----------------------------------------------------------------------------\n\nasync function routeApi(req: Request, url: URL): Promise {\n const route = `${req.method} ${url.pathname}`;\n if (route === \"GET /api/health\") return healthCheck();\n if (route === \"GET /api/visits\") return await visits();\n if (route === \"GET /api/cron-runs\") return await cronRuns();\n if (route === \"GET /api/blob-keys\") return await blobKeys();\n if (route === \"POST /api/blob-write\") return await blobWrite(req);\n if (route === \"GET /api/blob-read\") return await blobRead(url);\n return jsonError(`Not found: ${url.pathname}`, 404);\n}\n\nfunction healthCheck(): Response {\n return jsonOk({\n name: APP_NAME,\n timestamp: new Date().toISOString(),\n runtime: `Deno ${Deno.version?.deno ?? \"unknown\"}`,\n });\n}\n\nasync function visits(): Promise {\n try {\n const total = await getVisitCount();\n const recent = await getRecentVisits(20);\n return jsonOk({ total, recent });\n } catch {\n return jsonError(\"SQLite unavailable (off-platform?)\", 503);\n }\n}\n\nasync function cronRuns(): Promise {\n try {\n const runs = await getCronRuns(30);\n return jsonOk({ runs });\n } catch {\n return jsonError(\"SQLite unavailable (off-platform?)\", 503);\n }\n}\n\nasync function blobKeys(): Promise {\n try {\n const keys = await listKeys();\n return jsonOk({ keys });\n } catch {\n return jsonError(\"Blob unavailable (off-platform?)\", 503);\n }\n}\n\nasync function blobWrite(req: Request): Promise {\n try {\n const { key, value } = await req.json() as { key: string; value: unknown };\n if (!key) return jsonError(\"key required\");\n await saveJSON(key, value);\n return jsonOk({ key });\n } catch {\n return jsonError(\"Blob write failed\", 500);\n }\n}\n\nasync function blobRead(url: URL): Promise {\n try {\n const key = url.searchParams.get(\"key\") ?? \"\";\n if (!key) return jsonError(\"key required\");\n const value = await loadJSON(key);\n return jsonOk({ key, value });\n } catch {\n return jsonError(\"Blob read failed\", 500);\n }\n}\n","d-template",[154],"0cc9d012-4b8b-11f1-ae50-ee650bb23af1","email.ts","aa7742d6-48c5-11f1-831b-42b51c65c3df",108,["D",1778319601107],8,"email","// email.ts — Inbound handler + outbound helpers. UI: + → EMAIL.\n// Address shape: .@valtown.email\n\nimport { email as sendEmail } from \"https://esm.town/v/std/email\";\nimport { APP_NAME, type Email } from \"./backend/shared.ts\";\n\n// -----------------------------------------------------------------------------\n// inbound\n// -----------------------------------------------------------------------------\n\nexport default async function emailHandler(inbound: Email): Promise {\n console.log(\n `📧 [${APP_NAME}] From: ${inbound.from} Subject: ${\n inbound.subject ?? \"(none)\"\n }`,\n );\n console.log(` Body: ${inbound.text?.slice(0, 200) ?? \"(empty)\"}...`);\n\n for (const file of inbound.attachments) {\n console.log(` 📎 ${file.name} (${file.type}, ${file.size}b)`);\n // await blob.set(`emails/${file.name}`, await file.arrayBuffer());\n }\n\n // await sendNotification(`Re: ${inbound.subject}`, \"Got your message!\");\n}\n\n// -----------------------------------------------------------------------------\n// outbound\n// -----------------------------------------------------------------------------\n// Free plan: sends to yourself only. Pro: send to anyone + cc/bcc.\n\nexport async function sendNotification(\n subject: string,\n body: string,\n options?: { to?: string; html?: string },\n): Promise {\n await sendEmail({\n subject,\n text: body,\n ...(options?.to && { to: options.to }),\n ...(options?.html && { html: options.html }),\n });\n console.log(`📤 [${APP_NAME}] Sent: \"${subject}\"`);\n}\n\n/** `attachment.content` must be base64-encoded (use `btoa()`). */\nexport async function sendWithAttachment(\n subject: string,\n body: string,\n attachment: { content: string; filename: string; type?: string },\n): Promise {\n await sendEmail({\n subject,\n text: body,\n attachments: [{\n content: attachment.content,\n filename: attachment.filename,\n type: attachment.type ?? \"application/octet-stream\",\n disposition: \"attachment\",\n }],\n });\n console.log(\n `📤 [${APP_NAME}] Sent with attachment: \"${attachment.filename}\"`,\n );\n}\n",[163],"a8e0a8b4-4b17-11f1-9fc9-ee650bb23af1","deno.json","86adc21c-4951-11f1-b797-42b51c65c3df",55,["D",1778270041449],2,"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\",\n \"no-external-import\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"unstable\": [\"temporal\", \"worker-options\", \"sloppy-imports\", \"node-globals\"]\n}\n",[172],"1b6acd9e-4cb0-11f1-a762-ee650bb23af1","cron.ts","aa651980-48c5-11f1-bfb8-42b51c65c3df",175,["D",1778445468289],7,"// cron.ts — Two tasks per tick: pulse (every run) + daily (UTC-hour window).\n// Schedule is set in the Val Town UI via a cron expression. Free tier: ≥ 15 min.\n// Tasks are intentionally idempotent. Val Town fires each tick once; concurrent\n// cold-starts are rare but possible on Pro — design tasks to tolerate it.\n\nimport { APP_NAME, env } from \"./backend/shared.ts\";\nimport { logCronRun, pruneOldVisits } from \"./backend/db.ts\";\n\nexport default async function (\n _interval: { lastRunAt: Date | undefined },\n): Promise {\n const now = new Date();\n await pulse(now);\n await daily(now);\n}\n\n// ── Pulse — runs on every cron tick ───────────────────────────────────────────\n// Good for health-checks, polling an external feed, draining a work queue.\n// Set the Val Town cron to your desired cadence (UI → val → Cron → expression).\n\nasync function pulse(now: Date): Promise {\n console.log(`⚡ [${APP_NAME}] pulse ${now.toISOString()}`);\n await logCronRun(\"pulse\", `hello at ${now.toISOString()}`);\n // TODO: replace with your high-frequency task\n // await fetch(\"https://api.example.com/feed\");\n}\n\n// ── Daily — runs once per day in a UTC-hour window ────────────────────────────\n// Stateless: no SQLite gating needed. The window width equals your cron cadence,\n// so at most one tick per day will land in it (assuming cadence ≤ 1h).\n// Env: DAILY_HOUR_UTC — which UTC hour to run (0-23, default \"2\").\n\nasync function daily(now: Date): Promise {\n const targetHour = Number(env(\"DAILY_HOUR_UTC\", \"2\"));\n if (now.getUTCHours() !== targetHour) return;\n\n console.log(`🔧 [${APP_NAME}] daily ${now.toISOString()}`);\n await pruneOldVisits(30);\n await logCronRun(\"daily\", `pruned visits older than 30 days`);\n console.log(`✅ [${APP_NAME}] daily done`);\n}\n",[180],"0cd8509c-4b8b-11f1-89d0-ee650bb23af1","README.md","aabf7b64-48c5-11f1-9920-42b51c65c3df",109,["D",1778319601219],6,"# Val Town Template\n\nA compact Val Town starter with one HTTP surface: a Preact SSR documentation\napp.\n\nKeep this README short. The running webapp explains each module in detail via a\nselectable **Docs** section powered by `frontend/ui/data.ts`.\n\n---\n\n## What This Template Includes\n\n- `index.http.ts` — the only HTTP trigger.\n- Preact SSR + Oat CSS — no build step, no hydration bundle.\n- Tiny JSON API — `/api/health` and `/api/visits`.\n- SQLite — visit counter and cron metadata.\n- Cron — scheduled pulse and maintenance examples.\n- Email — inbound handler and outbound helpers.\n- Blob — small account-scoped storage wrapper.\n- `val.yml.files` — repo-side trigger metadata contract.\n\n---\n\n## Quick Start\n\n```bash\ncd /path/to/uApps\nvt create my-app\ncd vals/my-app\nvt push\nvt url\n```\n\nOpen the URL. The homepage is the module documentation.\n\nBefore changing remote state, use:\n\n```bash\nvt status\nvt push --dry-run\nvt types\n```\n\n---\n\n## HTTP Shape\n\nOnly one file should be an HTTP trigger:\n\n```txt\nindex.http.ts\n```\n\nRoutes:\n\n| Method | Path | Purpose |\n| ------ | ------------- | -------------------- |\n| GET | `/` | Preact docs app |\n| GET | `/api/health` | Runtime health check |\n| GET | `/api/visits` | SQLite visit count |\n\nDo not add email, OpenAI, admin, or write routes without auth. Val Town HTTP\nendpoints are public even when the val source is private.\n\n---\n\n## Preact Notes\n\nEvery `.tsx` file containing JSX needs the Val Town JSX pragma at the top:\n\n```tsx\n/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n```\n\nThe pragma selects the JSX runtime. It does not make a file an HTTP trigger.\nTrigger type is Val Town metadata; for new files, `vt` infers it from path words\nsuch as `http`, `cron`, and `email`.\n\nThe UI is intentionally declarative:\n\n```txt\nfrontend/ui/data.ts # docs/routes/stats data\nfrontend/ui/sections.tsx # maps data to sections\nfrontend/client.ts # theme, docs tabs, visit count\n```\n\n---\n\n## Trigger Metadata\n\n`val.yml` records the intended Val Town file types:\n\n```yaml\nfiles:\n index.http.ts: http\n cron.ts: interval\n email.ts: email\n```\n\nCheck remote metadata with:\n\n```bash\nvt types\n```\n\nExisting remote files keep sticky metadata. If Val Town shows\n`(script) index.http.ts`, the code may be valid but the file is not an HTTP\ntrigger.\n\n---\n\n## Customize\n\n- Rename the app: edit `APP_NAME` in `backend/shared.ts`.\n- Edit the homepage docs: update `frontend/ui/data.ts`.\n- Add a read-only API route: add a small branch in `index.http.ts`.\n- Add a SQLite table: extend `migrate()` in `backend/db.ts`.\n- Change visibility/org: edit `val.yml`.\n\nKeep files small. Delete modules you do not need.\n\n---\n\n## Key Files\n\n| File | Purpose |\n| ---------------------- | --------------------------------------------------- |\n| `index.http.ts` | Single HTTP trigger; renders Preact and JSON API |\n| `frontend/app.tsx` | HTML shell and Preact SSR entry |\n| `frontend/ui/data.ts` | Declarative webapp docs, stats, and route copy |\n| `frontend/ui/` | Preact sections, types, and styles |\n| `frontend/client.ts` | Inline theme/docs/visit-count enhancement |\n| `backend/db.ts` | SQLite schema and queries |\n| `backend/api-utils.ts` | JSON response helpers |\n| `backend/storage.ts` | Blob storage helpers |\n| `backend/shared.ts` | App constants, env helper, duration parser, types |\n| `cron.ts` | Cron trigger example |\n| `email.ts` | Email trigger and outbound helper examples |\n| `val.yml` | Val name, visibility, and expected trigger metadata |\n",[188],"85f9d626-4951-11f1-a16a-42b51c65c3df","frontend","85f9d6f8-4951-11f1-a16a-42b51c65c3df",34,["D",1778074991402],0,"directory",[196],"86303568-4951-11f1-a193-42b51c65c3df","backend","8630361c-4951-11f1-a193-42b51c65c3df",35,["D",1778074991756],[204],"pulls","branches","forks","envVars",{"_216":66,"_218":200},"connections",{"_216":200,"_217":200},"count","unfilledCount","emptyCount",{"_45":203,"_33":204,"_31":205,"_145":-5,"_43":44,"_42":206,"_147":62,"_40":418,"_13":200,"_35":201,"_37":-5,"_24":25,"_151":-5,"_247":419,"_27":420},{"_45":410,"_33":411,"_31":412,"_145":205,"_43":44,"_42":413,"_147":25,"_40":414,"_13":66,"_35":270,"_37":415,"_24":25,"_151":-5,"_247":416,"_27":417},{"_45":401,"_33":402,"_31":403,"_145":205,"_43":44,"_42":404,"_147":25,"_40":405,"_13":406,"_35":270,"_37":407,"_24":25,"_151":-5,"_247":408,"_27":409},{"_45":393,"_33":394,"_31":395,"_145":205,"_43":44,"_42":396,"_147":25,"_40":397,"_13":192,"_35":270,"_37":398,"_24":25,"_151":-5,"_247":399,"_27":400},{"_45":385,"_33":386,"_31":387,"_145":205,"_43":44,"_42":388,"_147":25,"_40":389,"_13":184,"_35":270,"_37":390,"_24":25,"_151":-5,"_247":391,"_27":392},{"_45":195,"_33":196,"_31":197,"_145":-5,"_43":44,"_42":198,"_147":62,"_40":382,"_13":200,"_35":201,"_37":-5,"_24":25,"_151":-5,"_247":383,"_27":384},{"_45":377,"_33":331,"_31":325,"_145":197,"_43":44,"_42":378,"_147":62,"_40":379,"_13":200,"_35":201,"_37":-5,"_24":25,"_151":-5,"_247":380,"_27":381},{"_45":369,"_33":370,"_31":371,"_145":325,"_43":44,"_42":372,"_147":25,"_40":373,"_13":288,"_35":270,"_37":374,"_24":25,"_151":-5,"_247":375,"_27":376},{"_45":361,"_33":362,"_31":363,"_145":325,"_43":44,"_42":364,"_147":25,"_40":365,"_13":66,"_35":270,"_37":366,"_24":25,"_151":-5,"_247":367,"_27":368},{"_45":356,"_33":34,"_31":32,"_145":325,"_43":44,"_42":14,"_147":25,"_40":357,"_13":358,"_35":36,"_37":39,"_24":25,"_151":-5,"_247":359,"_27":360},{"_45":348,"_33":349,"_31":350,"_145":325,"_43":44,"_42":351,"_147":25,"_40":352,"_13":66,"_35":168,"_37":353,"_24":25,"_151":-5,"_247":354,"_27":355},{"_45":340,"_33":341,"_31":342,"_145":325,"_43":44,"_42":343,"_147":25,"_40":344,"_13":176,"_35":158,"_37":345,"_24":25,"_151":-5,"_247":346,"_27":347},{"_45":332,"_33":333,"_31":334,"_145":325,"_43":44,"_42":335,"_147":25,"_40":336,"_13":176,"_35":270,"_37":337,"_24":25,"_151":-5,"_247":338,"_27":339},{"_45":322,"_33":323,"_31":324,"_145":325,"_43":44,"_42":326,"_147":25,"_40":327,"_13":176,"_35":270,"_37":328,"_24":25,"_151":-5,"_247":329,"_27":330},{"_45":317,"_33":292,"_31":285,"_145":197,"_43":44,"_42":318,"_147":25,"_40":319,"_13":200,"_35":201,"_37":-5,"_24":25,"_151":-5,"_247":320,"_27":321},{"_45":309,"_33":310,"_31":311,"_145":285,"_43":44,"_42":312,"_147":25,"_40":313,"_13":176,"_35":270,"_37":314,"_24":25,"_151":-5,"_247":315,"_27":316},{"_45":301,"_33":302,"_31":303,"_145":285,"_43":44,"_42":304,"_147":25,"_40":305,"_13":192,"_35":270,"_37":306,"_24":25,"_151":-5,"_247":307,"_27":308},{"_45":293,"_33":294,"_31":295,"_145":285,"_43":44,"_42":296,"_147":25,"_40":297,"_13":200,"_35":270,"_37":298,"_24":25,"_151":-5,"_247":299,"_27":300},{"_45":282,"_33":283,"_31":284,"_145":285,"_43":44,"_42":286,"_147":25,"_40":287,"_13":288,"_35":270,"_37":289,"_24":25,"_151":-5,"_247":290,"_27":291},{"_45":274,"_33":275,"_31":276,"_145":197,"_43":44,"_42":277,"_147":25,"_40":278,"_13":184,"_35":270,"_37":279,"_24":25,"_151":-5,"_247":280,"_27":281},{"_45":265,"_33":266,"_31":267,"_145":197,"_43":44,"_42":268,"_147":25,"_40":269,"_13":184,"_35":270,"_37":271,"_24":25,"_151":-5,"_247":272,"_27":273},{"_45":187,"_33":188,"_31":189,"_145":-5,"_43":44,"_42":190,"_147":25,"_40":262,"_13":192,"_35":20,"_37":193,"_24":25,"_151":-5,"_247":263,"_27":264},{"_45":179,"_33":180,"_31":181,"_145":-5,"_43":44,"_42":182,"_147":25,"_40":259,"_13":184,"_35":36,"_37":185,"_24":25,"_151":-5,"_247":260,"_27":261},{"_45":171,"_33":172,"_31":173,"_145":-5,"_43":44,"_42":174,"_147":25,"_40":256,"_13":176,"_35":20,"_37":177,"_24":25,"_151":-5,"_247":257,"_27":258},{"_45":162,"_33":163,"_31":164,"_145":-5,"_43":44,"_42":165,"_147":25,"_40":253,"_13":167,"_35":168,"_37":169,"_24":25,"_151":-5,"_247":254,"_27":255},{"_45":153,"_33":154,"_31":60,"_145":-5,"_43":44,"_42":155,"_147":25,"_40":250,"_13":157,"_35":158,"_37":159,"_24":25,"_151":160,"_247":251,"_27":252},{"_45":142,"_33":143,"_31":144,"_145":-5,"_43":44,"_42":146,"_147":25,"_40":246,"_13":149,"_35":20,"_37":150,"_24":25,"_151":-5,"_247":248,"_27":249},["D",1778444872084],"children",[],[143],["D",1778445468295],[],[154],["D",1778319601107],[],[163],["D",1778270041449],[],[172],["D",1778445468289],[],[180],["D",1778319601219],[],[188],"1b33d870-4cb0-11f1-a8f1-ee650bb23af1","client.ts","48ed4cf0-4b21-11f1-b54f-ee650bb23af1",171,["D",1778445467918],"script","// client.ts — Path router, cookie-based theme switcher, per-page demo hydration.\n// Theme is set via a 1-year cookie (server reads it for zero-FOUC SSR).\n// Navigation uses history.pushState with real paths (/http, /sqlite, …).\n\nexport const clientJs = String.raw`\n(function () {\nconst PAGES = new Set([\"home\",\"http\",\"sqlite\",\"cron\",\"email\",\"blob\",\"ui\"]);\nconst html = document.documentElement;\nconst osDark = window.matchMedia(\"(prefers-color-scheme: dark)\");\n\n// ── theme ─────────────────────────────────────────────────────────────────────\n\nfunction applyTheme(theme) {\n if (!theme || theme === \"auto\") {\n html.removeAttribute(\"data-theme\");\n document.cookie = \"theme=; max-age=0; path=/; SameSite=Lax\";\n osDark.addEventListener(\"change\", syncAuto);\n } else {\n osDark.removeEventListener(\"change\", syncAuto);\n html.setAttribute(\"data-theme\", theme);\n document.cookie = \"theme=\" + theme + \"; max-age=31536000; path=/; SameSite=Lax\";\n }\n updateThemeDropdown(theme || \"auto\");\n}\n\nfunction syncAuto() { html.removeAttribute(\"data-theme\"); }\n\nfunction updateThemeDropdown(active) {\n const sel = document.getElementById(\"theme-select\");\n if (sel) sel.value = active || \"auto\";\n}\n\nfunction initTheme() {\n // html[data-theme] is already set correctly by SSR (server reads the cookie).\n // Just sync the dropdown and wire the OS-change listener if in auto mode.\n const active = html.dataset.theme || \"auto\";\n if (!html.dataset.theme) osDark.addEventListener(\"change\", syncAuto);\n updateThemeDropdown(active);\n}\n\n// ── routing ───────────────────────────────────────────────────────────────────\n\nfunction currentPage() {\n const seg = location.pathname.slice(1);\n return PAGES.has(seg) ? seg : \"home\";\n}\n\nfunction navigate(page, push = true) {\n html.dataset.page = page;\n if (push) history.pushState({ page }, \"\", page === \"home\" ? \"/\" : \"/\" + page);\n updateNav(page);\n runDemo(page);\n}\n\nfunction updateNav(active) {\n document.querySelectorAll(\"[data-nav]\").forEach((el) => {\n el.classList.toggle(\"active\", el.dataset.nav === active);\n });\n}\n\nfunction handleNavClick(e) {\n const navEl = e.target.closest(\"[data-nav]\");\n if (navEl) { e.preventDefault(); navigate(navEl.dataset.nav); return; }\n\n const setTheme = e.target.closest(\"[data-set-theme]\");\n if (setTheme) { e.preventDefault(); applyTheme(setTheme.dataset.setTheme); return; }\n\n const copyBtn = e.target.closest(\"[data-copy]\");\n if (copyBtn) copyCodeSnippet(copyBtn);\n}\n\nfunction copyCodeSnippet(btn) {\n navigator.clipboard?.writeText(btn.dataset.copy)\n .then(() => {\n btn.textContent = \"copied!\";\n setTimeout(() => { btn.textContent = \"copy\"; }, 1500);\n });\n}\n\nfunction initRouter() {\n document.addEventListener(\"click\", handleNavClick);\n window.addEventListener(\"popstate\", () => navigate(currentPage(), false));\n const sel = document.getElementById(\"theme-select\");\n if (sel) sel.addEventListener(\"change\", (e) => applyTheme(e.target.value));\n const page = currentPage();\n updateNav(page);\n runDemo(page);\n}\n\n// ── helpers ────────────────────────────────────────────────────────────────────\n\nfunction qs(id) { return document.getElementById(id); }\n\nfunction setOutput(el, text) {\n if (el) el.textContent = text;\n}\n\nasync function apiFetch(url, opts) {\n const res = await fetch(url, opts);\n return res.json();\n}\n\n// ── per-page demos ─────────────────────────────────────────────────────────────\n\nconst demoRan = new Set();\n\nfunction runDemo(page) {\n if (demoRan.has(page)) return;\n demoRan.add(page);\n const runners = { http: demoHttp, sqlite: demoSqlite, cron: demoCron, blob: demoBlob };\n runners[page]?.();\n}\n\n// http page — three independent call buttons ─────────────────────────────────\n\nfunction wireApiButton(btnId, outId, endpoint) {\n const btn = qs(btnId);\n const out = qs(outId);\n if (!btn || !out) return;\n btn.addEventListener(\"click\", async () => {\n btn.disabled = true;\n setOutput(out, \"loading…\");\n try {\n const data = await apiFetch(endpoint);\n setOutput(out, JSON.stringify(data, null, 2));\n } catch (err) {\n setOutput(out, \"Error: \" + err.message);\n } finally {\n btn.disabled = false;\n }\n });\n}\n\nfunction demoHttp() {\n wireApiButton(\"http-health-btn\", \"http-health-out\", \"/api/health\");\n wireApiButton(\"http-visits-btn\", \"http-visits-out\", \"/api/visits\");\n wireApiButton(\"http-blob-keys-btn\",\"http-blob-keys-out\",\"/api/blob-keys\");\n}\n\n// sqlite page — live visit table with refresh + prune ────────────────────────\n\nfunction renderVisitTable(data) {\n const status = qs(\"sqlite-visits-status\");\n const table = qs(\"sqlite-visits-table\");\n const tbody = qs(\"sqlite-visits-body\");\n const count = qs(\"sqlite-visit-count\");\n\n if (!data.ok || !data.recent) {\n if (status) { status.textContent = data.error || \"Failed to load\"; status.style.display = \"\"; }\n if (table) table.style.display = \"none\";\n return;\n }\n\n if (status) status.style.display = \"none\";\n if (table) table.style.display = \"\";\n if (count) count.textContent = data.total + \" total visits\";\n\n if (tbody) {\n tbody.innerHTML = data.recent.map(r =>\n \"\" + r.id + \"\" + r.path + \"\" + r.ts + \"\"\n ).join(\"\") || \"No visits yet\";\n }\n}\n\nfunction demoSqlite() {\n // Auto-load on page entry\n apiFetch(\"/api/visits\").then(renderVisitTable).catch(e => {\n const s = qs(\"sqlite-visits-status\");\n if (s) s.textContent = \"Error: \" + e.message;\n });\n\n const refreshBtn = qs(\"sqlite-refresh-btn\");\n if (refreshBtn) {\n refreshBtn.addEventListener(\"click\", async () => {\n refreshBtn.disabled = true;\n try { renderVisitTable(await apiFetch(\"/api/visits\")); }\n catch (e) { const s = qs(\"sqlite-visits-status\"); if (s) s.textContent = \"Error: \" + e.message; }\n finally { refreshBtn.disabled = false; }\n });\n }\n\n const pruneBtn = qs(\"sqlite-prune-btn\");\n if (pruneBtn) {\n pruneBtn.addEventListener(\"click\", async () => {\n pruneBtn.disabled = true;\n try {\n // pruning happens via cron — we just refresh to show current state\n renderVisitTable(await apiFetch(\"/api/visits\"));\n } finally {\n pruneBtn.disabled = false;\n }\n });\n }\n}\n\n// cron page — live run log table, auto-loaded ─────────────────────────────────\n\nfunction renderCronLog(data) {\n const status = qs(\"cron-log-status\");\n const table = qs(\"cron-log-table\");\n const tbody = qs(\"cron-log-body\");\n\n if (!data.ok || !data.runs) {\n if (status) { status.textContent = data.error || \"Failed to load\"; status.style.display = \"\"; }\n if (table) table.style.display = \"none\";\n return;\n }\n\n if (!data.runs.length) {\n if (status) { status.textContent = \"No cron runs yet — wait for the next cron tick.\"; status.style.display = \"\"; }\n if (table) table.style.display = \"none\";\n return;\n }\n\n if (status) status.style.display = \"none\";\n if (table) table.style.display = \"\";\n\n if (tbody) {\n tbody.innerHTML = data.runs.map(r =>\n \"\" + (r.task === \"pulse\" ? \"⚡ pulse\" : \"🔧 daily\") +\n \"\" + (r.note || \"\") +\n \"\" + r.ts + \"\"\n ).join(\"\");\n }\n}\n\nfunction demoCron() {\n apiFetch(\"/api/cron-runs\").then(renderCronLog).catch(e => {\n const s = qs(\"cron-log-status\");\n if (s) s.textContent = \"Error: \" + e.message;\n });\n}\n\n// blob page — write/read/list ─────────────────────────────────────────────────\n\nfunction demoBlob() {\n // write\n const writeBtn = qs(\"blob-write-btn\");\n const writeOut = qs(\"blob-write-out\");\n if (writeBtn) {\n writeBtn.addEventListener(\"click\", async () => {\n const keyEl = qs(\"blob-key-input\");\n const valueEl = qs(\"blob-value-input\");\n const key = keyEl?.value.trim() || \"\";\n const rawVal = valueEl?.value.trim() || \"\";\n if (!key) { setOutput(writeOut, \"Error: key is required\"); return; }\n let value;\n try { value = JSON.parse(rawVal); } catch { value = rawVal; }\n writeBtn.disabled = true;\n setOutput(writeOut, \"writing…\");\n try {\n const data = await apiFetch(\"/api/blob-write\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ key, value }),\n });\n setOutput(writeOut, JSON.stringify(data, null, 2));\n // sync key into read input for convenience\n const readKeyEl = qs(\"blob-read-key-input\");\n if (readKeyEl && !readKeyEl.value) readKeyEl.value = key;\n } catch (err) {\n setOutput(writeOut, \"Error: \" + err.message);\n } finally {\n writeBtn.disabled = false;\n }\n });\n }\n\n // read\n const readBtn = qs(\"blob-read-btn\");\n const readOut = qs(\"blob-read-out\");\n if (readBtn) {\n readBtn.addEventListener(\"click\", async () => {\n const key = qs(\"blob-read-key-input\")?.value.trim() || \"\";\n if (!key) { setOutput(readOut, \"Error: key is required\"); return; }\n readBtn.disabled = true;\n setOutput(readOut, \"reading…\");\n try {\n const data = await apiFetch(\"/api/blob-read?key=\" + encodeURIComponent(key));\n setOutput(readOut, JSON.stringify(data, null, 2));\n } catch (err) {\n setOutput(readOut, \"Error: \" + err.message);\n } finally {\n readBtn.disabled = false;\n }\n });\n }\n\n // list\n const listBtn = qs(\"blob-list-btn\");\n const listOut = qs(\"blob-list-out\");\n if (listBtn) {\n listBtn.addEventListener(\"click\", async () => {\n listBtn.disabled = true;\n setOutput(listOut, \"loading…\");\n try {\n const data = await apiFetch(\"/api/blob-keys\");\n setOutput(listOut, JSON.stringify(data, null, 2));\n } catch (err) {\n setOutput(listOut, \"Error: \" + err.message);\n } finally {\n listBtn.disabled = false;\n }\n });\n }\n}\n\n// ── init ──────────────────────────────────────────────────────────────────────\n\ninitTheme();\ninitRouter();\n})();\n`;\n",[],[196,266],"89e6fdf4-4cad-11f1-8c2c-ee650bb23af1","app.tsx","48f1fc50-4b21-11f1-aeb4-ee650bb23af1",154,["D",1778444365176],"/** @jsxImportSource https://esm.sh/preact@10.29.1 */\n// app.tsx — SPA shell: sidebar + all 7 pages pre-rendered server-side.\n// Theme and active page are known at render time (cookie + pathname) — no FOUC.\n\nimport { render } from \"https://esm.sh/preact-render-to-string@6.6.7?deps=preact@10.29.1\";\nimport { clientJs } from \"./client.ts\";\nimport { css } from \"./ui/styles.ts\";\nimport { THEMES } from \"./ui/theme.ts\";\nimport type { HomePageProps } from \"./ui/types.ts\";\nimport { HomePage } from \"./pages/home.tsx\";\nimport { HttpPage } from \"./pages/page-http.tsx\";\nimport { SqlitePage } from \"./pages/page-sqlite.tsx\";\nimport { CronPage } from \"./pages/page-cron.tsx\";\nimport { EmailPage } from \"./pages/page-email.tsx\";\nimport { BlobPage } from \"./pages/page-blob.tsx\";\nimport { UiPage } from \"./pages/page-ui.tsx\";\n\n// nav items ------------------------------------------------------------------\n\nconst NAV = [\n { page: \"home\", icon: \"⌂\", label: \"Home\" },\n { page: \"http\", icon: \"◈\", label: \"HTTP Trigger\" },\n { page: \"sqlite\", icon: \"⊙\", label: \"SQLite\" },\n { page: \"cron\", icon: \"◷\", label: \"Cron Trigger\" },\n { page: \"email\", icon: \"◉\", label: \"Email Trigger\" },\n { page: \"blob\", icon: \"◫\", label: \"Blob Storage\" },\n { page: \"ui\", icon: \"◐\", label: \"UI & Themes\" },\n];\n\n// Gruvbox-colored \"vt\" monogram favicon (SVG encoded for data URI)\nconst FAVICON = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%23282828'/%3E%3Ctext x='16' y='22' font-family='monospace' font-size='14' font-weight='bold' fill='%23fabd2f' text-anchor='middle'%3Evt%3C/text%3E%3C/svg%3E`;\n\n// theme dropdown -------------------------------------------------------------\n\nfunction ThemeDropdown() {\n return (\n \n );\n}\n\n// sidebar nav ----------------------------------------------------------------\n\nfunction Sidebar({ valName }: { valName: string }) {\n return (\n \n );\n}\n\n// shell + export -------------------------------------------------------------\n\nfunction App({ appName, renderedAt, theme, page }: HomePageProps) {\n return (\n \n \n \n \n \n {appName} · Val Town\n \n \n \n

Diff · v179