\n \n \n \n",[18,67],"ae3ce1be-575c-11f1-88ab-ee650bb23af1",["D",1779619099693],[18,81],"pulls","branches",1,"forks","envVars",{"_198":26,"_200":26},"connections",{"_198":26,"_199":26},"count","unfilledCount","emptyCount",{"_35":168,"_13":18,"_65":93,"_45":-5,"_37":38,"_169":170,"_171":24,"_39":262,"_41":26,"_68":82,"_173":-5,"_69":30,"_174":-5,"_218":263,"_17":264},{"_35":187,"_13":81,"_65":80,"_45":93,"_37":38,"_169":75,"_171":24,"_39":259,"_41":26,"_68":82,"_173":-5,"_69":30,"_174":-5,"_218":260,"_17":261},{"_35":251,"_13":252,"_65":253,"_45":80,"_37":38,"_169":254,"_171":24,"_39":255,"_41":192,"_68":92,"_173":256,"_69":30,"_174":-5,"_218":257,"_17":258},{"_35":242,"_13":243,"_65":244,"_45":80,"_37":38,"_169":245,"_171":24,"_39":246,"_41":247,"_68":92,"_173":248,"_69":30,"_174":-5,"_218":249,"_17":250},{"_35":234,"_13":235,"_65":236,"_45":80,"_37":38,"_169":237,"_171":24,"_39":238,"_41":192,"_68":92,"_173":239,"_69":30,"_174":-5,"_218":240,"_17":241},{"_35":183,"_13":67,"_65":66,"_45":93,"_37":38,"_169":42,"_171":24,"_39":231,"_41":26,"_68":21,"_173":185,"_69":30,"_174":-5,"_218":232,"_17":233},{"_35":179,"_13":91,"_65":90,"_45":93,"_37":38,"_169":85,"_171":24,"_39":228,"_41":26,"_68":92,"_173":181,"_69":30,"_174":-5,"_218":229,"_17":230},{"_35":221,"_13":222,"_65":223,"_45":-5,"_37":38,"_169":132,"_171":24,"_39":224,"_41":192,"_68":21,"_173":225,"_69":30,"_174":-5,"_218":226,"_17":227},{"_35":210,"_13":211,"_65":212,"_45":-5,"_37":38,"_169":213,"_171":24,"_39":214,"_41":215,"_68":216,"_173":217,"_69":30,"_174":-5,"_218":219,"_17":220},"f3277ed8-575c-11f1-8686-ee650bb23af1","main.ts","a7ef8c2c-575b-11f1-9bc0-ee650bb23af1",18,["D",1779619215315],9,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { blob } from \"https://esm.town/v/std/blob\";\n\n// ─── Persistence Layer: SQLite (primary) ───\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS requests (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n status TEXT NOT NULL DEFAULT 'pending',\n timestamp TEXT NOT NULL DEFAULT (datetime('now'))\n )\n`);\n\n// Add status column if upgrading from older schema\ntry {\n await sqlite.execute(\"SELECT status FROM requests LIMIT 1\");\n} catch {\n await sqlite.execute(\"ALTER TABLE requests ADD COLUMN status TEXT NOT NULL DEFAULT 'pending'\");\n}\n\n// ─── Validation helpers ───\nconst MIN_LENGTH = 3;\nconst MAX_LENGTH = 1000;\nconst VALID_STATUSES = [\"pending\", \"in-progress\", \"resolved\"] as const;\n\ninterface ValidationResult {\n valid: boolean;\n errors: string[];\n}\n\nfunction validateRequestText(text: unknown): ValidationResult {\n const errors: string[] = [];\n\n if (text === undefined || text === null) {\n errors.push(\"Text is required.\");\n return { valid: false, errors };\n }\n\n if (typeof text !== \"string\") {\n errors.push(\"Text must be a string.\");\n return { valid: false, errors };\n }\n\n const trimmed = text.trim();\n\n if (trimmed.length === 0) {\n errors.push(\"Text cannot be empty or whitespace only.\");\n } else if (trimmed.length < MIN_LENGTH) {\n errors.push(`Text must be at least ${MIN_LENGTH} characters (got ${trimmed.length}).`);\n } else if (trimmed.length > MAX_LENGTH) {\n errors.push(`Text must be at most ${MAX_LENGTH} characters (got ${trimmed.length}).`);\n }\n\n return { valid: errors.length === 0, errors };\n}\n\n// ─── Persistence Layer: Blob (backup mirror) ───\nconst BLOB_KEY = \"requests-backup\";\n\nasync function syncToBlob() {\n const result = await sqlite.execute(\"SELECT * FROM requests ORDER BY timestamp DESC\");\n await blob.setJSON(BLOB_KEY, {\n syncedAt: new Date().toISOString(),\n count: result.rows.length,\n requests: result.rows,\n });\n}\n\n// ─── App ───\nconst app = new Hono();\n\n// Serve frontend\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// ─── API Routes ───\n\n// GET all requests\napp.get(\"/api/requests\", async (c) => {\n const result = await sqlite.execute(\"SELECT * FROM requests ORDER BY timestamp DESC\");\n return c.json(result.rows);\n});\n\n// GET validation rules (so frontend can match backend rules)\napp.get(\"/api/validation-rules\", (c) => {\n return c.json({ minLength: MIN_LENGTH, maxLength: MAX_LENGTH, validStatuses: VALID_STATUSES });\n});\n\n// POST a new request\napp.post(\"/api/requests\", async (c) => {\n let body: Record;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Invalid JSON body.\" }, 400);\n }\n\n // Validate text\n const validation = validateRequestText(body.text);\n if (!validation.valid) {\n return c.json({ error: validation.errors.join(\" \") }, 400);\n }\n\n const text = (body.text as string).trim();\n\n // Check for exact duplicate within the last 60 seconds\n const dupeCheck = await sqlite.execute({\n sql: `SELECT id FROM requests\n WHERE text = ? AND timestamp > datetime('now', '-60 seconds')\n LIMIT 1`,\n args: [text],\n });\n if (dupeCheck.rows.length > 0) {\n return c.json({ error: \"Duplicate request — this was already submitted in the last minute.\" }, 409);\n }\n\n // Insert into SQLite\n const result = await sqlite.execute({\n sql: \"INSERT INTO requests (text) VALUES (?)\",\n args: [text],\n });\n\n const newRow = await sqlite.execute({\n sql: \"SELECT * FROM requests WHERE id = ?\",\n args: [result.lastInsertRowid!],\n });\n\n // Mirror to blob storage (non-blocking, don't fail the request)\n syncToBlob().catch(() => {});\n\n return c.json(newRow.rows[0], 201);\n});\n\n// PATCH update request status\napp.patch(\"/api/requests/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n\n let body: Record;\n try {\n body = await c.req.json();\n } catch {\n return c.json({ error: \"Invalid JSON body.\" }, 400);\n }\n\n const status = body.status;\n if (!status || !VALID_STATUSES.includes(status as typeof VALID_STATUSES[number])) {\n return c.json({ error: `Status must be one of: ${VALID_STATUSES.join(\", \")}` }, 400);\n }\n\n await sqlite.execute({\n sql: \"UPDATE requests SET status = ? WHERE id = ?\",\n args: [status as string, id],\n });\n\n const updated = await sqlite.execute({\n sql: \"SELECT * FROM requests WHERE id = ?\",\n args: [id],\n });\n\n if (updated.rows.length === 0) {\n return c.json({ error: \"Request not found.\" }, 404);\n }\n\n syncToBlob().catch(() => {});\n return c.json(updated.rows[0]);\n});\n\n// DELETE a request\napp.delete(\"/api/requests/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n\n const exists = await sqlite.execute({\n sql: \"SELECT id FROM requests WHERE id = ?\",\n args: [id],\n });\n if (exists.rows.length === 0) {\n return c.json({ error: \"Request not found.\" }, 404);\n }\n\n await sqlite.execute({ sql: \"DELETE FROM requests WHERE id = ?\", args: [id] });\n syncToBlob().catch(() => {});\n return c.json({ ok: true });\n});\n\n// GET blob backup info (diagnostic endpoint)\napp.get(\"/api/backup-info\", async (c) => {\n try {\n const data = await blob.getJSON(BLOB_KEY);\n return c.json(data ?? { message: \"No backup yet.\" });\n } catch {\n return c.json({ message: \"No backup yet.\" });\n }\n});\n\n// Error handling for full stack traces\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[211],"94da52a0-575d-11f1-a424-ee650bb23af1","README.md","c8779948-575c-11f1-afb5-ee650bb23af1",["D",1779619486592],"# 🤖 Townie AI Assistant\n\nA request tracker app built on Val Town with **persistent storage** — submitted requests are saved to SQLite and automatically loaded when the page opens.\n\n## How Persistence Works\n\n```mermaid\nsequenceDiagram\n participant Browser\n participant Hono API\n participant SQLite\n participant Blob Backup\n\n Browser->>Hono API: GET /api/requests (page load)\n Hono API->>SQLite: SELECT * FROM requests\n SQLite-->>Hono API: rows[]\n Hono API-->>Browser: JSON array of saved requests\n\n Browser->>Hono API: POST /api/requests\n Hono API->>Hono API: Validate (empty, length, duplicate)\n Hono API->>SQLite: INSERT INTO requests\n Hono API->>Blob Backup: Mirror (async, non-blocking)\n Hono API-->>Browser: 201 + new request object\n```\n\n### Two Persistence Layers\n\n| Layer | Purpose | How |\n|-------|---------|-----|\n| **SQLite** (primary) | Durable, queryable storage | `std/sqlite/main.ts` — per-val database |\n| **Blob Storage** (backup) | Redundant mirror | `std/blob` — JSON snapshot synced on every write |\n\n## Data Structure\n\n```sql\nCREATE TABLE requests (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n status TEXT NOT NULL DEFAULT 'pending', -- pending | in-progress | resolved\n timestamp TEXT NOT NULL DEFAULT (datetime('now'))\n)\n```\n\n## Validation (3 layers)\n\n| Layer | Checks |\n|-------|--------|\n| **Frontend (React)** | Empty input, min 3 chars, max 1000 chars, disables button |\n| **Backend (Hono)** | Type check, empty/whitespace, min/max length |\n| **Database-level** | Duplicate detection within 60 seconds, NOT NULL constraints |\n\n## API Endpoints\n\n| Method | Path | Description |\n|--------|------|-------------|\n| `GET` | `/api/requests` | Retrieve all saved requests |\n| `POST` | `/api/requests` | Submit a new request |\n| `PATCH` | `/api/requests/:id` | Update status (pending → in-progress → resolved) |\n| `DELETE` | `/api/requests/:id` | Delete a request |\n| `GET` | `/api/validation-rules` | Get validation rules |\n| `GET` | `/api/backup-info` | View blob backup status |\n\n## File Structure\n\n- `main.ts` — Hono backend: SQLite + blob persistence, validation, API routes\n- `frontend/index.html` — HTML shell with Twind\n- `frontend/index.tsx` — React entry point\n- `frontend/components/App.tsx` — State management, fetches saved data on load\n- `frontend/components/RequestForm.tsx` — Form with client-side validation\n- `frontend/components/RequestList.tsx` — Displays requests with status badges\n",[],[222],["D",1779619103380],[],[18,91],["D",1779619099298],[],[18,67],"7d7d8fd2-575d-11f1-b38e-ee650bb23af1","RequestList.tsx","bd415708-575c-11f1-9913-ee650bb23af1",22,["D",1779619447385],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport type { AppRequest } from \"./App.tsx\";\n\ninterface Props {\n requests: AppRequest[];\n onDelete: (id: number) => void;\n onStatusChange: (id: number, status: string) => void;\n}\n\nconst STATUS_CONFIG: Record = {\n pending: { label: \"Pending\", bg: \"bg-amber-100\", text: \"text-amber-700\", icon: \"⏳\" },\n \"in-progress\": { label: \"In Progress\", bg: \"bg-blue-100\", text: \"text-blue-700\", icon: \"🔧\" },\n resolved: { label: \"Resolved\", bg: \"bg-green-100\", text: \"text-green-700\", icon: \"✅\" },\n};\n\nfunction formatDate(timestamp: string): string {\n const date = new Date(timestamp + \"Z\"); // SQLite stores UTC without Z suffix\n return date.toLocaleString();\n}\n\nexport function RequestList({ requests, onDelete, onStatusChange }: Props) {\n if (requests.length === 0) {\n return (\n

📭

No requests yet. Submit one above!

Your submissions will be saved and displayed here.

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

\n 📋 Saved Requests ({requests.length})\n

\n {requests.map((req) => {\n const cfg = STATUS_CONFIG[req.status] || STATUS_CONFIG.pending;\n\n return (\n \n {/* Top row: text + delete button */}\n

\n {req.text}\n

\n onDelete(req.id)}\n className=\"text-gray-300 hover:text-red-500 text-lg transition flex-shrink-0\"\n title=\"Delete request\"\n >\n ✕\n \n

\n\n {/* Bottom row: timestamp + status selector */}\n

\n 🕐 {formatDate(req.timestamp)}\n

\n onStatusChange(req.id, e.target.value)}\n className={`text-xs font-medium px-2 py-1 rounded-full border-0 cursor-pointer ${cfg.bg} ${cfg.text}`}\n >\n \n \n \n \n

\n );\n })}\n

\n \n );\n}\n",[],[18,81,235],"751e135c-575d-11f1-b38e-ee650bb23af1","RequestForm.tsx","b9c56646-575c-11f1-8d53-ee650bb23af1",21,["D",1779619433339],2,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nconst MIN_LENGTH = 3;\nconst MAX_LENGTH = 1000;\n\ninterface Props {\n onSubmit: (text: string) => Promise;\n}\n\nexport function RequestForm({ onSubmit }: Props) {\n const [text, setText] = useState(\"\");\n const [submitting, setSubmitting] = useState(false);\n const [error, setError] = useState(null);\n const [success, setSuccess] = useState(false);\n\n const trimmed = text.trim();\n const charCount = trimmed.length;\n const tooShort = charCount > 0 && charCount < MIN_LENGTH;\n const tooLong = charCount > MAX_LENGTH;\n const isValid = charCount >= MIN_LENGTH && charCount <= MAX_LENGTH;\n\n async function handleSubmit(e: React.FormEvent) {\n e.preventDefault();\n setError(null);\n setSuccess(false);\n\n // Client-side validation (mirrors backend rules)\n if (!trimmed) {\n setError(\"Please enter a request before submitting.\");\n return;\n }\n if (tooShort) {\n setError(`Request must be at least ${MIN_LENGTH} characters.`);\n return;\n }\n if (tooLong) {\n setError(`Request must be at most ${MAX_LENGTH} characters.`);\n return;\n }\n\n setSubmitting(true);\n\n try {\n // Calls App.addRequest → POST /api/requests → server validates & persists\n await onSubmit(trimmed);\n setText(\"\");\n setSuccess(true);\n setTimeout(() => setSuccess(false), 3000);\n } catch (err: any) {\n // Surfaces server-side errors (duplicate detection, etc.)\n setError(err.message || \"Failed to submit. Please try again.\");\n } finally {\n setSubmitting(false);\n }\n }\n\n return (\n

\n \n What do you need help with?\n \n {\n setText(e.target.value);\n if (error) setError(null);\n if (success) setSuccess(false);\n }}\n placeholder=\"Describe your request (min 3 characters)...\"\n rows={3}\n maxLength={MAX_LENGTH + 50}\n className={`w-full border rounded-lg p-3 text-sm focus:outline-none focus:ring-2 resize-none transition ${\n error ? \"border-red-400 focus:ring-red-300\" : \"border-gray-300 focus:ring-blue-400\"\n }`}\n />\n\n {/* Character counter + validation hints */}\n

\n {error &&

{error}

}\n {!error && tooShort && (\n

\n {MIN_LENGTH - charCount} more character{MIN_LENGTH - charCount !== 1 ? \"s\" : \"\"} needed\n

\n )}\n {!error && success && (\n

✅ Request saved successfully!

\n )}\n

\n {charCount}/{MAX_LENGTH}\n

\n\n \n {submitting ? \"Saving...\" : \"Submit Request\"}\n \n \n );\n}\n",[],[18,81,243],"69b11a0a-575d-11f1-979e-ee650bb23af1","App.tsx","b4cddae2-575c-11f1-b8cb-ee650bb23af1",20,["D",1779619414134],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport { RequestForm } from \"./RequestForm.tsx\";\nimport { RequestList } from \"./RequestList.tsx\";\n\nexport interface AppRequest {\n id: number;\n text: string;\n status: string;\n timestamp: string;\n}\n\nexport function App() {\n const [requests, setRequests] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n // ─── Fetch all saved requests on page load ───\n const fetchRequests = useCallback(async () => {\n setLoading(true);\n setError(null);\n try {\n const res = await fetch(\"/api/requests\");\n if (!res.ok) throw new Error(`Server returned ${res.status}`);\n const data: AppRequest[] = await res.json();\n setRequests(data);\n } catch (err: any) {\n setError(err.message || \"Failed to load saved requests.\");\n } finally {\n setLoading(false);\n }\n }, []);\n\n useEffect(() => {\n fetchRequests();\n }, [fetchRequests]);\n\n // ─── Add a new request (POST → server persists → update local state) ───\n async function addRequest(text: string) {\n const res = await fetch(\"/api/requests\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text }),\n });\n\n const data = await res.json();\n\n if (!res.ok) {\n // Bubble the server-side validation error to the form\n throw new Error(data.error || \"Failed to submit request.\");\n }\n\n // Prepend the newly saved request to the list\n setRequests((prev) => [data, ...prev]);\n }\n\n // ─── Update request status (PATCH → server persists → update local state) ───\n async function updateStatus(id: number, status: string) {\n const res = await fetch(`/api/requests/${id}`, {\n method: \"PATCH\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ status }),\n });\n\n if (!res.ok) return;\n\n const updated: AppRequest = await res.json();\n setRequests((prev) =>\n prev.map((r) => (r.id === updated.id ? updated : r)),\n );\n }\n\n // ─── Delete a request (DELETE → server persists → update local state) ───\n async function deleteRequest(id: number) {\n const res = await fetch(`/api/requests/${id}`, { method: \"DELETE\" });\n if (res.ok) {\n setRequests((prev) => prev.filter((r) => r.id !== id));\n }\n }\n\n // ─── Stats ───\n const pending = requests.filter((r) => r.status === \"pending\").length;\n const inProgress = requests.filter((r) => r.status === \"in-progress\").length;\n const resolved = requests.filter((r) => r.status === \"resolved\").length;\n\n return (\n

🤖 Townie AI Assistant

Submit and track your assistance requests

\n\n \n\n {/* ─── Stats bar ─── */}\n {!loading && requests.length > 0 && (\n

\n \n ⏳ {pending} pending\n \n \n 🔧 {inProgress} in progress\n \n \n ✅ {resolved} resolved\n \n

\n )}\n\n {/* ─── Loading state ─── */}\n {loading && (\n

⏳

Loading saved requests...

\n )}\n\n {/* ─── Error state with retry ─── */}\n {error && (\n

{error}

\n \n Try again\n \n

\n )}\n\n {/* ─── Request list (loaded from server) ─── */}\n {!loading && !error && (\n \n )}\n\n

\n view source\n

\n );\n}\n",[],[18,81,252],["D",1779619099693],[203,204,205],[18,81],["D",1779619094829],[202,206,207],[18],["D",1779618659606],["D",1789470042795],{"_11":12,"_146":72},{"_11":12,"_141":142,"_71":72,"_31":70,"_143":144,"_145":30},{"_41":132,"_13":16,"_35":38,"_133":95,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":14,"_140":12},"ctx",{"_55":-5,"_165":303,"_304":305,"_306":307,"_308":30,"_309":30,"_310":30,"_311":24,"_312":-5,"_313":-7,"_314":-7,"_315":26,"_316":30,"_317":30,"_318":-5,"_319":30,"_320":30,"_321":30,"_322":-5},"ENV",{"_274":275,"_276":277,"_278":16,"_279":280,"_281":282,"_283":284,"_285":286,"_287":288,"_289":290,"_291":292,"_293":294,"_295":296,"_297":298,"_299":300,"_301":302},"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"]

History · frontend