[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_349":350,"_351":352},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_73":237,"_40":-7,"_243":-5,"_17":244,"_245":246,"_247":248,"_249":250,"_251":252,"_92":-5,"_253":254,"_255":256,"_257":48,"_258":259,"_260":26,"_261":-5,"_262":-5,"_263":264},"routes/_app.x.$handle.$name.compare.$branch",{"_11":12,"_13":14,"_15":16,"_17":18,"_19":20,"_21":22,"_23":24,"_25":26,"_27":28,"_29":30,"_31":-5},"handle","shiwofo","name","vps-panel","branchName","main","project",{"_32":59,"_13":14,"_34":202,"_46":-5,"_203":48,"_49":50,"_204":50,"_205":206,"_207":208,"_209":210,"_211":212,"_213":26,"_214":-5,"_215":-5,"_216":156,"_53":217,"_218":-5,"_219":-5,"_220":-5,"_221":-5,"_222":223,"_224":223,"_225":226,"_227":226,"_228":226,"_229":223,"_230":223,"_231":232,"_233":234,"_235":28,"_47":48},"ahead",8,"behind",2,"diff",{"_64":65,"_66":67,"_68":69},"hasChanges",true,"sourceBranch",{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"targetBranch",{"_32":33,"_34":35,"_36":37,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"pull","id","961078ea-f528-11ef-aa68-569c3dd06744","createdAt",["D",1740674013689],"updatedAt",["D",1785420707976],"projectId","96102714-f528-11ef-aa68-569c3dd06744","version",91,"forkedBranchId","forkedBranchVersion","lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","deletedAt","isOwned",false,"privacy","public","userHandle","templates","orgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","react-hono-starter",9,"5b5d8c8d-7436-425f-806f-51e25dad0a25","434f087c-e5ab-4d38-892c-0b5b948f03f5",89,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","added",[160,161,162,163],"deleted",[148],"modified",[70,71,72],{"_73":132,"_75":133,"_77":134},{"_73":109,"_75":110,"_77":111},{"_73":74,"_75":76,"_77":78},"path","frontend/index.html","targetFile",{"_32":101,"_13":80,"_81":102,"_83":103,"_85":33,"_86":104,"_88":48,"_34":105,"_40":20,"_91":92,"_93":106,"_66":48,"_95":-5,"_96":-7,"_73":107,"_98":108},"sourceFile",{"_32":79,"_13":80,"_81":82,"_83":84,"_85":58,"_86":87,"_88":26,"_34":89,"_40":90,"_91":92,"_93":94,"_66":48,"_95":-5,"_96":-7,"_73":97,"_98":99},"7395a114-fd58-4e1d-a227-f1a0ee24623e","index.html","fileId","019edb77-becb-7343-8b05-543c8ec9393a","parentId","019edb77-becb-7343-8b05-5e8d471f0c07","branchId","branchVersion",7,"latest",["D",1781798648121],1,"fileType","file","content","\n\n \n \n \n NimbusVPS — Cloud Control Panel\n \n \n \n \n

\n \n \n \n\n","label","children",[100,80],"contentHash","7084a65d0f7c843ff5e89f530d0b64db4ecbd9962b47b75ce479f957f3a063d4","frontend","5c059140-3996-11f1-a04c-42b51c65c3df","5404b440-f52b-11ef-99f0-569c3dd06744","a59cbf44-f528-11ef-ae42-569c3dd06744",74,["D",1776345337676],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[100,80],"1ea8b3da4e18d579298229ba24af91b14b14ae02565f57c996f9acaa1f8333bc","frontend/components/App.tsx",{"_32":123,"_13":113,"_81":124,"_83":125,"_85":33,"_86":126,"_88":26,"_34":127,"_40":128,"_91":118,"_93":129,"_66":48,"_95":-5,"_96":-7,"_73":130,"_98":131},{"_32":112,"_13":113,"_81":114,"_83":115,"_85":58,"_86":116,"_88":26,"_34":117,"_40":90,"_91":118,"_93":119,"_66":48,"_95":-5,"_96":-7,"_73":120,"_98":121},"5ffc4fa7-e194-4ac8-a7c2-f2244a529f9b","App.tsx","019edb77-becb-7343-8b05-47593825009d","019edb77-becb-7343-8b05-4f39d17f5918",6,["D",1781798642142],"script","/** @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",[100,122,113],"98c23dadc59e3eaaa6fe51c8dd8820c36898104cbdd9ee0b56e89e64e661dacf","components","5d7e5e30-3996-11f1-bbdd-42b51c65c3df","6e585892-f52b-11ef-a8e1-569c3dd06744","69ed66bc-f52b-11ef-9dac-569c3dd06744",75,["D",1776345339930],5,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { Counter } from \"./Counter.tsx\";\n\nexport function App() {\n return (\n

React + Hono Starter

\n \n

\n View source\n

\n );\n}\n",[100,122,113],"de0a7e5fc76c6fd6135aff964af1a5835e04e2758b23f3d0c7d9fabffe514df7","README.md",{"_32":141,"_13":132,"_81":142,"_83":-5,"_85":33,"_86":60,"_88":48,"_34":143,"_40":144,"_91":92,"_93":145,"_66":48,"_95":-5,"_96":-7,"_73":146,"_98":147},{"_32":135,"_13":132,"_81":136,"_83":-5,"_85":58,"_86":57,"_88":26,"_34":137,"_40":90,"_91":92,"_93":138,"_66":48,"_95":-5,"_96":-7,"_73":139,"_98":140},"c269728f-1138-4af3-9376-41bddc3de5e2","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",[132],"3535e6003471ba272b0715aeb28185762a80877ca3e0a9299f1412050061b65f","b9c749c0-59e1-11f1-bb5f-ee650bb23af1","a50c3760-f53e-11ef-bd6d-569c3dd06744",["D",1779896144390],31,"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[132],"aaa4f5cc8e5bd01528335cdd2066e164bf95353ce2fe37c616b3e6406f49331e",{"_73":149,"_75":150,"_77":-7},"frontend/components/Counter.tsx",{"_32":151,"_13":152,"_81":153,"_83":125,"_85":33,"_86":154,"_88":26,"_34":155,"_40":156,"_91":118,"_93":157,"_66":48,"_95":-5,"_96":-7,"_73":158,"_98":159},"57a8cc52-3996-11f1-8db6-42b51c65c3df","Counter.tsx","57a8cd2e-3996-11f1-8db6-42b51c65c3df",73,["D",1776345330366],0,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[100,122,152],"10ce4fbd7e41af337e504c3877201698031249b437d941845f0f7cdc52a79e66",{"_73":192,"_75":-7,"_77":193},{"_73":182,"_75":-7,"_77":183},{"_73":173,"_75":-7,"_77":174},{"_73":164,"_75":-7,"_77":165},"frontend/components/mockData.ts",{"_32":166,"_13":167,"_81":168,"_83":115,"_85":58,"_86":22,"_88":26,"_34":169,"_40":156,"_91":118,"_93":170,"_66":48,"_95":-5,"_96":-7,"_73":171,"_98":172},"24e0e046-bf52-4b0d-9390-0c262ddbb804","mockData.ts","17a8ca2e-6b2f-11f1-857e-1607ee4eb77e",["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",[100,122,167],"dbf3dce66a322ccac0c90c1b3134e2e4948a623c4762df1d004b0d58b13f35ab","frontend/components/ServerDetail.tsx",{"_32":175,"_13":176,"_81":177,"_83":115,"_85":58,"_86":128,"_88":26,"_34":178,"_40":156,"_91":118,"_93":179,"_66":48,"_95":-5,"_96":-7,"_73":180,"_98":181},"b36a5969-4195-4168-bad9-da08516277e9","ServerDetail.tsx","4049a39a-6b2f-11f1-aeb6-1607ee4eb77e",["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",[100,122,176],"3e457e4b6df583a4fe2f3892f92e00e817f78d0304189657015125f7e27687cd","frontend/components/ServerCard.tsx",{"_32":184,"_13":185,"_81":186,"_83":115,"_85":58,"_86":187,"_88":26,"_34":188,"_40":156,"_91":118,"_93":189,"_66":48,"_95":-5,"_96":-7,"_73":190,"_98":191},"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",[100,122,185],"a74077b7ce2a74526fd2931310f00ffa3668b4b16fc40574718abe79ea9db91e","frontend/components/Charts.tsx",{"_32":194,"_13":195,"_81":196,"_83":115,"_85":58,"_86":197,"_88":26,"_34":198,"_40":156,"_91":118,"_93":199,"_66":48,"_95":-5,"_96":-7,"_73":200,"_98":201},"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",[100,122,195],"713353b34a5fe7a6f0c34ecce4cf9f94f16ba9b978545a0120002bf4dd8aec2e",["D",1781798518396],"legacyEnvVars","httpPrivacy","description","NimbusVPS — a modern simulated VPS control panel UI","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789683044&sig=31ebdb1297e8670deb15e37c2c75911aec8b560f2bd6a8b4ac3d13501cc1d1b7","userId","19b01f95-099e-404d-b2b2-883c96dcdbad","pinnedFileId","019edb77-becb-7343-8b05-67764de96c68","pinPreview","pinMigrated","screenshotVersion","likeCount","019edae9-5107-7134-a3e5-8269f7c43d4a","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_242":237},"org",{"_11":12,"_236":237,"_238":237,"_209":210,"_239":240,"_241":48},"branch","displayName","","avatar","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_32":59,"_13":14,"_34":345,"_46":-5,"_203":48,"_49":50,"_204":50,"_205":206,"_207":208,"_209":210,"_211":212,"_213":26,"_214":-5,"_215":-5,"_216":156,"_53":217,"_218":-5,"_219":-5,"_220":-5,"_221":-5,"_222":223,"_224":223,"_225":226,"_227":226,"_228":226,"_229":223,"_230":223,"_231":346,"_233":347,"_235":348,"_47":48},"tree",[295,305,306],"files",[295,296,297,298,299,300,301,302,303,304,305,306],"counts",{"_285":156,"_286":90,"_287":156,"_288":289,"_290":291},"contents",[270,271,272],"upstreamProject",{"_32":39,"_13":56,"_205":267,"_207":208,"_49":50,"_231":268},"upstreamBranch",{"_32":33,"_34":265,"_36":266,"_13":16,"_38":39,"_40":41,"_42":-5,"_43":-5,"_44":45,"_46":-5,"_47":48,"_49":50,"_51":52,"_53":54,"_55":56},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],["D",1785420707976],"Starter template with client-side React & Hono server",{"_11":52,"_242":269},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789683044&sig=577732384bc0e22159b510d80f35080159b42fb913909d67efdc44471f21100a",{"_32":281,"_13":100,"_81":84,"_83":-5,"_85":58,"_86":90,"_88":26,"_34":282,"_40":156,"_91":283,"_93":-5,"_66":48,"_95":-5,"_73":284},{"_32":135,"_13":132,"_81":136,"_83":-5,"_85":58,"_86":57,"_88":26,"_34":279,"_40":90,"_91":92,"_93":138,"_66":48,"_95":-5,"_73":280},{"_32":273,"_13":274,"_81":212,"_83":-5,"_85":58,"_86":90,"_88":26,"_34":275,"_40":156,"_91":276,"_93":277,"_66":48,"_95":-5,"_73":278},"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",[274],["D",1781798675788],[132],"37053d27-65f1-4229-af70-089c54a7fe31",["D",1781798518396],"directory",[100],"pulls","branches","forks","envVars",{"_292":156,"_294":156},"connections",{"_292":156,"_293":156},"count","unfilledCount","emptyCount",{"_32":281,"_13":100,"_81":84,"_83":-5,"_85":58,"_86":90,"_88":26,"_34":342,"_40":156,"_91":283,"_93":-5,"_66":48,"_95":-5,"_96":343,"_73":344},{"_32":338,"_13":122,"_81":115,"_83":84,"_85":58,"_86":90,"_88":26,"_34":339,"_40":156,"_91":283,"_93":-5,"_66":48,"_95":-5,"_96":340,"_73":341},{"_32":112,"_13":113,"_81":114,"_83":115,"_85":58,"_86":116,"_88":26,"_34":117,"_40":90,"_91":118,"_93":119,"_66":48,"_95":-5,"_96":336,"_73":337},{"_32":194,"_13":195,"_81":196,"_83":115,"_85":58,"_86":197,"_88":26,"_34":198,"_40":156,"_91":118,"_93":199,"_66":48,"_95":-5,"_96":334,"_73":335},{"_32":184,"_13":185,"_81":186,"_83":115,"_85":58,"_86":187,"_88":26,"_34":188,"_40":156,"_91":118,"_93":189,"_66":48,"_95":-5,"_96":332,"_73":333},{"_32":175,"_13":176,"_81":177,"_83":115,"_85":58,"_86":128,"_88":26,"_34":178,"_40":156,"_91":118,"_93":179,"_66":48,"_95":-5,"_96":330,"_73":331},{"_32":166,"_13":167,"_81":168,"_83":115,"_85":58,"_86":22,"_88":26,"_34":169,"_40":156,"_91":118,"_93":170,"_66":48,"_95":-5,"_96":328,"_73":329},{"_32":321,"_13":322,"_81":323,"_83":84,"_85":58,"_86":90,"_88":26,"_34":324,"_40":156,"_91":92,"_93":325,"_66":48,"_95":-5,"_96":326,"_73":327},{"_32":79,"_13":80,"_81":82,"_83":84,"_85":58,"_86":87,"_88":26,"_34":89,"_40":90,"_91":92,"_93":94,"_66":48,"_95":-5,"_96":319,"_73":320},{"_32":312,"_13":313,"_81":314,"_83":84,"_85":58,"_86":90,"_88":26,"_34":315,"_40":156,"_91":118,"_93":316,"_66":48,"_95":-5,"_96":317,"_73":318},{"_32":135,"_13":132,"_81":136,"_83":-5,"_85":58,"_86":57,"_88":26,"_34":137,"_40":90,"_91":92,"_93":138,"_66":48,"_95":-5,"_96":310,"_73":311},{"_32":273,"_13":274,"_81":212,"_83":-5,"_85":58,"_86":90,"_88":26,"_34":307,"_40":156,"_91":276,"_93":277,"_66":48,"_95":-5,"_96":308,"_73":309},["D",1781798518396],[],[274],[],[132],"cbdff61e-7e2a-4e38-8418-9de6d92920c0","index.tsx","019edb77-becb-7343-8b05-5a1a0eca85fd",["D",1781798518396],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[100,313],[],[100,80],"d6e5c4c2-33b8-4fc6-a126-a5a497764dd8","favicon.svg","019edb77-becb-7343-8b05-513a1fe5661b",["D",1781798518396],"\n",[],[100,322],[],[100,122,167],[],[100,122,176],[],[100,122,185],[],[100,122,195],[],[100,122,113],"359c56a7-0ace-44b0-9cb6-3e91c6d30ddb",["D",1781798518396],[297,298,299,300,301],[100,122],["D",1781798518396],[296,302,303,304],[100],["D",1781798518396],{"_11":12,"_242":237},{"_11":12,"_236":237,"_238":237,"_209":210,"_239":240,"_241":48},{"_40":57,"_13":16,"_32":58,"_38":59,"_42":33,"_43":60,"_61":50,"_62":39,"_63":54,"_55":14,"_51":12},"ctx",{"_231":-5,"_262":382,"_383":384,"_385":386,"_387":48,"_388":48,"_389":48,"_390":26,"_391":-5,"_392":-7,"_393":-7,"_394":156,"_395":48,"_396":48,"_397":-5,"_398":48,"_399":48,"_400":48,"_401":-5},"ENV",{"_353":354,"_355":356,"_357":16,"_358":359,"_360":361,"_362":363,"_364":365,"_366":367,"_368":369,"_370":371,"_372":373,"_374":375,"_376":377,"_378":379,"_380":381},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e8c4b7030cb7600e4eb0736b15f422c8b8bd130f","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"]

Compare

Mergeshiwofo/mainintotemplates/main

README.md+33-43

frontend/components/App.tsx+184-7

frontend/index.html+3-3

frontend/components/Charts.tsx+103-0

frontend/components/ServerCard.tsx+64-0

frontend/components/ServerDetail.tsx+213-0

frontend/components/mockData.ts+125-0

frontend/components/Counter.tsx+0-18