Web Terminal

\n \n \n \n\n",[],[155,193],"207ea958-56a7-11f1-bca4-ee650bb23af1","favicon.svg","019e54ea-9f9c-71e9-a735-ec2861986952",["D",1779541122909],"\n",[],[155,201],"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",[],[155,216,208],"components","207ea638-56a7-11f1-bca4-ee650bb23af1",["D",1779541122909],[171],[155,216],["D",1779541122909],[170,172,173,174],[155],["D",1779541122909],{"_11":12,"_92":87},{"_11":12,"_86":87,"_88":87,"_47":48,"_89":90,"_91":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_79":42,"_80":81,"_82":83,"_84":14,"_85":12},"ctx",{"_72":-5,"_115":261,"_262":263,"_264":265,"_266":40,"_267":40,"_268":40,"_269":52,"_270":-5,"_271":-7,"_272":-7,"_273":56,"_274":40,"_275":40,"_276":-5,"_277":40,"_278":40,"_279":40,"_280":-5},"ENV",{"_232":233,"_234":235,"_236":26,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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"]

Branches1

Branches
1