React Hono Val Town Starter

\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",[],[19,74,127],"dad03b4f-5707-4f00-8e34-bdae7846a580","App.tsx","01a07c22-eb1e-735b-912f-dabaec691031",10,["D",1788834410000],5,"import { useEffect, useRef, useState } from \"react\";\n\ntype Message = { role: \"user\" | \"assistant\"; text: string };\n\ntype ChatResponse = { text?: string; mode?: \"cloud\" | \"local\" | \"local-fallback\"; error?: string };\n\nexport default function App() {\n const [messages, setMessages] = useState([\n { role: \"assistant\", text: \"Titanisis NICKO core online. Good to see you. How can I assist?\" },\n ]);\n const [input, setInput] = useState(\"\");\n const [camera, setCamera] = useState(false);\n const [busy, setBusy] = useState(false);\n const [listening, setListening] = useState(false);\n const videoRef = useRef(null);\n const recognitionRef = useRef(null);\n\n useEffect(() => {\n let stream: MediaStream | null = null;\n if (camera && navigator.mediaDevices?.getUserMedia) {\n navigator.mediaDevices.getUserMedia({ video: true, audio: false }).then((s) => {\n stream = s;\n if (videoRef.current) videoRef.current.srcObject = s;\n }).catch(() => setCamera(false));\n }\n return () => stream?.getTracks().forEach((t) => t.stop());\n }, [camera]);\n\n const speak = (text: string) => {\n if (\"speechSynthesis\" in window) {\n window.speechSynthesis.cancel();\n window.speechSynthesis.speak(new SpeechSynthesisUtterance(text));\n }\n };\n\n const send = async (value = input) => {\n const text = value.trim();\n if (!text || busy) return;\n\n setMessages((m) => [...m, { role: \"user\", text }]);\n setInput(\"\");\n setBusy(true);\n\n try {\n const response = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ message: text }),\n });\n const data: ChatResponse = await response.json();\n const reply = data.text || data.error || \"NICKO received an empty response.\";\n const modeLabel = data.mode === \"local\" ? \"LOCAL CORE\" : data.mode === \"local-fallback\" ? \"LOCAL FALLBACK\" : \"CLOUD CORE\";\n const displayReply = `${reply}\\n\\n[${modeLabel}]`;\n setMessages((m) => [...m, { role: \"assistant\", text: displayReply }]);\n speak(reply);\n } catch {\n const reply = \"NICKO connection interrupted. Please try again.\";\n setMessages((m) => [...m, { role: \"assistant\", text: reply }]);\n speak(reply);\n } finally {\n setBusy(false);\n }\n };\n\n const startListening = () => {\n const Recognition = (window as any).SpeechRecognition || (window as any).webkitSpeechRecognition;\n if (!Recognition) {\n setMessages((m) => [...m, { role: \"assistant\", text: \"Voice recognition is not supported by this browser. You can still use voice output and text chat.\" }]);\n return;\n }\n\n const recognition = new Recognition();\n recognition.lang = navigator.language || \"en-US\";\n recognition.interimResults = false;\n recognition.maxAlternatives = 1;\n recognitionRef.current = recognition;\n setListening(true);\n\n recognition.onresult = (event: any) => {\n const text = event.results?.[0]?.[0]?.transcript || \"\";\n if (text) void send(text);\n };\n recognition.onerror = () => setListening(false);\n recognition.onend = () => setListening(false);\n recognition.start();\n };\n\n const stopListening = () => {\n recognitionRef.current?.stop();\n setListening(false);\n };\n\n return (\n

NICKO

TITANISIS ONBOARD INTELLIGENCE • ONLINE

\n \n \n

\n\n {camera &&

}\n\n

\n {['CORE ONLINE', 'MEMORY READY', 'NAV READY', 'TELEMETRY READY', 'SAFETY ACTIVE'].map((x) =>

● {x}

)}\n

\n\n

\n {messages.map((m, i) => (\n

{m.role === \"user\" ? \"YOU\" : \"NICKO\"}

{m.text}

\n ))}\n {busy &&

NICKO is reasoning…

}\n

\n\n \n

view source

\n );\n}\n",[],[19,74,134],"05bbb147-5e6c-4728-8241-605cbeded415","android","c39616c9-c133-4453-a279-f4a9e8905dd4",["D",1788789151808],[148],[143],{"_37":149,"_13":150,"_40":151,"_42":144,"_44":45,"_46":138,"_48":49,"_50":152,"_17":52,"_53":24,"_55":153,"_57":58,"_59":-5,"_93":154,"_18":155},"ff8414e7-1dd9-4a94-a3bb-3bca7259e6ba","README.md","5f42ac5a-aac3-11f1-af30-1607ee4eb77e",["D",1788789151808],"# NICKO Android APK\n\nThis directory contains the Android wrapper plan for the deployed NICKO web app.\n\n## Build\nUse Android Studio with a standard Android application and WebView pointed at the NICKO Val Town endpoint shown in the project files. Grant CAMERA and RECORD_AUDIO only when the user enables those features.\n\n## Native capabilities\n- Camera: Android CAMERA permission + WebView media permission\n- Microphone: RECORD_AUDIO permission + WebView media permission\n- Speech: Android/Web Speech APIs\n- Screen capture: implement with Android MediaProjection after explicit user approval\n\nThe web app cannot silently access the camera, microphone, screen, or messaging apps; Android permissions and explicit user actions are required.",[],[143,150],"cf099647-31c7-4e2f-baf1-e3f548d17cd8",["D",1788789036220],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","NICKO AI futuristic assistant","imageUrl","userId","db1fe498-e3ce-41c4-9a4b-aadc5f270e6a","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","orgId","01a07c20-e282-758d-b417-c7f20f2b254c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_210":206},"org",{"_11":12,"_203":204,"_205":206,"_166":167,"_207":208,"_209":58},"branch",{"_17":99,"_13":16,"_37":45,"_195":156,"_196":-5,"_197":-5,"_198":-5,"_199":-5,"_200":-5,"_201":14,"_202":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","Nithish A","avatar","https://lh3.googleusercontent.com/a/ACg8ocLBGQxmuCLHRSTF1yuHm9tD4J7yNqIAKG1E18bHib3Blbra9m1Z=s96-c","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_37":156,"_13":14,"_50":281,"_158":-5,"_159":58,"_160":161,"_162":161,"_163":164,"_165":-5,"_166":167,"_168":88,"_169":49,"_170":-5,"_171":-5,"_172":52,"_173":174,"_175":-5,"_176":-5,"_177":-5,"_178":-5,"_179":180,"_181":180,"_182":183,"_184":183,"_185":183,"_186":180,"_187":180,"_188":282,"_190":283,"_192":284,"_194":58},[248,250,257,258],"files",[248,249,250,251,252,253,254,255,256,257,258],"counts",{"_239":52,"_240":89,"_241":52,"_32":242,"_243":244},[231,232,233,234],{"_37":79,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":47,"_48":49,"_50":80,"_17":52,"_53":77,"_55":-5,"_57":58,"_59":-5,"_18":230},"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},[19],{"_37":73,"_13":74,"_40":75,"_42":43,"_44":45,"_46":47,"_48":49,"_50":76,"_17":52,"_53":77,"_55":-5,"_57":58,"_59":-5,"_18":238},{"_37":67,"_13":68,"_40":69,"_42":43,"_44":45,"_46":47,"_48":49,"_50":70,"_17":52,"_53":24,"_55":71,"_57":58,"_59":-5,"_18":237},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":47,"_48":49,"_50":64,"_17":52,"_53":54,"_55":65,"_57":58,"_59":-5,"_18":236},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_18":235},[19,39],[19,62],[19,68],[19,74],"pulls","branches","forks",{"_245":52,"_247":52},"connections",{"_245":52,"_246":52},"count","unfilledCount","emptyCount",{"_37":142,"_13":143,"_40":144,"_42":-5,"_44":45,"_46":138,"_48":49,"_50":145,"_17":52,"_53":77,"_55":-5,"_57":58,"_59":-5,"_93":279,"_18":280},{"_37":149,"_13":150,"_40":151,"_42":144,"_44":45,"_46":138,"_48":49,"_50":152,"_17":52,"_53":24,"_55":153,"_57":58,"_59":-5,"_93":277,"_18":278},{"_37":79,"_13":19,"_40":43,"_42":-5,"_44":45,"_46":47,"_48":49,"_50":105,"_17":52,"_53":77,"_55":-5,"_57":58,"_59":-5,"_93":275,"_18":276},{"_37":73,"_13":74,"_40":75,"_42":43,"_44":45,"_46":47,"_48":49,"_50":121,"_17":52,"_53":77,"_55":-5,"_57":58,"_59":-5,"_93":273,"_18":274},{"_37":133,"_13":134,"_40":135,"_42":75,"_44":45,"_46":136,"_48":49,"_50":137,"_17":138,"_53":54,"_55":139,"_57":58,"_59":-5,"_93":271,"_18":272},{"_37":126,"_13":127,"_40":128,"_42":75,"_44":45,"_46":47,"_48":49,"_50":129,"_17":52,"_53":54,"_55":130,"_57":58,"_59":-5,"_93":269,"_18":270},{"_37":67,"_13":68,"_40":69,"_42":43,"_44":45,"_46":47,"_48":49,"_50":118,"_17":52,"_53":24,"_55":71,"_57":58,"_59":-5,"_93":267,"_18":268},{"_37":61,"_13":62,"_40":63,"_42":43,"_44":45,"_46":47,"_48":49,"_50":115,"_17":52,"_53":54,"_55":65,"_57":58,"_59":-5,"_93":265,"_18":266},{"_37":38,"_13":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":112,"_17":52,"_53":54,"_55":56,"_57":58,"_59":-5,"_93":263,"_18":264},{"_37":96,"_13":97,"_40":98,"_42":-5,"_44":45,"_46":99,"_48":49,"_50":100,"_17":101,"_53":91,"_55":102,"_57":58,"_59":-5,"_93":261,"_18":262},{"_37":86,"_13":87,"_40":88,"_42":-5,"_44":45,"_46":89,"_48":49,"_50":90,"_17":52,"_53":91,"_55":92,"_57":58,"_59":-5,"_93":259,"_18":260},[],[87],[],[97],[],[19,39],[],[19,62],[],[19,68],[],[19,74,127],[],[19,74,134],[252,253],[19,74],[251,254,255,256],[19],[],[143,150],[249],[143],["D",1788789036220],{"_11":12,"_210":206},{"_11":12,"_203":204,"_205":206,"_166":167,"_207":208,"_209":58},{"_17":99,"_13":16,"_37":45,"_195":156,"_196":-5,"_197":-5,"_198":-5,"_199":-5,"_200":-5,"_201":14,"_202":12},"ctx",{"_188":-5,"_227":318,"_319":320,"_321":322,"_323":58,"_324":58,"_325":58,"_326":49,"_327":-5,"_328":-7,"_329":-7,"_330":52,"_331":58,"_332":58,"_333":-5,"_334":58,"_335":58,"_336":58,"_337":-5},"ENV",{"_289":290,"_291":292,"_293":16,"_294":295,"_296":297,"_298":299,"_300":301,"_302":303,"_304":305,"_306":307,"_308":309,"_310":311,"_312":313,"_314":315,"_316":317},"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"]