\n \n \n \n\n",[18,89],"d6e5c4c2-33b8-4fc6-a126-a5a497764dd8",["D",1781798518396],"\n",[18,95],"359c56a7-0ace-44b0-9cb6-3e91c6d30ddb",["D",1781798518396],[18,100],"pulls","branches","forks","envVars",{"_96":26,"_232":26},"connections",{"_96":26,"_231":26},"unfilledCount","emptyCount",{"_34":198,"_13":18,"_75":111,"_44":-5,"_36":37,"_201":41,"_209":24,"_38":311,"_40":26,"_78":101,"_199":-5,"_80":30,"_202":-5,"_250":312,"_17":313},{"_34":221,"_13":100,"_75":99,"_44":111,"_36":37,"_201":41,"_209":24,"_38":308,"_40":26,"_78":101,"_199":-5,"_80":30,"_202":-5,"_250":309,"_17":310},{"_34":300,"_13":301,"_75":302,"_44":99,"_36":37,"_201":303,"_209":24,"_38":304,"_40":41,"_78":79,"_199":305,"_80":30,"_202":-5,"_250":306,"_17":307},{"_34":292,"_13":293,"_75":294,"_44":99,"_36":37,"_201":295,"_209":24,"_38":296,"_40":26,"_78":79,"_199":297,"_80":30,"_202":-5,"_250":298,"_17":299},{"_34":285,"_13":286,"_75":287,"_44":99,"_36":37,"_201":97,"_209":24,"_38":288,"_40":26,"_78":79,"_199":289,"_80":30,"_202":-5,"_250":290,"_17":291},{"_34":277,"_13":278,"_75":279,"_44":99,"_36":37,"_201":280,"_209":24,"_38":281,"_40":26,"_78":79,"_199":282,"_80":30,"_202":-5,"_250":283,"_17":284},{"_34":269,"_13":270,"_75":271,"_44":99,"_36":37,"_201":272,"_209":24,"_38":273,"_40":26,"_78":79,"_199":274,"_80":30,"_202":-5,"_250":275,"_17":276},{"_34":217,"_13":95,"_75":94,"_44":111,"_36":37,"_201":41,"_209":24,"_38":266,"_40":26,"_78":21,"_199":219,"_80":30,"_202":-5,"_250":267,"_17":268},{"_34":213,"_13":89,"_75":88,"_44":111,"_36":37,"_201":104,"_209":24,"_38":263,"_40":41,"_78":21,"_199":215,"_80":30,"_202":-5,"_250":264,"_17":265},{"_34":208,"_13":77,"_75":76,"_44":111,"_36":37,"_201":41,"_209":24,"_38":260,"_40":26,"_78":79,"_199":211,"_80":30,"_202":-5,"_250":261,"_17":262},{"_34":253,"_13":254,"_75":255,"_44":-5,"_36":37,"_201":148,"_209":24,"_38":256,"_40":41,"_78":21,"_199":257,"_80":30,"_202":-5,"_250":258,"_17":259},{"_34":245,"_13":246,"_75":124,"_44":-5,"_36":37,"_201":41,"_209":24,"_38":247,"_40":26,"_78":248,"_199":249,"_80":30,"_202":-5,"_250":251,"_17":252},"3d925c5d-892a-428b-990c-8bba01950822","index.ts",["D",1781798518396],"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// View source redirect\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;\n","children",[],[246],"c269728f-1138-4af3-9376-41bddc3de5e2","README.md","019edb77-becb-7343-8b05-63351018572d",["D",1781798675788],"# ☁ NimbusVPS — Cloud Control Panel (Simulation)\n\nA sleek, modern **VPS control panel UI** — purely a front-end **simulation**, no\nreal infrastructure behind it. Built with client-side React + Hono on Val Town.\n\n## Features\n\n- 📊 **Live dashboard** with fleet summary stats (servers, avg CPU/RAM, monthly cost)\n- 🖥️ **Server cards** with animated status dots and real-time usage bars\n- ⚡ **Live simulation** — CPU / RAM / network metrics tick and drift every 1.5s\n- 🎛️ **Detail drawer** with circular gauges, sparkline charts & full spec sheet\n- 🔌 **Power controls** — start / stop / reboot (with reboot animation), snapshot\n- ⌨️ **Fake terminal** — try `uptime`, `df -h`, `top`, `neofetch`, `ping`, `ls`\n- 🔍 **Search & filter** by name / IP / region and running/stopped status\n- ➕ **Deploy** new simulated servers on the fly\n- 🌗 Dark, glassy UI with Tailwind (via Twind) — zero build step\n\n> Everything is mock data generated in the browser. No servers are real. 🙂\n\n## Architecture\n\n```mermaid\ngraph TD\n Browser -->|\"GET /\"| Hono[\"index.ts (Hono)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry --> App[\"App.tsx — state + sim loop\"]\n App --> Card[\"ServerCard.tsx\"]\n App --> Detail[\"ServerDetail.tsx\"]\n Detail --> Charts[\"Charts.tsx — gauges & sparklines\"]\n App --> Data[\"mockData.ts — fake servers + tick()\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend)\nfrontend/\n index.html ← HTML shell (Twind + React)\n index.tsx ← React entrypoint\n components/\n App.tsx ← Dashboard, state, live simulation loop\n ServerCard.tsx ← Grid card + status badge\n ServerDetail.tsx ← Slide-over: gauges, charts, power, console\n Charts.tsx ← GaugeRing, Sparkline, StatBar primitives\n mockData.ts ← Fake server generation + metric simulation\n```\n\n## Make it real?\n\nVal Town's runtime is `fetch`-only (no raw TCP/UDP), so a real VPS panel would\ntalk to a provider's **HTTP API** (e.g. Hetzner, DigitalOcean, Vultr). Swap the\nfunctions in `mockData.ts` for real API calls and keep the UI as-is.\n",[],[254],["D",1781798518396],[],[18,77],["D",1781798648121],[],[18,89],["D",1781798518396],[],[18,95],"24e0e046-bf52-4b0d-9390-0c262ddbb804","mockData.ts","17a8ca2e-6b2f-11f1-857e-1607ee4eb77e",2,["D",1781798542964],"// Mock VPS data + simulation helpers. Everything here is fake/simulated.\n\nexport type ServerStatus = \"running\" | \"stopped\" | \"rebooting\" | \"provisioning\";\n\nexport interface VPS {\n id: string;\n name: string;\n status: ServerStatus;\n os: string;\n osIcon: string;\n region: string;\n flag: string;\n ip: string;\n plan: string;\n vcpu: number;\n ramGB: number;\n diskGB: number;\n bandwidthTB: number;\n // live-ish gauges (0-100)\n cpu: number;\n ram: number;\n disk: number;\n netIn: number; // Mbps\n netOut: number; // Mbps\n uptimeDays: number;\n pricePerMo: number;\n}\n\nconst REGIONS = [\n { region: \"Frankfurt, DE\", flag: \"🇩🇪\" },\n { region: \"New York, US\", flag: \"🇺🇸\" },\n { region: \"Singapore, SG\", flag: \"🇸🇬\" },\n { region: \"London, UK\", flag: \"🇬🇧\" },\n { region: \"Tokyo, JP\", flag: \"🇯🇵\" },\n { region: \"São Paulo, BR\", flag: \"🇧🇷\" },\n];\n\nconst OSES = [\n { os: \"Ubuntu 24.04 LTS\", osIcon: \"🟠\" },\n { os: \"Debian 12\", osIcon: \"🔴\" },\n { os: \"Arch Linux\", osIcon: \"🔵\" },\n { os: \"Fedora 40\", osIcon: \"🔷\" },\n { os: \"Rocky Linux 9\", osIcon: \"🟢\" },\n { os: \"Windows Server 2022\", osIcon: \"🪟\" },\n];\n\nconst PLANS = [\n { plan: \"Nano\", vcpu: 1, ramGB: 1, diskGB: 25, bandwidthTB: 1, pricePerMo: 5 },\n { plan: \"Starter\", vcpu: 2, ramGB: 4, diskGB: 80, bandwidthTB: 3, pricePerMo: 12 },\n { plan: \"Standard\", vcpu: 4, ramGB: 8, diskGB: 160, bandwidthTB: 5, pricePerMo: 24 },\n { plan: \"Power\", vcpu: 8, ramGB: 16, diskGB: 320, bandwidthTB: 8, pricePerMo: 48 },\n { plan: \"Beast\", vcpu: 16, ramGB: 32, diskGB: 640, bandwidthTB: 12, pricePerMo: 96 },\n];\n\nconst NAMES = [\n \"web-prod-01\",\n \"db-primary\",\n \"cache-redis\",\n \"worker-queue\",\n \"staging-app\",\n \"mail-relay\",\n \"vpn-gateway\",\n \"ci-runner\",\n \"backup-store\",\n \"monitoring\",\n];\n\nfunction rand(min: number, max: number) {\n return Math.random() * (max - min) + min;\n}\nfunction pick(arr: T[], i: number): T {\n return arr[i % arr.length];\n}\nfunction randIp() {\n return `${Math.floor(rand(10, 240))}.${Math.floor(rand(0, 255))}.${Math.floor(rand(0, 255))}.${Math.floor(rand(1, 254))}`;\n}\n\nexport function generateServers(count = 6): VPS[] {\n const statuses: ServerStatus[] = [\"running\", \"running\", \"running\", \"running\", \"stopped\", \"rebooting\"];\n return Array.from({ length: count }, (_, i) => {\n const region = pick(REGIONS, i + Math.floor(rand(0, 3)));\n const os = pick(OSES, i);\n const plan = pick(PLANS, Math.floor(rand(0, PLANS.length)));\n const status = pick(statuses, i + Math.floor(rand(0, 2)));\n const running = status === \"running\";\n return {\n id: `srv-${(10000 + Math.floor(rand(0, 89999))).toString()}`,\n name: pick(NAMES, i),\n status,\n ...os,\n ...region,\n ip: randIp(),\n ...plan,\n cpu: running ? rand(3, 78) : 0,\n ram: running ? rand(20, 85) : 0,\n disk: rand(12, 72),\n netIn: running ? rand(0.5, 120) : 0,\n netOut: running ? rand(0.5, 90) : 0,\n uptimeDays: running ? Math.floor(rand(1, 340)) : 0,\n };\n });\n}\n\n// Nudge gauges a little to simulate live metrics.\nexport function tickServer(s: VPS): VPS {\n if (s.status !== \"running\") {\n return { ...s, cpu: 0, ram: s.ram, netIn: 0, netOut: 0 };\n }\n const clamp = (n: number, lo = 0, hi = 100) => Math.max(lo, Math.min(hi, n));\n return {\n ...s,\n cpu: clamp(s.cpu + rand(-8, 8)),\n ram: clamp(s.ram + rand(-3, 3)),\n disk: clamp(s.disk + rand(-0.2, 0.3)),\n netIn: clamp(s.netIn + rand(-15, 15), 0, 1000),\n netOut: clamp(s.netOut + rand(-12, 12), 0, 1000),\n };\n}\n\nexport const STATUS_META: Record = {\n running: { label: \"Running\", color: \"text-emerald-400\", dot: \"bg-emerald-400\" },\n stopped: { label: \"Stopped\", color: \"text-zinc-400\", dot: \"bg-zinc-500\" },\n rebooting: { label: \"Rebooting\", color: \"text-amber-400\", dot: \"bg-amber-400\" },\n provisioning: { label: \"Provisioning\", color: \"text-sky-400\", dot: \"bg-sky-400\" },\n};\n",[],[18,100,270],"b36a5969-4195-4168-bad9-da08516277e9","ServerDetail.tsx","4049a39a-6b2f-11f1-aeb6-1607ee4eb77e",5,["D",1781798611129],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { type ServerStatus, type VPS } from \"./mockData.ts\";\nimport { GaugeRing, Sparkline } from \"./Charts.tsx\";\nimport { StatusBadge } from \"./ServerCard.tsx\";\n\ntype Action = \"start\" | \"stop\" | \"reboot\";\n\nexport function ServerDetail({\n s,\n cpuHist,\n netHist,\n onClose,\n onAction,\n}: {\n s: VPS;\n cpuHist: number[];\n netHist: number[];\n onClose: () => void;\n onAction: (id: string, action: Action) => void;\n}) {\n const [log, setLog] = useState([\n `[boot] ${s.name} (${s.id}) attached`,\n `[net] eth0 ${s.ip} link up`,\n `[sys] ${s.os} kernel loaded`,\n ]);\n const [cmd, setCmd] = useState(\"\");\n const logEnd = useRef(null);\n\n useEffect(() => {\n logEnd.current?.scrollIntoView({ behavior: \"smooth\" });\n }, [log]);\n\n function pushLog(line: string) {\n setLog((l) => [...l.slice(-60), line]);\n }\n\n function runCmd(e: any) {\n e.preventDefault();\n const c = cmd.trim();\n if (!c) return;\n pushLog(`$ ${c}`);\n const out = fakeShell(c, s);\n out.forEach((o) => pushLog(o));\n setCmd(\"\");\n }\n\n function doAction(a: Action) {\n onAction(s.id, a);\n pushLog(`[power] ${a} signal sent → ${s.name}`);\n }\n\n const running = s.status === \"running\";\n\n return (\n

\n {/* header */}\n

{s.osIcon}

{s.name}

\n \n

{s.id} · {s.ip}

\n \n

\n\n

\n {/* power controls */}\n

\n doAction(\"start\")} />\n doAction(\"reboot\")} />\n doAction(\"stop\")} />\n pushLog(\"[snap] snapshot created: snap-\" + Date.now().toString().slice(-6))} />\n pushLog(\"[ttyS0] interactive console attached\")} />\n

\n\n {/* gauges */}\n

\n \n \n \n

\n\n {/* charts */}\n

\n \n \n \n \n \n \n

\n\n {/* specs */}\n

\n \n \n \n \n \n \n \n \n

\n\n {/* console */}\n

\n \n \n \n root@{s.name}:~ (simulated)\n

\n {log.map((l, i) => (\n

{l}

\n ))}\n

\n );\n}\n\nfunction PowerBtn({\n label,\n icon,\n tone,\n disabled,\n onClick,\n}: {\n label: string;\n icon: string;\n tone: \"emerald\" | \"amber\" | \"rose\" | \"zinc\";\n disabled?: boolean;\n onClick: () => void;\n}) {\n const tones: Record = {\n emerald: \"border-emerald-500/30 text-emerald-300 hover:bg-emerald-500/15\",\n amber: \"border-amber-500/30 text-amber-300 hover:bg-amber-500/15\",\n rose: \"border-rose-500/30 text-rose-300 hover:bg-rose-500/15\",\n zinc: \"border-white/10 text-zinc-300 hover:bg-white/5\",\n };\n return (\n \n {icon} {label}\n \n );\n}\n\nfunction ChartCard({ title, value, children }: { title: string; value: string; children: any }) {\n return (\n

\n {title}\n {value}\n

\n {children}\n

\n );\n}\n\nfunction Spec({ label, value }: { label: string; value: string }) {\n return (\n

{label}

{value}

\n );\n}\n\nfunction fakeShell(cmd: string, s: VPS): string[] {\n const c = cmd.toLowerCase();\n if (c === \"uptime\") return [` up ${s.uptimeDays} days, load average: ${(s.cpu / 100 * s.vcpu).toFixed(2)}, 0.41, 0.38`];\n if (c.startsWith(\"df\")) {\n return [\n \"Filesystem Size Used Avail Use% Mounted on\",\n `/dev/vda1 ${s.diskGB}G ${Math.round(s.diskGB * s.disk / 100)}G ${Math.round(s.diskGB * (1 - s.disk / 100))}G ${Math.round(s.disk)}% /`,\n ];\n }\n if (c.startsWith(\"free\")) return [`Mem: ${s.ramGB * 1024} ${Math.round(s.ramGB * 1024 * s.ram / 100)} used`];\n if (c === \"top\" || c === \"htop\") return [`PID USER %CPU %MEM COMMAND`, `1138 root ${s.cpu.toFixed(1)} ${s.ram.toFixed(1)} nginx`];\n if (c === \"ls\") return [\"app data logs docker-compose.yml README.md\"];\n if (c === \"whoami\") return [\"root\"];\n if (c === \"neofetch\") return [`${s.osIcon} ${s.os}`, ` Host: ${s.name}`, ` CPU: ${s.vcpu} vCPU Mem: ${s.ramGB}GB IP: ${s.ip}`];\n if (c === \"clear\") return [];\n if (c.startsWith(\"ping\")) return [`64 bytes from ${s.ip}: icmp_seq=1 ttl=64 time=${(Math.random() * 20).toFixed(1)} ms`];\n return [`${cmd.split(\" \")[0]}: command not found (simulated shell)`];\n}\n\nexport type { Action };\n",[],[18,100,278],"e2191c68-9e24-414e-b408-cafb62675cb9","ServerCard.tsx","28d5c1c6-6b2f-11f1-ba6f-1607ee4eb77e",["D",1781798571783],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { STATUS_META, type VPS } from \"./mockData.ts\";\nimport { StatBar } from \"./Charts.tsx\";\n\nexport function StatusBadge({ status }: { status: VPS[\"status\"] }) {\n const m = STATUS_META[status];\n return (\n \n \n {m.label}\n \n );\n}\n\nexport function ServerCard({ s, onOpen }: { s: VPS; onOpen: (id: string) => void }) {\n return (\n onOpen(s.id)}\n class=\"group text-left w-full rounded-2xl border border-white/10 bg-zinc-900/60 p-5 transition-all hover:border-indigo-500/50 hover:bg-zinc-900 hover:-translate-y-0.5 hover:shadow-xl hover:shadow-indigo-500/5\"\n >\n

{s.osIcon}

{s.name}

{s.ip}

\n \n

\n\n

\n {s.flag} {s.region}\n •\n {s.plan}\n •\n {s.vcpu} vCPU / {s.ramGB}GB\n

\n\n

\n \n \n \n

\n\n

\n \n ↓ {s.netIn.toFixed(1)} · ↑ {s.netOut.toFixed(1)} Mbps\n \n Manage →\n

\n \n );\n}\n\nfunction Metric({ label, value, color }: { label: string; value: number; color: string }) {\n return (\n

\n {label}\n \n {Math.round(value)}%\n

\n );\n}\n",[],[18,100,286],"d4f5e88a-a4d9-4521-ac1d-f6ede2f6803e","Charts.tsx","20f01cc2-6b2f-11f1-af8f-1607ee4eb77e",3,["D",1781798558535],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\n\n// A circular progress ring used for CPU / RAM / Disk gauges.\nexport function GaugeRing({\n value,\n label,\n sublabel,\n color = \"#34d399\",\n size = 116,\n}: {\n value: number;\n label: string;\n sublabel?: string;\n color?: string;\n size?: number;\n}) {\n const stroke = 9;\n const r = (size - stroke) / 2;\n const c = 2 * Math.PI * r;\n const pct = Math.max(0, Math.min(100, value));\n const offset = c - (pct / 100) * c;\n return (\n

\n \n

\n {Math.round(pct)}%\n {sublabel && {sublabel}}\n

\n {label}\n

\n );\n}\n\n// A lightweight sparkline area chart from an array of numbers.\nexport function Sparkline({\n data,\n color = \"#60a5fa\",\n height = 64,\n max,\n}: {\n data: number[];\n color?: string;\n height?: number;\n max?: number;\n}) {\n const w = 100;\n const peak = max ?? Math.max(1, ...data);\n const pts = data.map((v, i) => {\n const x = (i / Math.max(1, data.length - 1)) * w;\n const y = height - (v / peak) * (height - 6) - 3;\n return [x, y];\n });\n const line = pts.map((p, i) => `${i === 0 ? \"M\" : \"L\"}${p[0].toFixed(2)},${p[1].toFixed(2)}`).join(\" \");\n const area = `${line} L${w},${height} L0,${height} Z`;\n const id = `g-${color.replace(\"#\", \"\")}`;\n return (\n \n );\n}\n\n// Horizontal usage bar.\nexport function StatBar({ value, color = \"#60a5fa\" }: { value: number; color?: string }) {\n return (\n

\n \n

\n );\n}\n",[],[18,100,293],"5ffc4fa7-e194-4ac8-a7c2-f2244a529f9b","App.tsx","019edb77-becb-7343-8b05-47593825009d",6,["D",1781798642142],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useMemo, useState } from \"https://esm.sh/react@18.2.0\";\nimport { generateServers, tickServer, type VPS } from \"./mockData.ts\";\nimport { ServerCard } from \"./ServerCard.tsx\";\nimport { ServerDetail, type Action } from \"./ServerDetail.tsx\";\n\ntype Filter = \"all\" | \"running\" | \"stopped\";\n\nexport function App() {\n const [servers, setServers] = useState(() => generateServers(6));\n const [openId, setOpenId] = useState(null);\n const [query, setQuery] = useState(\"\");\n const [filter, setFilter] = useState(\"all\");\n const [cpuHist, setCpuHist] = useState>({});\n const [netHist, setNetHist] = useState>({});\n\n // Live simulation loop\n useEffect(() => {\n const t = setInterval(() => {\n setServers((prev) => {\n const next = prev.map(tickServer);\n setCpuHist((h) => {\n const out = { ...h };\n next.forEach((s) => {\n out[s.id] = [...(out[s.id] ?? Array(40).fill(s.cpu)).slice(-39), s.cpu];\n });\n return out;\n });\n setNetHist((h) => {\n const out = { ...h };\n next.forEach((s) => {\n out[s.id] = [...(out[s.id] ?? Array(40).fill(0)).slice(-39), s.netIn + s.netOut];\n });\n return out;\n });\n return next;\n });\n }, 1500);\n return () => clearInterval(t);\n }, []);\n\n function handleAction(id: string, action: Action) {\n setServers((prev) =>\n prev.map((s) => {\n if (s.id !== id) return s;\n if (action === \"start\") return { ...s, status: \"running\", cpu: 8, ram: 30, uptimeDays: 0 };\n if (action === \"stop\") return { ...s, status: \"stopped\", cpu: 0, ram: 0, netIn: 0, netOut: 0 };\n if (action === \"reboot\") return { ...s, status: \"rebooting\" };\n return s;\n })\n );\n if (action === \"reboot\") {\n setTimeout(() => {\n setServers((prev) => prev.map((s) => (s.id === id ? { ...s, status: \"running\", cpu: 12, ram: 35 } : s)));\n }, 2600);\n }\n }\n\n const filtered = useMemo(() => {\n return servers.filter((s) => {\n const matchQ =\n !query ||\n s.name.toLowerCase().includes(query.toLowerCase()) ||\n s.ip.includes(query) ||\n s.region.toLowerCase().includes(query.toLowerCase());\n const matchF = filter === \"all\" || s.status === filter;\n return matchQ && matchF;\n });\n }, [servers, query, filter]);\n\n const open = servers.find((s) => s.id === openId) ?? null;\n\n const totals = useMemo(() => {\n const running = servers.filter((s) => s.status === \"running\");\n return {\n count: servers.length,\n running: running.length,\n cpu: running.length ? running.reduce((a, s) => a + s.cpu, 0) / running.length : 0,\n ram: running.length ? running.reduce((a, s) => a + s.ram, 0) / running.length : 0,\n cost: servers.reduce((a, s) => a + s.pricePerMo, 0),\n };\n }, [servers]);\n\n return (\n

\n {/* ambient glow */}\n

\n\n

\n {/* topbar */}\n

\n ☁\n

NimbusVPS

Cloud control panel · simulation

\n \n Live\n \n setServers((p) => [...generateServers(1), ...p])}\n class=\"rounded-xl bg-indigo-500 px-4 py-2 text-sm font-semibold text-white transition hover:bg-indigo-400\"\n >\n + Deploy server\n \n

\n\n {/* summary stats */}\n

\n\n {/* controls */}\n

\n {([\"all\", \"running\", \"stopped\"] as Filter[]).map((f) => (\n setFilter(f)}\n class={`rounded-lg px-3 py-1.5 text-sm font-medium capitalize transition ${\n filter === f ? \"bg-white/10 text-white\" : \"text-zinc-400 hover:text-white\"\n }`}\n >\n {f}\n \n ))}\n

\n 🔍\n setQuery(e.target.value)}\n placeholder=\"Search name, IP, region…\"\n class=\"w-64 rounded-xl border border-white/10 bg-zinc-900/60 py-2 pl-9 pr-3 text-sm text-white outline-none transition focus:border-indigo-500/50\"\n />\n

\n\n {/* grid */}\n

\n {filtered.map((s) => (\n \n ))}\n

\n {filtered.length === 0 && (\n

No servers match your filters.

\n )}\n\n \n

\n\n {open && (\n setOpenId(null)}\n onAction={handleAction}\n />\n )}\n

\n );\n}\n\nfunction Summary({ label, value, sub, icon }: { label: string; value: string; sub: string; icon: string }) {\n return (\n

\n {label}\n {icon}\n

{value}

{sub}

\n );\n}\n",[],[18,100,301],["D",1781798518396],[235,236,237,238,239],[18,100],["D",1781798518396],[234,240,241,242],[18],["D",1781798518396],{"_11":12,"_164":83},{"_11":12,"_160":83,"_82":83,"_31":81,"_161":162,"_163":30},{"_40":148,"_13":16,"_34":37,"_149":113,"_150":72,"_151":152,"_153":117,"_154":155,"_156":157,"_158":14,"_159":12},"ctx",{"_53":-5,"_185":351,"_352":353,"_354":355,"_356":30,"_357":30,"_358":30,"_359":24,"_360":-5,"_361":-7,"_362":-7,"_363":26,"_364":30,"_365":30,"_366":-5,"_367":30,"_368":30,"_369":30,"_370":-5},"ENV",{"_322":323,"_324":325,"_326":16,"_327":328,"_329":330,"_331":332,"_333":334,"_335":336,"_337":338,"_339":340,"_341":342,"_343":344,"_345":346,"_347":348,"_349":350},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","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"]

History · frontend