\n \n \n \n\n",[],[98,140],"a87ee696-55cc-11f1-a5bf-ee650bb23af1","favicon.svg","019e4f51-805e-7440-bcf5-7e167d7a24d3",10,["D",1779447291365],"\n\n",[],[98,148],"7329faf8-55cc-11f1-a76e-ee650bb23af1","components","019e4f51-805e-7440-bcf5-7a6c1257b90e",["D",1779447201825],[161,162,163,164],[98,156],{"_35":188,"_13":189,"_65":190,"_67":157,"_68":69,"_70":191,"_71":72,"_37":192,"_17":74,"_75":121,"_77":193,"_79":50,"_80":-5,"_107":194,"_18":195},{"_35":180,"_13":181,"_65":182,"_67":157,"_68":69,"_70":183,"_71":72,"_37":184,"_17":74,"_75":121,"_77":185,"_79":50,"_80":-5,"_107":186,"_18":187},{"_35":173,"_13":174,"_65":175,"_67":157,"_68":69,"_70":31,"_71":72,"_37":176,"_17":74,"_75":121,"_77":177,"_79":50,"_80":-5,"_107":178,"_18":179},{"_35":165,"_13":166,"_65":167,"_67":157,"_68":69,"_70":168,"_71":72,"_37":169,"_17":74,"_75":121,"_77":170,"_79":50,"_80":-5,"_107":171,"_18":172},"26077a32-55ce-11f1-b7ea-ee650bb23af1","Toast.tsx","88cb190a-55cc-11f1-b99b-ee650bb23af1",14,["D",1779447931109],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createContext, useCallback, useContext, useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\ntype ToastType = \"success\" | \"error\" | \"info\";\ninterface ToastMsg {\n id: number;\n text: string;\n type: ToastType;\n}\n\ninterface ToastCtx {\n show: (text: string, type?: ToastType) => void;\n}\n\nconst Ctx = createContext({ show: () => {} });\n\nexport function useToast() {\n return useContext(Ctx);\n}\n\nlet nextId = 0;\n\nexport function ToastProvider({ children }: { children: any }) {\n const [toasts, setToasts] = useState([]);\n\n const show = useCallback((text: string, type: ToastType = \"success\") => {\n const id = nextId++;\n setToasts((prev) => [...prev, { id, text, type }]);\n setTimeout(() => {\n setToasts((prev) => prev.filter((t) => t.id !== id));\n }, 3000);\n }, []);\n\n return (\n \n {children}\n {/* Render portal */}\n

\n {toasts.map((t) => (\n \n {t.type === \"success\" ? \"✅\" : t.type === \"error\" ? \"❌\" : \"ℹ️\"} {t.text}\n

\n ))}\n \n \n );\n}\n\nexport function Toast() {\n return null; // Toasts are rendered by the provider\n}\n",[],[98,156,166],"23049c5c-55ce-11f1-b73e-ee650bb23af1","RequestsTab.tsx","9236bef4-55cc-11f1-a92c-ee650bb23af1",["D",1779447926419],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { useToast } from \"./Toast.tsx\";\n\ninterface AssistRequest {\n id: number;\n text: string;\n created_at: string;\n}\n\nexport function RequestsTab() {\n const [requests, setRequests] = useState([]);\n const [text, setText] = useState(\"\");\n const [loading, setLoading] = useState(true);\n const [submitting, setSubmitting] = useState(false);\n const [deletingId, setDeletingId] = useState(null);\n const { show } = useToast();\n\n // Load requests on mount\n useEffect(() => {\n fetch(\"/api/requests\")\n .then((r) => {\n if (!r.ok) throw new Error(\"Server error\");\n return r.json();\n })\n .then((data) => setRequests(data))\n .catch(() => show(\"Failed to load requests\", \"error\"))\n .finally(() => setLoading(false));\n }, []);\n\n const handleSubmit = async (e: Event) => {\n e.preventDefault();\n const trimmed = text.trim();\n if (!trimmed) {\n show(\"Please enter a request before submitting\", \"error\");\n return;\n }\n setSubmitting(true);\n try {\n const res = await fetch(\"/api/requests\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ text: trimmed }),\n });\n if (!res.ok) {\n const err = await res.json();\n throw new Error(err.error || \"Failed to submit\");\n }\n const newReq = await res.json();\n setRequests((prev) => [newReq, ...prev]);\n setText(\"\");\n show(\"Request submitted!\");\n } catch (err: any) {\n show(err.message || \"Something went wrong\", \"error\");\n } finally {\n setSubmitting(false);\n }\n };\n\n const handleDelete = async (id: number) => {\n if (deletingId === id) {\n // Second click = confirm\n try {\n await fetch(`/api/requests/${id}`, { method: \"DELETE\" });\n setRequests((prev) => prev.filter((r) => r.id !== id));\n show(\"Request removed\");\n } catch {\n show(\"Failed to delete\", \"error\");\n }\n setDeletingId(null);\n } else {\n // First click = ask to confirm\n setDeletingId(id);\n // Auto-reset after 3 seconds\n setTimeout(() => setDeletingId((curr) => (curr === id ? null : curr)), 3000);\n }\n };\n\n const formatDate = (iso: string) => {\n const d = new Date(iso + \"Z\");\n return d.toLocaleString();\n };\n\n const charsLeft = 500 - text.length;\n\n return (\n

\n {/* Submit Form */}\n \n\n {/* Requests List */}\n

\n Previous Requests{\" \"}\n {!loading && ({requests.length})}\n

\n\n {loading ? (\n

\n ) : requests.length === 0 ? (\n

No requests yet. Submit one above! 👆

\n ) : (\n

\n
\n
{req.text}
\n
🕐 {formatDate(req.created_at)}
\n
\n handleDelete(req.id)}\n class={`text-lg transition-colors cursor-pointer flex-shrink-0 ${\n deletingId === req.id\n ? \"text-red-500\"\n : \"text-gray-300 hover:text-red-500\"\n }`}\n title={deletingId === req.id ? \"Click again to confirm delete\" : \"Delete\"}\n >\n {deletingId === req.id ? \"🗑️\" : \"✕\"}\n \n

\n )}\n

\n );\n}\n",[],[98,156,174],"18135716-55ce-11f1-b7ea-ee650bb23af1","ChatTab.tsx","a2254c9a-55cc-11f1-a5bf-ee650bb23af1",12,["D",1779447908032],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { useToast } from \"./Toast.tsx\";\n\ninterface ChatMessage {\n id: number;\n username: string;\n message: string;\n created_at: string;\n}\n\nexport function ChatTab() {\n const [username, setUsername] = useState(() => localStorage.getItem(\"chat_user\") || \"\");\n const [joined, setJoined] = useState(() => !!localStorage.getItem(\"chat_user\"));\n const [messages, setMessages] = useState([]);\n const [input, setInput] = useState(\"\");\n const [sending, setSending] = useState(false);\n const [loading, setLoading] = useState(true);\n const [onlineCount, setOnlineCount] = useState(0);\n const messagesEndRef = useRef(null);\n const lastIdRef = useRef(0);\n const pollRef = useRef(0);\n const inputRef = useRef(null);\n const { show } = useToast();\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n // Load initial messages\n useEffect(() => {\n if (!joined) return;\n fetch(\"/api/chat\")\n .then((r) => r.json())\n .then((data: ChatMessage[]) => {\n setMessages(data);\n if (data.length > 0) lastIdRef.current = data[data.length - 1].id;\n // Count unique users active in last 5 min\n const fiveMinAgo = Date.now() - 5 * 60 * 1000;\n const recentUsers = new Set(\n data.filter((m) => new Date(m.created_at + \"Z\").getTime() > fiveMinAgo).map((m) => m.username),\n );\n setOnlineCount(Math.max(recentUsers.size, 1));\n })\n .catch(() => show(\"Failed to load chat\", \"error\"))\n .finally(() => setLoading(false));\n }, [joined]);\n\n // Poll for new messages every 2s with dedup\n useEffect(() => {\n if (!joined) return;\n const poll = async () => {\n try {\n const res = await fetch(`/api/chat/stream?after=${lastIdRef.current}`);\n const newMsgs: ChatMessage[] = await res.json();\n if (newMsgs.length > 0) {\n setMessages((prev) => {\n const existingIds = new Set(prev.map((m) => m.id));\n const fresh = newMsgs.filter((m) => !existingIds.has(m.id));\n if (fresh.length === 0) return prev;\n return [...prev, ...fresh];\n });\n lastIdRef.current = newMsgs[newMsgs.length - 1].id;\n }\n } catch {\n // silently retry\n }\n };\n pollRef.current = setInterval(poll, 2000) as unknown as number;\n return () => clearInterval(pollRef.current);\n }, [joined]);\n\n // Scroll on new messages\n useEffect(() => {\n scrollToBottom();\n }, [messages]);\n\n // Focus input after joining\n useEffect(() => {\n if (joined && inputRef.current) {\n inputRef.current.focus();\n }\n }, [joined, loading]);\n\n const handleJoin = (e: Event) => {\n e.preventDefault();\n const name = username.trim();\n if (!name) {\n show(\"Please enter a username\", \"error\");\n return;\n }\n if (name.length < 2) {\n show(\"Username must be at least 2 characters\", \"error\");\n return;\n }\n localStorage.setItem(\"chat_user\", name);\n setUsername(name);\n setJoined(true);\n show(`Welcome, ${name}!`, \"info\");\n };\n\n const handleSend = async (e: Event) => {\n e.preventDefault();\n const msg = input.trim();\n if (!msg) return;\n setSending(true);\n try {\n const res = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ username, message: msg }),\n });\n if (!res.ok) throw new Error(\"Failed to send\");\n const newMsg = await res.json();\n setMessages((prev) => {\n if (prev.some((m) => m.id === newMsg.id)) return prev;\n return [...prev, newMsg];\n });\n lastIdRef.current = Math.max(lastIdRef.current, newMsg.id);\n setInput(\"\");\n inputRef.current?.focus();\n } catch {\n show(\"Failed to send message\", \"error\");\n } finally {\n setSending(false);\n }\n };\n\n const handleLeave = () => {\n localStorage.removeItem(\"chat_user\");\n setJoined(false);\n setUsername(\"\");\n setMessages([]);\n lastIdRef.current = 0;\n clearInterval(pollRef.current);\n show(\"Left the chat\");\n };\n\n const formatTime = (iso: string) => {\n const d = new Date(iso + \"Z\");\n return d.toLocaleTimeString([], { hour: \"2-digit\", minute: \"2-digit\" });\n };\n\n // --- Join screen ---\n if (!joined) {\n return (\n

💬

Join the Chat

Pick a username to start chatting

\n );\n }\n\n // --- Chat screen ---\n return (\n \n {/* Chat header */}\n

\n \n Chatting as {username}\n \n {onlineCount > 0 && (\n \n \n {onlineCount} recent\n \n )}\n

\n \n Leave Chat\n \n

\n\n {/* Messages area */}\n

\n {loading ? (\n

Loading messages...

\n ) : messages.length === 0 ? (\n

No messages yet. Say hello! 👋

\n ) : (\n messages.map((msg) => {\n const isMe = msg.username === username;\n return (\n

\n {!isMe &&

{msg.username}

}\n \n {msg.message}\n

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

\n );\n })\n )}\n

\n\n {/* Input area */}\n

\n setInput(e.target.value)}\n placeholder=\"Type a message... (Enter to send)\"\n class=\"flex-1 px-4 py-2.5 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-sm\"\n maxLength={1000}\n />\n \n ▶\n \n \n \n );\n}\n",[],[98,156,181],"83ab14ca-55cc-11f1-a5bf-ee650bb23af1","App.tsx","019e4f51-805e-7440-bcf5-703f0512ce26",4,["D",1779447229580],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { RequestsTab } from \"./RequestsTab.tsx\";\nimport { ChatTab } from \"./ChatTab.tsx\";\nimport { Toast, ToastProvider, useToast } from \"./Toast.tsx\";\n\nconst TABS = [\"Requests\", \"Chat\"] as const;\ntype Tab = (typeof TABS)[number];\n\nfunction AppInner() {\n const [activeTab, setActiveTab] = useState(\"Requests\");\n\n return (\n

\n {/* Header */}\n

\n 🛟 Assist Hub\n

\n\n {/* Tab Navigation */}\n

\n {TABS.map((tab) => (\n setActiveTab(tab)}\n class={`px-5 py-3 font-medium text-sm border-b-2 transition-colors cursor-pointer ${\n activeTab === tab\n ? \"border-blue-500 text-blue-600\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n {tab === \"Requests\" ? \"📋\" : \"💬\"} {tab}\n \n ))}\n

\n\n {/* Content */}\n

\n {activeTab === \"Requests\" ? : }\n

\n\n {/* Footer */}\n \n\n \n

\n );\n}\n\nexport function App() {\n return (\n \n \n \n );\n}\n",[],[98,156,189],"73200994-55cc-11f1-a76e-ee650bb23af1",["D",1779447201825],"legacyEnvVars","httpPrivacy","description","Real-time assistance request tracker + chat app","imageUrl","userId","ee5ed74c-a7e6-45dc-8d90-a176c84e74ff","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e4f4d-0a71-76e9-81ee-eaf8748fe78c","tursoName","7320099455cc11f1a76eee650bb23af1","tursoHostname","7320099455cc11f1a76eee650bb23af1-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789471840176],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_244":240},"org",{"_11":12,"_237":238,"_239":240,"_203":204,"_241":242,"_243":50},"branch",{"_17":168,"_13":16,"_35":69,"_41":196,"_44":36,"_45":233,"_234":52,"_235":42,"_236":56,"_57":14,"_53":12},88,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","Amin Rzazadə","avatar","https://lh3.googleusercontent.com/a/ACg8ocIvbQMI3giR2j9jJMtVY-gW6KQISBys18TcGMxoZL4qlIHKkQ=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":196,"_13":14,"_37":327,"_48":-5,"_198":50,"_51":52,"_199":52,"_200":201,"_202":-5,"_203":204,"_205":66,"_206":72,"_207":-5,"_208":-5,"_209":94,"_55":210,"_211":212,"_213":214,"_215":328,"_217":-5,"_218":219,"_220":219,"_221":222,"_223":222,"_224":222,"_225":219,"_226":219,"_227":329,"_229":330,"_231":331,"_49":50},[288,297,299,300],"files",[288,289,290,291,292,293,294,295,296,297,298,299,300],"counts",{"_279":94,"_280":74,"_281":94,"_34":282,"_283":284},[271,272,273,274],"upstreamProject",{"_35":42,"_13":58,"_200":267,"_202":268,"_51":52,"_227":269},"upstreamBranch",{"_35":36,"_37":265,"_39":266,"_13":16,"_41":42,"_17":43,"_44":-5,"_45":-5,"_46":47,"_48":-5,"_49":50,"_51":52,"_53":54,"_55":56,"_57":58},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789534799&sig=2fe932419d898cd124d0961cab25a5a9c3bd76c8b30cb3b9e71257c7b34e60a2",{"_11":54,"_244":270},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789534799&sig=94d49ad984a50880ef894a3794e08842e7b9b626be771ff48da114d7d9a149ed",{"_35":97,"_13":98,"_65":99,"_67":-5,"_68":69,"_70":74,"_71":72,"_37":100,"_17":94,"_75":95,"_77":-5,"_79":50,"_80":-5,"_18":278},{"_35":89,"_13":90,"_65":91,"_67":-5,"_68":69,"_70":92,"_71":72,"_37":93,"_17":94,"_75":95,"_77":-5,"_79":50,"_80":-5,"_18":277},{"_35":82,"_13":83,"_65":84,"_67":-5,"_68":69,"_70":85,"_71":72,"_37":86,"_17":74,"_75":24,"_77":87,"_79":50,"_80":-5,"_18":276},{"_35":63,"_13":64,"_65":66,"_67":-5,"_68":69,"_70":33,"_71":72,"_37":73,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_18":275},[64],[83],[90],[98],"pulls","branches","forks",{"_285":94,"_287":94},"connections",{"_285":94,"_286":94},"count","unfilledCount","emptyCount",{"_35":97,"_13":98,"_65":99,"_67":-5,"_68":69,"_70":74,"_71":72,"_37":125,"_17":94,"_75":95,"_77":-5,"_79":50,"_80":-5,"_107":325,"_18":326},{"_35":155,"_13":156,"_65":157,"_67":99,"_68":69,"_70":74,"_71":72,"_37":158,"_17":94,"_75":95,"_77":-5,"_79":50,"_80":-5,"_107":323,"_18":324},{"_35":188,"_13":189,"_65":190,"_67":157,"_68":69,"_70":191,"_71":72,"_37":192,"_17":74,"_75":121,"_77":193,"_79":50,"_80":-5,"_107":321,"_18":322},{"_35":180,"_13":181,"_65":182,"_67":157,"_68":69,"_70":183,"_71":72,"_37":184,"_17":74,"_75":121,"_77":185,"_79":50,"_80":-5,"_107":319,"_18":320},{"_35":173,"_13":174,"_65":175,"_67":157,"_68":69,"_70":31,"_71":72,"_37":176,"_17":74,"_75":121,"_77":177,"_79":50,"_80":-5,"_107":317,"_18":318},{"_35":165,"_13":166,"_65":167,"_67":157,"_68":69,"_70":168,"_71":72,"_37":169,"_17":74,"_75":121,"_77":170,"_79":50,"_80":-5,"_107":315,"_18":316},{"_35":147,"_13":148,"_65":149,"_67":99,"_68":69,"_70":150,"_71":72,"_37":151,"_17":74,"_75":24,"_77":152,"_79":50,"_80":-5,"_107":313,"_18":314},{"_35":139,"_13":140,"_65":141,"_67":99,"_68":69,"_70":142,"_71":72,"_37":143,"_17":74,"_75":24,"_77":144,"_79":50,"_80":-5,"_107":311,"_18":312},{"_35":132,"_13":133,"_65":134,"_67":99,"_68":69,"_70":74,"_71":72,"_37":135,"_17":94,"_75":121,"_77":136,"_79":50,"_80":-5,"_107":309,"_18":310},{"_35":89,"_13":90,"_65":91,"_67":-5,"_68":69,"_70":92,"_71":72,"_37":113,"_17":94,"_75":95,"_77":-5,"_79":50,"_80":-5,"_107":307,"_18":308},{"_35":117,"_13":118,"_65":119,"_67":91,"_68":69,"_70":92,"_71":72,"_37":120,"_17":94,"_75":121,"_77":122,"_79":50,"_80":-5,"_107":305,"_18":306},{"_35":82,"_13":83,"_65":84,"_67":-5,"_68":69,"_70":85,"_71":72,"_37":110,"_17":74,"_75":24,"_77":87,"_79":50,"_80":-5,"_107":303,"_18":304},{"_35":63,"_13":64,"_65":66,"_67":-5,"_68":69,"_70":33,"_71":72,"_37":106,"_17":74,"_75":76,"_77":78,"_79":50,"_80":-5,"_107":301,"_18":302},[],[64],[],[83],[],[90,118],[298],[90],[],[98,133],[],[98,140],[],[98,148],[],[98,156,166],[],[98,156,174],[],[98,156,181],[],[98,156,189],[290,291,292,293],[98,156],[289,294,295,296],[98],["D",1779447201825],["D",1789471840176],{"_11":12,"_244":240},{"_11":12,"_237":238,"_239":240,"_203":204,"_241":242,"_243":50},{"_17":168,"_13":16,"_35":69,"_41":196,"_44":36,"_45":233,"_234":52,"_235":42,"_236":56,"_57":14,"_53":12},"ctx",{"_227":-5,"_262":365,"_366":367,"_368":369,"_370":50,"_371":50,"_372":50,"_373":72,"_374":-5,"_375":-7,"_376":-7,"_377":94,"_378":50,"_379":50,"_380":-5,"_381":50,"_382":50,"_383":50,"_384":-5},"ENV",{"_336":337,"_338":339,"_340":16,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364},"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"]

Submit a Request

\n Previous Requests{\" \"}\n {!loading && ({requests.length})}\n

Join the Chat

Code