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 | 15,915 | ~1.21 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 | ~663 | ~40 KB | Architecture journal & project status |
| DEV-GUIDE.md | ~825 | ~40 KB | Developer onboarding & Cursor tips |
| .cursorrules | ~286 | ~13 KB | Cursor IDE auto-loaded rules |
| demo.html | ~720 | ~62 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.
3-view toggle (Rows / Heatmap / Cards), 12 provider databases (IPXO, MaxMind, IP2Location, IPInfo, DB-IP, ipapi, ipgeolocation, Google, Akamai, DataDome, Netacea, Microsoft), IPv4 + IPv6 subnets. Rows view: sortable, expandable rows with per-provider bars and a drift report code block (copy to clipboard). Heatmap: sticky columns, custom scrollbar starting after sticky zone, gradient fades, drag-to-scroll. v6 badges in all views. Geo drift alerts appear in Active Alerts.
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, IPXO). 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 IPv4/IPv6 prefixes via IPXO or third-party. 4-step wizard. IPXO Step 2: account switcher (3 accounts), version/mask/RIR/location filters, pagination for both "In your IPXO account" and "Available to provision" (5/page each), IPv4/IPv6 grouped selection summary with click-to-remove chips. Multi-prefix, ROA verification, manage/announce controls.
3 sub-sections via sidebar + tab bar: Overview (stat cards + request log), API Keys (create/revoke), Webhooks (add/manage endpoints). Pools-style column headers, CTA and page title update per sub-section.
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: Select location first — IP version and CIDR controls are disabled until a location is chosen. Version toggle (IPv4=blue / IPv6=purple), CIDR selector (IPv4: /30–/16; IPv6: /64 / /56 / /48 / /32), paginated subnet list. Selections persist across location/version/CIDR changes. IPv4/IPv6 grouped selection summary (always visible when items selected) with click-to-remove chips showing subnet + location.
All multi-step wizard modals (Network, Workloads, Pool, BYOIP, Assign IPs) now ask "Exit wizard? Your progress will be lost." when the X button or backdrop is clicked. Only fires if the user has meaningful progress — empty wizards still close instantly. Cancel buttons close directly.
| 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 + Download .csv dropdown (Last 30 days / Last month / Last 3 months / Last 6 months / Last 12 months / All time), abuse case management with bidirectional message threads, merged bulk action bar below column header (header always visible, select-all checkbox toggles select-all/deselect-all and hides bar when cleared, contextual Acknowledge / Mark resolved actions) |
| 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 | — | 3-view toggle (Rows / Heatmap / Cards, default Rows), 12 providers (IPXO, MaxMind, IP2Location, IPInfo, DB-IP, ipapi, ipgeolocation, Google, Akamai, DataDome, Netacea, Microsoft), IPv4 + IPv6 subnets (8 IPv6 entries). Rows: sortable + paginated, expandable rows with per-provider progress bars + drift report code block (copy button). Heatmap: sticky Subnet/Location/IPs/Status columns, custom scrollbar starting after sticky zone, gradient fades, drag-to-scroll, v6 badges. Geo drift alerts auto-populate Active Alerts. |
| Compute | Nodes Logs | 35 bare metal nodes, sortable + pagination, checkbox bulk select, header select-all checkbox toggles select-all/deselect-all (also hides bulk bar when all deselected), no separate Clear button, bulk Reboot/Shutdown with account password confirmation modal, inline Actions column (Console / Reboot / Manage) per row, clicking a row no longer opens drawer (Manage button only), detail drawer with IPMI console proxy, power actions (reboot/shutdown/rescue), reinstall OS wizard, per-node activity log, 60-entry paginated compute logs with severity filters |
| Subnets | Subnets BYOIP | 100 subnets (54 IPv4 + 46 IPv6) across 20 locations. Filters: location / network / geo status / IP version. Pagination with ellipsis. IPv6 entries show inline v6 badge. Assign IPs modal: location-first UX (IP version & CIDR controls disabled until location chosen), IPv4/IPv6 version toggle, CIDR selector (IPv4 /30–/16; IPv6 /64–/32), paginated browser, cross-version/location selection memory, IPv4/IPv6 grouped selection summary with click-to-remove chips. BYOIP tab: 4-step wizard, IPXO account switcher (3 accounts), pagination 5/page for both prefix sections, IPv4/IPv6 grouped selection summary, ROA verification, 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 (merged into table, replaces column header when active), select-all checkbox, bulk Rotate IPs / Terminate |
| Workloads | Overview Stacks Containers Images Registry Logs Scaling | Container Manager: SVG CPU/RAM charts, YAML editor, 25 stacks with pagination + checkbox bulk select (header-always-visible pattern, bulk bar as tbody row, no Clear button) + bulk Start/Stop with account password confirmation, Create Stack CTA in header (switches to Deploy Image on other tabs), 40 containers with sortable + pagination + terminal + logs + header-always-visible bulk bar as tbody row (Start/Stop/Restart/Delete, no Clear button), 30 images with pagination + header-always-visible bulk bar as tbody row (Pull/Delete, no Clear button), registry browser (search only, no stray action buttons), 60-entry paginated audit log with Download .csv dropdown (Last 30 days / Last month / Last 3 months / Last 6 months / Last 12 months / All time) replacing former Export button, auto-scaling rules (5 rules, 25-entry history with pagination) |
| 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 | Overview API Keys Webhooks | Overview: 4 stat cards (requests, bandwidth, sessions peak, webhook deliveries) + API usage bar + 12-entry request log. API Keys: Pools-style table with Edit/Revoke per row. Webhooks: aligned table (URL, events, last delivery) with Edit/Delete per row. CTA and page title update per sub-section |
| 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/IPXO/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 header-always-visible pattern (card-header and thead always visible, bulk bar as tbody row, .inv-row.selected highlight, no Clear button, count shows contextual due/paid breakdown), 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 |