\n \n \n \n",[],[67,100],"ae3ce1be-575c-11f1-88ab-ee650bb23af1","components","ae3ce29a-575c-11f1-88ab-ee650bb23af1",12,["D",1779619099693],[114,115,116],[67,108],{"_35":134,"_13":135,"_38":136,"_40":109,"_41":42,"_43":137,"_45":46,"_47":138,"_17":63,"_50":95,"_52":139,"_54":55,"_56":-5,"_78":140,"_18":141},{"_35":125,"_13":126,"_38":127,"_40":109,"_41":42,"_43":128,"_45":46,"_47":129,"_17":130,"_50":95,"_52":131,"_54":55,"_56":-5,"_78":132,"_18":133},{"_35":117,"_13":118,"_38":119,"_40":109,"_41":42,"_43":120,"_45":46,"_47":121,"_17":63,"_50":95,"_52":122,"_54":55,"_56":-5,"_78":123,"_18":124},"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",[],[67,108,118],"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",[],[67,108,126],"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",[],[67,108,135],"a7ebb73c-575b-11f1-9bc0-ee650bb23af1",["D",1779618659606],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Basic Assistance Request App","imageUrl","userId","12fa63e7-842d-4b32-9f90-b80f181738be","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","019e5983-09e3-719e-b1c3-e157a12e3933","tursoName","a7ebb73c575b11f19bc0ee650bb23af1","tursoHostname","a7ebb73c575b11f19bc0ee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789470042795],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_199":195},"org",{"_11":12,"_192":193,"_194":195,"_152":153,"_196":197,"_198":55},"branch",{"_17":61,"_13":16,"_35":42,"_184":142,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":14,"_191":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Kandrianaha","avatar","https://avatars.githubusercontent.com/u/195972008?v=4","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":142,"_13":14,"_47":260,"_144":-5,"_145":55,"_146":147,"_148":147,"_149":150,"_151":-5,"_152":153,"_154":-5,"_155":55,"_156":-5,"_157":-5,"_158":71,"_159":160,"_161":162,"_163":164,"_165":261,"_167":-5,"_168":169,"_170":169,"_171":172,"_173":172,"_174":172,"_175":169,"_176":169,"_177":262,"_179":263,"_181":264,"_183":55},[233,240,241],"files",[233,234,235,236,237,238,239,240,241],"counts",{"_224":71,"_225":63,"_226":71,"_31":227,"_228":229},[218,219,220],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":70,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_18":223},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":62,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_18":222},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":48,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_18":221},[37],[59],[67],"pulls","branches","forks",{"_230":71,"_232":71},"connections",{"_230":71,"_231":71},"count","unfilledCount","emptyCount",{"_35":66,"_13":67,"_38":68,"_40":-5,"_41":42,"_43":69,"_45":46,"_47":84,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_78":258,"_18":259},{"_35":107,"_13":108,"_38":109,"_40":68,"_41":42,"_43":110,"_45":46,"_47":111,"_17":71,"_50":72,"_52":-5,"_54":55,"_56":-5,"_78":256,"_18":257},{"_35":134,"_13":135,"_38":136,"_40":109,"_41":42,"_43":137,"_45":46,"_47":138,"_17":63,"_50":95,"_52":139,"_54":55,"_56":-5,"_78":254,"_18":255},{"_35":125,"_13":126,"_38":127,"_40":109,"_41":42,"_43":128,"_45":46,"_47":129,"_17":130,"_50":95,"_52":131,"_54":55,"_56":-5,"_78":252,"_18":253},{"_35":117,"_13":118,"_38":119,"_40":109,"_41":42,"_43":120,"_45":46,"_47":121,"_17":63,"_50":95,"_52":122,"_54":55,"_56":-5,"_78":250,"_18":251},{"_35":99,"_13":100,"_38":101,"_40":68,"_41":42,"_43":102,"_45":46,"_47":103,"_17":71,"_50":24,"_52":104,"_54":55,"_56":-5,"_78":248,"_18":249},{"_35":90,"_13":91,"_38":92,"_40":68,"_41":42,"_43":93,"_45":46,"_47":94,"_17":71,"_50":95,"_52":96,"_54":55,"_56":-5,"_78":246,"_18":247},{"_35":58,"_13":59,"_38":60,"_40":-5,"_41":42,"_43":61,"_45":46,"_47":81,"_17":63,"_50":24,"_52":64,"_54":55,"_56":-5,"_78":244,"_18":245},{"_35":36,"_13":37,"_38":39,"_40":-5,"_41":42,"_43":44,"_45":46,"_47":77,"_17":49,"_50":51,"_52":53,"_54":55,"_56":-5,"_78":242,"_18":243},[],[37],[],[59],[],[67,91],[],[67,100],[],[67,108,118],[],[67,108,126],[],[67,108,135],[235,236,237],[67,108],[234,238,239],[67],["D",1779618659606],["D",1789470042795],{"_11":12,"_199":195},{"_11":12,"_192":193,"_194":195,"_152":153,"_196":197,"_198":55},{"_17":61,"_13":16,"_35":42,"_184":142,"_185":-5,"_186":-5,"_187":-5,"_188":-5,"_189":-5,"_190":14,"_191":12},"ctx",{"_177":-5,"_215":298,"_299":300,"_301":302,"_303":55,"_304":55,"_305":55,"_306":46,"_307":-5,"_308":-7,"_309":-7,"_310":71,"_311":55,"_312":55,"_313":-5,"_314":55,"_315":55,"_316":55,"_317":-5},"ENV",{"_269":270,"_271":272,"_273":16,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295,"_296":297},"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"]

Code