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
FileLinesSizeDescription
grid-dashboard.html15,915~1.21 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.md~663~40 KBArchitecture journal & project status
DEV-GUIDE.md~825~40 KBDeveloper onboarding & Cursor tips
.cursorrules~286~13 KBCursor IDE auto-loaded rules
demo.html~720~62 KBThis demo preview page
index.html744.5 KBPassword gate — redirects to dashboard
Apr 5–9, 2026  ·  142 git commits  ·  Claude.ai Desktop (Apr 5–6) + Claude Code (Apr 7–9)
142
Git commits
5
Days of work
~22,000
Total lines of code
~1.53 MB
Total size
Apr 5
Project started
Lines of code — each block = 50 lines 319 blocks  ·  15,915 lines  ·  grid-dashboard.html
Apr 5 — 110 blocks — ~5,500 lines — pre-git  ·  Claude.ai Desktop
Apr 6 — 140 blocks — ~7,000 lines — pre-git  ·  Claude.ai Desktop
Apr 7 — 25 blocks — ~1,250 lines — Claude Code  ·  git initialized
Apr 8 — 32 blocks — ~1,575 lines — Claude Code  ·  polish & features
Apr 9 — 12 blocks — ~600 lines — Claude Code  ·  BYOIP account switcher, IPXO SSO, Assign IPs UX, filter fixes
Lines written per day
~5.5K
~7K
~1.3K
~1.6K
~600
Apr 5
Apr 6
Apr 7
Apr 8
Apr 9
Apr 5–6: pre-git estimates  ·  Apr 7–9: net lines from git log
Day breakdown
Apr 5 — Day 1 — Claude.ai Desktop
pre-git · ~5,500 lines
auth pages + shell + Overview, Alerts, Locations, Network
Apr 6 — Day 2 — Claude.ai Desktop
pre-git · ~7,000 lines
IP Pools, Sessions, Workloads, BGP, Compute, Billing, Settings…
Apr 7 — Day 3 — Claude Code · Git initialized
52 commits · +14,149 added · −420 removed
initial push (includes Apr 5–6 work) + Claude Code refinements
Apr 8 — Day 4 — Claude Code · Polish & Features
62 commits · +3,526 added · −1,279 removed
Compute, Workloads, BGP, Geolocation, Billing, Settings, Alert Routing, platform polish
Apr 9 — Day 5 — Claude Code · Geo Overhaul & UX Polish
28 commits · +956 added · −321 removed
3-view geo (Rows/Heatmap/Cards), 12 providers, IPv4+IPv6; BYOIP account switcher + pagination, IPXO SSO, Assign IPs location-first UX, IPv4/IPv6 selection summaries, filter fixes
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 + paginated tables — all 22 data tables have sortable column headers + pagination (10/page). mkPagBar() and mkSortHdr() helpers are global. Page resets to 1 on filter/search change.
  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

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.

💳 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, IPXO). 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 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.

🔑 Access & API

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.

🔔 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 — IPv4 & IPv6

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.

⚠️ Wizard Exit Confirmation

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.

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 + 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)
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 Geolocation3-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.
ComputeNodes
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
SubnetsSubnets
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 Pools5 pools, create pool wizard, rotation config, detail drawer
Sessions20 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
WorkloadsOverview
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 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 & APIOverview
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
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/IPXO/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 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
Metro Fabric GRID
grid.metrofabric.net · Built with Claude Code · April 2026