The control plane for Metro Fabric — ISP-classified IPs, BGP routing, bare metal compute, proxy sessions, and AI-powered traffic management. Built as a fully interactive single-file HTML prototype.
# Clone the repository git clone https://github.com/Metro-Fabric/grid.git cd grid # Start local dev server (no-cache headers) python3 -c " from http.server import HTTPServer, SimpleHTTPRequestHandler class H(SimpleHTTPRequestHandler): def end_headers(self): self.send_header('Cache-Control','no-cache,no-store,must-revalidate') super().end_headers() HTTPServer(('',8765),H).serve_forever() " # Open in browser open http://localhost:8765/grid-dashboard.html open http://localhost:8765/grid-auth.html
| File | Lines | Size | Description |
|---|---|---|---|
| grid-dashboard.html | 13,583 | 1.0 MB | Main dashboard — all CSS, HTML, JS inline |
| grid-auth.html | 1,090 | 70 KB | Login, signup, forgot password + SSO providers |
| ui-elements.html | 2,460 | 113 KB | Web UI Kit — components, brand guidelines |
| CLAUDE.md | 508 | 25 KB | Architecture journal & project status |
| DEV-GUIDE.md | 652 | 30 KB | Developer onboarding & Cursor tips |
| .cursorrules | 230 | 9.2 KB | Cursor IDE auto-loaded rules |
| demo.html | 553 | 45 KB | This demo preview page |
| index.html | 74 | 4.5 KB | Password gate — redirects to dashboard |
var(--token)[data-theme="dark"]showToast() not alert() — auto-dismiss, stacks top-rightsyncSidebarHighlight() — sidebar breaks without itgit push → Cloudflare auto-deploys in ~30s</script> in JS strings — browser closes the tag. Use <\/script>onkeydown="event.stopPropagation()" — Cmd+K / Escape intercept keystrokes.card has overflow:hidden. Add overflow:visible for dropdowns/tooltips.inv-chktop:0; height:100vh; z-index:200nav-item or nav-group with sub-items.view container in .content: <div class="view" id="view-mysection">sectionMeta object: mysection: {label:'My Section', cta:'Add Item'}ctaActions object: mysection: () => myAction()render*() function that reads data and builds HTMLMutationObserver watching .active class for lazy initializationnavSub if section has sub-tabssyncSidebarHighlight() from every tab switcher inside the sectionPure per-IP pricing is a commodity play. Metro Fabric isn't just leasing IPs — we offer co-located compute + managed traffic routing + AI-powered optimization. Charging only per IP undervalues the traffic layer, ignores compute costs, and commoditizes us against pure IP providers.
Competitors like Bright Data and Oxylabs all use traffic-based billing. Nobody successful charges per-IP only.
Our approach: Three billing layers that map directly to our product architecture — capturing value at every level while keeping pricing transparent.
| Layer | Component | Pricing | Rationale |
|---|---|---|---|
| Infrastructure | IP Allocation | $1.50/IP/mo | Volume discounts at 5K, 10K, 25K+ IPs |
| Compute | Bundled | Reduces friction, included in IP cost | |
| Bandwidth | Per Tbps/mo | Baseline capacity reservation | |
| Traffic | Data Transfer (std) | $5/GB | Usage-based, aligns with customer value |
| Data Transfer (geo) | $8/GB | Premium for geo-targeted routing | |
| Session Hours | $0.85/1K hrs | Captures rotation/persistence value | |
| Platform | Starter | $499/mo | 5K API/day, 2 pools, 1 location, manual scaling only |
| Growth | $2,499/mo | 50K API/day, 10 pools, 5 locations, SSO, auto-scaling (5 rules) | |
| Enterprise | Custom | Unlimited, dedicated TAM, SLA, Net-30, unlimited scaling rules + custom metrics |
Press ⌘K anywhere to open the AI command palette. Search, navigate, or ask AI questions. Arrow keys + Enter to select.
Click the purple sparkle button in the header. Ask about networks, pools, bandwidth — gets contextual answers with follow-ups.
Click the search box — AI suggestions appear immediately. Type to filter across locations, networks, and pages.
Alerts → Alert Routing: 6 channels (Portal/Email/SMS/WhatsApp/Slack/PagerDuty), escalation workflows, message templates with AI generation.
Edit a field in Settings, then navigate away. The unsaved tab appears below the header. Click X to get a styled discard confirmation.
Alerts → Schedule: Week/Month/Year views with rotation. Add/remove people, reorder. Switch between weekly and daily rotation to see the difference.
7 provider databases (IPXO, MaxMind, IP2Location, IPInfo, DB-IP, ipapi, ipgeolocation) with match% bars and drift counts per subnet.
6 sub-tabs reflecting the hybrid pricing model. Invoices with bulk pay, card brand logos, crypto/PayPal/AliPay, plan comparison, credits.
3-step setup wizard launches first on load: Country/Timezone → 2FA with QR code + 6-digit input → Newsletter subscription. Then a 9-step guided tour with spotlight effect. Both restartable.
Click user profile in sidebar footer → Language & Currency. 6 languages (EN/ES/FR/DE/ZH/JA) + 3 currencies (USD/EUR/GBP).
Settings → Security: Full 2FA setup (QR + recovery codes + disable), change password with strength meter, session management, SSO (GitHub, Google, Microsoft, GitLab, AWS). Same providers on login/signup pages.
Workloads is now a full Synology-style Container Manager: Overview with CPU/RAM charts, Stacks with YAML editor, Containers with terminal + logs, Images, Registry browser, audit Logs, and Auto-Scaling rules with history.
Alerts → Abuse Reports: Case management with severity/status, bidirectional message threads between staff and customer, status updates.
Workloads → Scaling: 5 rules with metric/threshold/duration/action/cooldown. Enable/disable toggle, create/edit wizard, scaling history with success/failed status. Plan-gated (Starter=manual, Growth=5 rules, Enterprise=unlimited).
21 bare metal nodes with CPU/RAM sparklines, IPMI console proxy, power actions (reboot/shutdown/rescue), reinstall OS wizard, per-node activity log.
Toggle button at sidebar bottom collapses to 56px icon-only mode. Auto-collapses below 1200px viewport. Persists to localStorage. Controllable in Settings → Preferences.
Subnets → BYOIP tab: Import your own IP prefixes via IPXO marketplace or third-party transfer. 4-step wizard with source selection, prefix entry (multi-prefix), RIR/network assignment, and ROA verification. Manage/announce controls per prefix.
Global showToast() system with 4 types: success, error, warning, info. Auto-dismisses after 4s with fade animation. Used across sessions (rotate/terminate), BYOIP (ROA verify), assign IPs, abuse file uploads, and more.
Subnets → Assign IPs: Multi-location memory with dropdown, CIDR size selector (/20–/24), paginated subnet list (10 per page), select-all per page, summary of selected count. Remembers location across re-opens.
| Section | Tabs | Key Features |
|---|---|---|
| Overview | — | AI Insights (live), 12 stat cards (infra + traffic), SVG bandwidth chart (14d), PoP health grid, workloads table, alerts feed |
| Alerts & Events | Active Alerts Alert Routing Contacts Templates Schedule System Logs Abuse Reports | Severity filters, 8 routing rules (incl. auto-scaling), escalation policies, on-call contacts, message templates + AI, rotation schedule, unified system logs from Workloads + Compute + Scaling with source tabs + sortable columns, abuse case management with bidirectional message threads |
| Locations | Map View List View | D3.js world map (zoom/pan, 80 PoPs), continent-grouped list, detail drawer, region/status filters |
| Network | — | 14 networks, sparklines, detail drawer with traffic card, 5-step provision wizard |
| BGP Management | — | 12 BGP sessions, filters, detail drawer (peer config, routes, session params) |
| IP Geolocation | — | Card grid, 7 providers (IPXO, MaxMind, IP2Location, IPInfo, DB-IP, ipapi, ipgeolocation), match% bars with drift counts |
| Compute | Nodes Logs | 21 bare metal nodes, CPU/mem/storage specs, load bars, inline Actions column (Console / Reboot / Manage) per row, detail drawer with IPMI console proxy, power actions (reboot/shutdown/rescue), reinstall OS wizard, per-node activity log, sortable compute logs with severity filters |
| Subnets | Subnets BYOIP | 14 subnets with location/network/geo filters, Assign IPs modal with multi-location memory + pagination. BYOIP tab: bring your own IPs via IPXO or third-party, ROA verification, multi-prefix support, 4-step wizard with field validation, manage/announce controls |
| IP Pools | — | 5 pools, create pool wizard, rotation config, detail drawer |
| Sessions | — | 20 sessions, pool/status/target filters, per-row actions (Rotate IP / Terminate), bulk selection bar with select-all checkbox, bulk rotate/terminate |
| Workloads | Overview Stacks Containers Images Registry Logs Scaling | Container Manager: SVG CPU/RAM charts, YAML editor, sortable containers with terminal + logs, registry browser, audit log, auto-scaling rules (5 rules with metric/threshold/duration/action/cooldown, history log, create/edit wizard) |
| Traffic Rules | — | 11 rules, target patterns, pool assignment, geo-matching, priority, hit counts, per-row Edit/Delete action buttons |
| Success Analytics | — | Volume chart, success/block rate chart, by-pool & by-target breakdowns, heatmap |
| Targets | — | 12 target domains, pool assignment, success/block rates, rate limits, per-row Edit/Delete action buttons |
| Access & API | — | 4 API keys, 3 webhooks, usage stats with progress bar |
| Marketplace | — | 12 integrations (GitHub, n8n, Cloudflare, AWS, GCP, Terraform, Grafana, Datadog, Slack, Docker Hub, PagerDuty, Zapier) |
| Settings | Profile Company Team Security Notifications Preferences | Country/timezone required, 2FA with QR + recovery codes + disable, change password with strength meter, session management, SSO (GitHub/GitLab/Microsoft/AWS/Google), newsletter subscriptions, theme/language/currency/date format/time format, compact tables, sign out, delete account with infra transfer logic |
| Billing | Overview Usage Invoices Payment Plans Add Funds | Hybrid pricing model, cost breakdown bars, plan usage gauges, bulk invoice pay with confirmation, card brand logos (Visa/MC/Amex), PayPal/Crypto/AliPay/Bank, 3-tier plan comparison, credits with auto-reload, credit notes, transaction history with View/PDF |