[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_404":405,"_406":407},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_296":-5,"_20":297,"_22":298,"_299":300,"_301":302,"_26":303,"_24":304,"_305":-5,"_306":307,"_308":52,"_309":310,"_311":74,"_312":-5,"_313":-5,"_314":315},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":29,"_30":-5,"_31":32,"_33":34,"_35":-5},"handle","stevekrouse","name","beyond-text-3","branchName","sound-notifications","version","path","frontend","project",{"_36":44,"_13":14,"_38":249,"_50":-5,"_250":52,"_53":54,"_251":54,"_252":253,"_254":-5,"_255":256,"_257":258,"_259":74,"_260":-5,"_261":-5,"_262":76,"_56":57,"_263":264,"_265":266,"_267":268,"_269":-5,"_270":271,"_272":271,"_273":274,"_275":274,"_276":274,"_277":271,"_278":271,"_279":280,"_281":282,"_283":284,"_51":52},"tree",[110,111,112,113,114],"file",{"_36":107,"_70":71,"_66":69,"_13":19,"_79":-5,"_77":100,"_17":76,"_68":-5,"_38":108,"_72":34,"_82":-5,"_18":109},"contents",[59,60,61,62,63],"upstream",{"_36":37,"_38":39,"_40":41,"_13":42,"_43":44,"_17":45,"_46":-5,"_47":-5,"_48":49,"_50":-5,"_51":52,"_53":54,"_55":12,"_56":57,"_58":14},"pull","ahead",2,"behind",1,"envVars","id","de2690be-39ca-11f1-82c2-42b51c65c3df","createdAt",["D",1776367889779],"updatedAt",["D",1776368994041],"main","projectId","de221b10-39ca-11f1-82c2-42b51c65c3df",21,"forkedBranchId","forkedBranchVersion","lockfileKey","1764013157902-esm.town_v_std_reactHonoStarter@72-main","deletedAt","isOwned",false,"privacy","public","userHandle","orgId","e81e7335-6d4c-4764-a902-d0962bbfa9f7","projectName",{"_36":102,"_13":103,"_66":104,"_68":69,"_70":71,"_72":34,"_73":74,"_38":105,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_18":106},{"_36":96,"_13":97,"_66":98,"_68":69,"_70":71,"_72":34,"_73":74,"_38":99,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_18":101},{"_36":90,"_13":91,"_66":92,"_68":69,"_70":71,"_72":34,"_73":74,"_38":93,"_17":76,"_77":24,"_79":94,"_81":52,"_82":-5,"_18":95},{"_36":84,"_13":85,"_66":86,"_68":69,"_70":71,"_72":34,"_73":74,"_38":87,"_17":76,"_77":24,"_79":88,"_81":52,"_82":-5,"_18":89},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":34,"_73":74,"_38":75,"_17":76,"_77":78,"_79":80,"_81":52,"_82":-5,"_18":83},"743895ec-39cc-11f1-a806-42b51c65c3df","index.tsx","fileId","019d97d1-52c6-756f-9e82-170b1ae4f12d","parentId","019d97d1-52c6-756f-9e82-1b7222546b2f","branchId","742f2d22-39cc-11f1-a806-42b51c65c3df","branchVersion","latest",true,["D",1776368571090],0,"fileType","script","content","/** @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();","deleted","label",[19,65],"74388fde-39cc-11f1-a806-42b51c65c3df","index.html","019d97d1-52c6-756f-9e82-113ea89342aa",["D",1776368571090],"\n\n \n \n \n Chat\n \n \n \n \n \n

\n \n \n \n\n",[19,85],"743887d2-39cc-11f1-a806-42b51c65c3df","favicon.svg","019d97d1-52c6-756f-9e82-0c629f21d64c",["D",1776368571090],"\n",[19,91],"74388674-39cc-11f1-a806-42b51c65c3df","hooks","019d97d1-52c6-756f-9e82-0a0831706934",["D",1776368571090],"directory",[19,97],"74387080-39cc-11f1-a806-42b51c65c3df","components","019d97d1-52c6-756f-9e82-01df6e540ca9",["D",1776368571090],[19,103],"74389952-39cc-11f1-a806-42b51c65c3df",["D",1776368571090],[19],{"_36":235,"_13":236,"_66":237,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":238,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":239,"_18":240},{"_36":107,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":163,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":164,"_18":165},{"_36":131,"_13":132,"_66":133,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":134,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":135,"_18":136},{"_36":124,"_13":125,"_66":126,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":127,"_17":76,"_77":24,"_79":128,"_81":52,"_82":-5,"_121":129,"_18":130},{"_36":115,"_13":116,"_66":117,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":118,"_17":76,"_77":119,"_79":120,"_81":52,"_82":-5,"_121":122,"_18":123},"7438c71a-39cc-11f1-a806-42b51c65c3df","index.ts","019d97d1-52c6-756f-9e82-2bc8c2d39410",["D",1776368571090],"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\";\n\nconst app = new Hono();\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","children",[],[116],"7438b824-39cc-11f1-a806-42b51c65c3df","README.md","019d97d1-52c6-756f-9e82-2415642fa79e",["D",1776368571090],"# 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",[],[125],"74389c40-39cc-11f1-a806-42b51c65c3df","shared","019d97d1-52c6-756f-9e82-20595e405b68",["D",1776368571090],[137,138,139],[132],{"_36":155,"_13":156,"_66":157,"_68":133,"_70":71,"_72":158,"_73":74,"_38":159,"_17":76,"_77":78,"_79":160,"_81":52,"_82":-5,"_121":161,"_18":162},{"_36":147,"_13":148,"_66":149,"_68":133,"_70":71,"_72":150,"_73":74,"_38":151,"_17":34,"_77":78,"_79":152,"_81":52,"_82":-5,"_121":153,"_18":154},{"_36":140,"_13":141,"_66":142,"_68":133,"_70":71,"_72":34,"_73":74,"_38":143,"_17":76,"_77":78,"_79":144,"_81":52,"_82":-5,"_121":145,"_18":146},"74389a88-39cc-11f1-a806-42b51c65c3df","types.ts","019d97d1-52c6-756f-9e82-1dce1dbc715a",["D",1776368571090],"export interface Message {\n id: number;\n text: string;\n createdAt: string; // ISO timestamp\n}\n",[],[132,141],"3eb709f2-39cd-11f1-ba62-42b51c65c3df","sound.ts","7755b908-39cc-11f1-b471-42b51c65c3df",4,["D",1776368910814],"/**\n * Tiny notification-sound helpers using the Web Audio API.\n * No assets, no deps — works in all modern browsers.\n *\n * Browsers block AudioContext until the user has interacted with the page,\n * so we lazily create a single shared context and unlock it on the first\n * user gesture. Call `unlockAudio()` once during app startup; subsequent\n * `playBeep()` / `playNotification()` / `playSuccess()` calls will produce sound.\n */\n\nlet audioContext: AudioContext | null = null;\nlet unlockAttached = false;\n\nfunction getAudioContext(): AudioContext | null {\n if (typeof window === \"undefined\") return null;\n if (!audioContext) {\n const Ctor = window.AudioContext || (window as any).webkitAudioContext;\n if (!Ctor) return null;\n audioContext = new Ctor();\n }\n return audioContext;\n}\n\n/**\n * Attach one-time listeners that \"unlock\" the AudioContext on the first\n * user gesture (click / keydown / touch). Safe to call multiple times.\n */\nexport function unlockAudio() {\n if (unlockAttached || typeof window === \"undefined\") return;\n unlockAttached = true;\n const resume = () => {\n const ctx = getAudioContext();\n if (ctx && ctx.state === \"suspended\") ctx.resume().catch(() => {});\n };\n window.addEventListener(\"pointerdown\", resume, { once: true });\n window.addEventListener(\"keydown\", resume, { once: true });\n window.addEventListener(\"touchstart\", resume, { once: true });\n}\n\n/**\n * Generate a simple beep sound using Web Audio API.\n * Silently no-ops if the browser hasn't unlocked audio yet.\n */\nexport function playBeep(options?: {\n frequency?: number;\n duration?: number;\n volume?: number;\n}) {\n const freq = options?.frequency ?? 800; // Hz\n const dur = options?.duration ?? 200; // ms\n const vol = options?.volume ?? 0.3; // 0-1\n\n const ctx = getAudioContext();\n if (!ctx || ctx.state !== \"running\") return;\n\n const oscillator = ctx.createOscillator();\n const gainNode = ctx.createGain();\n\n oscillator.connect(gainNode);\n gainNode.connect(ctx.destination);\n\n oscillator.frequency.value = freq;\n oscillator.type = \"sine\";\n\n gainNode.gain.setValueAtTime(vol, ctx.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + dur / 1000);\n\n oscillator.start(ctx.currentTime);\n oscillator.stop(ctx.currentTime + dur / 1000);\n}\n\n/**\n * Play a notification sound (higher pitch, short duration)\n */\nexport function playNotification() {\n playBeep({ frequency: 1000, duration: 150, volume: 0.3 });\n}\n\n/**\n * Play a success sound (two ascending beeps)\n */\nexport function playSuccess() {\n playBeep({ frequency: 600, duration: 100, volume: 0.25 });\n setTimeout(() => playBeep({ frequency: 900, duration: 100, volume: 0.25 }), 120);\n}\n\n/**\n * Play a random sound from a selection\n */\nexport function playRandom() {\n const sounds = [playNotification, playSuccess];\n const randomSound = sounds[Math.floor(Math.random() * sounds.length)];\n randomSound();\n}\n",[],[132,148],"790338f2-39cc-11f1-b471-42b51c65c3df","sound-example.ts","79033a1e-39cc-11f1-b471-42b51c65c3df",3,["D",1776368579145],"/**\n * Example usage of the sound notification system\n * \n * In your frontend or message handler, you can call:\n * \n * import { playNotification, playSuccess, playRandom } from '../shared/sound.ts';\n * \n * // When a message arrives:\n * playNotification();\n * \n * // For success states:\n * playSuccess();\n * \n * // For random notification sounds:\n * playRandom();\n */\n\nexport const SOUND_EXAMPLES = {\n notification: \"playNotification() - high pitched beep for alerts\",\n success: \"playSuccess() - two ascending beeps\",\n random: \"playRandom() - picks one at random\",\n} as const;\n",[],[132,156],["D",1776368571090],[166,167,168,169,170],[19],{"_36":102,"_13":103,"_66":104,"_68":69,"_70":71,"_72":34,"_73":74,"_38":192,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":193,"_18":194},{"_36":96,"_13":97,"_66":98,"_68":69,"_70":71,"_72":34,"_73":74,"_38":180,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":181,"_18":182},{"_36":90,"_13":91,"_66":92,"_68":69,"_70":71,"_72":34,"_73":74,"_38":177,"_17":76,"_77":24,"_79":94,"_81":52,"_82":-5,"_121":178,"_18":179},{"_36":84,"_13":85,"_66":86,"_68":69,"_70":71,"_72":34,"_73":74,"_38":174,"_17":76,"_77":24,"_79":88,"_81":52,"_82":-5,"_121":175,"_18":176},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":34,"_73":74,"_38":171,"_17":76,"_77":78,"_79":80,"_81":52,"_82":-5,"_121":172,"_18":173},["D",1776368571090],[],[19,65],["D",1776368571090],[],[19,85],["D",1776368571090],[],[19,91],["D",1776368571090],[183],[19,97],{"_36":184,"_13":185,"_66":186,"_68":98,"_70":71,"_72":187,"_73":74,"_38":188,"_17":34,"_77":78,"_79":189,"_81":52,"_82":-5,"_121":190,"_18":191},"49b1c36a-39cd-11f1-8dce-42b51c65c3df","useMessages.ts","019d97d1-52c6-756f-9e82-050e8fa3b10d",5,["D",1776368929242],"import { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../../shared/types.ts\";\nimport { playNotification, unlockAudio } from \"../../shared/sound.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 // Suppress sound for messages received during the initial load / initial\n // SSE catch-up. We only want to ding for messages that arrive *after* the\n // client is fully caught up.\n const initialLoadedRef = useRef(false);\n\n useEffect(() => {\n // Prime the audio system: once the user clicks / types / taps anywhere\n // on the page, our AudioContext becomes usable and future notifications\n // will actually make sound.\n unlockAudio();\n\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 // Returns true if the message was newly added, false if it was a duplicate.\n function appendMessage(msg: Message): boolean {\n let added = false;\n setMessages((prev) => {\n if (prev.some((m) => m.id === msg.id)) return prev;\n added = true;\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 return added;\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 const isNew = appendMessage(msg);\n // Only ding if:\n // - the message is genuinely new (not a dup from reconnect)\n // - the initial load has completed\n // - the tab is not focused (don't ding while user is actively watching)\n if (\n isNew\n && initialLoadedRef.current\n && document.visibilityState !== \"visible\"\n ) {\n playNotification();\n }\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) {\n initialLoadedRef.current = true;\n connectStream();\n }\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",[],[19,97,185],["D",1776368571090],[195,196,197,198,199],[19,103],{"_36":228,"_13":229,"_66":230,"_68":104,"_70":71,"_72":34,"_73":74,"_38":231,"_17":76,"_77":78,"_79":232,"_81":52,"_82":-5,"_121":233,"_18":234},{"_36":221,"_13":222,"_66":223,"_68":104,"_70":71,"_72":34,"_73":74,"_38":224,"_17":76,"_77":78,"_79":225,"_81":52,"_82":-5,"_121":226,"_18":227},{"_36":214,"_13":215,"_66":216,"_68":104,"_70":71,"_72":34,"_73":74,"_38":217,"_17":76,"_77":78,"_79":218,"_81":52,"_82":-5,"_121":219,"_18":220},{"_36":207,"_13":208,"_66":209,"_68":104,"_70":71,"_72":34,"_73":74,"_38":210,"_17":76,"_77":78,"_79":211,"_81":52,"_82":-5,"_121":212,"_18":213},{"_36":200,"_13":201,"_66":202,"_68":104,"_70":71,"_72":34,"_73":74,"_38":203,"_17":76,"_77":78,"_79":204,"_81":52,"_82":-5,"_121":205,"_18":206},"743859c4-39cc-11f1-a806-42b51c65c3df","QRBackground.tsx","019d97d1-52c6-756f-9e81-fd131d836330",["D",1776368571090],"/** @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\ninterface QRBackgroundProps {\n inColumn?: boolean;\n}\n\nexport function QRBackground({ inColumn = false }: QRBackgroundProps) {\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 // Two modes:\n // - inColumn=true: displayed in a dedicated sidebar column, solid and opaque\n // - inColumn=false: overlaid on the chat, faded and pointer-events-none\n if (inColumn) {\n return (\n

\n \n \n \n

\n {qr.url}\n

\n );\n }\n\n // Mobile/fallback: overlay on top of chat, faded\n return (\n \n

\n \n \n \n

\n {qr.url}\n

\n \n );\n}\n",[],[19,103,201],"74384dd0-39cc-11f1-a806-42b51c65c3df","MessageList.tsx","019d97d1-52c6-756f-9e81-fa8b9492e966",["D",1776368571090],"/** @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",[],[19,103,208],"74382b48-39cc-11f1-a806-42b51c65c3df","MessageInput.tsx","019d97d1-52c6-756f-9e81-f7fa9b31f696",["D",1776368571090],"/** @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",[],[19,103,215],"743825e4-39cc-11f1-a806-42b51c65c3df","Counter.tsx","019d97d1-52c6-756f-9e81-f3f0759da773",["D",1776368571090],"/** @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",[],[19,103,222],"7438195a-39cc-11f1-a806-42b51c65c3df","App.tsx","019d97d1-52c6-756f-9e81-eefe450ee8e6",["D",1776368571090],"/** @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 {/* QR code column — hidden on mobile, visible on medium+ screens */}\n

\n \n

\n\n {/* Chat column */}\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",[],[19,103,229],"7438113a-39cc-11f1-a806-42b51c65c3df","database","019d97d1-52c6-756f-9e81-e9ac2130e0f0",["D",1776368571090],[241],[236],{"_36":242,"_13":243,"_66":244,"_68":237,"_70":71,"_72":34,"_73":74,"_38":245,"_17":76,"_77":78,"_79":246,"_81":52,"_82":-5,"_121":247,"_18":248},"7437e214-39cc-11f1-a806-42b51c65c3df","db.ts","019d97d1-52c6-756f-9e81-e61abbaafaa1",["D",1776368571090],"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",[],[236,243],["D",1776367889779],"legacyEnvVars","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","userId","a0bf3b31-15a5-4d5c-880e-4b1e22c9bc18","pinnedFileId","019d97c6-edc7-722c-8966-3d4dbbbae3b1","pinPreview","pinMigrated","screenshotVersion","likeCount","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",{"_11":12,"_295":291},"org",{"_11":12,"_289":-5,"_290":291,"_255":256,"_292":293,"_294":52},"branch",{"_17":187,"_13":16,"_36":71,"_43":44,"_46":37,"_47":285,"_286":54,"_287":44,"_288":57,"_58":14,"_55":12},20,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","https://images.clerk.dev/uploaded/img_2PqHa2Gsy93xQrjh2w78Xu0cChW.jpeg","tier","pro","canRestrictVals","profileImageUrl","adoptOrgId",{"_36":44,"_13":14,"_38":399,"_50":-5,"_250":52,"_53":54,"_251":54,"_252":253,"_254":-5,"_255":256,"_257":258,"_259":74,"_260":-5,"_261":-5,"_262":76,"_56":57,"_263":264,"_265":266,"_267":400,"_269":-5,"_270":271,"_272":271,"_273":274,"_275":274,"_276":274,"_277":271,"_278":271,"_279":401,"_281":402,"_283":403,"_51":52},[339,341,353,357,358],"files",[339,340,341,342,343,344,345,346,347,348,349,350,351,352,353,354,355,356,357,358],"counts",{"_330":76,"_331":158,"_332":76,"_35":333,"_334":335},[320,321,322,323,324],{"_36":107,"_70":71,"_66":69,"_13":19,"_79":-5,"_77":100,"_17":76,"_68":-5,"_38":318,"_72":34,"_82":-5,"_18":319},"upstreamProject","upstreamBranch",{"_36":37,"_38":316,"_40":317,"_13":42,"_43":44,"_17":45,"_46":-5,"_47":-5,"_48":49,"_50":-5,"_51":52,"_53":54,"_55":12,"_56":57,"_58":14},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1776367889779],["D",1776368994041],["D",1776368571090],[19],{"_36":102,"_13":103,"_66":104,"_68":69,"_70":71,"_72":34,"_73":74,"_38":105,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_18":329},{"_36":96,"_13":97,"_66":98,"_68":69,"_70":71,"_72":34,"_73":74,"_38":99,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_18":328},{"_36":90,"_13":91,"_66":92,"_68":69,"_70":71,"_72":34,"_73":74,"_38":93,"_17":76,"_77":24,"_79":94,"_81":52,"_82":-5,"_18":327},{"_36":84,"_13":85,"_66":86,"_68":69,"_70":71,"_72":34,"_73":74,"_38":87,"_17":76,"_77":24,"_79":88,"_81":52,"_82":-5,"_18":326},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":34,"_73":74,"_38":75,"_17":76,"_77":78,"_79":80,"_81":52,"_82":-5,"_18":325},[19,65],[19,85],[19,91],[19,97],[19,103],"pulls","branches","forks",{"_336":76,"_338":76},"connections",{"_336":76,"_337":76},"count","unfilledCount","emptyCount",{"_36":235,"_13":236,"_66":237,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":238,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":397,"_18":398},{"_36":242,"_13":243,"_66":244,"_68":237,"_70":71,"_72":34,"_73":74,"_38":245,"_17":76,"_77":78,"_79":246,"_81":52,"_82":-5,"_121":395,"_18":396},{"_36":107,"_13":19,"_66":69,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":163,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":393,"_18":394},{"_36":102,"_13":103,"_66":104,"_68":69,"_70":71,"_72":34,"_73":74,"_38":192,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":391,"_18":392},{"_36":228,"_13":229,"_66":230,"_68":104,"_70":71,"_72":34,"_73":74,"_38":231,"_17":76,"_77":78,"_79":232,"_81":52,"_82":-5,"_121":389,"_18":390},{"_36":221,"_13":222,"_66":223,"_68":104,"_70":71,"_72":34,"_73":74,"_38":224,"_17":76,"_77":78,"_79":225,"_81":52,"_82":-5,"_121":387,"_18":388},{"_36":214,"_13":215,"_66":216,"_68":104,"_70":71,"_72":34,"_73":74,"_38":217,"_17":76,"_77":78,"_79":218,"_81":52,"_82":-5,"_121":385,"_18":386},{"_36":207,"_13":208,"_66":209,"_68":104,"_70":71,"_72":34,"_73":74,"_38":210,"_17":76,"_77":78,"_79":211,"_81":52,"_82":-5,"_121":383,"_18":384},{"_36":200,"_13":201,"_66":202,"_68":104,"_70":71,"_72":34,"_73":74,"_38":203,"_17":76,"_77":78,"_79":204,"_81":52,"_82":-5,"_121":381,"_18":382},{"_36":96,"_13":97,"_66":98,"_68":69,"_70":71,"_72":34,"_73":74,"_38":180,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":379,"_18":380},{"_36":184,"_13":185,"_66":186,"_68":98,"_70":71,"_72":187,"_73":74,"_38":188,"_17":34,"_77":78,"_79":189,"_81":52,"_82":-5,"_121":377,"_18":378},{"_36":90,"_13":91,"_66":92,"_68":69,"_70":71,"_72":34,"_73":74,"_38":177,"_17":76,"_77":24,"_79":94,"_81":52,"_82":-5,"_121":375,"_18":376},{"_36":84,"_13":85,"_66":86,"_68":69,"_70":71,"_72":34,"_73":74,"_38":174,"_17":76,"_77":24,"_79":88,"_81":52,"_82":-5,"_121":373,"_18":374},{"_36":64,"_13":65,"_66":67,"_68":69,"_70":71,"_72":34,"_73":74,"_38":171,"_17":76,"_77":78,"_79":80,"_81":52,"_82":-5,"_121":371,"_18":372},{"_36":131,"_13":132,"_66":133,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":134,"_17":76,"_77":100,"_79":-5,"_81":52,"_82":-5,"_121":369,"_18":370},{"_36":155,"_13":156,"_66":157,"_68":133,"_70":71,"_72":158,"_73":74,"_38":159,"_17":76,"_77":78,"_79":160,"_81":52,"_82":-5,"_121":367,"_18":368},{"_36":147,"_13":148,"_66":149,"_68":133,"_70":71,"_72":150,"_73":74,"_38":151,"_17":34,"_77":78,"_79":152,"_81":52,"_82":-5,"_121":365,"_18":366},{"_36":140,"_13":141,"_66":142,"_68":133,"_70":71,"_72":34,"_73":74,"_38":143,"_17":76,"_77":78,"_79":144,"_81":52,"_82":-5,"_121":363,"_18":364},{"_36":124,"_13":125,"_66":126,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":127,"_17":76,"_77":24,"_79":128,"_81":52,"_82":-5,"_121":361,"_18":362},{"_36":115,"_13":116,"_66":117,"_68":-5,"_70":71,"_72":34,"_73":74,"_38":118,"_17":76,"_77":119,"_79":120,"_81":52,"_82":-5,"_121":359,"_18":360},[],[116],[],[125],[],[132,141],[],[132,148],[],[132,156],[354,355,356],[132],[],[19,65],[],[19,85],[],[19,91],[],[19,97,185],[349],[19,97],[],[19,103,201],[],[19,103,208],[],[19,103,215],[],[19,103,222],[],[19,103,229],[343,344,345,346,347],[19,103],[342,348,350,351,352],[19],[],[236,243],[340],[236],["D",1776367889779],["D",1789510872811],{"_11":12,"_295":291},{"_11":12,"_289":-5,"_290":291,"_255":256,"_292":293,"_294":52},{"_17":187,"_13":16,"_36":71,"_43":44,"_46":37,"_47":285,"_286":54,"_287":44,"_288":57,"_58":14,"_55":12},"ctx",{"_279":-5,"_313":437,"_438":439,"_440":441,"_442":52,"_443":52,"_444":52,"_445":74,"_446":-5,"_447":-7,"_448":-7,"_449":76,"_450":52,"_451":52,"_452":-5,"_453":52,"_454":52,"_455":52,"_456":-5},"ENV",{"_408":409,"_410":411,"_412":42,"_413":414,"_415":416,"_417":418,"_419":420,"_421":422,"_423":424,"_425":426,"_427":428,"_429":430,"_431":432,"_433":434,"_435":436},"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"]