[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_371":372,"_373":374},"routes/_app.x.$handle.$name",{"_107":106,"_37":50,"_115":95,"_32":116,"_13":14,"_117":-5,"_11":118,"_119":120,"_121":122,"_123":124,"_125":126,"_26":-5,"_127":-5,"_128":129,"_130":30,"_131":132,"_133":64,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":-5},"project",{"_48":49,"_37":50,"_43":51,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":76,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":88,"_89":90,"_91":92,"_93":30},"version",7,"changes",[25],"aiChatInfo",{"_20":21,"_22":-5,"_23":-5,"_24":-5},"userId","aiChatMessageId","4d4561f0-5ed7-458b-ae65-4efe63f2ec9a","aiChatThreadId","aiChatThreadUserId","aiChatThreadTitle",{"_26":27,"_28":-7,"_29":30,"_31":30,"_32":33,"_34":33},"file",{"_35":36,"_37":38,"_39":40,"_41":42,"_43":44,"_45":14,"_46":47,"_29":30},"previous","deleted",false,"deletedHere","path","frontend/components/CameraButton.tsx","latestPath","fileId","783bb598-39cc-11f1-98fe-42b51c65c3df","name","CameraButton.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// Mobile-first \"take a selfie\" button. Renders a circular icon button that,\n// when tapped, opens the user-facing camera on iOS and Android. On desktop\n// browsers without a camera, it falls back to the normal file picker.\n//\n// Self-contained — only depends on useImageUpload. No knowledge of the chat.\n\nimport { useImageUpload } from \"../hooks/useImageUpload.ts\";\n\ninterface CameraButtonProps {\n /** Extra class names (e.g. for spacing / layout). */\n class?: string;\n /** Compact (icon only) or full (icon + label). Default: icon only. */\n variant?: \"icon\" | \"full\";\n}\n\nexport function CameraButton({ class: klass = \"\", variant = \"icon\" }: CameraButtonProps) {\n const { busy, error, status, inputRef, inputProps, openCamera } = useImageUpload();\n\n const label = status === \"compressing\"\n ? \"Processing…\"\n : status === \"uploading\"\n ? \"Uploading…\"\n : \"Selfie\";\n\n return (\n

\n {/* Hidden file input. Kept rendered so the ref stays stable. */}\n {\n inputRef.current = el;\n }}\n aria-hidden=\"true\"\n tabIndex={-1}\n />\n\n \n {busy ? : }\n {variant === \"full\" && {label}}\n \n\n {/* Tiny inline error toast — doesn't disrupt layout. */}\n {error && (\n \n {error}\n \n )}\n

\n );\n}\n\nfunction CameraIcon() {\n return (\n \n \n \n \n );\n}\n\nfunction Spinner() {\n return (\n \n \n \n );\n}\n","createdAt",["D",1776368577837],"branchVersion","branchId","3e54b118-39cc-11f1-8e94-42b51c65c3df","id","de221b10-39ca-11f1-82c2-42b51c65c3df","beyond-text-3",["D",1776367889779],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019d97c6-edc7-722c-8966-3d4dbbbae3b1","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","tursoName","de221b1039ca11f182c242b51c65c3df","tursoHostname","de221b1039ca11f182c242b51c65c3df-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789510872811],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_107":106,"_114":110},"org",{"_107":106,"_108":-5,"_109":110,"_19":60,"_111":112,"_113":30},"branch",{"_13":94,"_37":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":49,"_103":70,"_104":50,"_105":106},"isOwned",19,"add-image-upload","projectId","forkedBranchId","de2690be-39ca-11f1-82c2-42b51c65c3df","forkedBranchVersion",21,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","stevekrouse","handle","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_48":49,"_37":50,"_43":366,"_52":-5,"_53":30,"_54":55,"_56":55,"_57":58,"_59":-5,"_19":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":68,"_69":70,"_71":72,"_73":74,"_75":367,"_77":-5,"_78":79,"_80":79,"_81":82,"_83":82,"_84":82,"_85":79,"_86":79,"_87":368,"_89":369,"_91":370,"_93":30},"tree",[201,203,206,220,223,224],"files",[201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218,219,220,221,222,223,224],"counts",{"_190":68,"_191":192,"_193":68,"_194":195,"_196":197},"contents",[144,145,146,147,148,149],"upstreamProject","upstreamBranch",{"_48":98,"_43":138,"_139":140,"_37":141,"_96":49,"_13":100,"_97":-5,"_99":-5,"_142":143,"_52":-5,"_93":30,"_54":55,"_105":106,"_69":70,"_104":50},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1776367889779],"updatedAt",["D",1776368994041],"main","lockfileKey","1764013157902-esm.town_v_std_reactHonoStarter@72-main",{"_48":184,"_37":185,"_35":186,"_153":-5,"_46":47,"_45":187,"_155":64,"_43":188,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_32":189},{"_48":179,"_37":180,"_35":181,"_153":-5,"_46":47,"_45":157,"_155":64,"_43":182,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_32":183},{"_48":174,"_37":175,"_35":176,"_153":-5,"_46":47,"_45":157,"_155":64,"_43":177,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_32":178},{"_48":168,"_37":169,"_35":170,"_153":-5,"_46":47,"_45":157,"_155":64,"_43":171,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_32":173},{"_48":162,"_37":163,"_35":164,"_153":-5,"_46":47,"_45":157,"_155":64,"_43":165,"_13":68,"_39":26,"_41":166,"_29":30,"_160":-5,"_32":167},{"_48":150,"_37":151,"_35":152,"_153":-5,"_46":47,"_45":154,"_155":64,"_43":156,"_13":157,"_39":158,"_41":159,"_29":30,"_160":-5,"_32":161},"5c3d6e2c-39cc-11f1-8e94-42b51c65c3df","index.ts","019d97cf-f1d3-767a-8e7a-af73a824fb34","parentId",5,"latest",["D",1776368530863],1,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport {\n insertMessage,\n listMessagesSince,\n listRecentMessages,\n} from \"./database/db.ts\";\nimport { imagesRoutes } from \"./api/images.ts\";\n\nconst app = new Hono();\n\n// Image-upload feature lives in api/images.ts so it can be merged independently.\napp.route(\"/\", imagesRoutes);\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// GET /api/messages — fetch most recent messages (initial load)\napp.get(\"/api/messages\", async (c) => {\n const messages = await listRecentMessages(100);\n return c.json({ messages });\n});\n\n// POST /api/messages — create a new message\napp.post(\"/api/messages\", async (c) => {\n let body: { text?: unknown };\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Invalid JSON\" }, 400);\n }\n const text = typeof body.text === \"string\" ? body.text.trim() : \"\";\n if (!text) return c.json({ error: \"Message text is required\" }, 400);\n if (text.length > 2000) {\n return c.json({ error: \"Message too long (max 2000 chars)\" }, 400);\n }\n const message = await insertMessage(text);\n return c.json({ message });\n});\n\n// GET /api/stream — Server-Sent Events stream of new messages\n// Clients pass ?sinceId=N (or Last-Event-ID header on reconnect) to resume from\n// the last message they saw. The server polls the DB periodically and pushes\n// any new messages. On connection death, the browser's EventSource auto-reconnects.\napp.get(\"/api/stream\", (c) => {\n const url = new URL(c.req.url);\n const lastEventId = c.req.header(\"last-event-id\");\n const sinceParam = url.searchParams.get(\"sinceId\");\n let sinceId = Number(lastEventId ?? sinceParam ?? 0);\n if (!Number.isFinite(sinceId) || sinceId < 0) sinceId = 0;\n\n // Keep streams reasonably short-lived so stale connections don't linger forever.\n // The browser EventSource will auto-reconnect.\n const MAX_STREAM_MS = 5 * 60 * 1000; // 5 minutes\n const POLL_INTERVAL_MS = 1500;\n const HEARTBEAT_INTERVAL_MS = 20_000;\n\n const encoder = new TextEncoder();\n const stream = new ReadableStream({\n async start(controller) {\n let closed = false;\n const startedAt = Date.now();\n\n const safeEnqueue = (chunk: string) => {\n if (closed) return;\n try {\n controller.enqueue(encoder.encode(chunk));\n } catch {\n closed = true;\n }\n };\n\n // Tell the browser to wait 2s before reconnecting.\n safeEnqueue(`retry: 2000\\n\\n`);\n // Initial comment so the connection is flushed immediately.\n safeEnqueue(`: connected\\n\\n`);\n\n let lastHeartbeat = Date.now();\n\n // Abort signal from the client disconnecting\n c.req.raw.signal.addEventListener(\"abort\", () => {\n closed = true;\n try {\n controller.close();\n } catch { /* ignore */ }\n });\n\n try {\n while (!closed) {\n // Fetch new messages since the last id we sent.\n let newMessages;\n try {\n newMessages = await listMessagesSince(sinceId);\n } catch (err) {\n console.error(\"SSE poll error:\", err);\n newMessages = [];\n }\n\n for (const msg of newMessages) {\n const data = JSON.stringify(msg);\n safeEnqueue(`id: ${msg.id}\\nevent: message\\ndata: ${data}\\n\\n`);\n sinceId = msg.id;\n }\n\n // Heartbeat so proxies / load balancers don't close the connection.\n if (Date.now() - lastHeartbeat > HEARTBEAT_INTERVAL_MS) {\n safeEnqueue(`: heartbeat\\n\\n`);\n lastHeartbeat = Date.now();\n }\n\n // Gracefully close after MAX_STREAM_MS so the client reconnects to a\n // fresh isolate. EventSource handles this transparently.\n if (Date.now() - startedAt > MAX_STREAM_MS) {\n closed = true;\n break;\n }\n\n await new Promise((r) => setTimeout(r, POLL_INTERVAL_MS));\n }\n } finally {\n try {\n controller.close();\n } catch { /* ignore */ }\n }\n },\n });\n\n return new Response(stream, {\n headers: {\n \"content-type\": \"text/event-stream; charset=utf-8\",\n \"cache-control\": \"no-cache, no-transform\",\n \"connection\": \"keep-alive\",\n \"x-accel-buffering\": \"no\",\n },\n });\n});\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","label",[151],"3e5d1c72-39cc-11f1-8e94-42b51c65c3df","README.md","019d97cf-f1d3-767a-8e7a-ab0b46fdb00f",["D",1776368480732],"# Chat\n\nA realtime chat app. Messages are stored in Val Town SQLite and delivered to\nclients via Server-Sent Events over a single long-lived HTTP connection per\nclient. Optimized for mobile + desktop.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts (Hono)\"]\n Hono -->|serves| HTML[\"frontend/index.html\"]\n HTML -->|loads| Entry[\"frontend/index.tsx\"]\n Entry -->|renders| App[\"components/App.tsx\"]\n App -->|useMessages| Hook[\"hooks/useMessages.ts\"]\n Hook -->|\"GET /api/messages (initial load)\"| API[\"index.ts API routes\"]\n Hook -->|\"POST /api/messages (send)\"| API\n Hook -->|\"GET /api/stream (SSE, long-lived)\"| API\n API -->|read / write| DB[(\"SQLite
messages_v1\")]\n API -->|\"SSE: id, event, data\"| Hook\n```\n\n## How realtime works\n\n- Client opens **one** SSE connection to `GET /api/stream?sinceId=N`.\n- Server polls SQLite every ~1.5s for rows with `id > lastSent` and pushes\n each new row as an SSE `message` event (with the row id as the event id).\n- Server closes the stream after 5 minutes; the browser's `EventSource`\n automatically reconnects and resumes from `Last-Event-ID`. This keeps\n individual isolates from piling up while preserving delivery semantics.\n- Heartbeat comments are sent every 20s so intermediaries don't drop idle\n connections.\n- POSTing a message only inserts into SQLite — the SSE stream delivers it,\n so there's a single source of truth and no dedup logic needed on the client.\n\n## File structure\n\n```\nindex.ts ← Hono server + /api routes + SSE stream\ndatabase/db.ts ← SQLite schema + queries\nshared/types.ts ← Message type shared by client & server\nfrontend/\n index.html ← Shell (full-height, viewport-fit=cover for mobile)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Layout + status dot\n MessageList.tsx ← Renders messages (no auto-scroll)\n MessageInput.tsx ← Input + Send (no auto-focus)\n hooks/\n useMessages.ts ← Initial load + SSE subscription + send\n```\n\n## Design choices\n\n- **No auto-scroll**, **no auto-focus** on the input — per spec.\n- **Mobile friendly**: `100dvh` layout, `font-size: 16px` on input to prevent\n iOS zoom-on-focus, `overscroll-behavior: none` on body.\n- **Rounded pill send button** with disabled state when the input is empty.\n- Messages never delete; `messages_v1` table is append-only.\n",[163],"3e5cf4a4-39cc-11f1-8e94-42b51c65c3df","shared","019d97cf-f1d3-767a-8e7a-a44d1988cafd",["D",1776368480732],"directory",[169],"3e5cf17a-39cc-11f1-8e94-42b51c65c3df","frontend","019d97cf-f1d3-767a-8e7a-9f8347a84e4d",["D",1776368480732],[175],"3e5c2542-39cc-11f1-8e94-42b51c65c3df","database","019d97cf-f1d3-767a-8e7a-6eb264e5db1b",["D",1776368480732],[180],"585957bc-39cc-11f1-ac05-42b51c65c3df","api","b7449592-54f0-4a20-a06b-371fb0fc7533",4,["D",1776368524338],[185],"pulls","branches",3,"forks","envVars",{"_198":68,"_200":68},"connections",{"_198":68,"_199":68},"count","unfilledCount","emptyCount",{"_48":184,"_37":185,"_35":186,"_153":-5,"_46":47,"_45":187,"_155":64,"_43":363,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_226":364,"_32":365},{"_48":357,"_37":341,"_35":358,"_153":186,"_46":47,"_45":187,"_155":64,"_43":359,"_13":68,"_39":40,"_41":360,"_29":30,"_160":-5,"_226":361,"_32":362},{"_48":179,"_37":180,"_35":181,"_153":-5,"_46":47,"_45":157,"_155":64,"_43":354,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_226":355,"_32":356},{"_48":347,"_37":348,"_35":349,"_153":181,"_46":47,"_45":157,"_155":64,"_43":350,"_13":68,"_39":40,"_41":351,"_29":30,"_160":-5,"_226":352,"_32":353},{"_48":340,"_37":341,"_35":342,"_153":181,"_46":47,"_45":192,"_155":64,"_43":343,"_13":68,"_39":40,"_41":344,"_29":30,"_160":-5,"_226":345,"_32":346},{"_48":174,"_37":175,"_35":176,"_153":-5,"_46":47,"_45":157,"_155":64,"_43":337,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_226":338,"_32":339},{"_48":333,"_37":300,"_35":295,"_153":176,"_46":47,"_45":157,"_155":64,"_43":334,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_226":335,"_32":336},{"_48":326,"_37":327,"_35":328,"_153":295,"_46":47,"_45":157,"_155":30,"_43":329,"_13":68,"_39":40,"_41":330,"_29":30,"_160":-5,"_226":331,"_32":332},{"_48":322,"_37":38,"_35":36,"_153":295,"_46":47,"_45":14,"_155":64,"_43":323,"_13":68,"_39":40,"_41":42,"_29":30,"_160":-5,"_226":324,"_32":325},{"_48":315,"_37":316,"_35":317,"_153":295,"_46":47,"_45":157,"_155":64,"_43":318,"_13":68,"_39":40,"_41":319,"_29":30,"_160":-5,"_226":320,"_32":321},{"_48":308,"_37":309,"_35":310,"_153":295,"_46":47,"_45":157,"_155":64,"_43":311,"_13":68,"_39":40,"_41":312,"_29":30,"_160":-5,"_226":313,"_32":314},{"_48":301,"_37":302,"_35":303,"_153":295,"_46":47,"_45":157,"_155":64,"_43":304,"_13":68,"_39":40,"_41":305,"_29":30,"_160":-5,"_226":306,"_32":307},{"_48":292,"_37":293,"_35":294,"_153":295,"_46":47,"_45":157,"_155":30,"_43":296,"_13":68,"_39":40,"_41":297,"_29":30,"_160":-5,"_226":298,"_32":299},{"_48":288,"_37":279,"_35":274,"_153":176,"_46":47,"_45":157,"_155":64,"_43":289,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_226":290,"_32":291},{"_48":280,"_37":281,"_35":282,"_153":274,"_46":47,"_45":283,"_155":30,"_43":284,"_13":68,"_39":40,"_41":285,"_29":30,"_160":-5,"_226":286,"_32":287},{"_48":271,"_37":272,"_35":273,"_153":274,"_46":47,"_45":157,"_155":64,"_43":275,"_13":68,"_39":40,"_41":276,"_29":30,"_160":-5,"_226":277,"_32":278},{"_48":264,"_37":265,"_35":266,"_153":176,"_46":47,"_45":157,"_155":64,"_43":267,"_13":68,"_39":26,"_41":268,"_29":30,"_160":-5,"_226":269,"_32":270},{"_48":257,"_37":258,"_35":259,"_153":176,"_46":47,"_45":157,"_155":30,"_43":260,"_13":68,"_39":26,"_41":261,"_29":30,"_160":-5,"_226":262,"_32":263},{"_48":250,"_37":251,"_35":252,"_153":176,"_46":47,"_45":157,"_155":64,"_43":253,"_13":68,"_39":40,"_41":254,"_29":30,"_160":-5,"_226":255,"_32":256},{"_48":168,"_37":169,"_35":170,"_153":-5,"_46":47,"_45":157,"_155":64,"_43":247,"_13":68,"_39":172,"_41":-5,"_29":30,"_160":-5,"_226":248,"_32":249},{"_48":239,"_37":240,"_35":241,"_153":170,"_46":47,"_45":242,"_155":64,"_43":243,"_13":68,"_39":40,"_41":244,"_29":30,"_160":-5,"_226":245,"_32":246},{"_48":232,"_37":233,"_35":234,"_153":170,"_46":47,"_45":157,"_155":64,"_43":235,"_13":68,"_39":40,"_41":236,"_29":30,"_160":-5,"_226":237,"_32":238},{"_48":162,"_37":163,"_35":164,"_153":-5,"_46":47,"_45":157,"_155":64,"_43":229,"_13":68,"_39":26,"_41":166,"_29":30,"_160":-5,"_226":230,"_32":231},{"_48":150,"_37":151,"_35":152,"_153":-5,"_46":47,"_45":154,"_155":64,"_43":225,"_13":157,"_39":158,"_41":159,"_29":30,"_160":-5,"_226":227,"_32":228},["D",1776368530863],"children",[],[151],["D",1776368480732],[],[163],"3e5cf2ce-39cc-11f1-8e94-42b51c65c3df","types.ts","019d97cf-f1d3-767a-8e7a-a10854c10570",["D",1776368480732],"export interface Message {\n id: number;\n text: string;\n createdAt: string; // ISO timestamp\n}\n",[],[169,233],"429192a0-39cc-11f1-8b4a-42b51c65c3df","image-types.ts","4291934a-39cc-11f1-8b4a-42b51c65c3df",2,["D",1776368487801],"// Types for image upload feature.\n// Kept in a SEPARATE file from shared/types.ts so edits here don't conflict\n// with concurrent work on the core Message type.\n\nexport interface ChatImage {\n id: number;\n mimeType: string;\n width: number | null;\n height: number | null;\n createdAt: string; // ISO timestamp\n url: string; // public URL to fetch image bytes\n}\n\n// Upload-related constants shared between client and server.\nexport const IMAGE_UPLOAD_MAX_BYTES = 8 * 1024 * 1024; // 8 MB\nexport const IMAGE_ALLOWED_MIME_TYPES = [\n \"image/jpeg\",\n \"image/png\",\n \"image/webp\",\n \"image/heic\",\n \"image/heif\",\n] as const;\n\nexport type ImageMimeType = typeof IMAGE_ALLOWED_MIME_TYPES[number];\n",[],[169,240],["D",1776368480732],[221,222],[169],"3e5cee3c-39cc-11f1-8e94-42b51c65c3df","index.tsx","019d97cf-f1d3-767a-8e7a-9a8f28182d4e",["D",1776368480732],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[175,251],"3e5ce748-39cc-11f1-8e94-42b51c65c3df","index.html","019d97cf-f1d3-767a-8e7a-96f8beb77609",["D",1776368480732],"\n\n \n \n \n Chat\n \n \n \n \n \n

\n \n \n \n\n",[],[175,258],"3e5ce3ba-39cc-11f1-8e94-42b51c65c3df","favicon.svg","019d97cf-f1d3-767a-8e7a-90a9c58662b2",["D",1776368480732],"\n",[],[175,265],"3e5cb39a-39cc-11f1-8e94-42b51c65c3df","useMessages.ts","019d97cf-f1d3-767a-8e7a-8bab3cd4f6b1","019d97cf-f1d3-767a-8e7a-8def400a1b34",["D",1776368480732],"import { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../../shared/types.ts\";\n\ntype Status = \"connecting\" | \"open\" | \"closed\";\n\nexport function useMessages() {\n const [messages, setMessages] = useState([]);\n const [status, setStatus] = useState(\"connecting\");\n const lastIdRef = useRef(0);\n\n useEffect(() => {\n let cancelled = false;\n let es: EventSource | null = null;\n\n // Helper to merge a new message in (dedup by id, keep chronological order).\n function appendMessage(msg: Message) {\n setMessages((prev) => {\n if (prev.some((m) => m.id === msg.id)) return prev;\n // Fast path: append if newer than the last one.\n const last = prev[prev.length - 1];\n if (!last || msg.id > last.id) return [...prev, msg];\n // Slow path: insert in order.\n const next = [...prev, msg];\n next.sort((a, b) => a.id - b.id);\n return next;\n });\n if (msg.id > lastIdRef.current) lastIdRef.current = msg.id;\n }\n\n function connectStream() {\n if (cancelled) return;\n setStatus(\"connecting\");\n // EventSource uses Last-Event-ID automatically on reconnect, but we also\n // pass sinceId explicitly for the first connection.\n const url = `/api/stream?sinceId=${lastIdRef.current}`;\n es = new EventSource(url);\n\n es.addEventListener(\"open\", () => {\n if (!cancelled) setStatus(\"open\");\n });\n\n es.addEventListener(\"message\", (e: MessageEvent) => {\n try {\n const msg = JSON.parse(e.data) as Message;\n appendMessage(msg);\n } catch (err) {\n console.error(\"Failed to parse SSE message:\", err);\n }\n });\n\n es.addEventListener(\"error\", () => {\n if (cancelled) return;\n setStatus(\"closed\");\n // EventSource auto-reconnects on its own, but our server intentionally\n // closes the stream every few minutes. The browser will reconnect using\n // the retry delay the server sent. We don't need to do anything here.\n });\n }\n\n // Initial fetch: get the most recent messages, then open the stream starting\n // from the latest id so we don't double-load.\n (async () => {\n try {\n const res = await fetch(\"/api/messages\");\n if (!res.ok) throw new Error(`HTTP ${res.status}`);\n const data = (await res.json()) as { messages: Message[] };\n if (cancelled) return;\n setMessages(data.messages);\n const last = data.messages[data.messages.length - 1];\n if (last) lastIdRef.current = last.id;\n } catch (err) {\n console.error(\"Failed to load initial messages:\", err);\n } finally {\n if (!cancelled) connectStream();\n }\n })();\n\n return () => {\n cancelled = true;\n es?.close();\n };\n }, []);\n\n async function sendMessage(text: string) {\n const res = await fetch(\"/api/messages\", {\n method: \"POST\",\n headers: { \"content-type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n if (!res.ok) {\n const err = await res.json().catch(() => ({ error: \"Unknown error\" }));\n throw new Error(err.error ?? \"Failed to send message\");\n }\n // We intentionally don't append here — the SSE stream will deliver it,\n // which keeps the \"source of truth\" single and avoids duplicate rendering.\n }\n\n return { messages, status, sendMessage };\n}\n",[],[175,279,272],"hooks","6fd7fa38-39cc-11f1-ae12-42b51c65c3df","useImageUpload.ts","6fd7fae2-39cc-11f1-ae12-42b51c65c3df",6,["D",1776368563749],"// Hook that manages camera capture → compress → upload flow.\n//\n// Self-contained: doesn't know about messages or the chat UI. Just exposes a\n// `pickAndUpload` function that opens the device camera and uploads the result.\n// The backend also inserts a chat message for the image, so the SSE stream the\n// main-branch agent built will deliver the new message to every client.\n\nimport { useCallback, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { ChatImage } from \"../../shared/image-types.ts\";\nimport {\n IMAGE_ALLOWED_MIME_TYPES,\n IMAGE_UPLOAD_MAX_BYTES,\n} from \"../../shared/image-types.ts\";\n\nexport type UploadStatus = \"idle\" | \"compressing\" | \"uploading\" | \"error\";\n\ninterface UseImageUploadResult {\n /** True while compressing or uploading. */\n busy: boolean;\n /** Most recent error message (cleared when a new upload starts). */\n error: string | null;\n /** Status of the current / most recent upload. */\n status: UploadStatus;\n /** Hidden ref — render and attach with the helper below. */\n inputRef: { current: HTMLInputElement | null };\n /** Props to spread onto a hidden . */\n inputProps: {\n type: \"file\";\n accept: string;\n capture: \"user\";\n onChange: (e: Event) => void;\n style: Record;\n };\n /** Programmatically open the camera (call from a button's onClick). */\n openCamera: () => void;\n}\n\n// Compress in the browser before upload: shrinks big iPhone photos (5-10 MB)\n// down to a reasonable size, which also avoids hitting IMAGE_UPLOAD_MAX_BYTES.\nconst MAX_DIMENSION = 1600;\nconst JPEG_QUALITY = 0.82;\n\nasync function compressImage(file: File): Promise {\n // If already tiny and JPEG-ish, don't bother re-encoding.\n if (file.size < 500_000 && /jpeg|jpg|webp|png/i.test(file.type)) {\n return file;\n }\n\n const bitmap = await createBitmap(file);\n const { width, height } = fitWithin(bitmap.width, bitmap.height, MAX_DIMENSION);\n\n const canvas = document.createElement(\"canvas\");\n canvas.width = width;\n canvas.height = height;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) throw new Error(\"Canvas 2D context unavailable\");\n ctx.drawImage(bitmap, 0, 0, width, height);\n\n // Release bitmap early on supported browsers.\n if (\"close\" in bitmap && typeof (bitmap as any).close === \"function\") {\n (bitmap as any).close();\n }\n\n const blob: Blob = await new Promise((resolve, reject) => {\n canvas.toBlob(\n (b) => (b ? resolve(b) : reject(new Error(\"toBlob returned null\"))),\n \"image/jpeg\",\n JPEG_QUALITY,\n );\n });\n\n return new File([blob], \"selfie.jpg\", { type: \"image/jpeg\" });\n}\n\nasync function createBitmap(file: File): Promise {\n // createImageBitmap handles EXIF orientation on most modern browsers.\n if (typeof createImageBitmap === \"function\") {\n try {\n return await createImageBitmap(file, { imageOrientation: \"from-image\" } as any);\n } catch {\n // Fall through to -based path.\n }\n }\n // Fallback: load via .\n const url = URL.createObjectURL(file);\n try {\n const img = new Image();\n img.decoding = \"async\";\n await new Promise((resolve, reject) => {\n img.onload = () => resolve();\n img.onerror = () => reject(new Error(\"Image decode failed\"));\n img.src = url;\n });\n return img;\n } finally {\n // Revoke after a tick so the drawImage call can still use it.\n setTimeout(() => URL.revokeObjectURL(url), 0);\n }\n}\n\nfunction fitWithin(w: number, h: number, max: number) {\n if (w <= max && h <= max) return { width: w, height: h };\n if (w >= h) {\n return { width: max, height: Math.round((h / w) * max) };\n }\n return { width: Math.round((w / h) * max), height: max };\n}\n\nexport function useImageUpload(\n onUploaded?: (image: ChatImage) => void,\n): UseImageUploadResult {\n const [status, setStatus] = useState(\"idle\");\n const [error, setError] = useState(null);\n const inputRef = useRef(null);\n\n const handleChange = useCallback(async (e: Event) => {\n const input = e.target as HTMLInputElement;\n const file = input.files?.[0];\n // Reset the input so the same file can be picked again.\n input.value = \"\";\n if (!file) return;\n\n setError(null);\n\n try {\n setStatus(\"compressing\");\n const compressed = await compressImage(file);\n if (compressed.size > IMAGE_UPLOAD_MAX_BYTES) {\n throw new Error(\"Image is too large after compression. Try again.\");\n }\n\n setStatus(\"uploading\");\n const fd = new FormData();\n fd.append(\"image\", compressed, compressed.name || \"selfie.jpg\");\n\n const res = await fetch(\"/api/images\", {\n method: \"POST\",\n body: fd,\n });\n if (!res.ok) {\n const body = await res.json().catch(() => ({ error: `HTTP ${res.status}` }));\n throw new Error(body.error ?? `Upload failed (${res.status})`);\n }\n const data = (await res.json()) as { image: ChatImage };\n setStatus(\"idle\");\n onUploaded?.(data.image);\n } catch (err: any) {\n console.error(\"Image upload failed:\", err);\n setError(err?.message ?? \"Upload failed\");\n setStatus(\"error\");\n }\n }, [onUploaded]);\n\n const openCamera = useCallback(() => {\n inputRef.current?.click();\n }, []);\n\n const inputProps: UseImageUploadResult[\"inputProps\"] = {\n type: \"file\",\n // Accept all common camera-capture types. Server validates & normalizes.\n accept: IMAGE_ALLOWED_MIME_TYPES.join(\",\") + \",image/*\",\n // On iOS/Android this hints to open the front-facing camera directly.\n capture: \"user\",\n onChange: handleChange,\n style: {\n position: \"absolute\",\n width: \"1px\",\n height: \"1px\",\n padding: \"0\",\n margin: \"-1px\",\n overflow: \"hidden\",\n clip: \"rect(0,0,0,0)\",\n whiteSpace: \"nowrap\",\n border: \"0\",\n },\n };\n\n const busy = status === \"compressing\" || status === \"uploading\";\n\n return { busy, error, status, inputRef, inputProps, openCamera };\n}\n",[],[175,279,281],"3e5ce1da-39cc-11f1-8e94-42b51c65c3df",["D",1776368480732],[215,216],[175,279],"3e5c81c2-39cc-11f1-8e94-42b51c65c3df","QRBackground.tsx","019d97cf-f1d3-767a-8e7a-80f4c8d3f3b7","019d97cf-f1d3-767a-8e7a-878d8266e908",["D",1776368480732],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n// qrcode-generator is tiny (~10KB) and has no deps.\nimport qrcode from \"https://esm.sh/qrcode-generator@1.4.4\";\n\ninterface QRData {\n modules: boolean[][]; // size x size grid of on/off\n size: number;\n url: string;\n}\n\nexport function QRBackground() {\n const [qr, setQr] = useState(null);\n\n useEffect(() => {\n // Use the current page URL (origin + pathname) so scanners land on the chat.\n const url = window.location.origin + window.location.pathname;\n\n // typeNumber=0 auto-picks smallest version that fits; \"M\" error correction (~15%).\n const generator = qrcode(0, \"M\");\n generator.addData(url);\n generator.make();\n\n const size = generator.getModuleCount();\n const modules: boolean[][] = [];\n for (let row = 0; row < size; row++) {\n const rowArr: boolean[] = [];\n for (let col = 0; col < size; col++) {\n rowArr.push(generator.isDark(row, col));\n }\n modules.push(rowArr);\n }\n\n setQr({ modules, size, url });\n }, []);\n\n if (!qr) return null;\n\n // Build a single path data string for all dark modules (more efficient than\n // N individual s).\n const pathData = qr.modules\n .flatMap((row, r) =>\n row.map((on, c) => (on ? `M${c},${r}h1v1h-1z` : \"\"))\n )\n .join(\"\");\n\n return (\n \n

\n \n \n \n

\n {qr.url}\n

\n \n );\n}\n",[],[175,300,293],"components","3e5c78d0-39cc-11f1-8e94-42b51c65c3df","MessageList.tsx","019d97cf-f1d3-767a-8e7a-7f1969a867e7",["D",1776368480732],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { Message } from \"../../shared/types.ts\";\n\ninterface MessageListProps {\n messages: Message[];\n}\n\nfunction formatTime(iso: string): string {\n const date = new Date(iso);\n return date.toLocaleTimeString([], { hour: \"numeric\", minute: \"2-digit\" });\n}\n\nexport function MessageList({ messages }: MessageListProps) {\n if (messages.length === 0) {\n return (\n

\n No messages yet. Say hi!\n

\n );\n }\n\n return (\n

\n {messages.map((msg) => (\n \n

\n {msg.text}\n

{formatTime(msg.createdAt)}

\n ))}\n \n );\n}\n",[],[175,300,302],"3e5c3b0e-39cc-11f1-8e94-42b51c65c3df","MessageInput.tsx","019d97cf-f1d3-767a-8e7a-7816d962caef",["D",1776368480732],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface MessageInputProps {\n onSubmit: (text: string) => void | Promise;\n disabled?: boolean;\n}\n\nexport function MessageInput({ onSubmit, disabled }: MessageInputProps) {\n const [text, setText] = useState(\"\");\n const [sending, setSending] = useState(false);\n\n async function handleSubmit(e: Event) {\n e.preventDefault();\n const trimmed = text.trim();\n if (!trimmed || sending) return;\n setSending(true);\n try {\n await onSubmit(trimmed);\n setText(\"\");\n } finally {\n setSending(false);\n }\n }\n\n return (\n \n setText(e.target.value)}\n placeholder=\"Type a message...\"\n disabled={disabled || sending}\n class=\"flex-1 min-w-0 px-3 py-2 border border-gray-300 rounded-full text-base focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent disabled:bg-gray-100\"\n // Prevent iOS from zooming in on focus (font-size >= 16px handles this, text-base is 16px)\n />\n \n Send\n \n \n );\n}\n",[],[175,300,309],"3e5c3654-39cc-11f1-8e94-42b51c65c3df","Counter.tsx","019d97cf-f1d3-767a-8e7a-7716e46bad8e",["D",1776368480732],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[175,300,316],"783bb49e-39cc-11f1-98fe-42b51c65c3df",["D",1776368577837],[],[175,300,38],"3e5c284e-39cc-11f1-8e94-42b51c65c3df","App.tsx","019d97cf-f1d3-767a-8e7a-73791c869364",["D",1776368480732],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMessages } from \"../hooks/useMessages.ts\";\nimport { MessageInput } from \"./MessageInput.tsx\";\nimport { MessageList } from \"./MessageList.tsx\";\nimport { QRBackground } from \"./QRBackground.tsx\";\n\nexport function App() {\n const { messages, status, sendMessage } = useMessages();\n\n return (\n

\n {/* Faded QR code background so folks watching the talk can scan to join */}\n \n\n {/* Chat UI sits above the QR. Header/input are solid; the message area is\n transparent so the QR shows through when the chat is empty or sparse. */}\n

Chat

\n \n

\n \n view source\n \n

\n\n

\n \n

\n\n

\n \n

\n );\n}\n\nfunction StatusDot({ status }: { status: \"connecting\" | \"open\" | \"closed\" }) {\n const color = status === \"open\"\n ? \"bg-green-500\"\n : status === \"connecting\"\n ? \"bg-yellow-400\"\n : \"bg-gray-400\";\n const label = status === \"open\"\n ? \"Connected\"\n : status === \"connecting\"\n ? \"Connecting...\"\n : \"Reconnecting...\";\n return (\n \n \n \n \n );\n}\n",[],[175,300,327],"3e5cb05c-39cc-11f1-8e94-42b51c65c3df",["D",1776368480732],[208,209,210,211,212,213],[175,300],["D",1776368480732],[207,214,217,218,219],[175],"4b5c3160-39cc-11f1-9cf5-42b51c65c3df","images.ts","4b5c3250-39cc-11f1-9cf5-42b51c65c3df",["D",1776368502554],"// Database + blob storage helpers for uploaded chat images.\n//\n// Design: image BYTES live in Val Town blob storage (cheap & large-capacity),\n// metadata lives in its own SQLite table `chat_images_v1`. This is fully\n// orthogonal to the `messages_v1` table — no shared schema, no migrations\n// needed on the existing table.\n\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { ChatImage } from \"../shared/image-types.ts\";\n\nconst TABLE_NAME = \"chat_images_v1\";\nconst BLOB_PREFIX = \"chat-images/v1/\";\n\nlet initialized = false;\nasync function ensureSchema() {\n if (initialized) return;\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n blob_key TEXT NOT NULL,\n mime_type TEXT NOT NULL,\n width INTEGER,\n height INTEGER,\n byte_size INTEGER NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n initialized = true;\n}\n\nfunction blobKeyFor(id: number): string {\n return `${BLOB_PREFIX}${id}`;\n}\n\nfunction rowToChatImage(row: Record): ChatImage {\n const createdAtRaw = String(row.created_at);\n const createdAt = createdAtRaw.includes(\"T\")\n ? createdAtRaw\n : new Date(createdAtRaw.replace(\" \", \"T\") + \"Z\").toISOString();\n const id = Number(row.id);\n return {\n id,\n mimeType: String(row.mime_type),\n width: row.width == null ? null : Number(row.width),\n height: row.height == null ? null : Number(row.height),\n createdAt,\n url: `/api/images/${id}`,\n };\n}\n\nexport interface InsertImageArgs {\n bytes: Uint8Array;\n mimeType: string;\n width?: number | null;\n height?: number | null;\n}\n\nexport async function insertImage(args: InsertImageArgs): Promise {\n await ensureSchema();\n // Insert metadata first to get an auto-generated id. We use a placeholder\n // blob_key and update it to the id-based key once we know the id. This keeps\n // blob keys stable and predictable.\n const placeholderKey = `${BLOB_PREFIX}pending-${crypto.randomUUID()}`;\n const res = await sqlite.execute({\n sql: `INSERT INTO ${TABLE_NAME} (blob_key, mime_type, width, height, byte_size)\n VALUES (?, ?, ?, ?, ?)\n RETURNING id, blob_key, mime_type, width, height, created_at`,\n args: [\n placeholderKey,\n args.mimeType,\n args.width ?? null,\n args.height ?? null,\n args.bytes.byteLength,\n ],\n });\n const row = (res.rows as Record[])[0];\n const id = Number(row.id);\n const finalKey = blobKeyFor(id);\n\n // Write bytes to blob storage.\n await blob.set(finalKey, args.bytes);\n\n // Swap placeholder key for the real one.\n await sqlite.execute({\n sql: `UPDATE ${TABLE_NAME} SET blob_key = ? WHERE id = ?`,\n args: [finalKey, id],\n });\n\n return rowToChatImage({ ...row, blob_key: finalKey });\n}\n\nexport async function getImageMeta(id: number): Promise<\n { mimeType: string; blobKey: string } | null\n> {\n await ensureSchema();\n const res = await sqlite.execute({\n sql: `SELECT mime_type, blob_key FROM ${TABLE_NAME} WHERE id = ?`,\n args: [id],\n });\n const row = (res.rows as Record[])[0];\n if (!row) return null;\n return {\n mimeType: String(row.mime_type),\n blobKey: String(row.blob_key),\n };\n}\n\nexport async function getImageBytes(blobKey: string): Promise {\n const b = await blob.get(blobKey);\n const buf = await b.arrayBuffer();\n return new Uint8Array(buf);\n}\n",[],[180,341],"3e5bdf10-39cc-11f1-8e94-42b51c65c3df","db.ts","019d97cf-f1d3-767a-8e7a-69a94e3c615d",["D",1776368480732],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { Message } from \"../shared/types.ts\";\n\n// Bump this when making breaking schema changes (safer than migrating in place).\nconst TABLE_NAME = \"messages_v1\";\n\nlet initialized = false;\nasync function ensureSchema() {\n if (initialized) return;\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n initialized = true;\n}\n\nfunction rowToMessage(row: Record): Message {\n // Normalize created_at (\"YYYY-MM-DD HH:MM:SS\" from sqlite) into ISO UTC.\n const createdAtRaw = String(row.created_at);\n const createdAt = createdAtRaw.includes(\"T\")\n ? createdAtRaw\n : new Date(createdAtRaw.replace(\" \", \"T\") + \"Z\").toISOString();\n return {\n id: Number(row.id),\n text: String(row.text),\n createdAt,\n };\n}\n\nexport async function listRecentMessages(limit = 100): Promise {\n await ensureSchema();\n // Fetch the most recent N, then return them in chronological order (oldest first).\n const res = await sqlite.execute({\n sql:\n `SELECT id, text, created_at FROM ${TABLE_NAME} ORDER BY id DESC LIMIT ?`,\n args: [limit],\n });\n const rows = (res.rows as Record[]).map(rowToMessage);\n return rows.reverse();\n}\n\nexport async function listMessagesSince(sinceId: number): Promise {\n await ensureSchema();\n const res = await sqlite.execute({\n sql:\n `SELECT id, text, created_at FROM ${TABLE_NAME} WHERE id > ? ORDER BY id ASC LIMIT 500`,\n args: [sinceId],\n });\n return (res.rows as Record[]).map(rowToMessage);\n}\n\nexport async function insertMessage(text: string): Promise {\n await ensureSchema();\n const res = await sqlite.execute({\n sql: `INSERT INTO ${TABLE_NAME} (text) VALUES (?) RETURNING id, text, created_at`,\n args: [text],\n });\n const row = (res.rows as Record[])[0];\n return rowToMessage(row);\n}\n",[],[180,348],["D",1776368480732],[204,205],[180],"585915ae-39cc-11f1-ac05-42b51c65c3df","58591694-39cc-11f1-ac05-42b51c65c3df",["D",1776368524338],"// HTTP routes for the image-upload feature, as a self-contained Hono sub-app.\n// Mounted from index.ts with a single line:\n//\n// import { imagesRoutes } from \"./api/images.ts\";\n// app.route(\"/\", imagesRoutes);\n//\n// All new routes live under /api/images so nothing else is affected.\n\nimport { Hono } from \"npm:hono\";\nimport {\n getImageBytes,\n getImageMeta,\n insertImage,\n} from \"../database/images.ts\";\nimport { insertMessage } from \"../database/db.ts\";\nimport {\n IMAGE_ALLOWED_MIME_TYPES,\n IMAGE_UPLOAD_MAX_BYTES,\n} from \"../shared/image-types.ts\";\n\nexport const imagesRoutes = new Hono();\n\n// POST /api/images — upload an image (multipart/form-data, field \"image\")\n// On success, also inserts a chat message containing the image URL so the\n// picture shows up in the existing message feed without any changes to the\n// core messages pipeline.\nimagesRoutes.post(\"/api/images\", async (c) => {\n const contentType = c.req.header(\"content-type\") || \"\";\n if (!contentType.toLowerCase().includes(\"multipart/form-data\")) {\n return c.json(\n { error: \"Expected multipart/form-data with an 'image' field\" },\n 400,\n );\n }\n\n let form: FormData;\n try {\n form = await c.req.formData();\n } catch (err) {\n return c.json({ error: \"Failed to parse form data\" }, 400);\n }\n\n const file = form.get(\"image\");\n if (!(file instanceof File)) {\n return c.json({ error: \"Missing 'image' file field\" }, 400);\n }\n\n if (file.size === 0) {\n return c.json({ error: \"Empty file\" }, 400);\n }\n if (file.size > IMAGE_UPLOAD_MAX_BYTES) {\n return c.json(\n { error: `File too large (max ${IMAGE_UPLOAD_MAX_BYTES} bytes)` },\n 413,\n );\n }\n\n // Validate MIME — fall back to image/jpeg if the browser didn't set one\n // (iOS sometimes sends application/octet-stream for camera captures).\n let mimeType = (file.type || \"image/jpeg\").toLowerCase();\n if (!(IMAGE_ALLOWED_MIME_TYPES as readonly string[]).includes(mimeType)) {\n // Be permissive for octet-stream but reject truly unknown types.\n if (mimeType === \"application/octet-stream\") {\n mimeType = \"image/jpeg\";\n } else {\n return c.json({ error: `Unsupported image type: ${mimeType}` }, 415);\n }\n }\n\n const bytes = new Uint8Array(await file.arrayBuffer());\n\n // Optional client-supplied dimensions (helps layout before the image loads).\n const widthRaw = form.get(\"width\");\n const heightRaw = form.get(\"height\");\n const width = typeof widthRaw === \"string\" && widthRaw\n ? Number(widthRaw) || null\n : null;\n const height = typeof heightRaw === \"string\" && heightRaw\n ? Number(heightRaw) || null\n : null;\n\n let image;\n try {\n image = await insertImage({ bytes, mimeType, width, height });\n } catch (err) {\n console.error(\"Failed to store image:\", err);\n return c.json({ error: \"Failed to store image\" }, 500);\n }\n\n // Insert a text message so the image is visible in the existing chat feed.\n // We use a compact sentinel-ish format that's still human-readable.\n // MessageList currently renders this as text with the URL visible — clients\n // that want fancy inline rendering can detect the `📷` + URL pattern later.\n let chatMessage = null;\n try {\n chatMessage = await insertMessage(`📷 ${image.url}`);\n } catch (err) {\n console.error(\"Failed to post image chat message:\", err);\n // Don't fail the upload — the image is stored; caller can retry linking.\n }\n\n return c.json({ image, message: chatMessage });\n});\n\n// GET /api/images/:id — serve image bytes\nimagesRoutes.get(\"/api/images/:id\", async (c) => {\n const idStr = c.req.param(\"id\");\n const id = Number(idStr);\n if (!Number.isFinite(id) || id <= 0) {\n return c.json({ error: \"Invalid id\" }, 400);\n }\n\n const meta = await getImageMeta(id);\n if (!meta) return c.json({ error: \"Not found\" }, 404);\n\n let bytes: Uint8Array;\n try {\n bytes = await getImageBytes(meta.blobKey);\n } catch (err) {\n console.error(\"Failed to read image blob:\", err);\n return c.json({ error: \"Image bytes unavailable\" }, 500);\n }\n\n return new Response(bytes, {\n headers: {\n \"content-type\": meta.mimeType,\n // Images are immutable once uploaded; cache aggressively.\n \"cache-control\": \"public, max-age=31536000, immutable\",\n \"content-length\": String(bytes.byteLength),\n },\n });\n});\n",[],[185,341],["D",1776368524338],[202],[185],["D",1776367889779],["D",1789510872811],{"_107":106,"_114":110},{"_107":106,"_108":-5,"_109":110,"_19":60,"_111":112,"_113":30},{"_13":94,"_37":95,"_48":47,"_96":49,"_97":98,"_99":100,"_101":55,"_102":49,"_103":70,"_104":50,"_105":106},"ctx",{"_87":-5,"_135":404,"_405":406,"_407":408,"_409":30,"_410":30,"_411":30,"_412":64,"_413":-5,"_414":-7,"_415":-7,"_416":68,"_417":30,"_418":30,"_419":-5,"_420":30,"_421":30,"_422":30,"_423":-5},"ENV",{"_375":376,"_377":378,"_379":141,"_380":381,"_382":383,"_384":385,"_386":387,"_388":389,"_390":391,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401,"_402":403},"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 · v7