\"| GET[\"GET /api/images/:id\"]\n GET --> Blob\n```\n\n1. **Capture** — a hidden ``\n element opens the front-facing camera on iOS and Android.\n2. **Compress in-browser** — images are downscaled to max 1600px and re-encoded\n as JPEG at quality 0.82 before upload. Keeps uploads fast on cellular.\n3. **Upload** — `POST /api/images` with a multipart form. Server validates MIME\n type, stores bytes in `std/blob` under `chat-images/v1/{id}`, stores\n metadata in a new `chat_images_v1` SQLite table.\n4. **Post to chat** — the server then calls the existing `insertMessage()` to\n append a text message of the form `📷 /api/images/{id}`. This means the\n image is delivered to every other client through the **existing** SSE\n stream — zero changes to the message pipeline.\n5. **View** — `GET /api/images/:id` streams the bytes back with an\n `immutable` cache header.\n\n## Mobile UX notes\n\n- `capture=\"user\"` → front camera on iPhone/Android.\n- `accept=\"image/*\"` → also allows picking from the gallery if the user prefers.\n- `font-size: 16px` on any input (inherited from the app) avoids iOS zoom-on-focus.\n- Button is large (`min-h-10`, rounded pill) for easy thumb-tapping.\n- EXIF orientation handled via `createImageBitmap({ imageOrientation: 'from-image' })`.\n- Error state shows as a small inline toast above the button so it doesn't\n shift the layout.\n\n## Rendering images inline (future / optional)\n\nCurrently, images show up in the chat as a text line `📷 /api/images/123`. To\nrender them as real `` tags, `MessageList.tsx` could be taught to detect\nthis prefix and render accordingly. That change is **intentionally not made\nhere** so this branch stays orthogonal to any concurrent work on `MessageList`.\n\nA one-liner enhancement once merged:\n\n```tsx\n// In MessageList.tsx, inside the message map:\nconst imageMatch = msg.text.match(/^📷\\s+(\\/api\\/images\\/\\d+)/);\nif (imageMatch) {\n return

;\n}\n```\n\n## Storage\n\n- **Bytes**: `std/blob` at `chat-images/v1/{id}`\n- **Metadata**: SQLite table `chat_images_v1` (brand new — no migration of\n existing tables)\n- **Limits**: 8 MB max upload (enforced on both client post-compression and\n server). MIME allowlist: jpeg, png, webp, heic, heif. `application/octet-stream`\n from iOS camera is normalized to `image/jpeg`.\n",[],[228],"76fa6e6e-39cb-11f1-ad8a-42b51c65c3df","types.ts","76fa6f54-39cb-11f1-ad8a-42b51c65c3df","cf64b4d0-27e7-4acf-a35d-a8c97fbb846d",["D",1776368146229],"export interface Message {\n id: number;\n text: string;\n createdAt: string; // ISO timestamp\n}\n",[],[242,235],"shared","9aea6116-39cc-11f1-ae12-42b51c65c3df","sound.ts","9aea6198-39cc-11f1-ae12-42b51c65c3df",20,["D",1776368636019],"/**\n * Generate a simple beep sound using Web Audio API\n * Safe, no dependencies, works in all modern browsers\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 audioContext = new (window.AudioContext || (window as any).webkitAudioContext)();\n const oscillator = audioContext.createOscillator();\n const gainNode = audioContext.createGain();\n\n oscillator.connect(gainNode);\n gainNode.connect(audioContext.destination);\n\n oscillator.frequency.value = freq;\n oscillator.type = 'sine';\n\n gainNode.gain.setValueAtTime(vol, audioContext.currentTime);\n gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + dur / 1000);\n\n oscillator.start(audioContext.currentTime);\n oscillator.stop(audioContext.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",[],[242,244],"9aea5428-39cc-11f1-ae12-42b51c65c3df","sound-example.ts","9aea54c8-39cc-11f1-ae12-42b51c65c3df",["D",1776368636019],"/**\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",[],[242,252],"70518c76-39cd-11f1-989c-42b51c65c3df","image-types.ts","70518cee-39cd-11f1-989c-42b51c65c3df",["D",1776368994041],"// 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",[],[242,259],"76fa8f48-39cb-11f1-ad8a-42b51c65c3df",["D",1776368146229],[202,203,204,205],[242],"705184a6-39cd-11f1-989c-42b51c65c3df","test-upload.ts","70518532-39cd-11f1-989c-42b51c65c3df","019d97d7-c6f5-75ed-bce1-84d837ece5ba",["D",1776368994041],"// 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 = await 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",[],[277,270],"scripts","70519ffe-39cd-11f1-989c-42b51c65c3df",["D",1776368994041],[200],[277],"de2c4a22-39ca-11f1-82c2-42b51c65c3df","index.tsx","019d97c6-edc7-722c-8966-3241e845f622",["D",1776367889779],"/** @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();",[],[160,283],"5e4f98a2-39cc-11f1-94b0-42b51c65c3df","index.html","019d97c6-edc7-722c-8966-2e86bf374022",["D",1776368534335],"\n\n \n \n \n Chat\n \n \n \n \n \n

\n \n \n \n\n",[],[160,290],"de2c3c4e-39ca-11f1-82c2-42b51c65c3df","favicon.svg","019d97c6-edc7-722c-8966-2824adeeceef",["D",1776367889779],"\n",[],[160,297],["D",1776368994041],[],[160,78,70],["D",1776368994041],[195],[160,78],"bea9c49e-39cb-11f1-843d-42b51c65c3df","useMessages.ts","bea9c53e-39cb-11f1-843d-42b51c65c3df","61fe1c9c-d380-4572-8835-fcfc6e90a2f7",9,["D",1776368266496],"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",[],[160,318,310],"hooks","705123ee-39cd-11f1-989c-42b51c65c3df","useImageUpload.ts","7051247a-39cd-11f1-989c-42b51c65c3df",["D",1776368994041],"// 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\";\n// Import from frontend-local config (see lib/image-config.ts for why).\nimport type { ChatImage } from \"../lib/image-config.ts\";\nimport {\n IMAGE_ALLOWED_MIME_TYPES,\n IMAGE_UPLOAD_MAX_BYTES,\n} from \"../lib/image-config.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",[],[160,318,320],"bea9e5e6-39cb-11f1-843d-42b51c65c3df",["D",1776368266496],[192,193],[160,318],"5cfe1ad2-39cc-11f1-adf2-42b51c65c3df","QRBackground.tsx","f3bc7e10-39cb-11f1-a1d1-42b51c65c3df","019d97c6-edc7-722c-8966-251abec7101e",18,["D",1776368532081],"/** @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",[],[160,339,331],"components","79ba5a60-39cb-11f1-b71b-42b51c65c3df","MessageList.tsx","79ba5b32-39cb-11f1-b71b-42b51c65c3df",["D",1776368150847],"/** @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",[],[160,339,341],"7d4d6c44-39cb-11f1-9c93-42b51c65c3df","MessageInput.tsx","7d4d6ce4-39cb-11f1-9c93-42b51c65c3df",4,["D",1776368156838],"/** @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",[],[160,339,348],"de2c337a-39ca-11f1-82c2-42b51c65c3df","Counter.tsx","019d97c6-edc7-722c-8966-20e9c8727ed6",["D",1776367889779],"/** @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",[],[160,339,356],"70511066-39cd-11f1-989c-42b51c65c3df","ChatMessageList.tsx","705110f2-39cd-11f1-989c-42b51c65c3df",["D",1776368994041],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n// Image-aware wrapper around the message list.\n//\n// Detects messages of the form \"📷 /api/images/{id}\" (inserted by the\n// image-upload feature in api/images.ts) and renders them as inline \n// tags. All other messages render exactly like MessageList — this component\n// deliberately duplicates the rendering logic instead of importing MessageList\n// so that the other agent working on MessageList.tsx can keep editing that file\n// freely without affecting images, and so this branch stays self-contained.\n\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport type { Message } from \"../../shared/types.ts\";\n\ninterface ChatMessageListProps {\n messages: Message[];\n}\n\n// Matches the sentinel format produced by POST /api/images:\n// \"📷 /api/images/42\" (preferred)\n// \"📷 https://.../api/images/42\" (in case someone pastes an absolute URL)\nconst IMAGE_MESSAGE_RE =\n /^📷\\s+(?:https?:\\/\\/[^\\s]+)?(\\/api\\/images\\/\\d+)\\s*$/;\n\nfunction parseImageMessage(text: string): string | null {\n const m = text.match(IMAGE_MESSAGE_RE);\n return m ? m[1] : null;\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 ChatMessageList({ messages }: ChatMessageListProps) {\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 const imageUrl = parseImageMessage(msg.text);\n return (\n \n {imageUrl\n ? \n : (\n

\n {msg.text}\n

\n )}\n

\n {formatTime(msg.createdAt)}\n

\n );\n })}\n \n );\n}\n\nfunction ChatImageBubble({ src }: { src: string }) {\n const [state, setState] = useState<\"loading\" | \"loaded\" | \"error\">(\"loading\");\n\n if (state === \"error\") {\n return (\n \n 📷 (couldn't load image — tap to open) {src}\n \n );\n }\n\n return (\n \n {state === \"loading\" && (\n

\n Loading…\n

\n )}\n setState(\"loaded\")}\n onError={() => setState(\"error\")}\n class={state === \"loaded\"\n ? \"max-w-full max-h-80 rounded-md object-contain\"\n : \"max-w-full max-h-80 rounded-md object-contain opacity-0\"}\n />\n \n );\n}\n",[],[160,339,363],"7050fca2-39cd-11f1-989c-42b51c65c3df","CameraButton.tsx","7050fd24-39cd-11f1-989c-42b51c65c3df",["D",1776368994041],"/** @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",[],[160,339,370],"7051a184-39cd-11f1-989c-42b51c65c3df","App.tsx","019d97c6-edc6-708b-867a-951aa42c63e4",["D",1776368994041],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useMessages } from \"../hooks/useMessages.ts\";\nimport { CameraButton } from \"./CameraButton.tsx\";\n// ChatMessageList wraps MessageList's behavior + renders images inline.\n// Kept as a separate component so MessageList.tsx stays untouched.\nimport { ChatMessageList } from \"./ChatMessageList.tsx\";\nimport { MessageInput } from \"./MessageInput.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 {/* ChatMessageList renders image messages (📷 /api/images/:id) as\n inline tags; plain text messages render normally. */}\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",[],[160,339,377],"de2c3ac8-39ca-11f1-82c2-42b51c65c3df",["D",1776367889779],[184,185,186,187,188,189,190],[160,339],"de2c4dc4-39ca-11f1-82c2-42b51c65c3df",["D",1776367889779],[183,191,194,196,197,198],[160],"7050e802-39cd-11f1-989c-42b51c65c3df","images.ts","7050e88e-39cd-11f1-989c-42b51c65c3df","c75580aa-bb44-4379-89e4-a524a689d561",["D",1776368994041],"// Database + blob storage helpers for uploaded chat images.\n//\n// Design: image BYTES live in Val Town blob storage (cheap & large-capacity),\n// metadata lives in its own SQLite table `chat_images_v1`. This is fully\n// orthogonal to the `messages_v1` table — no shared schema, no migrations\n// needed on the existing table.\n\nimport { blob } from \"https://esm.town/v/std/blob\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport type { ChatImage } from \"../shared/image-types.ts\";\n\nconst TABLE_NAME = \"chat_images_v1\";\nconst BLOB_PREFIX = \"chat-images/v1/\";\n\nlet initialized = false;\nasync function ensureSchema() {\n if (initialized) return;\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS ${TABLE_NAME} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n blob_key TEXT NOT NULL,\n mime_type TEXT NOT NULL,\n width INTEGER,\n height INTEGER,\n byte_size INTEGER NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )\n `);\n initialized = true;\n}\n\nfunction blobKeyFor(id: number): string {\n return `${BLOB_PREFIX}${id}`;\n}\n\nfunction rowToChatImage(row: Record): ChatImage {\n const createdAtRaw = String(row.created_at);\n const createdAt = createdAtRaw.includes(\"T\")\n ? createdAtRaw\n : new Date(createdAtRaw.replace(\" \", \"T\") + \"Z\").toISOString();\n const id = Number(row.id);\n return {\n id,\n mimeType: String(row.mime_type),\n width: row.width == null ? null : Number(row.width),\n height: row.height == null ? null : Number(row.height),\n createdAt,\n url: `/api/images/${id}`,\n };\n}\n\nexport interface InsertImageArgs {\n bytes: Uint8Array;\n mimeType: string;\n width?: number | null;\n height?: number | null;\n}\n\nexport async function insertImage(args: InsertImageArgs): Promise {\n await ensureSchema();\n // Insert metadata first to get an auto-generated id. We use a placeholder\n // blob_key and update it to the id-based key once we know the id. This keeps\n // blob keys stable and predictable.\n const placeholderKey = `${BLOB_PREFIX}pending-${crypto.randomUUID()}`;\n const res = await sqlite.execute({\n sql: `INSERT INTO ${TABLE_NAME} (blob_key, mime_type, width, height, byte_size)\n VALUES (?, ?, ?, ?, ?)\n RETURNING id, blob_key, mime_type, width, height, created_at`,\n args: [\n placeholderKey,\n args.mimeType,\n args.width ?? null,\n args.height ?? null,\n args.bytes.byteLength,\n ],\n });\n const row = (res.rows as Record[])[0];\n const id = Number(row.id);\n const finalKey = blobKeyFor(id);\n\n // Write bytes to blob storage.\n await blob.set(finalKey, args.bytes);\n\n // Swap placeholder key for the real one.\n await sqlite.execute({\n sql: `UPDATE ${TABLE_NAME} SET blob_key = ? WHERE id = ?`,\n args: [finalKey, id],\n });\n\n return rowToChatImage({ ...row, blob_key: finalKey });\n}\n\nexport async function getImageMeta(id: number): Promise<\n { mimeType: string; blobKey: string } | null\n> {\n await ensureSchema();\n const res = await sqlite.execute({\n sql: `SELECT mime_type, blob_key FROM ${TABLE_NAME} WHERE id = ?`,\n args: [id],\n });\n const row = (res.rows as Record[])[0];\n if (!row) return null;\n return {\n mimeType: String(row.mime_type),\n blobKey: String(row.blob_key),\n };\n}\n\nexport async function getImageBytes(blobKey: string): Promise {\n const b = await blob.get(blobKey);\n const buf = await b.arrayBuffer();\n return new Uint8Array(buf);\n}\n",[],[400,393],"database","90f7f21e-39cb-11f1-843d-42b51c65c3df","db.ts","90f7f2e6-39cb-11f1-843d-42b51c65c3df",7,["D",1776368189833],"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",[],[400,402],"90f82090-39cb-11f1-843d-42b51c65c3df",["D",1776368189833],[180,181],[400],"7050adb0-39cd-11f1-989c-42b51c65c3df","7050ae96-39cd-11f1-989c-42b51c65c3df","019d97d7-c6f5-75ed-bce1-7e709cb1030e",["D",1776368994041],"// HTTP routes for the image-upload feature, as a self-contained Hono sub-app.\n// Mounted from index.ts with a single line:\n//\n// import { imagesRoutes } from \"./api/images.ts\";\n// app.route(\"/\", imagesRoutes);\n//\n// All new routes live under /api/images so nothing else is affected.\n\nimport { Hono } from \"npm:hono\";\nimport {\n getImageBytes,\n getImageMeta,\n insertImage,\n} from \"../database/images.ts\";\nimport { insertMessage } from \"../database/db.ts\";\nimport {\n IMAGE_ALLOWED_MIME_TYPES,\n IMAGE_UPLOAD_MAX_BYTES,\n} from \"../shared/image-types.ts\";\n\nexport const imagesRoutes = new Hono();\n\n// POST /api/images — upload an image (multipart/form-data, field \"image\")\n// On success, also inserts a chat message containing the image URL so the\n// picture shows up in the existing message feed without any changes to the\n// core messages pipeline.\nimagesRoutes.post(\"/api/images\", async (c) => {\n const contentType = c.req.header(\"content-type\") || \"\";\n if (!contentType.toLowerCase().includes(\"multipart/form-data\")) {\n return c.json(\n { error: \"Expected multipart/form-data with an 'image' field\" },\n 400,\n );\n }\n\n let form: FormData;\n try {\n form = await c.req.formData();\n } catch (err) {\n return c.json({ error: \"Failed to parse form data\" }, 400);\n }\n\n const file = form.get(\"image\");\n if (!(file instanceof File)) {\n return c.json({ error: \"Missing 'image' file field\" }, 400);\n }\n\n if (file.size === 0) {\n return c.json({ error: \"Empty file\" }, 400);\n }\n if (file.size > IMAGE_UPLOAD_MAX_BYTES) {\n return c.json(\n { error: `File too large (max ${IMAGE_UPLOAD_MAX_BYTES} bytes)` },\n 413,\n );\n }\n\n // Validate MIME — fall back to image/jpeg if the browser didn't set one\n // (iOS sometimes sends application/octet-stream for camera captures).\n let mimeType = (file.type || \"image/jpeg\").toLowerCase();\n if (!(IMAGE_ALLOWED_MIME_TYPES as readonly string[]).includes(mimeType)) {\n // Be permissive for octet-stream but reject truly unknown types.\n if (mimeType === \"application/octet-stream\") {\n mimeType = \"image/jpeg\";\n } else {\n return c.json({ error: `Unsupported image type: ${mimeType}` }, 415);\n }\n }\n\n const bytes = new Uint8Array(await file.arrayBuffer());\n\n // Optional client-supplied dimensions (helps layout before the image loads).\n const widthRaw = form.get(\"width\");\n const heightRaw = form.get(\"height\");\n const width = typeof widthRaw === \"string\" && widthRaw\n ? Number(widthRaw) || null\n : null;\n const height = typeof heightRaw === \"string\" && heightRaw\n ? Number(heightRaw) || null\n : null;\n\n let image;\n try {\n image = await insertImage({ bytes, mimeType, width, height });\n } catch (err) {\n console.error(\"Failed to store image:\", err);\n return c.json({ error: \"Failed to store image\" }, 500);\n }\n\n // Insert a text message so the image is visible in the existing chat feed.\n // We use a compact sentinel-ish format that's still human-readable.\n // MessageList currently renders this as text with the URL visible — clients\n // that want fancy inline rendering can detect the `📷` + URL pattern later.\n let chatMessage = null;\n try {\n chatMessage = await insertMessage(`📷 ${image.url}`);\n } catch (err) {\n console.error(\"Failed to post image chat message:\", err);\n // Don't fail the upload — the image is stored; caller can retry linking.\n }\n\n return c.json({ image, message: chatMessage });\n});\n\n// GET /api/images/:id — serve image bytes\nimagesRoutes.get(\"/api/images/:id\", async (c) => {\n const idStr = c.req.param(\"id\");\n const id = Number(idStr);\n if (!Number.isFinite(id) || id <= 0) {\n return c.json({ error: \"Invalid id\" }, 400);\n }\n\n const meta = await getImageMeta(id);\n if (!meta) return c.json({ error: \"Not found\" }, 404);\n\n let bytes: Uint8Array;\n try {\n bytes = await getImageBytes(meta.blobKey);\n } catch (err) {\n console.error(\"Failed to read image blob:\", err);\n return c.json({ error: \"Image bytes unavailable\" }, 500);\n }\n\n return new Response(bytes, {\n headers: {\n \"content-type\": meta.mimeType,\n // Images are immutable once uploaded; cache aggressively.\n \"cache-control\": \"public, max-age=31536000, immutable\",\n \"content-length\": String(bytes.byteLength),\n },\n });\n});\n",[],[420,393],"api","70519446-39cd-11f1-989c-42b51c65c3df",["D",1776368994041],[178],[420],["D",1776367889779],["D",1789510872811],{"_11":12,"_130":76},{"_11":12,"_126":-5,"_75":76,"_31":74,"_127":128,"_129":30},{"_39":40,"_13":16,"_33":36,"_118":81,"_119":-5,"_120":-5,"_121":-5,"_122":-5,"_123":-5,"_124":14,"_125":12},"ctx",{"_53":-5,"_149":463,"_464":465,"_466":467,"_468":30,"_469":30,"_470":30,"_471":24,"_472":-5,"_473":-7,"_474":-7,"_475":26,"_476":30,"_477":30,"_478":-5,"_479":30,"_480":30,"_481":30,"_482":-5},"ENV",{"_434":435,"_436":437,"_438":16,"_439":440,"_441":442,"_443":444,"_445":446,"_447":448,"_449":450,"_451":452,"_453":454,"_455":456,"_457":458,"_459":460,"_461":462},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

History · lib