Neumorphic dashboard for tracking LLM coding plan quotas — browser-scrape first, API fallback.

Developed with OpenClaw 🐾

📊 Demo: GitHub Pages (static sample data)

# Clone
git clone https://github.com/joe2643/llm-quota-dashboard.git
cd llm-quota-dashboard

# Install deps
pip install flask websocket-client

# Option A: Start Chrome with CDP manually
# chrome --remote-debugging-port=18800
#
# Option B: If you have OpenClaw, the scraper auto-starts the browser:
# openclaw browser start

# Start dashboard (auto-refreshes every 30min)
python3 web/server.py        # http://localhost:8502

The server automatically:

• Scrapes all providers in parallel every 30 minutes
• Starts headless Chrome if no CDP browser is detected
• Detects login issues per provider
• Serves a live-updating neumorphic UI

The scraper reads data from provider dashboards using your existing Chrome sessions. You must be logged in to each provider in Chrome before the scraper can extract data. If a provider isn't logged in, the dashboard will show a 🔑 "Need login" card.

For first-time setup:

Option A: Use OpenClaw browser (recommended)

1. Install OpenClaw
2. Run openclaw browser start — this launches a persistent Chrome profile at ~/.openclaw/browser/
3. Log in to each provider dashboard in that browser (sessions are saved permanently)
4. The scraper auto-detects this browser on port 18800 — no extra flags needed

Option B: Use your own Chrome

1. Open Chrome with --remote-debugging-port=18800
2. Manually log in to each provider's dashboard
3. Run the scraper — it will reuse your sessions

💡 With OpenClaw: Tell your agent to open each provider's login page in the browser, then log in interactively. The agent can guide you through each provider step by step.

You may need to enable host browser control in your OpenClaw config:

{
  "agents": {
    "defaults": {
      "sandbox": {
        "browser": {
          "allowHostControl": true
        }
      }
    }
  }
}

The scrapers parse page text using regex patterns. If your provider dashboard is in a different language (e.g., Chinese vs English), the regex may not match. Current scrapers support:

If your dashboard renders in a different language, you'll need to update the regex patterns in the scraper function. Ask your OpenClaw agent — it can inspect the page text and adapt the patterns.

• Regular Chrome (recommended): Uses your profile with saved logins. Sessions persist across restarts. All providers work.
• Headless Chrome (auto-fallback): Copies your Chrome profile cookies for session reuse. However, many providers don't work in headless mode due to stricter auth:

Recommendation: Run Chrome with --remote-debugging-port=18800 for full provider support. Headless is a fallback for when no visible Chrome is available.

• OpenClaw browser fallback: If no Chrome is running on port 18800, the scraper will automatically try openclaw browser start to launch a CDP-enabled browser. This works if you have OpenClaw installed. Login sessions are stored in OpenClaw's browser profile (~/.openclaw/browser/), so you only need to log in once.

• Multiple Chrome instances: Only one Chrome can bind to port 18800. Close other CDP-enabled instances before starting.

The scraper navigates provider dashboards like a normal user — no API abuse. However:

• Don't set refresh intervals too low (< 10 min) to avoid triggering anti-bot detection
• Some providers (e.g., Anthropic) may show CAPTCHAs after repeated automated visits
• The 30-minute default interval is conservative and recommended

Chrome (your profile, logged in) → CDP WebSocket
  ↓
Parallel scraper (one tab per provider, background)
  ↓
data/quota_data.json
  ↓
Flask server → Neumorphic UI (auto-polls every 30s)

index.html                            # GitHub Pages entry (static demo)
web/
  index.html                          # Neumorphic frontend (vanilla HTML/CSS/JS)
  server.py                           # Flask backend + background scraper
scripts/
  scrape_dashboards_parallel.py       # Parallel CDP scraper (primary)
  scrape_dashboards.py                # Sequential CDP scraper (fallback)
  check_quota.py                      # Legacy Playwright scraper
data/
  providers.json                      # Provider configs (editable)
  quota_data.json                     # Latest quota data (auto-generated)

The easiest way to add and configure providers is through OpenClaw. Just tell your agent:

"Add DeepSeek to my LLM quota dashboard"

OpenClaw will:

1. Add the provider config to data/providers.json
2. Write the scraper function in scrape_dashboards_parallel.py
3. Test it and fix any issues
4. Commit the changes

This is how the dashboard was built — each provider scraper was developed conversationally through OpenClaw.

"Add DeepSeek to my LLM quota dashboard"

"Set up the dashboard on port 8502 with Cloudflare Tunnel"

"My Groq dashboard shows rate limits at platform.groq.com/usage — 
 add it to the scraper"

"The Kimi scraper is reading stale data, fix the wait logic"

"Add a new field 'daily_used_pct' to the Anthropic scraper — 
 it shows on the usage page as 'Daily usage: XX%'"

"Run a manual refresh and send me the results on WhatsApp"

"Schedule quota checks every 6 hours and alert me if any provider 
 drops below 20%"

Step 1: Add to data/providers.json:

{
  "my_provider": {
    "name": "My Provider",
    "dashboard_url": "https://example.com/dashboard",
    "color": "🔹",
    "enabled": true,
    "notes": "Any notes"
  }
}

Step 2: Add a scraper function in scripts/scrape_dashboards_parallel.py:

def scrape_my_provider(tab: CDPTab) -> dict:
    tab.navigate("https://example.com/dashboard")
    # Wait for page data to load
    found, text = tab.wait_for_text(["some keyword"], timeout=15)

    data = {"provider": "my_provider"}
    # Parse with regex...
    m = re.search(r'(\d+)%\s*used', text)
    if m:
        data["current_used_pct"] = int(m.group(1))

    return {"status": "success", "method": "cdp_parallel",
            "data": data, "last_checked": now_iso()}

Step 3: Register in PROVIDERS dict:

PROVIDERS = {
    ...
    "my_provider": {"name": "My Provider", "color": "🔹", "fn": scrape_my_provider},
}

The dashboard frontend automatically renders any *_used_pct field as a progress bar.

1. Connects to Chrome via CDP WebSocket (port 18800)
2. Opens one background tab per provider (parallel, won't steal focus)
3. Navigates to dashboard, waits for data keywords
4. Extracts document.body.innerText, parses with regex
5. Detects login issues (redirect to login page → need_login status)
6. Closes tabs, saves to quota_data.json

Login: The scraper uses your existing Chrome sessions. Just be logged in to your providers in the Chrome instance running with --remote-debugging-port.

# All providers (parallel)
python3 scripts/scrape_dashboards_parallel.py

# Single provider with debug output
python3 scripts/scrape_dashboards_parallel.py -p kimi --debug

# Sequential fallback
python3 scripts/scrape_dashboards.py

• Design: Neumorphism (Soft UI) — #E0E5EC base, dual shadows
• Stack: Flask + vanilla HTML/CSS/JS (no build step, no npm)
• Auto-refresh: Frontend polls every 30s, pauses when tab hidden
• Per-card timestamps: Shows when each provider was last checked
• Login detection: Shows 🔑 card when provider needs re-login

• With Flask: Live data from /api/data, refresh button triggers scraper
• Static (GitHub Pages): Falls back to data/quota_data.json

python3 web/server.py    # http://localhost:8502

# ~/.cloudflared/config.yml
- service: http://localhost:8502
  hostname: dashboard.yourdomain.com

Enable GitHub Pages in repo settings (source: master, root /).

MIT