Metro Fabric Grid

DEMO

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.

Email demo@metrofabric.net
Password Demo1234!
User John Smith · Owner · Acme Corp
Local Setup Full guide →
# 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
Live URL https://grid-czb.pages.dev/
Password MetroGrid2024
GitHub github.com/Metro-Fabric/grid
19,150
Total lines of code
8
Files in project
0
Dependencies
1.3 MB
Total size
FileLinesSizeDescription
grid-dashboard.html13,5831.0 MBMain dashboard — all CSS, HTML, JS inline
grid-auth.html1,09070 KBLogin, signup, forgot password + SSO providers
ui-elements.html2,460113 KBWeb UI Kit — components, brand guidelines
CLAUDE.md50825 KBArchitecture journal & project status
DEV-GUIDE.md65230 KBDeveloper onboarding & Cursor tips
.cursorrules2309.2 KBCursor IDE auto-loaded rules
demo.html55345 KBThis demo preview page
index.html744.5 KBPassword gate — redirects to dashboard
Metro Fabric
GRID Control Plane
Color Palette
#0ea5e9 Signal Blue
#f97316 Metro Orange
#8b5cf6 AI Purple
#16a34a Success
#dc2626 Error
#d97706 Warning
Fonts: Geist (display/body) + Geist Mono (labels/code) · Radii: 8px / 12px · Theme: Light + Dark
Vanilla JS
No framework — zero dependencies
Single-File HTML
CSS + HTML + JS all inline
CSS Variables
Full light/dark theme support
D3.js v7
World map (CDN, lazy-loaded)
Geist Font
Display + Mono (Google Fonts)
Feather Icons
SVG icons inline, no icon library
Python 3
Dev server with no-cache headers
localStorage
Theme persistence, walkthrough state
contenteditable
Rich text template editor

Critical Rules

  • Read CLAUDE.md first — architecture, build status, data structures, roadmap
  • CSS variables only — never hardcode colors, always var(--token)
  • Dark mode mandatory — every new style must work in both themes via [data-theme="dark"]
  • Validate JS after every change — one syntax error breaks the whole app
  • Use showToast() not alert() — auto-dismiss, stacks top-right
  • Every tab switcher must call syncSidebarHighlight() — sidebar breaks without it
  • Deploy: git push → Cloudflare auto-deploys in ~30s

Common Gotchas

  • Never write </script> in JS strings — browser closes the tag. Use <\/script>
  • Modal inputs need onkeydown="event.stopPropagation()" — Cmd+K / Escape intercept keystrokes
  • Card overflow.card has overflow:hidden. Add overflow:visible for dropdowns/tooltips
  • Dirty state checkboxes — bulk-select checkboxes must be excluded via .inv-chk
  • Template literal safety — close all backtick strings before starting new code blocks; nested literals cause syntax errors
  • Drawers geometry — all drawers must use top:0; height:100vh; z-index:200
  • Sortable log tables — all audit/log tables need sortable columns with toggle direction + blue active indicator
  1. Add sidebar nav item — simple nav-item or nav-group with sub-items
  2. Add .view container in .content: <div class="view" id="view-mysection">
  3. Add to sectionMeta object: mysection: {label:'My Section', cta:'Add Item'}
  4. Add to ctaActions object: mysection: () => myAction()
  5. Add a render*() function that reads data and builds HTML
  6. Add MutationObserver watching .active class for lazy initialization
  7. Wire sub-tab rendering in navSub if section has sub-tabs
  8. Call syncSidebarHighlight() from every tab switcher inside the section
  9. Update CLAUDE.md build status table
Why Hybrid Pricing?

Pure 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.

LayerComponentPricingRationale
InfrastructureIP Allocation$1.50/IP/moVolume discounts at 5K, 10K, 25K+ IPs
ComputeBundledReduces friction, included in IP cost
BandwidthPer Tbps/moBaseline capacity reservation
TrafficData Transfer (std)$5/GBUsage-based, aligns with customer value
Data Transfer (geo)$8/GBPremium for geo-targeted routing
Session Hours$0.85/1K hrsCaptures rotation/persistence value
PlatformStarter$499/mo5K API/day, 2 pools, 1 location, manual scaling only
Growth$2,499/mo50K API/day, 10 pools, 5 locations, SSO, auto-scaling (5 rules)
EnterpriseCustomUnlimited, dedicated TAM, SLA, Net-30, unlimited scaling rules + custom metrics

⌨️ Command Palette (⌘K)

Press ⌘K anywhere to open the AI command palette. Search, navigate, or ask AI questions. Arrow keys + Enter to select.

💬 AI Assistant

Click the purple sparkle button in the header. Ask about networks, pools, bandwidth — gets contextual answers with follow-ups.

🔍 Smart Search

Click the search box — AI suggestions appear immediately. Type to filter across locations, networks, and pages.

🚨 Alert Routing

Alerts → Alert Routing: 6 channels (Portal/Email/SMS/WhatsApp/Slack/PagerDuty), escalation workflows, message templates with AI generation.

📋 Persistent Tabs

Edit a field in Settings, then navigate away. The unsaved tab appears below the header. Click X to get a styled discard confirmation.

📅 On-Duty Schedule

Alerts → Schedule: Week/Month/Year views with rotation. Add/remove people, reorder. Switch between weekly and daily rotation to see the difference.

🌍 IP Geolocation

7 provider databases (IPXO, MaxMind, IP2Location, IPInfo, DB-IP, ipapi, ipgeolocation) with match% bars and drift counts per subnet.

💳 Billing

6 sub-tabs reflecting the hybrid pricing model. Invoices with bulk pay, card brand logos, crypto/PayPal/AliPay, plan comparison, credits.

🎯 Setup Wizard + Walkthrough

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.

🌐 Language & Currency

Click user profile in sidebar footer → Language & Currency. 6 languages (EN/ES/FR/DE/ZH/JA) + 3 currencies (USD/EUR/GBP).

🔒 Security & SSO

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.

🐳 Container Manager

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.

🛡️ Abuse Reports

Alerts → Abuse Reports: Case management with severity/status, bidirectional message threads between staff and customer, status updates.

⚙️ Auto-Scaling

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).

🖥️ Compute & IPMI

21 bare metal nodes with CPU/RAM sparklines, IPMI console proxy, power actions (reboot/shutdown/rescue), reinstall OS wizard, per-node activity log.

◀️ Collapsible Sidebar

Toggle button at sidebar bottom collapses to 56px icon-only mode. Auto-collapses below 1200px viewport. Persists to localStorage. Controllable in Settings → Preferences.

📦 BYOIP (Bring Your Own IP)

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.

🔔 Toast Notifications

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.

📋 Assign IPs Redesign

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.

SectionTabsKey Features
OverviewAI Insights (live), 12 stat cards (infra + traffic), SVG bandwidth chart (14d), PoP health grid, workloads table, alerts feed
Alerts & EventsActive 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
LocationsMap View
List View
D3.js world map (zoom/pan, 80 PoPs), continent-grouped list, detail drawer, region/status filters
Network14 networks, sparklines, detail drawer with traffic card, 5-step provision wizard
BGP Management12 BGP sessions, filters, detail drawer (peer config, routes, session params)
IP GeolocationCard grid, 7 providers (IPXO, MaxMind, IP2Location, IPInfo, DB-IP, ipapi, ipgeolocation), match% bars with drift counts
ComputeNodes
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
SubnetsSubnets
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 Pools5 pools, create pool wizard, rotation config, detail drawer
Sessions20 sessions, pool/status/target filters, per-row actions (Rotate IP / Terminate), bulk selection bar with select-all checkbox, bulk rotate/terminate
WorkloadsOverview
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 Rules11 rules, target patterns, pool assignment, geo-matching, priority, hit counts, per-row Edit/Delete action buttons
Success AnalyticsVolume chart, success/block rate chart, by-pool & by-target breakdowns, heatmap
Targets12 target domains, pool assignment, success/block rates, rate limits, per-row Edit/Delete action buttons
Access & API4 API keys, 3 webhooks, usage stats with progress bar
Marketplace12 integrations (GitHub, n8n, Cloudflare, AWS, GCP, Terraform, Grafana, Datadog, Slack, Docker Hub, PagerDuty, Zapier)
SettingsProfile
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
BillingOverview
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
Metro Fabric GRID
grid.metrofabric.net · Built with Claude Code · April 2026