Web Terminal

\n \n \n \n\n",[],[99,81],"207ea958-56a7-11f1-bca4-ee650bb23af1",["D",1779541122909],"\n",[],[99,136],"3e000918-56a7-11f1-bca4-ee650bb23af1",["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",[],[99,131,118],"207ea638-56a7-11f1-bca4-ee650bb23af1",["D",1779541122909],[286],[99,131],["D",1779541122909],[285,287,288,289],[99],["D",1779541122909],{"_11":12,"_222":86},{"_11":12,"_218":86,"_85":86,"_25":84,"_219":220,"_221":24},{"_38":169,"_13":16,"_32":35,"_207":174,"_208":76,"_209":210,"_211":178,"_212":213,"_214":215,"_216":14,"_217":12},"ctx",{"_51":-5,"_243":363,"_364":365,"_366":367,"_368":24,"_369":24,"_370":24,"_371":166,"_372":-5,"_373":-7,"_374":-7,"_375":20,"_376":24,"_377":24,"_378":-5,"_379":24,"_380":24,"_381":24,"_382":-5},"ENV",{"_334":335,"_336":337,"_338":16,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362},"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"]