Web Terminal

\n \n \n \n\n",[],[151,190],"207ea958-56a7-11f1-bca4-ee650bb23af1","favicon.svg","019e54ea-9f9c-71e9-a735-ec2861986952",["D",1779541122909],"\n",[],[151,198],"3e000918-56a7-11f1-bca4-ee650bb23af1","App.tsx","019e54ea-9f9c-71e9-a735-e367c8457e0c","019e54ea-9f9c-71e9-a735-ebe291c4fc16",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",[],[151,213,205],"components","207ea638-56a7-11f1-bca4-ee650bb23af1",["D",1779541122909],[168],[151,213],["D",1779541122909],[167,169,170,171],[151],["D",1779541122909],{"_16":17,"_87":82},{"_16":17,"_81":82,"_83":82,"_33":34,"_84":85,"_86":26},{"_65":66,"_20":67,"_18":68,"_69":19,"_70":71,"_72":73,"_74":28,"_75":76,"_77":78,"_79":21,"_80":17},"ctx",{"_58":-5,"_109":258,"_259":260,"_261":262,"_263":26,"_264":26,"_265":26,"_266":38,"_267":-5,"_268":-7,"_269":-7,"_270":42,"_271":26,"_272":26,"_273":-5,"_274":26,"_275":26,"_276":26,"_277":-5},"ENV",{"_229":230,"_231":232,"_233":67,"_234":235,"_236":237,"_238":239,"_240":241,"_242":243,"_244":245,"_246":247,"_248":249,"_250":251,"_252":253,"_254":255,"_256":257},"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"]

Search