Web Terminal

\n \n \n \n\n",[],[89,121],"207ea958-56a7-11f1-bca4-ee650bb23af1","favicon.svg","019e54ea-9f9c-71e9-a735-ec2861986952",["D",1779541122909],"\n",[],[89,129],"207ea638-56a7-11f1-bca4-ee650bb23af1","components","019e54ea-9f9c-71e9-a735-ebe291c4fc16",["D",1779541122909],[141],[89,136],{"_35":142,"_13":143,"_64":144,"_66":137,"_67":68,"_69":145,"_70":71,"_37":146,"_17":73,"_74":116,"_76":147,"_78":50,"_79":-5,"_99":148,"_18":149},"3e000918-56a7-11f1-bca4-ee650bb23af1","App.tsx","019e54ea-9f9c-71e9-a735-e367c8457e0c",4,["D",1779541172478],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState, useRef, useEffect, useCallback } from \"https://esm.sh/react@18.2.0\";\n\ninterface Line {\n type: \"input\" | \"output\" | \"error\" | \"system\";\n text: string;\n}\n\nexport function App() {\n const [lines, setLines] = useState([\n { type: \"system\", text: \"╔══════════════════════════════════════════╗\" },\n { type: \"system\", text: \"║ 🌐 Web Terminal v1.0 ║\" },\n { type: \"system\", text: \"║ Network tools powered by Val Town ║\" },\n { type: \"system\", text: \"╚══════════════════════════════════════════╝\" },\n { type: \"system\", text: \"\" },\n { type: \"system\", text: \"Type 'help' for available commands.\" },\n { type: \"system\", text: \"\" },\n ]);\n const [input, setInput] = useState(\"\");\n const [loading, setLoading] = useState(false);\n const [history, setHistory] = useState([]);\n const [historyIdx, setHistoryIdx] = useState(-1);\n const inputRef = useRef(null);\n const bottomRef = useRef(null);\n\n useEffect(() => {\n bottomRef.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [lines]);\n\n useEffect(() => {\n inputRef.current?.focus();\n }, []);\n\n const exec = useCallback(async (command: string) => {\n if (!command.trim()) return;\n\n setLines((prev) => [...prev, { type: \"input\", text: `$ ${command}` }]);\n setHistory((prev) => [...prev, command]);\n setHistoryIdx(-1);\n setInput(\"\");\n\n if (command.trim().toLowerCase() === \"clear\") {\n setLines([]);\n return;\n }\n\n setLoading(true);\n try {\n const res = await fetch(\"/api/exec\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ command }),\n });\n const data = await res.json();\n\n if (data.clear) {\n setLines([]);\n } else if (data.error) {\n setLines((prev) => [...prev, { type: \"error\", text: data.error }]);\n } else if (data.output !== undefined) {\n setLines((prev) => [...prev, { type: \"output\", text: data.output }]);\n }\n } catch (e: any) {\n setLines((prev) => [...prev, { type: \"error\", text: `Network error: ${e.message}` }]);\n } finally {\n setLoading(false);\n setLines((prev) => [...prev, { type: \"system\", text: \"\" }]);\n }\n }, []);\n\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === \"Enter\" && !loading) {\n exec(input);\n } else if (e.key === \"ArrowUp\") {\n e.preventDefault();\n if (history.length > 0) {\n const newIdx = historyIdx === -1 ? history.length - 1 : Math.max(0, historyIdx - 1);\n setHistoryIdx(newIdx);\n setInput(history[newIdx]);\n }\n } else if (e.key === \"ArrowDown\") {\n e.preventDefault();\n if (historyIdx !== -1) {\n const newIdx = historyIdx + 1;\n if (newIdx >= history.length) {\n setHistoryIdx(-1);\n setInput(\"\");\n } else {\n setHistoryIdx(newIdx);\n setInput(history[newIdx]);\n }\n }\n }\n };\n\n const colorClass = (type: Line[\"type\"]) => {\n switch (type) {\n case \"input\": return \"text-cyan-400\";\n case \"output\": return \"text-green-300\";\n case \"error\": return \"text-red-400\";\n case \"system\": return \"text-gray-400\";\n }\n };\n\n return (\n inputRef.current?.focus()}\n >\n {/* Title bar */}\n

\n 🌐 Web Terminal\n \n view source\n \n

\n\n {/* Terminal body */}\n

\n {lines.map((line, i) => (\n

{line.text}

\n ))}\n\n {/* Input line */}\n

\n $\n setInput((e.target as HTMLInputElement).value)}\n onKeyDown={handleKeyDown}\n disabled={loading}\n class=\"flex-1 bg-transparent border-none outline-none text-green-400 font-mono text-sm caret-green-400\"\n placeholder={loading ? \"executing...\" : \"type a command...\"}\n autoFocus\n spellCheck={false}\n autoComplete=\"off\"\n />\n {loading && ⏳}\n

\n );\n}\n",[],[89,136,143],"207427da-56a7-11f1-bca4-ee650bb23af1",["D",1779541122909],"legacyEnvVars","httpPrivacy","description","🌐 Web-based network terminal with HTTP, DNS, and utility tools","imageUrl","userId","7f5e17e0-eb6e-421f-a6db-eb48317c923d","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount","019e54d6-ff0a-70b9-9edf-05cb4e20f933","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_193":19},"org",{"_11":12,"_188":19,"_189":19,"_157":158,"_190":191,"_192":50},"branch",{"_17":84,"_13":16,"_35":68,"_41":150,"_44":36,"_45":184,"_185":52,"_186":42,"_187":56,"_57":14,"_53":12},88,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","displayName","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_35":150,"_13":14,"_37":259,"_48":-5,"_152":50,"_51":52,"_153":52,"_154":155,"_156":-5,"_157":158,"_159":65,"_160":71,"_161":-5,"_162":-5,"_163":92,"_55":164,"_165":-5,"_166":-5,"_167":-5,"_168":-5,"_169":170,"_171":170,"_172":173,"_174":173,"_175":173,"_176":170,"_177":170,"_178":260,"_180":261,"_182":262,"_49":50},[235,241,242],"files",[235,236,237,238,239,240,241,242],"counts",{"_226":92,"_227":73,"_228":92,"_34":229,"_230":231},[220,221,222],"upstreamProject",{"_35":42,"_13":58,"_154":216,"_156":217,"_51":52,"_178":218},"upstreamBranch",{"_35":36,"_37":214,"_39":215,"_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=1789591160&sig=7c96819ee80f29df3912e6af7d42b9412db7aea8a9b425ce53bfb71eea6308e9",{"_11":54,"_193":219},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789591160&sig=720219efb985140cb5d736f4d3325e29e8dfcc1014cf59b6a4ce3cc647b431c0",{"_35":88,"_13":89,"_64":90,"_66":-5,"_67":68,"_69":73,"_70":71,"_37":91,"_17":92,"_74":93,"_76":-5,"_78":50,"_79":-5,"_18":225},{"_35":81,"_13":82,"_64":83,"_66":-5,"_67":68,"_69":84,"_70":71,"_37":85,"_17":73,"_74":24,"_76":86,"_78":50,"_79":-5,"_18":224},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":33,"_70":71,"_37":72,"_17":73,"_74":75,"_76":77,"_78":50,"_79":-5,"_18":223},[63],[82],[89],"pulls","branches","forks",{"_232":92,"_234":92},"connections",{"_232":92,"_233":92},"count","unfilledCount","emptyCount",{"_35":88,"_13":89,"_64":90,"_66":-5,"_67":68,"_69":73,"_70":71,"_37":105,"_17":92,"_74":93,"_76":-5,"_78":50,"_79":-5,"_99":257,"_18":258},{"_35":135,"_13":136,"_64":137,"_66":90,"_67":68,"_69":73,"_70":71,"_37":138,"_17":92,"_74":93,"_76":-5,"_78":50,"_79":-5,"_99":255,"_18":256},{"_35":142,"_13":143,"_64":144,"_66":137,"_67":68,"_69":145,"_70":71,"_37":146,"_17":73,"_74":116,"_76":147,"_78":50,"_79":-5,"_99":253,"_18":254},{"_35":128,"_13":129,"_64":130,"_66":90,"_67":68,"_69":73,"_70":71,"_37":131,"_17":92,"_74":24,"_76":132,"_78":50,"_79":-5,"_99":251,"_18":252},{"_35":120,"_13":121,"_64":122,"_66":90,"_67":68,"_69":123,"_70":71,"_37":124,"_17":73,"_74":24,"_76":125,"_78":50,"_79":-5,"_99":249,"_18":250},{"_35":112,"_13":113,"_64":114,"_66":90,"_67":68,"_69":73,"_70":71,"_37":115,"_17":92,"_74":116,"_76":117,"_78":50,"_79":-5,"_99":247,"_18":248},{"_35":81,"_13":82,"_64":83,"_66":-5,"_67":68,"_69":84,"_70":71,"_37":102,"_17":73,"_74":24,"_76":86,"_78":50,"_79":-5,"_99":245,"_18":246},{"_35":62,"_13":63,"_64":65,"_66":-5,"_67":68,"_69":33,"_70":71,"_37":98,"_17":73,"_74":75,"_76":77,"_78":50,"_79":-5,"_99":243,"_18":244},[],[63],[],[82],[],[89,113],[],[89,121],[],[89,129],[],[89,136,143],[237],[89,136],[236,238,239,240],[89],["D",1779541122909],{"_11":12,"_193":19},{"_11":12,"_188":19,"_189":19,"_157":158,"_190":191,"_192":50},{"_17":84,"_13":16,"_35":68,"_41":150,"_44":36,"_45":184,"_185":52,"_186":42,"_187":56,"_57":14,"_53":12},"ctx",{"_178":-5,"_211":296,"_297":298,"_299":300,"_301":50,"_302":50,"_303":50,"_304":71,"_305":-5,"_306":-7,"_307":-7,"_308":92,"_309":50,"_310":50,"_311":-5,"_312":50,"_313":50,"_314":50,"_315":-5},"ENV",{"_267":268,"_269":270,"_271":16,"_272":273,"_274":275,"_276":277,"_278":279,"_280":281,"_282":283,"_284":285,"_286":287,"_288":289,"_290":291,"_292":293,"_294":295},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","811aa22498c9b0b5a47e8d778de579cdb990f332","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"]

Code