React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_276":277,"_278":279},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":-7,"_18":19,"_17":-7,"_206":-5,"_20":207,"_22":208,"_209":210,"_211":212,"_26":213,"_24":214,"_215":-5,"_216":-5,"_217":56,"_218":219,"_220":47,"_221":-5,"_222":-5,"_223":224},"routes/_app.x.$handle.$name.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":25,"_26":27,"_28":-5,"_29":-5,"_30":-5,"_31":-5,"_32":-5},"handle","NITHISHLUNA","name","nicko-ai","branchName","main","version","path","frontend/components","project",{"_35":151,"_13":14,"_48":152,"_153":-5,"_154":56,"_155":156,"_157":156,"_158":159,"_160":-5,"_161":162,"_163":80,"_164":47,"_165":-5,"_166":-5,"_167":50,"_168":169,"_170":-5,"_171":-5,"_172":-5,"_173":-5,"_174":175,"_176":175,"_177":178,"_179":178,"_180":178,"_181":175,"_182":175,"_183":184,"_185":186,"_187":188,"_189":56},"tree",[74,75,76,77],"file",{"_35":69,"_13":60,"_38":41,"_40":70,"_42":43,"_44":45,"_46":47,"_48":71,"_17":50,"_51":72,"_53":-5,"_55":56,"_57":-5,"_18":73},"contents",[33,34],"upstream","pull","ahead","behind","envVars",{"_35":61,"_13":62,"_38":63,"_40":41,"_42":43,"_44":64,"_46":47,"_48":65,"_17":66,"_51":52,"_53":67,"_55":56,"_57":-5,"_18":68},{"_35":36,"_13":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_17":50,"_51":52,"_53":54,"_55":56,"_57":-5,"_18":58},"id","46bd378a-ede1-4cfd-86c2-eb6b92421f17","Counter.tsx","fileId","01a07c22-eb1e-735b-912f-dd1bac77fb94","parentId","01a07c22-eb1e-735b-912f-d62b1e46713f","branchId","88abf643-bdd7-4652-96ac-eb6946946c4a","branchVersion",2,"latest",true,"createdAt",["D",1788789058334],0,"fileType","script","content","/** @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","deleted",false,"label",[59,60,37],"frontend","components","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",[59,60,62],"6cf5dd6a-20fb-4fcf-84f2-ad98bfd1b032","01a07c22-eb1e-735b-912f-d25e202a8f65",["D",1788789058334],"directory",[59,60],{"_35":137,"_13":138,"_38":139,"_40":-5,"_42":43,"_44":66,"_46":47,"_48":140,"_17":50,"_51":72,"_53":-5,"_55":56,"_57":-5,"_85":141,"_18":142},{"_35":97,"_13":59,"_38":70,"_40":-5,"_42":43,"_44":45,"_46":47,"_48":98,"_17":50,"_51":72,"_53":-5,"_55":56,"_57":-5,"_85":99,"_18":100},{"_35":88,"_13":89,"_38":90,"_40":-5,"_42":43,"_44":91,"_46":47,"_48":92,"_17":93,"_51":83,"_53":94,"_55":56,"_57":-5,"_85":95,"_18":96},{"_35":78,"_13":79,"_38":80,"_40":-5,"_42":43,"_44":81,"_46":47,"_48":82,"_17":50,"_51":83,"_53":84,"_55":56,"_57":-5,"_85":86,"_18":87},"0498cd91-5be1-4037-a88d-2cacfe972422","main.ts","1abd655c-aac3-11f1-a631-1607ee4eb77e",1,["D",1788789036771],"http","import { Hono } from \"npm:hono\";\nconst app = new Hono();\napp.get(\"/\", (c) => c.text(\"NICKO AI is starting...\"));\nexport default app;","children",[],[79],"e32d26d2-b706-4ecb-a74e-cdcffc126fbf","index.ts","01a07c22-eb1e-735b-912f-cd0898132181",11,["D",1788834420353],3,"import { Hono } from \"npm:hono\";\nimport { cors } from \"npm:hono/cors\";\n\nconst app = new Hono();\napp.use(\"/api/*\", cors());\n\nconst NICKO_SYSTEM = `You are NICKO, the onboard AI assistant prototype for the Titanisis spacecraft.\nBe calm, concise, technically capable, and helpful. Explain science, engineering, navigation concepts, mission planning, and telemetry clearly.\nTreat spacecraft control as simulation unless an authorized external control system explicitly confirms an action.\nNever claim a physical action occurred when it did not.\nSeparate observations, analysis, recommendations, and authorized actions.\nSafety-critical operations require human authorization and independent verification.`;\n\nconst localCore = (message: string) => {\n const q = message.toLowerCase().trim();\n if (!q) return \"NICKO local core online. Send me a question or command.\";\n if (q.includes(\"status\") || q.includes(\"systems\")) {\n return \"NICKO STATUS — CORE ONLINE • MEMORY READY • NAV READY • TELEMETRY READY • SAFETY ACTIVE. This is a software simulation; no physical spacecraft action has been performed.\";\n }\n if (q.includes(\"hello\") || q.includes(\"hi\") || q.includes(\"nicko\")) {\n return \"NICKO online. I can help with Titanisis planning, astronomy, physics, software architecture, and mission simulations.\";\n }\n if (q.includes(\"free\") || q.includes(\"unlimited\")) {\n return \"Local Core mode is free to run, but it is a lightweight fallback rather than a full cloud LLM. Cloud AI usage can have provider limits or costs.\";\n }\n return `NICKO Local Core received: “${message.slice(0, 500)}”. Full reasoning is unavailable without a configured AI provider, so I won't pretend to know more than this local core can determine.`;\n};\n\napp.get(\"/\", (c) => c.html(`

`));\n\napp.post(\"/api/chat\", async (c) => {\n try {\n const body = await c.req.json().catch(() => ({}));\n const message = typeof body?.message === \"string\" ? body.message.trim() : \"\";\n if (!message) return c.json({ error: \"Message is required.\" }, 400);\n\n const apiKey = Deno.env.get(\"OPENAI_API_KEY\");\n const model = Deno.env.get(\"NICKO_MODEL\") || \"gpt-5.6-luna\";\n\n // Always keep the app usable without a paid API key.\n if (!apiKey) return c.json({ text: localCore(message), mode: \"local\" });\n\n const response = await fetch(\"https://api.openai.com/v1/responses\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"Authorization\": `Bearer ${apiKey}`,\n },\n body: JSON.stringify({\n model,\n instructions: NICKO_SYSTEM,\n input: message,\n max_output_tokens: 700,\n }),\n });\n\n if (!response.ok) {\n // Gracefully fall back instead of turning the chat into an error page.\n console.error(\"AI provider error:\", response.status, await response.text());\n return c.json({ text: localCore(message), mode: \"local-fallback\" });\n }\n\n const data = await response.json();\n return c.json({ text: data.output_text || localCore(message), mode: \"cloud\" });\n } catch (error) {\n console.error(error);\n return c.json({ text: localCore(\"The cloud service is unavailable right now.\"), mode: \"local-fallback\" }, 200);\n }\n});\n\nexport default app.fetch;\n",[],[89],"fb0333c0-af0d-4ae7-9454-7ceb0427845b",["D",1788789058334],[101,102,103,104],[59],{"_35":69,"_13":60,"_38":41,"_40":70,"_42":43,"_44":45,"_46":47,"_48":126,"_17":50,"_51":72,"_53":-5,"_55":56,"_57":-5,"_85":127,"_18":128},{"_35":119,"_13":120,"_38":121,"_40":70,"_42":43,"_44":45,"_46":47,"_48":122,"_17":50,"_51":24,"_53":123,"_55":56,"_57":-5,"_85":124,"_18":125},{"_35":112,"_13":113,"_38":114,"_40":70,"_42":43,"_44":45,"_46":47,"_48":115,"_17":50,"_51":52,"_53":116,"_55":56,"_57":-5,"_85":117,"_18":118},{"_35":105,"_13":106,"_38":107,"_40":70,"_42":43,"_44":45,"_46":47,"_48":108,"_17":50,"_51":52,"_53":109,"_55":56,"_57":-5,"_85":110,"_18":111},"6aace013-b8b7-4058-aca2-1a2d3aa9df47","root.tsx","01a07c22-eb1f-760b-98ef-0b2ca8ab8421",["D",1788789058334],"/** @jsxImportSource npm:hono@4/jsx */\nimport { raw } from \"npm:hono@4/html\";\nimport { immutableFileUrl } from \"https://esm.town/v/std/utils/index.ts\";\n\n// The HTML shell for the app. It is never cached, so immutableFileUrl can stamp\n// the current val version into each asset URL — the browser caches those\n// immutably, and publishing the val changes the URLs, refetching exactly once.\nexport function Root() {\n return (\n <>\n {raw(\"\")}\n \n \n \n \n React Hono Val Town Starter\n