\n \n \n \n\n",[120,111],"b57b4bb3cd2a6a88ab34a6cb868fe43cab51f3adbe629ec0d026e5cb7e16c366","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[120,111],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/favicon.svg",{"_32":140,"_13":133,"_82":141,"_84":123,"_85":33,"_86":142,"_87":26,"_34":143,"_40":89,"_90":116,"_92":144,"_66":48,"_94":-5,"_95":-7,"_75":145,"_97":146},{"_32":132,"_13":133,"_82":134,"_84":113,"_85":58,"_86":135,"_87":26,"_34":136,"_40":89,"_90":116,"_92":137,"_66":48,"_94":-5,"_95":-7,"_75":138,"_97":139},"a87ee696-55cc-11f1-a5bf-ee650bb23af1","favicon.svg","019e4f51-805e-7440-bcf5-7e167d7a24d3",10,["D",1779447291365],"\n\n",[120,133],"d5b3f9d56247fb7eacb18f28fc1996ebe447a55e8a91a8bbbacf93977b97b564","82a730d4-3261-11f0-aa46-569c3dd06744","6f196b86-3261-11f0-9a3d-569c3dd06744",45,["D",1747405483360],"\n",[120,133],"1b9cfa9bc87dc0db12471f908bb8438c469ac9b2a59379157b627909cb30fc53","frontend/components/App.tsx",{"_32":161,"_13":151,"_82":162,"_84":163,"_85":33,"_86":164,"_87":26,"_34":165,"_40":166,"_90":156,"_92":167,"_66":48,"_94":-5,"_95":-7,"_75":168,"_97":169},{"_32":150,"_13":151,"_82":152,"_84":153,"_85":58,"_86":154,"_87":26,"_34":155,"_40":89,"_90":156,"_92":157,"_66":48,"_94":-5,"_95":-7,"_75":158,"_97":159},"83ab14ca-55cc-11f1-a5bf-ee650bb23af1","App.tsx","019e4f51-805e-7440-bcf5-703f0512ce26","019e4f51-805e-7440-bcf5-7a6c1257b90e",4,["D",1779447229580],"script","/** @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",[120,160,151],"b15e9d7e21d3b02abf55d762b83196ece2ef53f23ba6947349ed45242fe6313e","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[120,160,151],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":180,"_13":170,"_82":181,"_84":-5,"_85":33,"_86":182,"_87":48,"_34":183,"_40":184,"_90":116,"_92":185,"_66":48,"_94":-5,"_95":-7,"_75":186,"_97":187},{"_32":173,"_13":170,"_82":174,"_84":-5,"_85":58,"_86":175,"_87":26,"_34":176,"_40":89,"_90":116,"_92":177,"_66":48,"_94":-5,"_95":-7,"_75":178,"_97":179},"ba85f14a-55cc-11f1-88ba-ee650bb23af1","019e4f51-805e-7440-bcf5-8da70fd21c85",11,["D",1779447321561],"# 🛟 Assist Hub\n\nA real-time assistance request tracker and chat app built on Val Town.\n\n## Features\n\n- **📋 Requests Tab** — Submit, view, and delete assistance requests. All requests persist in SQLite with timestamps.\n- **💬 Chat Tab** — Join with a username and send messages. Messages sync across users via polling (every 2 seconds). Chat history persists across sessions.\n- **🔔 Toast Notifications** — Visual confirmations for all actions (submit, delete, join, errors).\n- **📱 Responsive** — Works on mobile and desktop with flex layouts.\n- **✅ Validation** — Empty submissions are rejected on both client and server.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts (Hono)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| React[\"React App\"]\n React -->|\"GET/POST\"| API[\"/api/requests\"]\n React -->|\"GET/POST\"| Chat[\"/api/chat\"]\n React -->|\"GET (poll)\"| Stream[\"/api/chat/stream\"]\n API --> SQLite[(SQLite DB)]\n Chat --> SQLite\n Stream --> SQLite\n```\n\n## File Structure\n\n```\nindex.ts ← Hono server (API + static files)\nshared/\n db.ts ← SQLite schema & init\nfrontend/\n index.html ← HTML shell\n index.tsx ← React entrypoint\n favicon.svg ← App icon\n components/\n App.tsx ← Root layout + tab navigation\n RequestsTab.tsx ← Submit & view requests\n ChatTab.tsx ← Real-time chat with username\n Toast.tsx ← Toast notification system\n```\n\n## API\n\n| Method | Path | Description |\n|--------|------|-------------|\n| `GET` | `/api/requests` | List all requests (newest first) |\n| `POST` | `/api/requests` | Create request (`{ text }`) |\n| `DELETE` | `/api/requests/:id` | Delete a request |\n| `GET` | `/api/chat` | Get last 200 chat messages |\n| `POST` | `/api/chat` | Send message (`{ username, message }`) |\n| `GET` | `/api/chat/stream?after=ID` | Poll for new messages after ID |\n",[170],"7aebdd26e33a24b11495caebbd2cbfa83715f2c5b1286f6903eb186c664f8a3a","1a3cc642-3997-11f1-a3f8-42b51c65c3df","a50c3760-f53e-11ef-bd6d-569c3dd06744",87,["D",1776345656810],30,"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types",[170],"8094bd638fc012f5239882eebeb86eee1944c60d49719e6e20139500b7aaf24e",{"_75":189,"_77":190,"_79":-7},"frontend/components/Counter.tsx",{"_32":191,"_13":192,"_82":193,"_84":163,"_85":33,"_86":194,"_87":26,"_34":195,"_40":196,"_90":156,"_92":197,"_66":48,"_94":-5,"_95":-7,"_75":198,"_97":199},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @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",[120,160,192],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_75":240,"_77":-7,"_79":241},{"_75":231,"_77":-7,"_79":232},{"_75":222,"_77":-7,"_79":223},{"_75":216,"_77":-7,"_79":217},{"_75":205,"_77":-7,"_79":206},"shared/db.ts",{"_32":207,"_13":208,"_82":209,"_84":210,"_85":58,"_86":211,"_87":26,"_34":212,"_40":196,"_90":156,"_92":213,"_66":48,"_94":-5,"_95":-7,"_75":214,"_97":215},"77e6873c-55cc-11f1-b99b-ee650bb23af1","db.ts","77e687e6-55cc-11f1-b99b-ee650bb23af1","b2adb296-1951-41d0-87ba-227010ce6b5c",2,["D",1779447209839],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport async function initDB() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS requests (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n text TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS chat_messages (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n username TEXT NOT NULL,\n message TEXT NOT NULL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n ]);\n}\n\nexport { sqlite };\n",[216,208],"302c9852aee90a4cc2097538458ded6343a7ebc1ffa37af3a8a09a175d28bbd4","shared",{"_32":218,"_13":216,"_82":210,"_84":-5,"_85":58,"_86":211,"_87":26,"_34":219,"_40":196,"_90":220,"_92":-5,"_66":48,"_94":-5,"_95":-7,"_75":221,"_97":-5},"77e6aa50-55cc-11f1-b99b-ee650bb23af1",["D",1779447209839],"directory",[216],"frontend/components/Toast.tsx",{"_32":224,"_13":225,"_82":226,"_84":153,"_85":58,"_86":57,"_87":26,"_34":227,"_40":89,"_90":156,"_92":228,"_66":48,"_94":-5,"_95":-7,"_75":229,"_97":230},"26077a32-55ce-11f1-b7ea-ee650bb23af1","Toast.tsx","88cb190a-55cc-11f1-b99b-ee650bb23af1",["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",[120,160,225],"811f987d6c84fc9322fd152a2754e59230fe1c0ed3d50298fb402995d0c446bb","frontend/components/RequestsTab.tsx",{"_32":233,"_13":234,"_82":235,"_84":153,"_85":58,"_86":20,"_87":26,"_34":236,"_40":89,"_90":156,"_92":237,"_66":48,"_94":-5,"_95":-7,"_75":238,"_97":239},"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",[120,160,234],"ccea58a55289795ef434bf3e95dc12a7c80a2738dec9754343c529b03069d622","frontend/components/ChatTab.tsx",{"_32":242,"_13":243,"_82":244,"_84":153,"_85":58,"_86":245,"_87":26,"_34":246,"_40":89,"_90":156,"_92":247,"_66":48,"_94":-5,"_95":-7,"_75":248,"_97":249},"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",[120,160,243],"f78367dfc206b2f6e95c4d8e7980fec9b924129c1aea15c850178c3a59caccea",["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",1789558275908],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_292":288},"org",{"_11":12,"_285":286,"_287":288,"_256":257,"_289":290,"_291":48},"branch","displayName","Amin Rzazadə","avatar","https://lh3.googleusercontent.com/a/ACg8ocIvbQMI3giR2j9jJMtVY-gW6KQISBys18TcGMxoZL4qlIHKkQ=s96-c","tier","free","canRestrictVals","profileImageUrl","","adoptOrgId",{"_32":59,"_13":14,"_34":392,"_46":-5,"_251":48,"_49":50,"_252":50,"_253":254,"_255":-5,"_256":257,"_258":83,"_259":26,"_260":-5,"_261":-5,"_262":196,"_53":263,"_264":265,"_266":267,"_268":393,"_270":-5,"_271":272,"_273":272,"_274":275,"_276":275,"_277":275,"_278":272,"_279":272,"_280":394,"_282":395,"_284":396,"_47":48},"tree",[345,354,356,357],"files",[345,346,347,348,349,350,351,352,353,354,355,356,357],"counts",{"_335":196,"_336":89,"_337":196,"_338":339,"_340":341},"contents",[322,323,324,325],"upstreamProject",{"_32":39,"_13":56,"_253":318,"_255":319,"_49":50,"_280":320},"upstreamBranch",{"_32":33,"_34":316,"_36":317,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"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=1789585199&sig=1baafecf11cec877edc88f123efd7f687a508ecc290c26f9eecfc4b3e272df79",{"_11":52,"_292":321},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789585199&sig=e0ad9b96a0e58967744de3785adb3e9a68085da5b0c135b58439da2ef923cdc0",{"_32":332,"_13":120,"_82":113,"_84":-5,"_85":58,"_86":89,"_87":26,"_34":333,"_40":196,"_90":220,"_92":-5,"_66":48,"_94":-5,"_75":334},{"_32":218,"_13":216,"_82":210,"_84":-5,"_85":58,"_86":211,"_87":26,"_34":330,"_40":196,"_90":220,"_92":-5,"_66":48,"_94":-5,"_75":331},{"_32":173,"_13":170,"_82":174,"_84":-5,"_85":58,"_86":175,"_87":26,"_34":328,"_40":89,"_90":116,"_92":177,"_66":48,"_94":-5,"_75":329},{"_32":81,"_13":76,"_82":83,"_84":-5,"_85":58,"_86":22,"_87":26,"_34":326,"_40":89,"_90":91,"_92":93,"_66":48,"_94":-5,"_75":327},["D",1779447220004],[76],["D",1779447321561],[170],["D",1779447209839],[216],"732a0ee4-55cc-11f1-a76e-ee650bb23af1",["D",1779447201825],[120],"pulls","branches","forks","envVars",{"_342":196,"_344":196},"connections",{"_342":196,"_343":196},"count","unfilledCount","emptyCount",{"_32":332,"_13":120,"_82":113,"_84":-5,"_85":58,"_86":89,"_87":26,"_34":389,"_40":196,"_90":220,"_92":-5,"_66":48,"_94":-5,"_95":390,"_75":391},{"_32":385,"_13":160,"_82":153,"_84":113,"_85":58,"_86":89,"_87":26,"_34":386,"_40":196,"_90":220,"_92":-5,"_66":48,"_94":-5,"_95":387,"_75":388},{"_32":150,"_13":151,"_82":152,"_84":153,"_85":58,"_86":154,"_87":26,"_34":155,"_40":89,"_90":156,"_92":157,"_66":48,"_94":-5,"_95":383,"_75":384},{"_32":242,"_13":243,"_82":244,"_84":153,"_85":58,"_86":245,"_87":26,"_34":246,"_40":89,"_90":156,"_92":247,"_66":48,"_94":-5,"_95":381,"_75":382},{"_32":233,"_13":234,"_82":235,"_84":153,"_85":58,"_86":20,"_87":26,"_34":236,"_40":89,"_90":156,"_92":237,"_66":48,"_94":-5,"_95":379,"_75":380},{"_32":224,"_13":225,"_82":226,"_84":153,"_85":58,"_86":57,"_87":26,"_34":227,"_40":89,"_90":156,"_92":228,"_66":48,"_94":-5,"_95":377,"_75":378},{"_32":132,"_13":133,"_82":134,"_84":113,"_85":58,"_86":135,"_87":26,"_34":136,"_40":89,"_90":116,"_92":137,"_66":48,"_94":-5,"_95":375,"_75":376},{"_32":110,"_13":111,"_82":112,"_84":113,"_85":58,"_86":114,"_87":26,"_34":115,"_40":89,"_90":116,"_92":117,"_66":48,"_94":-5,"_95":373,"_75":374},{"_32":366,"_13":367,"_82":368,"_84":113,"_85":58,"_86":89,"_87":26,"_34":369,"_40":196,"_90":156,"_92":370,"_66":48,"_94":-5,"_95":371,"_75":372},{"_32":218,"_13":216,"_82":210,"_84":-5,"_85":58,"_86":211,"_87":26,"_34":219,"_40":196,"_90":220,"_92":-5,"_66":48,"_94":-5,"_95":364,"_75":365},{"_32":207,"_13":208,"_82":209,"_84":210,"_85":58,"_86":211,"_87":26,"_34":212,"_40":196,"_90":156,"_92":213,"_66":48,"_94":-5,"_95":362,"_75":363},{"_32":173,"_13":170,"_82":174,"_84":-5,"_85":58,"_86":175,"_87":26,"_34":176,"_40":89,"_90":116,"_92":177,"_66":48,"_94":-5,"_95":360,"_75":361},{"_32":81,"_13":76,"_82":83,"_84":-5,"_85":58,"_86":22,"_87":26,"_34":88,"_40":89,"_90":91,"_92":93,"_66":48,"_94":-5,"_95":358,"_75":359},[],[76],[],[170],[],[216,208],[355],[216],"732a0958-55cc-11f1-a76e-ee650bb23af1","index.tsx","019e4f51-805e-7440-bcf5-84332495a9f0",["D",1779447201825],"/** @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();",[],[120,367],[],[120,111],[],[120,133],[],[120,160,225],[],[120,160,234],[],[120,160,243],[],[120,160,151],"7329faf8-55cc-11f1-a76e-ee650bb23af1",["D",1779447201825],[347,348,349,350],[120,160],["D",1779447201825],[346,351,352,353],[120],["D",1779447201825],["D",1789558275908],{"_11":12,"_292":288},{"_11":12,"_285":286,"_287":288,"_256":257,"_289":290,"_291":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_280":-5,"_313":430,"_431":432,"_433":434,"_435":48,"_436":48,"_437":48,"_438":26,"_439":-5,"_440":-7,"_441":-7,"_442":196,"_443":48,"_444":48,"_445":-5,"_446":48,"_447":48,"_448":48,"_449":-5},"ENV",{"_401":402,"_403":404,"_405":16,"_406":407,"_408":409,"_410":411,"_412":413,"_414":415,"_416":417,"_418":419,"_420":421,"_422":423,"_424":425,"_426":427,"_428":429},"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"]

React + Hono Starter

Submit a Request

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

Join the Chat

Compare

Mergeaminrzazad/mainintotemplates/main

README.md+36-37

frontend/components/App.tsx+58-8

frontend/favicon.svg+3-3

frontend/index.html+4-6

Hindex.ts+68-11

frontend/components/ChatTab.tsx+253-0

frontend/components/RequestsTab.tsx+154-0

frontend/components/Toast.tsx+60-0

shared

shared/db.ts+23-0

frontend/components/Counter.tsx+0-18