\n \n \n \n\n",[],[154,196],"d6e5c4c2-33b8-4fc6-a126-a5a497764dd8","favicon.svg","019edb77-becb-7343-8b05-513a1fe5661b",["D",1781798518396],"\n",[],[154,204],"24e0e046-bf52-4b0d-9390-0c262ddbb804","mockData.ts","17a8ca2e-6b2f-11f1-857e-1607ee4eb77e","019edb77-becb-7343-8b05-4f39d17f5918",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",[],[154,219,211],"components","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",[],[154,219,221],"e2191c68-9e24-414e-b408-cafb62675cb9","ServerCard.tsx","28d5c1c6-6b2f-11f1-ba6f-1607ee4eb77e",4,["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",[],[154,219,229],"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",[],[154,219,237],"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",[],[154,219,245],"359c56a7-0ace-44b0-9cb6-3e91c6d30ddb",["D",1781798518396],[170,171,172,173,174],[154,219],["D",1781798518396],[169,175,176,177],[154],["D",1781798518396],{"_11":12,"_93":88},{"_11":12,"_87":88,"_89":88,"_48":49,"_90":91,"_92":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_80":42,"_81":82,"_83":84,"_85":14,"_86":12},"ctx",{"_73":-5,"_116":296,"_297":298,"_299":300,"_301":40,"_302":40,"_303":40,"_304":53,"_305":-5,"_306":-7,"_307":-7,"_308":57,"_309":40,"_310":40,"_311":-5,"_312":40,"_313":40,"_314":40,"_315":-5},"ENV",{"_267":268,"_269":270,"_271":26,"_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","a3e067d4463eea85f6334f8e583e8516ae58c4f6","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