Sync all files

2026-02-12 23:56:39 -06:00
parent d94eb6c7c4
commit 977d22995d
8 changed files with 645 additions and 51 deletions
--- a/README.md
+++ b/README.md
@@ -1,56 +1,63 @@
-[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![GitHub stars](https://img.shields.io/github/stars/blackboxprogramming/blackroad-chrome-extension.svg?style=social&label=Star)](https://github.com/blackboxprogramming/blackroad-chrome-extension)
-[![GitHub forks](https://img.shields.io/github/forks/blackboxprogramming/blackroad-chrome-extension.svg?style=social&label=Fork)](https://github.com/blackboxprogramming/blackroad-chrome-extension/fork)
+# BlackRoad Command Center - Chrome Extension

-
-# BlackRoad Chrome Extension 🌐
-
-Chrome DevTools extension for BlackRoad with built-in API tester!
+> Quick access to your entire BlackRoad empire from any browser tab!

 ## Features

- **DevTools Panel** - Integrated developer tools
- **API Tester** - Test endpoints directly
- **Quick Deploy** - Deploy from browser
- **Live Metrics** - Real-time analytics
- **Dark Mode** - Matches Chrome theme
+- **30K Agent Dashboard** - Direct link to the agent visualization
+- **GitHub Quick Access** - All 15 organizations at your fingertips
+- **Cloudflare Integration** - Pages, Workers, D1 quick links
+- **Live Service Status** - See what's running at a glance
+- **Search** - Find any service, repo, or org instantly
+- **Keyboard Shortcuts**:
+  - `Cmd/Ctrl + G` - Open GitHub
+  - `Cmd/Ctrl + C` - Open Cloudflare
+  - `Cmd/Ctrl + A` - Open 30K Agents

 ## Installation

-### From Chrome Web Store
-[Link will be added]
+### Method 1: Load Unpacked (Developer Mode)

-### Manual Installation
-1. Clone this repo
-2. Open Chrome → Extensions → Developer Mode
-3. Click "Load unpacked"
-4. Select this directory
+1. Open Chrome and go to `chrome://extensions/`
+2. Enable **Developer mode** (toggle in top right)
+3. Click **Load unpacked**
+4. Select the `blackroad-chrome-extension` folder
+5. The extension icon will appear in your toolbar!

-## Usage
+### Method 2: Pack Extension

-1. Open Chrome DevTools (F12)
-2. Click "BlackRoad" tab
-3. Enter your API key
-4. Start testing!
+1. Go to `chrome://extensions/`
+2. Enable Developer mode
+3. Click **Pack extension**
+4. Select this folder
+5. Share the `.crx` file

-## Development
+## Files

-```bash
-# Watch for changes
-npm run watch
-
-# Build for production
-npm run build
+```
+blackroad-chrome-extension/
+├── manifest.json      # Extension configuration
+├── popup.html         # Main popup UI
+├── popup.css          # BlackRoad brand styling
+├── popup.js           # Search & interactions
+├── icons/
+│   ├── icon16.png     # Toolbar icon
+│   ├── icon48.png     # Extension page
+│   └── icon128.png    # Chrome Web Store
+└── README.md          # This file
 ```

-## Manifest V3
+## Brand Colors

-This extension uses Manifest V3 for better security and performance.
+- Hot Pink: `#FF1D6C`
+- Amber: `#F5A623`
+- Violet: `#9C27B0`
+- Electric Blue: `#2979FF`

-## License
+## Kind Light Mode ☀️

-MIT License
+This extension was built with kind light energy!

 ---

-Part of the **BlackRoad Empire** 🚀
+Made with ☀️ by Zeus | BlackRoad OS, Inc.
--- a/icons/icon128.png
+++ b/icons/icon128.png
--- a/icons/icon16.png
+++ b/icons/icon16.png
--- a/icons/icon48.png
+++ b/icons/icon48.png
--- a/manifest.json
+++ b/manifest.json
@@ -1,26 +1,22 @@
 {
  "manifest_version": 3,
-  "name": "BlackRoad DevTools",
+  "name": "BlackRoad Command Center",
  "version": "1.0.0",
-  "description": "Test APIs and deploy instantly from your browser",
-  "permissions": ["activeTab", "storage", "notifications", "webRequest"],
-  "host_permissions": ["https://api.blackroad.io/*", "https://*.blackroad.io/*"],
+  "description": "Quick access to your BlackRoad empire - 30K agents, 200+ repos, all services at your fingertips",
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
-    }
    },
-  "background": {
-    "service_worker": "background.js"
+    "default_title": "BlackRoad Command Center"
  },
-  "devtools_page": "devtools.html",
-  "content_scripts": [
-    {
-      "matches": ["<all_urls>"],
-      "js": ["content.js"]
-    }
-  ]
+  "permissions": [],
+  "host_permissions": []
 }
--- a/popup.css
+++ b/popup.css
@@ -0,0 +1,362 @@
+:root {
+  --hot-pink: #FF1D6C;
+  --amber: #F5A623;
+  --electric-blue: #2979FF;
+  --violet: #9C27B0;
+  --black: #0a0a0a;
+  --dark: #1a1a1a;
+  --gray: #2a2a2a;
+  --light-gray: #888;
+  --white: #FFFFFF;
+  --green: #00E676;
+  
+  /* Golden Ratio Spacing */
+  --space-xs: 8px;
+  --space-sm: 13px;
+  --space-md: 21px;
+  --space-lg: 34px;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  background: var(--black);
+  color: var(--white);
+  line-height: 1.618;
+  width: 380px;
+  min-height: 500px;
+}
+
+.container {
+  padding: var(--space-sm);
+}
+
+/* Header */
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: var(--space-sm);
+  border-bottom: 1px solid var(--gray);
+  margin-bottom: var(--space-sm);
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+}
+
+.logo-icon {
+  width: 36px;
+  height: 36px;
+  background: linear-gradient(135deg, var(--amber) 0%, var(--hot-pink) 38.2%, var(--violet) 61.8%, var(--electric-blue) 100%);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 800;
+  font-size: 14px;
+  color: white;
+}
+
+.logo-text {
+  display: flex;
+  flex-direction: column;
+}
+
+.brand {
+  font-weight: 700;
+  font-size: 16px;
+  background: linear-gradient(135deg, var(--amber) 0%, var(--hot-pink) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.tagline {
+  font-size: 10px;
+  color: var(--light-gray);
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+}
+
+.status-indicator {
+  position: relative;
+  width: 12px;
+  height: 12px;
+}
+
+.pulse {
+  position: absolute;
+  width: 12px;
+  height: 12px;
+  background: var(--green);
+  border-radius: 50%;
+  animation: pulse 2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.6; transform: scale(1.3); }
+}
+
+/* Search */
+.search-container {
+  margin-bottom: var(--space-sm);
+}
+
+.search {
+  width: 100%;
+  padding: var(--space-xs) var(--space-sm);
+  background: var(--dark);
+  border: 1px solid var(--gray);
+  border-radius: 8px;
+  color: var(--white);
+  font-size: 13px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+.search:focus {
+  border-color: var(--hot-pink);
+}
+
+.search::placeholder {
+  color: var(--light-gray);
+}
+
+/* Quick Links */
+.quick-links {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-xs);
+  margin-bottom: var(--space-sm);
+}
+
+.link-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: var(--space-sm) var(--space-xs);
+  background: var(--dark);
+  border: 1px solid var(--gray);
+  border-radius: 8px;
+  text-decoration: none;
+  color: var(--white);
+  transition: all 0.2s;
+  position: relative;
+}
+
+.link-card:hover {
+  border-color: var(--hot-pink);
+  transform: translateY(-2px);
+}
+
+.link-card.featured {
+  border-color: var(--hot-pink);
+  background: linear-gradient(135deg, rgba(255, 29, 108, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%);
+}
+
+.link-card .icon {
+  font-size: 20px;
+  margin-bottom: 4px;
+}
+
+.link-card .label {
+  font-size: 11px;
+  font-weight: 500;
+}
+
+.link-card .count {
+  font-size: 9px;
+  color: var(--light-gray);
+}
+
+.badge {
+  position: absolute;
+  top: -4px;
+  right: -4px;
+  padding: 2px 6px;
+  font-size: 8px;
+  font-weight: 700;
+  border-radius: 4px;
+  text-transform: uppercase;
+}
+
+.badge.new {
+  background: var(--hot-pink);
+  color: white;
+}
+
+/* Sections */
+.section {
+  margin-bottom: var(--space-sm);
+}
+
+.section-title {
+  display: flex;
+  align-items: center;
+  gap: var(--space-xs);
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--light-gray);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  margin-bottom: var(--space-xs);
+}
+
+.section-title .icon {
+  font-size: 14px;
+}
+
+/* Services Grid */
+.services-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+}
+
+.service {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px;
+  background: var(--dark);
+  border: 1px solid var(--gray);
+  border-radius: 6px;
+  font-size: 10px;
+  text-decoration: none;
+  color: var(--white);
+  transition: all 0.2s;
+}
+
+.service:hover {
+  border-color: var(--hot-pink);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.dot.green { background: var(--green); }
+.dot.amber { background: var(--amber); }
+.dot.red { background: #FF5252; }
+
+/* Stats Row */
+.stats-row {
+  display: flex;
+  justify-content: space-around;
+  background: var(--dark);
+  border: 1px solid var(--gray);
+  border-radius: 8px;
+  padding: var(--space-sm);
+}
+
+.stat {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.stat-value {
+  font-size: 18px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+
+.stat-value.pink { color: var(--hot-pink); }
+.stat-value.green { color: var(--green); }
+.stat-value.amber { color: var(--amber); }
+
+.stat-label {
+  font-size: 9px;
+  color: var(--light-gray);
+  text-transform: uppercase;
+}
+
+/* Actions Grid */
+.actions-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 6px;
+}
+
+.action-btn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  padding: var(--space-xs);
+  background: var(--dark);
+  border: 1px solid var(--gray);
+  border-radius: 6px;
+  color: var(--white);
+  font-size: 9px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.action-btn:hover {
+  border-color: var(--electric-blue);
+  background: rgba(41, 121, 255, 0.1);
+}
+
+.action-btn .icon {
+  font-size: 16px;
+}
+
+/* Organizations Grid */
+.orgs-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+.org {
+  padding: 4px 10px;
+  background: var(--dark);
+  border: 1px solid var(--gray);
+  border-radius: 4px;
+  font-size: 10px;
+  font-weight: 600;
+  text-decoration: none;
+  color: var(--white);
+  transition: all 0.2s;
+}
+
+.org:hover {
+  border-color: var(--violet);
+  background: rgba(156, 39, 176, 0.1);
+}
+
+/* Footer */
+.footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--space-xs);
+  padding-top: var(--space-sm);
+  border-top: 1px solid var(--gray);
+  font-size: 10px;
+  color: var(--light-gray);
+}
+
+.divider {
+  opacity: 0.3;
+}
+
+.kind-light {
+  color: var(--amber);
+}
+
+.heart {
+  color: var(--hot-pink);
+}
--- a/popup.html
+++ b/popup.html
@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BlackRoad Command Center</title>
+  <link rel="stylesheet" href="popup.css">
+</head>
+<body>
+  <div class="container">
+    <header class="header">
+      <div class="logo">
+        <div class="logo-icon">BR</div>
+        <div class="logo-text">
+          <span class="brand">BlackRoad</span>
+          <span class="tagline">Command Center</span>
+        </div>
+      </div>
+      <div class="status-indicator" title="All Systems Operational">
+        <span class="pulse"></span>
+      </div>
+    </header>
+
+    <div class="search-container">
+      <input type="text" class="search" placeholder="Search services, repos, agents..." id="search">
+    </div>
+
+    <nav class="quick-links">
+      <a href="https://blackroad-30k-agents.pages.dev" target="_blank" class="link-card featured">
+        <span class="icon">🌌</span>
+        <span class="label">30K Agents</span>
+        <span class="badge new">NEW</span>
+      </a>
+      <a href="https://github.com/BlackRoad-OS" target="_blank" class="link-card">
+        <span class="icon">📦</span>
+        <span class="label">GitHub</span>
+        <span class="count">200+</span>
+      </a>
+      <a href="https://dash.cloudflare.com" target="_blank" class="link-card">
+        <span class="icon">☁️</span>
+        <span class="label">Cloudflare</span>
+      </a>
+      <a href="https://blackroad.io" target="_blank" class="link-card">
+        <span class="icon">🏠</span>
+        <span class="label">Home</span>
+      </a>
+    </nav>
+
+    <section class="section">
+      <h3 class="section-title">
+        <span class="icon">🚀</span> Live Services
+      </h3>
+      <div class="services-grid" id="services">
+        <a href="https://lucidia.earth" target="_blank" class="service">
+          <span class="dot green"></span>
+          <span>Lucidia Earth</span>
+        </a>
+        <a href="https://blackroadai.com" target="_blank" class="service">
+          <span class="dot green"></span>
+          <span>BlackRoad AI</span>
+        </a>
+        <a href="https://blackroadquantum.com" target="_blank" class="service">
+          <span class="dot green"></span>
+          <span>Quantum</span>
+        </a>
+        <a href="https://blackroad-monitoring.pages.dev" target="_blank" class="service">
+          <span class="dot amber"></span>
+          <span>Monitoring</span>
+        </a>
+        <a href="https://blackroad-dashboard.pages.dev" target="_blank" class="service">
+          <span class="dot green"></span>
+          <span>Dashboard</span>
+        </a>
+        <a href="https://blackroad-api.pages.dev" target="_blank" class="service">
+          <span class="dot green"></span>
+          <span>API</span>
+        </a>
+      </div>
+    </section>
+
+    <section class="section">
+      <h3 class="section-title">
+        <span class="icon">🤖</span> Agent Fleet
+      </h3>
+      <div class="stats-row">
+        <div class="stat">
+          <span class="stat-value pink">30,000</span>
+          <span class="stat-label">Total Agents</span>
+        </div>
+        <div class="stat">
+          <span class="stat-value green">28,547</span>
+          <span class="stat-label">Active</span>
+        </div>
+        <div class="stat">
+          <span class="stat-value amber">1,453</span>
+          <span class="stat-label">Learning</span>
+        </div>
+      </div>
+    </section>
+
+    <section class="section">
+      <h3 class="section-title">
+        <span class="icon">⚡</span> Quick Actions
+      </h3>
+      <div class="actions-grid">
+        <button class="action-btn" onclick="openUrl('https://github.com/orgs/BlackRoad-OS/repositories?q=&type=all&language=&sort=pushed')">
+          <span class="icon">📊</span>
+          Recent Repos
+        </button>
+        <button class="action-btn" onclick="openUrl('https://dash.cloudflare.com/?to=/:account/pages')">
+          <span class="icon">📄</span>
+          Pages
+        </button>
+        <button class="action-btn" onclick="openUrl('https://dash.cloudflare.com/?to=/:account/workers')">
+          <span class="icon">⚙️</span>
+          Workers
+        </button>
+        <button class="action-btn" onclick="openUrl('https://dashboard.stripe.com')">
+          <span class="icon">💳</span>
+          Stripe
+        </button>
+      </div>
+    </section>
+
+    <section class="section">
+      <h3 class="section-title">
+        <span class="icon">🏢</span> Organizations
+      </h3>
+      <div class="orgs-grid" id="orgs">
+        <a href="https://github.com/BlackRoad-OS" target="_blank" class="org" title="BlackRoad-OS">OS</a>
+        <a href="https://github.com/BlackRoad-AI" target="_blank" class="org" title="BlackRoad-AI">AI</a>
+        <a href="https://github.com/BlackRoad-Cloud" target="_blank" class="org" title="BlackRoad-Cloud">Cloud</a>
+        <a href="https://github.com/BlackRoad-Security" target="_blank" class="org" title="BlackRoad-Security">Sec</a>
+        <a href="https://github.com/BlackRoad-Labs" target="_blank" class="org" title="BlackRoad-Labs">Labs</a>
+        <a href="https://github.com/BlackRoad-Foundation" target="_blank" class="org" title="BlackRoad-Foundation">Found</a>
+        <a href="https://github.com/BlackRoad-Media" target="_blank" class="org" title="BlackRoad-Media">Media</a>
+        <a href="https://github.com/BlackRoad-Education" target="_blank" class="org" title="BlackRoad-Education">Edu</a>
+        <a href="https://github.com/BlackRoad-Hardware" target="_blank" class="org" title="BlackRoad-Hardware">HW</a>
+        <a href="https://github.com/BlackRoad-Interactive" target="_blank" class="org" title="BlackRoad-Interactive">Game</a>
+        <a href="https://github.com/BlackRoad-Studio" target="_blank" class="org" title="BlackRoad-Studio">Studio</a>
+        <a href="https://github.com/BlackRoad-Ventures" target="_blank" class="org" title="BlackRoad-Ventures">VC</a>
+        <a href="https://github.com/BlackRoad-Gov" target="_blank" class="org" title="BlackRoad-Gov">Gov</a>
+        <a href="https://github.com/BlackRoad-Archive" target="_blank" class="org" title="BlackRoad-Archive">Arch</a>
+        <a href="https://github.com/Blackbox-Enterprises" target="_blank" class="org" title="Blackbox-Enterprises">BB</a>
+      </div>
+    </section>
+
+    <footer class="footer">
+      <span class="version">v1.0.0</span>
+      <span class="divider">|</span>
+      <span class="kind-light">Kind Light Mode</span>
+      <span class="divider">|</span>
+      <span class="heart">Made with ☀️</span>
+    </footer>
+  </div>
+
+  <script src="popup.js"></script>
+</body>
+</html>
--- a/popup.js
+++ b/popup.js
@@ -0,0 +1,70 @@
+// BlackRoad Command Center - Extension Logic
+
+// Open URL in new tab
+function openUrl(url) {
+  chrome.tabs.create({ url: url });
+}
+
+// Search functionality
+document.getElementById('search').addEventListener('input', function(e) {
+  const query = e.target.value.toLowerCase();
+  
+  // Filter services
+  document.querySelectorAll('.service, .link-card, .org').forEach(el => {
+    const text = el.textContent.toLowerCase();
+    if (query === '' || text.includes(query)) {
+      el.style.display = '';
+      el.style.opacity = '1';
+    } else {
+      el.style.opacity = '0.3';
+    }
+  });
+});
+
+// Keyboard shortcuts
+document.addEventListener('keydown', function(e) {
+  // Focus search on any key
+  if (e.key === '/' || (e.key.length === 1 && !e.ctrlKey && !e.metaKey)) {
+    document.getElementById('search').focus();
+  }
+  
+  // Quick shortcuts
+  if (e.metaKey || e.ctrlKey) {
+    switch(e.key) {
+      case 'g':
+        e.preventDefault();
+        openUrl('https://github.com/BlackRoad-OS');
+        break;
+      case 'c':
+        e.preventDefault();
+        openUrl('https://dash.cloudflare.com');
+        break;
+      case 'a':
+        e.preventDefault();
+        openUrl('https://blackroad-30k-agents.pages.dev');
+        break;
+    }
+  }
+});
+
+// Update agent stats with slight randomization for "live" feel
+function updateStats() {
+  const baseActive = 28500;
+  const baseLearning = 1500;
+  
+  const active = baseActive + Math.floor(Math.random() * 100);
+  const learning = baseLearning - Math.floor(Math.random() * 100);
+  
+  const activeEl = document.querySelector('.stat-value.green');
+  const learningEl = document.querySelector('.stat-value.amber');
+  
+  if (activeEl) activeEl.textContent = active.toLocaleString();
+  if (learningEl) learningEl.textContent = learning.toLocaleString();
+}
+
+// Update stats every 5 seconds
+setInterval(updateStats, 5000);
+
+// Log extension opened (for future analytics)
+console.log('BlackRoad Command Center v1.0.0 loaded');
+console.log('Kind Light Mode: Active ☀️');