\n \n \n \n\n",[],[138,156],"743887d2-39cc-11f1-a806-42b51c65c3df","favicon.svg","019d97d1-52c6-756f-9e82-0c629f21d64c",["D",1776368571090],"\n",[],[138,163],"74388674-39cc-11f1-a806-42b51c65c3df","hooks","019d97d1-52c6-756f-9e82-0a0831706934",["D",1776368571090],[175],[138,170],{"_36":176,"_13":177,"_62":178,"_64":171,"_66":67,"_68":179,"_69":70,"_38":180,"_17":34,"_73":74,"_75":181,"_77":52,"_78":-5,"_95":182,"_18":183},"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",[],[138,170,177],"74387080-39cc-11f1-a806-42b51c65c3df","components","019d97d1-52c6-756f-9e82-01df6e540ca9",["D",1776368571090],[190,191,192,193,194],[138,185],{"_36":223,"_13":224,"_62":225,"_64":186,"_66":67,"_68":34,"_69":70,"_38":226,"_17":72,"_73":74,"_75":227,"_77":52,"_78":-5,"_95":228,"_18":229},{"_36":216,"_13":217,"_62":218,"_64":186,"_66":67,"_68":34,"_69":70,"_38":219,"_17":72,"_73":74,"_75":220,"_77":52,"_78":-5,"_95":221,"_18":222},{"_36":209,"_13":210,"_62":211,"_64":186,"_66":67,"_68":34,"_69":70,"_38":212,"_17":72,"_73":74,"_75":213,"_77":52,"_78":-5,"_95":214,"_18":215},{"_36":202,"_13":203,"_62":204,"_64":186,"_66":67,"_68":34,"_69":70,"_38":205,"_17":72,"_73":74,"_75":206,"_77":52,"_78":-5,"_95":207,"_18":208},{"_36":195,"_13":196,"_62":197,"_64":186,"_66":67,"_68":34,"_69":70,"_38":198,"_17":72,"_73":74,"_75":199,"_77":52,"_78":-5,"_95":200,"_18":201},"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",[],[138,185,196],"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",[],[138,185,203],"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",[],[138,185,210],"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",[],[138,185,217],"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",[],[138,185,224],["D",1776368571090],[233],[19],{"_36":60,"_13":61,"_62":63,"_64":65,"_66":67,"_68":34,"_69":70,"_38":234,"_17":72,"_73":74,"_75":76,"_77":52,"_78":-5,"_95":235,"_18":236},["D",1776368571090],[],[19,61],["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,"_283":279},"org",{"_11":12,"_277":-5,"_278":279,"_243":244,"_280":281,"_282":52},"branch",{"_17":179,"_13":16,"_36":67,"_43":44,"_46":37,"_47":273,"_274":54,"_275":44,"_276":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":378,"_50":-5,"_238":52,"_53":54,"_239":54,"_240":241,"_242":-5,"_243":244,"_245":246,"_247":70,"_248":-5,"_249":-5,"_250":72,"_56":57,"_251":252,"_253":254,"_255":379,"_257":-5,"_258":259,"_260":259,"_261":262,"_263":262,"_264":262,"_265":259,"_266":259,"_267":380,"_269":381,"_271":382,"_51":52},[318,320,332,336,337],"files",[318,319,320,321,322,323,324,325,326,327,328,329,330,331,332,333,334,335,336,337],"counts",{"_309":72,"_310":132,"_311":72,"_35":312,"_313":314},[307],{"_36":80,"_13":19,"_62":65,"_64":-5,"_66":67,"_68":34,"_69":70,"_38":81,"_17":72,"_73":82,"_75":-5,"_77":52,"_78":-5,"_18":306},"upstreamProject","upstreamBranch",{"_36":37,"_38":304,"_40":305,"_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],[19],{"_36":60,"_13":61,"_62":63,"_64":65,"_66":67,"_68":34,"_69":70,"_38":71,"_17":72,"_73":74,"_75":76,"_77":52,"_78":-5,"_18":308},[19,61],"pulls","branches","forks",{"_315":72,"_317":72},"connections",{"_315":72,"_316":72},"count","unfilledCount","emptyCount",{"_36":80,"_13":19,"_62":65,"_64":-5,"_66":67,"_68":34,"_69":70,"_38":230,"_17":72,"_73":82,"_75":-5,"_77":52,"_78":-5,"_95":376,"_18":377},{"_36":60,"_13":61,"_62":63,"_64":65,"_66":67,"_68":34,"_69":70,"_38":234,"_17":72,"_73":74,"_75":76,"_77":52,"_78":-5,"_95":374,"_18":375},{"_36":137,"_13":138,"_62":139,"_64":-5,"_66":67,"_68":34,"_69":70,"_38":140,"_17":72,"_73":82,"_75":-5,"_77":52,"_78":-5,"_95":372,"_18":373},{"_36":184,"_13":185,"_62":186,"_64":139,"_66":67,"_68":34,"_69":70,"_38":187,"_17":72,"_73":82,"_75":-5,"_77":52,"_78":-5,"_95":370,"_18":371},{"_36":223,"_13":224,"_62":225,"_64":186,"_66":67,"_68":34,"_69":70,"_38":226,"_17":72,"_73":74,"_75":227,"_77":52,"_78":-5,"_95":368,"_18":369},{"_36":216,"_13":217,"_62":218,"_64":186,"_66":67,"_68":34,"_69":70,"_38":219,"_17":72,"_73":74,"_75":220,"_77":52,"_78":-5,"_95":366,"_18":367},{"_36":209,"_13":210,"_62":211,"_64":186,"_66":67,"_68":34,"_69":70,"_38":212,"_17":72,"_73":74,"_75":213,"_77":52,"_78":-5,"_95":364,"_18":365},{"_36":202,"_13":203,"_62":204,"_64":186,"_66":67,"_68":34,"_69":70,"_38":205,"_17":72,"_73":74,"_75":206,"_77":52,"_78":-5,"_95":362,"_18":363},{"_36":195,"_13":196,"_62":197,"_64":186,"_66":67,"_68":34,"_69":70,"_38":198,"_17":72,"_73":74,"_75":199,"_77":52,"_78":-5,"_95":360,"_18":361},{"_36":169,"_13":170,"_62":171,"_64":139,"_66":67,"_68":34,"_69":70,"_38":172,"_17":72,"_73":82,"_75":-5,"_77":52,"_78":-5,"_95":358,"_18":359},{"_36":176,"_13":177,"_62":178,"_64":171,"_66":67,"_68":179,"_69":70,"_38":180,"_17":34,"_73":74,"_75":181,"_77":52,"_78":-5,"_95":356,"_18":357},{"_36":162,"_13":163,"_62":164,"_64":139,"_66":67,"_68":34,"_69":70,"_38":165,"_17":72,"_73":24,"_75":166,"_77":52,"_78":-5,"_95":354,"_18":355},{"_36":155,"_13":156,"_62":157,"_64":139,"_66":67,"_68":34,"_69":70,"_38":158,"_17":72,"_73":24,"_75":159,"_77":52,"_78":-5,"_95":352,"_18":353},{"_36":148,"_13":149,"_62":150,"_64":139,"_66":67,"_68":34,"_69":70,"_38":151,"_17":72,"_73":74,"_75":152,"_77":52,"_78":-5,"_95":350,"_18":351},{"_36":105,"_13":106,"_62":107,"_64":-5,"_66":67,"_68":34,"_69":70,"_38":108,"_17":72,"_73":82,"_75":-5,"_77":52,"_78":-5,"_95":348,"_18":349},{"_36":129,"_13":130,"_62":131,"_64":107,"_66":67,"_68":132,"_69":70,"_38":133,"_17":72,"_73":74,"_75":134,"_77":52,"_78":-5,"_95":346,"_18":347},{"_36":121,"_13":122,"_62":123,"_64":107,"_66":67,"_68":124,"_69":70,"_38":125,"_17":34,"_73":74,"_75":126,"_77":52,"_78":-5,"_95":344,"_18":345},{"_36":114,"_13":115,"_62":116,"_64":107,"_66":67,"_68":34,"_69":70,"_38":117,"_17":72,"_73":74,"_75":118,"_77":52,"_78":-5,"_95":342,"_18":343},{"_36":98,"_13":99,"_62":100,"_64":-5,"_66":67,"_68":34,"_69":70,"_38":101,"_17":72,"_73":24,"_75":102,"_77":52,"_78":-5,"_95":340,"_18":341},{"_36":89,"_13":90,"_62":91,"_64":-5,"_66":67,"_68":34,"_69":70,"_38":92,"_17":72,"_73":93,"_75":94,"_77":52,"_78":-5,"_95":338,"_18":339},[],[90],[],[99],[],[106,115],[],[106,122],[],[106,130],[333,334,335],[106],[],[138,149],[],[138,156],[],[138,163],[],[138,170,177],[328],[138,170],[],[138,185,196],[],[138,185,203],[],[138,185,210],[],[138,185,217],[],[138,185,224],[322,323,324,325,326],[138,185],[321,327,329,330,331],[138],[],[19,61],[319],[19],["D",1776367889779],["D",1789510872811],{"_11":12,"_283":279},{"_11":12,"_277":-5,"_278":279,"_243":244,"_280":281,"_282":52},{"_17":179,"_13":16,"_36":67,"_43":44,"_46":37,"_47":273,"_274":54,"_275":44,"_276":57,"_58":14,"_55":12},"ctx",{"_267":-5,"_301":416,"_417":418,"_419":420,"_421":52,"_422":52,"_423":52,"_424":70,"_425":-5,"_426":-7,"_427":-7,"_428":72,"_429":52,"_430":52,"_431":-5,"_432":52,"_433":52,"_434":52,"_435":-5},"ENV",{"_387":388,"_389":390,"_391":42,"_392":393,"_394":395,"_396":397,"_398":399,"_400":401,"_402":403,"_404":405,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415},"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"]