[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_527":528,"_529":530},"routes/_app.x.$handle.$name",{"_102":101,"_32":46,"_111":92,"_27":112,"_13":14,"_113":-5,"_11":114,"_115":116,"_117":118,"_119":120,"_121":122,"_20":-5,"_123":-5,"_124":-5,"_125":25,"_126":127,"_128":61,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",354,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/pages/features/page-mail.tsx","latestPath","fileId","09235c92-4c96-11f1-987c-ee650bb23af1","name","page-mail.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// page-mail.tsx — Email Trigger: inbound handler + outbound helpers.\n\nimport {\n Badge,\n Banner,\n Button,\n CodeBlock,\n Heading,\n HStack,\n Section,\n Table,\n TableBody,\n TableCell,\n TableHeader,\n TableHeaderCell,\n TableRow,\n Text,\n VStack,\n} from \"../astryx/components.ts\";\nimport { PageLinks } from \"./kit.tsx\";\nimport { inboundEmailAddress } from \"../../backend/shared.ts\";\nimport type { CodeSnippet } from \"../types.ts\";\n\nconst LINKS = [\n { href: \"https://docs.val.town/vals/email/\", label: \"Email docs\" },\n { href: \"https://docs.val.town/reference/std/email/\", label: \"std/email reference\" },\n];\n\nconst TYPE_SNIPPET: CodeSnippet = {\n filename: \"backend/shared.ts — Email interface\",\n code: `export interface Email {\n from: string;\n to: string[];\n cc?: string | string[];\n subject?: string;\n text?: string;\n html?: string;\n attachments: File[];\n headers: Record;\n}`,\n};\n\nconst INBOUND_SNIPPET: CodeSnippet = {\n filename: \"email.ts — inbound handler\",\n code: `import { type Email } from \"./backend/shared.ts\";\n\nexport default async function emailHandler(inbound: Email): Promise {\n console.log(\\`📧 From: \\${inbound.from} Subject: \\${inbound.subject}\\`);\n\n for (const file of inbound.attachments) {\n console.log(\\`📎 \\${file.name} (\\${file.size}b)\\`);\n // await blob.set(\\`emails/\\${file.name}\\`, await file.arrayBuffer());\n }\n}`,\n};\n\nconst OUTBOUND_SNIPPET: CodeSnippet = {\n filename: \"email.ts — sendNotification()\",\n code: `import { email as sendEmail } from \"https://esm.town/v/std/email\";\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}`,\n};\n\nconst RULE_ROWS: {\n rule: string;\n variant: \"info\" | \"neutral\" | \"purple\" | \"error\";\n detail: string;\n}[] = [\n { rule: \"Address shape\", variant: \"info\", detail: \".@valtown.email\" },\n {\n rule: \"Outbound plan\",\n variant: \"neutral\",\n detail: \"Free plan: send to yourself only. Pro: send to anyone + cc/bcc\",\n },\n {\n rule: \"Attachments\",\n variant: \"purple\",\n detail: \"Arrive as File objects — save to Blob if persistence needed\",\n },\n {\n rule: \"No auth on HTTP\",\n variant: \"error\",\n detail: \"Never expose email-sending via HTTP routes without auth\",\n },\n];\n\nexport function EmailPage() {\n const address = inboundEmailAddress();\n return (\n \n \n Email Inbox — AI spam triage, live\n \n Send a real email to the address below. Val Town's email trigger receives it, and this App\n runs it through a free GPT-mini model (no API key needed — see backend/ai.ts) that flags\n spam and writes a one-line summary of anything real.\n \n \n \n\n \n Your test address\n

\n \n {address\n ? (\n \n {address}\n \n )\n : (\n \n Set VAL_TOWN_USERNAME{\" \"}\n in this App's env vars to compute and show your live inbound address here.\n \n )}\n \n Send anything — a real message or a spammy-looking one — then hit refresh below.\n Triage usually lands within a few seconds.\n \n \n

\n \n\n \n\n \n Inbox — live, triaged by AI\n

\n \n \n

\n \n\n {\n /* Real Astryx-rendered row, never displayed — client.ts clones its\n per inbound email so dynamic rows get full Badge chrome.\n Status badge is swapped from the two pre-rendered variants below\n (not mutated in place) since Badge color is a StyleX class baked\n in at SSR time, not a runtime data-attribute. */\n }\n \n \n \n \n

\n \n \n

\n\n \n Key rules\n \n \n \n Rule\n Detail\n \n \n \n {RULE_ROWS.map((r) => (\n \n \n \n \n {r.detail}\n \n ))}\n \n

\n \n\n \n \n \n \n );\n}\n","/** @jsxImportSource https://esm.sh/react@19.2.0 */\n// page-mail.tsx — Email Inbox demo: send a real email, watch AI triage it\n// live. Trigger internals (address format, outbound limits, attachments)\n// live in the Docs section — this page stays demo-only.\n\nimport {\n Badge,\n Banner,\n Button,\n Heading,\n HStack,\n Section,\n Table,\n TableBody,\n TableCell,\n TableHeader,\n TableHeaderCell,\n TableRow,\n Text,\n VStack,\n} from \"../../astryx/components.ts\";\nimport { PageLinks } from \"../kit.tsx\";\nimport { inboundEmailAddress } from \"../../../backend/shared.ts\";\n\nconst LINKS = [\n { href: \"https://docs.val.town/vals/email/\", label: \"Email docs\" },\n { href: \"https://docs.val.town/reference/std/email/\", label: \"std/email reference\" },\n];\n\nexport function EmailPage() {\n const address = inboundEmailAddress();\n return (\n \n \n Email Inbox — AI spam triage, live\n \n Send a real email to the address below. Val Town's email trigger receives it, and this App\n runs it through a free GPT-mini model (no API key needed — see backend/ai.ts) that flags\n spam and writes a one-line summary of anything real.\n \n \n \n\n \n Your test address\n

\n \n\n \n\n \n Inbox — live, triaged by AI\n

\n \n \n

\n\n \n

Diff · v354