React Hono Val Town Starter

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_247":248,"_249":250},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_107":88,"_27":108,"_13":14,"_109":-5,"_11":110,"_111":112,"_113":114,"_115":116,"_117":118,"_20":-5,"_119":-5,"_120":-5,"_121":25,"_122":123,"_124":60,"_125":-5,"_126":-5,"_127":128},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",7,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","01a07c22-eb1e-735b-912f-dabaec691031","name","App.tsx","fileType","script","content","import { useEffect, useRef, useState } from \"react\";\n\nexport default function App() {\n const [messages, setMessages] = useState([{ role: \"assistant\", text: \"Hello. I’m NICKO — your AI assistant. ✨\" }]);\n const [input, setInput] = useState(\"\");\n const [camera, setCamera] = useState(false);\n const videoRef = 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 send = () => {\n const text = input.trim();\n if (!text) return;\n const reply = `I received: “${text}”. NICKO’s interface is online; connect an AI provider key to enable model-powered answers.`;\n setMessages((m) => [...m, { role: \"user\", text }, { role: \"assistant\", text: reply }]);\n setInput(\"\");\n if (\"speechSynthesis\" in window) window.speechSynthesis.speak(new SpeechSynthesisUtterance(reply));\n };\n\n return

NICKO

AI ASSISTANT • ONLINE

\n \n

\n {camera &&

}\n

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

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

{m.text}

)}\n

\n \n

view source

;\n}\n","import { useEffect, useRef, useState } from \"react\";\n\ntype Message = { role: \"user\" | \"assistant\"; text: string };\n\ntype ChatResponse = { reply?: string; providerConfigured?: boolean; 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.reply || \"NICKO received an empty response.\";\n setMessages((m) => [...m, { role: \"assistant\", text: reply }]);\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","createdAt",["D",1788795962039],"branchVersion","branchId","88abf643-bdd7-4652-96ac-eb6946946c4a","id","cf099647-31c7-4e2f-baf1-e3f548d17cd8","nicko-ai",["D",1788789036220],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","NICKO AI futuristic assistant","imageUrl","db1fe498-e3ce-41c4-9a4b-aadc5f270e6a","pinnedFileId","1abd655c-aac3-11f1-a631-1607ee4eb77e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","01a07c20-e282-758d-b417-c7f20f2b254c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_106":102},"org",{"_98":97,"_99":100,"_101":102,"_18":56,"_103":104,"_105":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"isOwned",11,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","NITHISHLUNA","handle","displayName","Nithish A","avatar","https://lh3.googleusercontent.com/a/ACg8ocLBGQxmuCLHRSTF1yuHm9tD4J7yNqIAKG1E18bHib3Blbra9m1Z=s96-c","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":243,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":244,"_82":245,"_84":246,"_86":25},"tree",[173,175,182,183],"files",[173,174,175,176,177,178,179,180,181,182,183],"counts",{"_163":64,"_164":136,"_165":64,"_166":167,"_168":169},"contents",[129,130,131,132],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":157,"_32":158,"_30":159,"_135":-5,"_42":43,"_41":160,"_137":60,"_39":161,"_13":64,"_34":155,"_36":-5,"_24":25,"_141":-5,"_27":162},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":60,"_39":154,"_13":64,"_34":155,"_36":-5,"_24":25,"_141":-5,"_27":156},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":25,"_39":147,"_13":136,"_34":139,"_36":148,"_24":25,"_141":-5,"_27":149},{"_44":133,"_32":134,"_30":58,"_135":-5,"_42":43,"_41":136,"_137":60,"_39":138,"_13":64,"_34":139,"_36":140,"_24":25,"_141":-5,"_27":142},"0498cd91-5be1-4037-a88d-2cacfe972422","main.ts","parentId",1,"latest",["D",1788789036771],"http","import { Hono } from \"npm:hono\";\nconst app = new Hono();\napp.get(\"/\", (c) => c.text(\"NICKO AI is starting...\"));\nexport default app;","label",[134],"21cdfa2e-7148-4bd1-a85e-9e4e478e95a3","index.ts","01a07c22-eb1e-735b-912f-cd0898132181",6,["D",1788795943665],"import { parseVal, serveImmutableFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\nimport { cors } from \"npm:hono/cors\";\nimport { Root } from \"./frontend/root.tsx\";\n\nconst app = new Hono();\napp.use(\"/api/*\", cors());\n\napp.get(\"/\", (c) => c.html(Root()));\napp.get(\"/__immutable/*\", (c) => serveImmutableFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\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. Never claim a physical action occurred when it did not.\nSeparate observations, analysis, recommendations, and authorized actions. Safety-critical operations require human authorization and independent verification.`;\n\napp.post(\"/api/chat\", async (c) => {\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 if (!apiKey) {\n return c.json({\n reply: `NICKO core is online, but the AI provider is not configured yet. Add OPENAI_API_KEY to the backend environment to enable model reasoning. I can still report Titanisis prototype status.`,\n providerConfigured: false,\n });\n }\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 const data = await response.json();\n if (!response.ok) {\n console.error(\"AI provider error\", data);\n return c.json({\n error: \"AI provider request failed\",\n reply: \"NICKO could not reach the reasoning core right now.\",\n }, 502);\n }\n\n const reply = typeof data?.output_text === \"string\"\n ? data.output_text\n : \"NICKO received an empty reasoning response.\";\n\n return c.json({ reply, providerConfigured: true, model });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n",[144],"fb0333c0-af0d-4ae7-9454-7ceb0427845b","frontend","01a07c22-eb1e-735b-912f-d25e202a8f65",2,["D",1788789058334],"directory",[151],"05bbb147-5e6c-4728-8241-605cbeded415","android","c39616c9-c133-4453-a279-f4a9e8905dd4",5,["D",1788789151808],[158],"pulls","branches","forks","envVars",{"_170":64,"_172":64},"connections",{"_170":64,"_171":64},"count","unfilledCount","emptyCount",{"_44":157,"_32":158,"_30":159,"_135":-5,"_42":43,"_41":160,"_137":60,"_39":240,"_13":64,"_34":155,"_36":-5,"_24":25,"_141":-5,"_185":241,"_27":242},{"_44":233,"_32":234,"_30":235,"_135":159,"_42":43,"_41":160,"_137":60,"_39":236,"_13":64,"_34":20,"_36":237,"_24":25,"_141":-5,"_185":238,"_27":239},{"_44":150,"_32":151,"_30":152,"_135":-5,"_42":43,"_41":153,"_137":60,"_39":230,"_13":64,"_34":155,"_36":-5,"_24":25,"_141":-5,"_185":231,"_27":232},{"_44":226,"_32":220,"_30":215,"_135":152,"_42":43,"_41":153,"_137":60,"_39":227,"_13":64,"_34":155,"_36":-5,"_24":25,"_141":-5,"_185":228,"_27":229},{"_44":221,"_32":33,"_30":31,"_135":215,"_42":43,"_41":14,"_137":25,"_39":222,"_13":223,"_34":35,"_36":38,"_24":25,"_141":-5,"_185":224,"_27":225},{"_44":212,"_32":213,"_30":214,"_135":215,"_42":43,"_41":153,"_137":60,"_39":216,"_13":64,"_34":35,"_36":217,"_24":25,"_141":-5,"_185":218,"_27":219},{"_44":205,"_32":206,"_30":207,"_135":152,"_42":43,"_41":153,"_137":60,"_39":208,"_13":64,"_34":20,"_36":209,"_24":25,"_141":-5,"_185":210,"_27":211},{"_44":198,"_32":199,"_30":200,"_135":152,"_42":43,"_41":153,"_137":60,"_39":201,"_13":64,"_34":35,"_36":202,"_24":25,"_141":-5,"_185":203,"_27":204},{"_44":191,"_32":192,"_30":193,"_135":152,"_42":43,"_41":153,"_137":60,"_39":194,"_13":64,"_34":35,"_36":195,"_24":25,"_141":-5,"_185":196,"_27":197},{"_44":143,"_32":144,"_30":145,"_135":-5,"_42":43,"_41":146,"_137":25,"_39":188,"_13":136,"_34":139,"_36":148,"_24":25,"_141":-5,"_185":189,"_27":190},{"_44":133,"_32":134,"_30":58,"_135":-5,"_42":43,"_41":136,"_137":60,"_39":184,"_13":64,"_34":139,"_36":140,"_24":25,"_141":-5,"_185":186,"_27":187},["D",1788789036771],"children",[],[134],["D",1788795943665],[],[144],"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

Diff · v7