\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 {/* Camera button sits above the text input so it's easy to tap on mobile\n without fighting the keyboard. Implemented in its own component\n (CameraButton) so it can be merged independently of MessageInput. */}\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",[],[226,232,238],{"_111":247,"_102":248,"_175":249,"_177":233,"_178":158,"_179":250,"_181":126,"_113":251,"_107":33,"_183":195,"_185":252,"_186":22,"_187":-5,"_188":253,"_106":254},"783bb49e-39cc-11f1-98fe-42b51c65c3df","CameraButton.tsx","783bb598-39cc-11f1-98fe-42b51c65c3df",7,["D",1776368577837],"/** @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",[],[226,232,248],{"_111":256,"_102":257,"_175":258,"_177":233,"_178":158,"_179":204,"_181":126,"_113":259,"_107":33,"_183":195,"_185":260,"_186":22,"_187":-5,"_188":261,"_106":262},"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",[],[226,232,257],{"_111":264,"_102":265,"_175":266,"_177":233,"_178":158,"_179":204,"_181":126,"_113":267,"_107":33,"_183":195,"_185":268,"_186":22,"_187":-5,"_188":269,"_106":270},"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",[],[226,232,265],{"_111":272,"_102":273,"_175":274,"_177":233,"_178":158,"_179":204,"_181":126,"_113":275,"_107":33,"_183":195,"_185":276,"_186":22,"_187":-5,"_188":277,"_106":278},"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",[],[226,232,273],{"_111":280,"_102":281,"_175":282,"_177":233,"_178":158,"_179":204,"_181":22,"_113":283,"_107":33,"_183":195,"_185":284,"_186":22,"_187":-5,"_188":285,"_106":286},"3e5c81c2-39cc-11f1-8e94-42b51c65c3df","QRBackground.tsx","019d97cf-f1d3-767a-8e7a-80f4c8d3f3b7",["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",[],[226,232,281],[226,232],{"_111":289,"_102":290,"_175":291,"_177":227,"_178":158,"_179":204,"_181":126,"_113":292,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":293,"_106":311},"3e5ce1da-39cc-11f1-8e94-42b51c65c3df","hooks","019d97cf-f1d3-767a-8e7a-8def400a1b34",["D",1776368480732],[294,303],{"_111":295,"_102":296,"_175":297,"_177":291,"_178":158,"_179":298,"_181":22,"_113":299,"_107":33,"_183":195,"_185":300,"_186":22,"_187":-5,"_188":301,"_106":302},"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",[],[226,290,296],{"_111":304,"_102":305,"_175":306,"_177":291,"_178":158,"_179":204,"_181":126,"_113":307,"_107":33,"_183":195,"_185":308,"_186":22,"_187":-5,"_188":309,"_106":310},"3e5cb39a-39cc-11f1-8e94-42b51c65c3df","useMessages.ts","019d97cf-f1d3-767a-8e7a-8bab3cd4f6b1",["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",[],[226,290,305],[226,290],{"_111":313,"_102":314,"_175":315,"_177":227,"_178":158,"_179":204,"_181":126,"_113":316,"_107":33,"_183":317,"_185":318,"_186":22,"_187":-5,"_188":319,"_106":320},"3e5ce3ba-39cc-11f1-8e94-42b51c65c3df","favicon.svg","019d97cf-f1d3-767a-8e7a-90a9c58662b2",["D",1776368480732],"file","\n",[],[226,314],{"_111":322,"_102":323,"_175":324,"_177":227,"_178":158,"_179":204,"_181":22,"_113":325,"_107":33,"_183":317,"_185":326,"_186":22,"_187":-5,"_188":327,"_106":328},"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",[],[226,323],{"_111":330,"_102":331,"_175":332,"_177":227,"_178":158,"_179":204,"_181":126,"_113":333,"_107":33,"_183":195,"_185":334,"_186":22,"_187":-5,"_188":335,"_106":336},"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();",[],[226,331],[226],{"_111":339,"_102":340,"_175":341,"_177":-5,"_178":158,"_179":108,"_181":126,"_113":342,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":343,"_106":352},"8cd7771c-39cc-11f1-9b80-42b51c65c3df","scripts","3c35a60a-c156-4599-99e7-a7d3931950b3",["D",1776368612409],[344],{"_111":345,"_102":346,"_175":347,"_177":341,"_178":158,"_179":108,"_181":22,"_113":348,"_107":33,"_183":195,"_185":349,"_186":22,"_187":-5,"_188":350,"_106":351},"8cd76722-39cc-11f1-9b80-42b51c65c3df","test-upload.ts","8cd767f4-39cc-11f1-9b80-42b51c65c3df",["D",1776368612409],"// Quick sanity test for the /api/images upload endpoint.\n// Run with run_file. Safe to delete later.\n\nimport { httpEndpoint } from \"https://esm.town/v/std/utils/index.ts\";\n\n// Tiny 1x1 red PNG (base64).\nconst PNG_B64 =\n \"iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==\";\nconst bytes = Uint8Array.from(atob(PNG_B64), (c) => c.charCodeAt(0));\n\nconst endpoint = httpEndpoint(\"../index.ts\");\nconsole.log(\"Endpoint:\", endpoint);\n\nconst fd = new FormData();\nfd.append(\"image\", new Blob([bytes], { type: \"image/png\" }), \"test.png\");\n\nconst res = await fetch(`${endpoint}/api/images`, { method: \"POST\", body: fd });\nconsole.log(\"Status:\", res.status);\nconst json = await res.json();\nconsole.log(\"Body:\", JSON.stringify(json, null, 2));\n\nif (json.image?.url) {\n const img = await fetch(`${endpoint}${json.image.url}`);\n console.log(\n \"Fetch image back:\",\n img.status,\n img.headers.get(\"content-type\"),\n \"bytes:\",\n (await img.arrayBuffer()).byteLength,\n );\n}\n",[],[340,346],[340],{"_111":354,"_102":355,"_175":356,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":357,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":358,"_106":375},"3e5cf4a4-39cc-11f1-8e94-42b51c65c3df","shared","019d97cf-f1d3-767a-8e7a-a44d1988cafd",["D",1776368480732],[359,367],{"_111":360,"_102":361,"_175":362,"_177":356,"_178":158,"_179":242,"_181":126,"_113":363,"_107":33,"_183":195,"_185":364,"_186":22,"_187":-5,"_188":365,"_106":366},"429192a0-39cc-11f1-8b4a-42b51c65c3df","image-types.ts","4291934a-39cc-11f1-8b4a-42b51c65c3df",["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",[],[355,361],{"_111":368,"_102":369,"_175":370,"_177":356,"_178":158,"_179":204,"_181":126,"_113":371,"_107":33,"_183":195,"_185":372,"_186":22,"_187":-5,"_188":373,"_106":374},"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",[],[355,369],[355],{"_111":377,"_102":378,"_175":379,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":380,"_107":33,"_183":317,"_185":381,"_186":22,"_187":-5,"_188":382,"_106":383},"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",[],[378],{"_111":385,"_102":386,"_175":387,"_177":-5,"_178":158,"_179":388,"_181":126,"_113":389,"_107":204,"_183":390,"_185":391,"_186":22,"_187":-5,"_188":392,"_106":393},"5c3d6e2c-39cc-11f1-8e94-42b51c65c3df","index.ts","019d97cf-f1d3-767a-8e7a-af73a824fb34",5,["D",1776368530863],"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",[],[386],"files",[172,190,200,207,215,224,230,236,246,255,263,271,279,288,294,303,312,321,329,338,344,353,359,367,376,384],"counts",{"_398":33,"_399":218,"_400":33,"_401":402,"_405":406},"pulls","branches","forks","envVars",{"_403":33,"_404":33},"count","emptyCount","connections",{"_403":33,"_407":33},"unfilledCount","contents",[410,413,416,419,422,425,428],{"_111":173,"_102":174,"_175":176,"_177":-5,"_178":158,"_179":180,"_181":126,"_113":411,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":412},["D",1776368524338],[174],{"_111":201,"_102":202,"_175":203,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":414,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":415},["D",1776368480732],[202],{"_111":225,"_102":226,"_175":227,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":417,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":418},["D",1776368480732],[226],{"_111":339,"_102":340,"_175":341,"_177":-5,"_178":158,"_179":108,"_181":126,"_113":420,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":421},["D",1776368612409],[340],{"_111":354,"_102":355,"_175":356,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":423,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":424},["D",1776368480732],[355],{"_111":377,"_102":378,"_175":379,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":426,"_107":33,"_183":317,"_185":381,"_186":22,"_187":-5,"_106":427},["D",1776368480732],[378],{"_111":385,"_102":386,"_175":387,"_177":-5,"_178":158,"_179":388,"_181":126,"_113":429,"_107":204,"_183":390,"_185":391,"_186":22,"_187":-5,"_106":430},["D",1776368530863],[386],"upstreamProject",{"_111":433,"_102":434,"_119":120,"_121":-5,"_117":118,"_23":435},"2baeca9a-3994-11f1-a3d1-42b51c65c3df","reactHonoStarter",{"_100":436,"_148":437},"templates","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512","upstreamBranch",{"_111":161,"_113":440,"_441":442,"_102":48,"_159":112,"_107":163,"_160":443,"_162":218,"_444":445,"_115":-5,"_169":22,"_117":118,"_168":101,"_16":130,"_167":103},["D",1776367889779],"updatedAt",["D",1776368994041],"2bb48138-3994-11f1-a3d1-42b51c65c3df","lockfileKey","1764013157902-esm.town_v_std_reactHonoStarter@72-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_100":101,"_102":103,"_104":105,"_107":108,"_106":79,"_109":452,"_170":458,"_394":563,"_317":-7,"_408":564,"_586":587,"_590":-5,"_591":33,"_592":33,"_436":593,"_401":-5},{"_111":112,"_102":103,"_113":453,"_115":-5,"_116":22,"_117":118,"_119":120,"_121":-5,"_14":122,"_123":124,"_125":126,"_127":-5,"_128":-5,"_129":33,"_16":130,"_131":132,"_133":134,"_135":454,"_137":-5,"_138":139,"_140":139,"_141":142,"_143":142,"_144":142,"_145":139,"_146":139,"_23":455,"_150":456,"_155":457,"_169":22},["D",1776367889779],["D",1776368462406],{"_100":101,"_148":149},{"_100":101,"_152":149,"_14":122,"_153":154},{"_107":157,"_102":105,"_111":158,"_159":112,"_160":161,"_162":163,"_164":118,"_165":112,"_166":130,"_167":103,"_168":101},[459,467,479,535,543,555,559],{"_111":173,"_102":174,"_175":176,"_177":-5,"_178":158,"_179":180,"_181":126,"_113":460,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":461,"_106":466},["D",1776368524338],[462],{"_111":191,"_102":192,"_175":193,"_177":176,"_178":158,"_179":180,"_181":126,"_113":463,"_107":33,"_183":195,"_185":196,"_186":22,"_187":-5,"_188":464,"_106":465},["D",1776368524338],[],[174,192],[174],{"_111":201,"_102":202,"_175":203,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":468,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":469,"_106":478},["D",1776368480732],[470,474],{"_111":208,"_102":209,"_175":210,"_177":203,"_178":158,"_179":204,"_181":126,"_113":471,"_107":33,"_183":195,"_185":212,"_186":22,"_187":-5,"_188":472,"_106":473},["D",1776368480732],[],[202,209],{"_111":216,"_102":192,"_175":217,"_177":203,"_178":158,"_179":218,"_181":126,"_113":475,"_107":33,"_183":195,"_185":220,"_186":22,"_187":-5,"_188":476,"_106":477},["D",1776368502554],[],[202,192],[202],{"_111":225,"_102":226,"_175":227,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":480,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":481,"_106":534},["D",1776368480732],[482,510,522,526,530],{"_111":231,"_102":232,"_175":233,"_177":227,"_178":158,"_179":204,"_181":126,"_113":483,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":484,"_106":509},["D",1776368480732],[485,489,493,497,501,505],{"_111":237,"_102":238,"_175":239,"_177":233,"_178":158,"_179":240,"_181":22,"_113":486,"_107":242,"_183":195,"_185":243,"_186":22,"_187":-5,"_188":487,"_106":488},["D",1776368588673],[],[226,232,238],{"_111":247,"_102":248,"_175":249,"_177":233,"_178":158,"_179":250,"_181":126,"_113":490,"_107":33,"_183":195,"_185":252,"_186":22,"_187":-5,"_188":491,"_106":492},["D",1776368577837],[],[226,232,248],{"_111":256,"_102":257,"_175":258,"_177":233,"_178":158,"_179":204,"_181":126,"_113":494,"_107":33,"_183":195,"_185":260,"_186":22,"_187":-5,"_188":495,"_106":496},["D",1776368480732],[],[226,232,257],{"_111":264,"_102":265,"_175":266,"_177":233,"_178":158,"_179":204,"_181":126,"_113":498,"_107":33,"_183":195,"_185":268,"_186":22,"_187":-5,"_188":499,"_106":500},["D",1776368480732],[],[226,232,265],{"_111":272,"_102":273,"_175":274,"_177":233,"_178":158,"_179":204,"_181":126,"_113":502,"_107":33,"_183":195,"_185":276,"_186":22,"_187":-5,"_188":503,"_106":504},["D",1776368480732],[],[226,232,273],{"_111":280,"_102":281,"_175":282,"_177":233,"_178":158,"_179":204,"_181":22,"_113":506,"_107":33,"_183":195,"_185":284,"_186":22,"_187":-5,"_188":507,"_106":508},["D",1776368480732],[],[226,232,281],[226,232],{"_111":289,"_102":290,"_175":291,"_177":227,"_178":158,"_179":204,"_181":126,"_113":511,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":512,"_106":521},["D",1776368480732],[513,517],{"_111":295,"_102":296,"_175":297,"_177":291,"_178":158,"_179":298,"_181":22,"_113":514,"_107":33,"_183":195,"_185":300,"_186":22,"_187":-5,"_188":515,"_106":516},["D",1776368563749],[],[226,290,296],{"_111":304,"_102":305,"_175":306,"_177":291,"_178":158,"_179":204,"_181":126,"_113":518,"_107":33,"_183":195,"_185":308,"_186":22,"_187":-5,"_188":519,"_106":520},["D",1776368480732],[],[226,290,305],[226,290],{"_111":313,"_102":314,"_175":315,"_177":227,"_178":158,"_179":204,"_181":126,"_113":523,"_107":33,"_183":317,"_185":318,"_186":22,"_187":-5,"_188":524,"_106":525},["D",1776368480732],[],[226,314],{"_111":322,"_102":323,"_175":324,"_177":227,"_178":158,"_179":204,"_181":22,"_113":527,"_107":33,"_183":317,"_185":326,"_186":22,"_187":-5,"_188":528,"_106":529},["D",1776368480732],[],[226,323],{"_111":330,"_102":331,"_175":332,"_177":227,"_178":158,"_179":204,"_181":126,"_113":531,"_107":33,"_183":195,"_185":334,"_186":22,"_187":-5,"_188":532,"_106":533},["D",1776368480732],[],[226,331],[226],{"_111":339,"_102":340,"_175":341,"_177":-5,"_178":158,"_179":108,"_181":126,"_113":536,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":537,"_106":542},["D",1776368612409],[538],{"_111":345,"_102":346,"_175":347,"_177":341,"_178":158,"_179":108,"_181":22,"_113":539,"_107":33,"_183":195,"_185":349,"_186":22,"_187":-5,"_188":540,"_106":541},["D",1776368612409],[],[340,346],[340],{"_111":354,"_102":355,"_175":356,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":544,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_188":545,"_106":554},["D",1776368480732],[546,550],{"_111":360,"_102":361,"_175":362,"_177":356,"_178":158,"_179":242,"_181":126,"_113":547,"_107":33,"_183":195,"_185":364,"_186":22,"_187":-5,"_188":548,"_106":549},["D",1776368487801],[],[355,361],{"_111":368,"_102":369,"_175":370,"_177":356,"_178":158,"_179":204,"_181":126,"_113":551,"_107":33,"_183":195,"_185":372,"_186":22,"_187":-5,"_188":552,"_106":553},["D",1776368480732],[],[355,369],[355],{"_111":377,"_102":378,"_175":379,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":556,"_107":33,"_183":317,"_185":381,"_186":22,"_187":-5,"_188":557,"_106":558},["D",1776368480732],[],[378],{"_111":385,"_102":386,"_175":387,"_177":-5,"_178":158,"_179":388,"_181":126,"_113":560,"_107":204,"_183":390,"_185":391,"_186":22,"_187":-5,"_188":561,"_106":562},["D",1776368530863],[],[386],[459,462,467,470,474,479,482,485,489,493,497,501,505,510,513,517,522,526,530,535,538,543,546,550,555,559],[565,568,571,574,577,580,583],{"_111":173,"_102":174,"_175":176,"_177":-5,"_178":158,"_179":180,"_181":126,"_113":566,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":567},["D",1776368524338],[174],{"_111":201,"_102":202,"_175":203,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":569,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":570},["D",1776368480732],[202],{"_111":225,"_102":226,"_175":227,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":572,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":573},["D",1776368480732],[226],{"_111":339,"_102":340,"_175":341,"_177":-5,"_178":158,"_179":108,"_181":126,"_113":575,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":576},["D",1776368612409],[340],{"_111":354,"_102":355,"_175":356,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":578,"_107":33,"_183":184,"_185":-5,"_186":22,"_187":-5,"_106":579},["D",1776368480732],[355],{"_111":377,"_102":378,"_175":379,"_177":-5,"_178":158,"_179":204,"_181":126,"_113":581,"_107":33,"_183":317,"_185":381,"_186":22,"_187":-5,"_106":582},["D",1776368480732],[378],{"_111":385,"_102":386,"_175":387,"_177":-5,"_178":158,"_179":388,"_181":126,"_113":584,"_107":204,"_183":390,"_185":391,"_186":22,"_187":-5,"_106":585},["D",1776368530863],[386],"upstream",{"_111":161,"_113":588,"_441":589,"_102":48,"_159":112,"_107":163,"_160":443,"_162":218,"_444":445,"_115":-5,"_169":22,"_117":118,"_168":101,"_16":130,"_167":103},["D",1776367889779],["D",1776368994041],"pull","ahead","behind",[],"actionData","errors"]

stevekrouse

beyond-text-3