AI Service Reliability Monitor & Failover Switch v1.0.0

2026-06-15 06:24:05 +00:00
commit e08e26bbc5
21 changed files with 4935 additions and 0 deletions
@@ -0,0 +1,6 @@
+node_modules/
+dist/
+.verdict
+*.log
+.venv/
+.env
@@ -0,0 +1,67 @@
+const fs = require('fs');
+const path = require('path');
+const zlib = require('zlib');
+
+function crc32(buf) {
+  let c = ~0;
+  const table = Array.from({ length: 256 }, (_, n) => {
+    let c = n;
+    for (let k = 0; k < 8; k++) {
+      c = c & 1 ? 0xEDB88320 ^ (c >>> 1) : c >>> 1;
+    }
+    return c >>> 0;
+  });
+  for (let i = 0; i < buf.length; i++) {
+    c = table[(c ^ buf[i]) & 0xff] ^ (c >>> 1);
+  }
+  return ~(c >>> 0) >>> 0;
+}
+
+function pngChunk(type, data) {
+  const typeBuf = Buffer.from(type, 'ascii');
+  const buf = Buffer.concat([typeBuf, data]);
+  const crc = crc32(buf);
+  const len = Buffer.allocUnsafe(4);
+  len.writeUInt32BE(data.length, 0);
+  const crcBuf = Buffer.allocUnsafe(4);
+  crcBuf.writeUInt32BE(crc, 0);
+  return Buffer.concat([len, buf, crcBuf]);
+}
+
+function createSolidPng(size, r, g, b) {
+  const header = Buffer.from([0x89, 0x50, 0x4E, 0x47, 0x0D, 0x0A, 0x1A, 0x0A]);
+
+  const ihdr = Buffer.allocUnsafe(13);
+  ihdr.writeUInt32BE(size, 0);  // width
+  ihdr.writeUInt32BE(size, 4);  // height
+  ihdr[8] = 8;   // bit depth
+  ihdr[9] = 2;   // color type (RGB)
+  ihdr[10] = 0;  // compression
+  ihdr[11] = 0;  // filter method
+  ihdr[12] = 0;  // interlace
+
+  const row = Buffer.allocUnsafe(1 + size * 3);
+  row[0] = 0; // filter byte
+  for (let x = 0; x < size; x++) {
+    row[1 + x * 3] = r;
+    row[1 + x * 3 + 1] = g;
+    row[1 + x * 3 + 2] = b;
+  }
+  const rawData = Buffer.concat(Array.from({ length: size }, () => row));
+  const idat = zlib.deflateSync(rawData, { level: 9 });
+
+  return Buffer.concat([header, pngChunk('IHDR', ihdr), pngChunk('IDAT', idat), pngChunk('IEND', Buffer.alloc(0))]);
+}
+
+const dir = path.join(__dirname, 'public', 'icons');
+fs.mkdirSync(dir, { recursive: true });
+
+const sizes = [16, 48, 128];
+const colors = { 16: [59, 130, 246], 48: [59, 130, 246], 128: [59, 130, 246] };
+
+for (const size of sizes) {
+  const [r, g, b] = colors[size];
+  const png = createSolidPng(size, r, g, b);
+  fs.writeFileSync(path.join(dir, `icon${size}.png`), png);
+  console.log(`Generated icon${size}.png`);
+}
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>AI Service Monitor</title>
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/popup-main.tsx"></script>
+</body>
+</html>
@@ -0,0 +1,52 @@
+{
+  "manifest_version": 3,
+  "name": "AI Service Reliability Monitor & Failover Switch",
+  "version": "1.0.0",
+  "description": "Monitor AI service health across ChatGPT, Claude, Gemini, and Grok. Track usage limits, get alerts, and auto-suggest failover when services are down.",
+  "permissions": [
+    "storage",
+    "activeTab",
+    "tabs",
+    "alarms",
+    "notifications"
+  ],
+  "host_permissions": [
+    "https://chat.openai.com/*",
+    "https://chatgpt.com/*",
+    "https://claude.ai/*",
+    "https://gemini.google.com/*",
+    "https://grok.com/*",
+    "https://api.openai.com/*",
+    "https://api.anthropic.com/*"
+  ],
+  "background": {
+    "service_worker": "src/background.ts",
+    "type": "module"
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "https://chat.openai.com/*",
+        "https://chatgpt.com/*",
+        "https://claude.ai/*",
+        "https://gemini.google.com/*",
+        "https://grok.com/*"
+      ],
+      "js": ["src/content.ts"],
+      "run_at": "document_end"
+    }
+  ],
+  "action": {
+    "default_popup": "index.html",
+    "default_icon": {
+      "16": "icons/icon16.png",
+      "48": "icons/icon48.png",
+      "128": "icons/icon128.png"
+    }
+  },
+  "icons": {
+    "16": "icons/icon16.png",
+    "48": "icons/icon48.png",
+    "128": "icons/icon128.png"
+  }
+}
@@ -0,0 +1,27 @@
+{
+  "name": "ai-service-reliability-monitor",
+  "version": "1.0.0",
+  "description": "AI Service Reliability Monitor & Failover Switch",
+  "type": "module",
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@crxjs/vite-plugin": "^2.0.0-beta.28",
+    "@types/chrome": "^0.0.268",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.5.0",
+    "vite": "^5.3.0",
+    "vitest": "^1.6.0",
+    "jsdom": "^24.0.0"
+  }
+}
@@ -0,0 +1,212 @@
+// Background Service Worker - Health Monitoring Engine
+import { ServiceId, SERVICE_CONFIG, MonitorState, ServiceStatus } from './types'
+import { getState, saveState, updateServiceStatus } from './storage'
+
+const HEALTH_CHECK_INTERVAL = 60 * 1000 // 60 seconds
+const ALERT_COOLDOWN = 5 * 60 * 1000 // 5 minutes
+
+// Real-time page health signals from content scripts
+const pageHealthSignals: Record<ServiceId, 'healthy' | 'degraded' | 'down' | 'unknown'> = {
+  chatgpt: 'unknown',
+  claude: 'unknown',
+  gemini: 'unknown',
+  grok: 'unknown'
+}
+
+// Check a single service via fetch with timeout
+async function checkServiceHealth(serviceId: ServiceId): Promise<Partial<ServiceStatus>> {
+  const config = SERVICE_CONFIG[serviceId]
+  const startTime = Date.now()
+
+  try {
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 10000)
+
+    const response = await fetch(config.checkUrl, {
+      method: 'HEAD',
+      mode: 'no-cors',
+      signal: controller.signal
+    }).catch(() => null)
+
+    clearTimeout(timeout)
+
+    const responseTimeMs = Date.now() - startTime
+
+    // Check page signal too
+    const pageSignal = pageHealthSignals[serviceId]
+
+    if (pageSignal === 'down') {
+      return { health: 'down', responseTimeMs, lastChecked: Date.now(), message: 'Page reports errors' }
+    }
+    if (pageSignal === 'degraded') {
+      return { health: 'degraded', responseTimeMs, lastChecked: Date.now(), message: 'Page reports degraded performance' }
+    }
+
+    // If fetch succeeds and page is OK
+    if (responseTimeMs < 3000) {
+      return { health: 'healthy', responseTimeMs, lastChecked: Date.now(), message: null }
+    }
+    if (responseTimeMs < 8000) {
+      return { health: 'degraded', responseTimeMs, lastChecked: Date.now(), message: 'Slow response' }
+    }
+    return { health: 'down', responseTimeMs, lastChecked: Date.now(), message: 'Timeout' }
+  } catch (err) {
+    const pageSignal = pageHealthSignals[serviceId]
+    if (pageSignal === 'healthy') {
+      return { health: 'degraded', responseTimeMs: Date.now() - startTime, lastChecked: Date.now(), message: 'Health check blocked, page OK' }
+    }
+    return { health: 'down', responseTimeMs: null, lastChecked: Date.now(), message: 'Connection failed' }
+  }
+}
+
+// Run health checks for all services
+async function runHealthChecks(): Promise<void> {
+  const services: ServiceId[] = ['chatgpt', 'claude', 'gemini', 'grok']
+  const checks = await Promise.allSettled(services.map(checkServiceHealth))
+
+  const state = await getState()
+
+  checks.forEach((result, index) => {
+    const serviceId = services[index]
+    if (result.status === 'fulfilled') {
+      state.services[serviceId] = { ...state.services[serviceId], ...result.value }
+    }
+  })
+
+  await saveState(state)
+  updateBadge(state)
+  await evaluateAlerts(state)
+}
+
+// Update badge based on overall health
+function updateBadge(state: MonitorState): void {
+  const services = Object.values(state.services)
+  const downCount = services.filter(s => s.health === 'down').length
+  const degradedCount = services.filter(s => s.health === 'degraded').length
+
+  if (downCount > 0) {
+    chrome.action.setBadgeText({ text: downCount.toString() })
+    chrome.action.setBadgeBackgroundColor({ color: '#EF4444' }) // red
+  } else if (degradedCount > 0) {
+    chrome.action.setBadgeText({ text: degradedCount.toString() })
+    chrome.action.setBadgeBackgroundColor({ color: '#F59E0B' }) // amber
+  } else {
+    chrome.action.setBadgeText({ text: '' })
+  }
+}
+
+// Evaluate and send alerts
+async function evaluateAlerts(state: MonitorState): Promise<void> {
+  const now = Date.now()
+
+  // Skip if alert was sent recently
+  if (state.lastAlert && now - state.lastAlert < ALERT_COOLDOWN) return
+
+  const downServices = Object.values(state.services).filter(s => s.health === 'down')
+  const degradedServices = Object.values(state.services).filter(s => s.health === 'degraded')
+  const nearLimit = Object.values(state.services).filter(
+    s => s.usageLimit && s.usageLimit.percentUsed >= state.alertThreshold
+  )
+
+  if (downServices.length > 0) {
+    const names = downServices.map(s => s.name).join(', ')
+    await sendAlert(`AI Service Down`, `${names} is currently down. Switch to a backup provider?`, state)
+  } else if (degradedServices.length > 0) {
+    const names = degradedServices.map(s => s.name).join(', ')
+    await sendAlert(`AI Service Degraded`, `${names} is experiencing issues.`, state)
+  } else if (nearLimit.length > 0) {
+    const names = nearLimit.map(s => s.name).join(', ')
+    await sendAlert(`Usage Limit Warning`, `${names} is at ${state.alertThreshold}% of usage limit.`, state)
+  }
+}
+
+async function sendAlert(title: string, message: string, state: MonitorState): Promise<void> {
+  await chrome.notifications.create({
+    type: 'basic',
+    iconUrl: 'icons/icon128.png',
+    title,
+    message
+  })
+
+  state.lastAlert = Date.now()
+  await saveState(state)
+}
+
+// Find best failover service
+export function findFailoverService(state: MonitorState): ServiceId | null {
+  const candidates = Object.values(state.services)
+    .filter(s => s.id !== state.primaryService && s.health === 'healthy')
+    .sort((a, b) => (a.responseTimeMs ?? Infinity) - (b.responseTimeMs ?? Infinity))
+
+  return candidates.length > 0 ? candidates[0].id : null
+}
+
+// Listen for content script health signals
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'HEALTH_SIGNAL') {
+    const serviceId = message.serviceId as ServiceId
+    const health = message.health as 'healthy' | 'degraded' | 'down'
+    if (pageHealthSignals[serviceId] !== undefined) {
+      pageHealthSignals[serviceId] = health
+    }
+    sendResponse({ ok: true })
+  }
+
+  if (message.type === 'GET_FAILOVER') {
+    getState().then(state => {
+      const failover = findFailoverService(state)
+      if (failover) {
+        const config = SERVICE_CONFIG[failover]
+        sendResponse({ ok: true, serviceId: failover, url: config.url })
+      } else {
+        sendResponse({ ok: false, error: 'No healthy backup available' })
+      }
+    })
+    return true // async response
+  }
+
+  if (message.type === 'GET_STATE') {
+    getState().then(state => {
+      sendResponse({ ok: true, state })
+    })
+    return true
+  }
+
+  return false
+})
+
+// Alarm-based periodic checks
+chrome.alarms.onAlarm.addListener((alarm) => {
+  if (alarm.name === 'healthCheck') {
+    runHealthChecks()
+  }
+})
+
+// Install / startup
+chrome.runtime.onInstalled.addListener(() => {
+  chrome.alarms.create('healthCheck', { periodInMinutes: 1 })
+  runHealthChecks()
+})
+
+chrome.runtime.onStartup.addListener(() => {
+  runHealthChecks()
+})
+
+// Listen for tab updates to detect AI service pages
+chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
+  if (changeInfo.status === 'complete' && tab.url) {
+    const serviceId = Object.entries(SERVICE_CONFIG).find(([, config]) =>
+      tab.url!.includes(config.url.replace('https://', ''))
+    )?.[0] as ServiceId | undefined
+
+    if (serviceId) {
+      // Inject content script for fresh health detection
+      chrome.tabs.sendMessage(tabId, { type: 'PING' }).catch(() => {
+        // Content script not ready
+      })
+    }
+  }
+})
+
+// Export for testing
+export { runHealthChecks, updateBadge, checkServiceHealth }
@@ -0,0 +1,152 @@
+// Content Script - Detects AI service errors and health signals on page
+
+import { ServiceId } from './types'
+
+declare const chrome: typeof import('chrome')
+
+function detectServiceId(): ServiceId | null {
+  const host = window.location.host
+  if (host.includes('chatgpt.com') || host.includes('openai.com')) return 'chatgpt'
+  if (host.includes('claude.ai')) return 'claude'
+  if (host.includes('gemini.google.com')) return 'gemini'
+  if (host.includes('grok.com')) return 'grok'
+  return null
+}
+
+let lastSignal: 'healthy' | 'degraded' | 'down' = 'healthy'
+let errorCount = 0
+let slowResponseCount = 0
+let lastResponseTime = 0
+
+function sendHealthSignal(health: 'healthy' | 'degraded' | 'down') {
+  if (health === lastSignal) return
+  lastSignal = health
+  const serviceId = detectServiceId()
+  if (!serviceId) return
+  chrome.runtime.sendMessage({ type: 'HEALTH_SIGNAL', serviceId, health })
+}
+
+function detectChatGPTIssues() {
+  // Detect "Hmm... something went wrong" error
+  const errorElements = document.querySelectorAll('[class*="error"], [class*="warning"], [class*="failed"]')
+  const bodyText = document.body?.innerText || ''
+
+  const hasError = bodyText.includes('Hmm... something went wrong') ||
+    bodyText.includes('Something went wrong') ||
+    bodyText.includes('error 4600') ||
+    bodyText.includes('error') && bodyText.includes('try again') ||
+    errorElements.length > 3
+
+  const hasNetworkError = bodyText.includes('network error') || bodyText.includes('connection lost')
+
+  if (hasError || hasNetworkError) {
+    errorCount++
+    if (errorCount >= 2) sendHealthSignal('down')
+    else if (errorCount >= 1) sendHealthSignal('degraded')
+  } else {
+    errorCount = Math.max(0, errorCount - 1)
+    if (errorCount === 0) sendHealthSignal('healthy')
+  }
+}
+
+function detectClaudeIssues() {
+  const bodyText = document.body?.innerText || ''
+  const hasError = bodyText.includes('overloaded') ||
+    bodyText.includes('try again') && bodyText.includes('error') ||
+    bodyText.includes('temporarily unavailable') ||
+    bodyText.includes('rate limit')
+
+  if (hasError) {
+    errorCount++
+    if (errorCount >= 2) sendHealthSignal('down')
+    else sendHealthSignal('degraded')
+  } else {
+    errorCount = Math.max(0, errorCount - 1)
+    if (errorCount === 0) sendHealthSignal('healthy')
+  }
+}
+
+function detectGeminiIssues() {
+  const bodyText = document.body?.innerText || ''
+  const hasError = bodyText.includes('error') && bodyText.includes('try again') ||
+    bodyText.includes('unavailable') ||
+    bodyText.includes('limit reached')
+
+  if (hasError) {
+    errorCount++
+    if (errorCount >= 2) sendHealthSignal('down')
+    else sendHealthSignal('degraded')
+  } else {
+    errorCount = Math.max(0, errorCount - 1)
+    if (errorCount === 0) sendHealthSignal('healthy')
+  }
+}
+
+function detectGrokIssues() {
+  const bodyText = document.body?.innerText || ''
+  const hasError = bodyText.includes('error') && bodyText.includes('try again') ||
+    bodyText.includes('unavailable') ||
+    bodyText.includes('rate limit')
+
+  if (hasError) {
+    errorCount++
+    if (errorCount >= 2) sendHealthSignal('down')
+    else sendHealthSignal('degraded')
+  } else {
+    errorCount = Math.max(0, errorCount - 1)
+    if (errorCount === 0) sendHealthSignal('healthy')
+  }
+}
+
+function trackUsageLimits() {
+  const serviceId = detectServiceId()
+  if (!serviceId) return
+
+  // Detect usage limit UI elements
+  const limitText = document.body?.innerText || ''
+  const limitMatch = limitText.match(/(\d+)\s*\/\s*(\d+)\s*(messages|requests|tokens)/i)
+  
+  if (limitMatch) {
+    const used = parseInt(limitMatch[1], 10)
+    const limit = parseInt(limitMatch[2], 10)
+    chrome.runtime.sendMessage({
+      type: 'USAGE_LIMIT',
+      serviceId,
+      used,
+      limit,
+      unit: limitMatch[3].toLowerCase()
+    })
+  }
+
+  // Detect response time degradation
+  const now = Date.now()
+  if (lastResponseTime && now - lastResponseTime > 30000) {
+    slowResponseCount++
+    if (slowResponseCount >= 3) sendHealthSignal('degraded')
+  }
+  lastResponseTime = now
+}
+
+// Poll for page health every 5 seconds
+function pollHealth() {
+  const serviceId = detectServiceId()
+  if (!serviceId) return
+
+  switch (serviceId) {
+    case 'chatgpt': detectChatGPTIssues(); break
+    case 'claude': detectClaudeIssues(); break
+    case 'gemini': detectGeminiIssues(); break
+    case 'grok': detectGrokIssues(); break
+  }
+  trackUsageLimits()
+}
+
+setInterval(pollHealth, 5000)
+pollHealth()
+
+// Listen for background ping
+chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
+  if (message.type === 'PING') {
+    sendResponse({ ok: true, health: lastSignal, serviceId: detectServiceId() })
+  }
+})
@@ -0,0 +1,12 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './popup'
+
+const container = document.getElementById('root')
+if (container) {
+  createRoot(container).render(
+    <StrictMode>
+      <App />
+    </StrictMode>
+  )
+}
@@ -0,0 +1,227 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  background: #F9FAFB;
+  min-width: 360px;
+  max-width: 400px;
+}
+
+.popup-container {
+  padding: 16px;
+}
+
+.loading, .error {
+  padding: 24px;
+  text-align: center;
+  color: #6B7280;
+}
+
+.error {
+  color: #EF4444;
+}
+
+.header {
+  margin-bottom: 16px;
+}
+
+.header h1 {
+  margin: 0 0 8px 0;
+  font-size: 18px;
+  font-weight: 600;
+  color: #111827;
+}
+
+.summary {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.summary-badge {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.summary-badge.healthy {
+  background: #D1FAE5;
+  color: #065F46;
+}
+
+.summary-badge.degraded {
+  background: #FEF3C7;
+  color: #92400E;
+}
+
+.summary-badge.down {
+  background: #FEE2E2;
+  color: #991B1B;
+}
+
+.services-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 16px;
+}
+
+.service-card {
+  background: white;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.service-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.service-name {
+  font-weight: 600;
+  color: #111827;
+}
+
+.health-badge {
+  padding: 2px 8px;
+  border-radius: 999px;
+  font-size: 11px;
+  font-weight: 500;
+  color: white;
+}
+
+.service-details {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.detail-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #4B5563;
+}
+
+.detail-row.error-message {
+  color: #EF4444;
+  font-weight: 500;
+}
+
+.usage-bar {
+  margin-top: 6px;
+}
+
+.usage-label {
+  font-size: 11px;
+  color: #6B7280;
+  margin-bottom: 2px;
+}
+
+.usage-track {
+  height: 6px;
+  background: #E5E7EB;
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+.usage-fill {
+  height: 100%;
+  border-radius: 3px;
+  transition: width 0.3s ease;
+}
+
+.failover-btn, .refresh-btn, .switch-btn, .close-btn {
+  width: 100%;
+  padding: 10px 12px;
+  border: none;
+  border-radius: 6px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  margin-bottom: 8px;
+}
+
+.failover-btn {
+  background: #3B82F6;
+  color: white;
+}
+
+.failover-btn:hover {
+  background: #2563EB;
+}
+
+.refresh-btn {
+  background: #F3F4F6;
+  color: #374151;
+  border: 1px solid #D1D5DB;
+}
+
+.refresh-btn:hover {
+  background: #E5E7EB;
+}
+
+.failover-suggestion {
+  background: #EFF6FF;
+  border: 1px solid #BFDBFE;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 12px;
+}
+
+.failover-title {
+  font-size: 12px;
+  font-weight: 600;
+  color: #1E40AF;
+  margin-bottom: 4px;
+}
+
+.failover-service {
+  font-size: 16px;
+  font-weight: 600;
+  color: #111827;
+  margin-bottom: 8px;
+}
+
+.switch-btn {
+  background: #10B981;
+  color: white;
+  margin-bottom: 6px;
+}
+
+.switch-btn:hover {
+  background: #059669;
+}
+
+.close-btn {
+  background: #F3F4F6;
+  color: #374151;
+  border: 1px solid #D1D5DB;
+  margin-bottom: 0;
+}
+
+.close-btn:hover {
+  background: #E5E7EB;
+}
+
+.settings {
+  background: white;
+  border: 1px solid #E5E7EB;
+  border-radius: 8px;
+  padding: 12px;
+  margin-bottom: 12px;
+}
+
+.setting-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 12px;
+  color: #4B5563;
+  padding: 4px 0;
+}
@@ -0,0 +1,167 @@
+import { useState, useEffect } from 'react'
+import './popup.css'
+import { MonitorState, ServiceStatus, ServiceId, SERVICE_CONFIG } from './types'
+
+function ServiceCard({ service }: { service: ServiceStatus }) {
+  const healthColors = {
+    healthy: '#10B981',
+    degraded: '#F59E0B',
+    down: '#EF4444',
+    unknown: '#6B7280'
+  }
+
+  const healthLabels = {
+    healthy: 'Healthy',
+    degraded: 'Degraded',
+    down: 'Down',
+    unknown: 'Unknown'
+  }
+
+  return (
+    <div className="service-card">
+      <div className="service-header">
+        <div className="service-name">{service.name}</div>
+        <div className="health-badge" style={{ backgroundColor: healthColors[service.health] }}>
+          {healthLabels[service.health]}
+        </div>
+      </div>
+      <div className="service-details">
+        <div className="detail-row">
+          <span>Response Time</span>
+          <span>{service.responseTimeMs ? `${service.responseTimeMs}ms` : '—'}</span>
+        </div>
+        {service.message && (
+          <div className="detail-row error-message">
+            <span>{service.message}</span>
+          </div>
+        )}
+        {service.usageLimit && (
+          <div className="usage-bar">
+            <div className="usage-label">
+              Usage: {service.usageLimit.used}/{service.usageLimit.limit} {service.usageLimit.unit}
+            </div>
+            <div className="usage-track">
+              <div
+                className="usage-fill"
+                style={{
+                  width: `${service.usageLimit.percentUsed}%`,
+                  backgroundColor: service.usageLimit.percentUsed >= 80 ? '#EF4444' : '#10B981'
+                }}
+              />
+            </div>
+          </div>
+        )}
+        <div className="detail-row">
+          <span>Last Checked</span>
+          <span>{service.lastChecked ? new Date(service.lastChecked).toLocaleTimeString() : 'Never'}</span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function App() {
+  const [state, setState] = useState<MonitorState | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [failover, setFailover] = useState<{ serviceId: ServiceId; url: string } | null>(null)
+
+  useEffect(() => {
+    loadState()
+  }, [])
+
+  async function loadState() {
+    try {
+      const response = await chrome.runtime.sendMessage({ type: 'GET_STATE' })
+      if (response.ok) {
+        setState(response.state)
+      }
+    } catch (err) {
+      console.error('Failed to load state', err)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  async function handleFailover() {
+    try {
+      const response = await chrome.runtime.sendMessage({ type: 'GET_FAILOVER' })
+      if (response.ok) {
+        setFailover({ serviceId: response.serviceId, url: response.url })
+      }
+    } catch (err) {
+      console.error('Failed to get failover', err)
+    }
+  }
+
+  async function switchToService(url: string) {
+    await chrome.tabs.create({ url })
+  }
+
+  if (loading) {
+    return <div className="loading">Loading...</div>
+  }
+
+  if (!state) {
+    return <div className="error">Failed to load monitor state</div>
+  }
+
+  const services = Object.values(state.services)
+  const downCount = services.filter(s => s.health === 'down').length
+  const degradedCount = services.filter(s => s.health === 'degraded').length
+  const healthyCount = services.filter(s => s.health === 'healthy').length
+
+  return (
+    <div className="popup-container">
+      <div className="header">
+        <h1>AI Service Monitor</h1>
+        <div className="summary">
+          <span className="summary-badge healthy">{healthyCount} Healthy</span>
+          <span className="summary-badge degraded">{degradedCount} Degraded</span>
+          <span className="summary-badge down">{downCount} Down</span>
+        </div>
+      </div>
+
+      <div className="services-list">
+        {services.map(service => (
+          <ServiceCard key={service.id} service={service} />
+        ))}
+      </div>
+
+      {failover ? (
+        <div className="failover-suggestion">
+          <div className="failover-title">Suggested Failover</div>
+          <div className="failover-service">
+            {SERVICE_CONFIG[failover.serviceId].name}
+          </div>
+          <button className="switch-btn" onClick={() => switchToService(failover.url)}>
+            Switch to {SERVICE_CONFIG[failover.serviceId].name}
+          </button>
+          <button className="close-btn" onClick={() => setFailover(null)}>
+            Dismiss
+          </button>
+        </div>
+      ) : (
+        <button className="failover-btn" onClick={handleFailover}>
+          Find Best Backup Service
+        </button>
+      )}
+
+      <div className="settings">
+        <div className="setting-row">
+          <span>Alert Threshold</span>
+          <span>{state.alertThreshold}%</span>
+        </div>
+        <div className="setting-row">
+          <span>Primary Service</span>
+          <span>{SERVICE_CONFIG[state.primaryService].name}</span>
+        </div>
+      </div>
+
+      <button className="refresh-btn" onClick={loadState}>
+        Refresh Status
+      </button>
+    </div>
+  )
+}
+
+export default App
@@ -0,0 +1,28 @@
+import { ServiceId, ServiceStatus, MonitorState, DEFAULT_STATE } from './types'
+
+const STORAGE_KEY = 'ai_monitor_state'
+
+export async function getState(): Promise<MonitorState> {
+  try {
+    const result = await chrome.storage.local.get(STORAGE_KEY)
+    return result[STORAGE_KEY] ? JSON.parse(result[STORAGE_KEY]) : DEFAULT_STATE
+  } catch {
+    return DEFAULT_STATE
+  }
+}
+
+export async function saveState(state: MonitorState): Promise<void> {
+  await chrome.storage.local.set({ [STORAGE_KEY]: JSON.stringify(state) })
+}
+
+export async function updateServiceStatus(serviceId: ServiceId, status: Partial<ServiceStatus>): Promise<void> {
+  const state = await getState()
+  state.services[serviceId] = { ...state.services[serviceId], ...status }
+  await saveState(state)
+}
+
+export async function clearAlert(): Promise<void> {
+  const state = await getState()
+  state.lastAlert = null
+  await saveState(state)
+}
@@ -0,0 +1,51 @@
+// Types for AI Service Monitor
+
+export type ServiceId = 'chatgpt' | 'claude' | 'gemini' | 'grok'
+
+export interface ServiceStatus {
+  id: ServiceId
+  name: string
+  url: string
+  health: 'healthy' | 'degraded' | 'down' | 'unknown'
+  lastChecked: number
+  responseTimeMs: number | null
+  errorRate: number
+  usageLimit: UsageLimit | null
+  message: string | null
+}
+
+export interface UsageLimit {
+  used: number
+  limit: number
+  unit: 'requests' | 'tokens' | 'messages'
+  resetsAt: number | null
+  percentUsed: number
+}
+
+export interface MonitorState {
+  services: Record<ServiceId, ServiceStatus>
+  lastAlert: number | null
+  alertThreshold: number
+  failoverEnabled: boolean
+  primaryService: ServiceId
+}
+
+export const SERVICE_CONFIG: Record<ServiceId, { name: string; url: string; checkUrl: string }> = {
+  chatgpt: { name: 'ChatGPT', url: 'https://chatgpt.com', checkUrl: 'https://chatgpt.com/backend-api/health' },
+  claude: { name: 'Claude AI', url: 'https://claude.ai', checkUrl: 'https://claude.ai/api/health' },
+  gemini: { name: 'Gemini', url: 'https://gemini.google.com', checkUrl: 'https://gemini.google.com/health' },
+  grok: { name: 'Grok', url: 'https://grok.com', checkUrl: 'https://grok.com/health' }
+}
+
+export const DEFAULT_STATE: MonitorState = {
+  services: {
+    chatgpt: { id: 'chatgpt', name: 'ChatGPT', url: 'https://chatgpt.com', health: 'unknown', lastChecked: 0, responseTimeMs: null, errorRate: 0, usageLimit: null, message: null },
+    claude: { id: 'claude', name: 'Claude AI', url: 'https://claude.ai', health: 'unknown', lastChecked: 0, responseTimeMs: null, errorRate: 0, usageLimit: null, message: null },
+    gemini: { id: 'gemini', name: 'Gemini', url: 'https://gemini.google.com', health: 'unknown', lastChecked: 0, responseTimeMs: null, errorRate: 0, usageLimit: null, message: null },
+    grok: { id: 'grok', name: 'Grok', url: 'https://grok.com', health: 'unknown', lastChecked: 0, responseTimeMs: null, errorRate: 0, usageLimit: null, message: null }
+  },
+  lastAlert: null,
+  alertThreshold: 80,
+  failoverEnabled: true,
+  primaryService: 'chatgpt'
+}
@@ -0,0 +1,91 @@
+import { describe, it, expect } from 'vitest'
+import { findFailoverService } from '../src/background'
+import { MonitorState, ServiceId, ServiceStatus } from '../src/types'
+
+function makeStatus(id: ServiceId, health: ServiceStatus['health'], responseTime: number | null): ServiceStatus {
+  return {
+    id,
+    name: id,
+    url: `https://${id}.com`,
+    health,
+    lastChecked: Date.now(),
+    responseTimeMs: responseTime,
+    errorRate: 0,
+    usageLimit: null,
+    message: null
+  }
+}
+
+describe('findFailoverService', () => {
+  it('should return the fastest healthy backup', () => {
+    const state: MonitorState = {
+      services: {
+        chatgpt: makeStatus('chatgpt', 'healthy', 100),
+        claude: makeStatus('claude', 'healthy', 50),
+        gemini: makeStatus('gemini', 'healthy', 200),
+        grok: makeStatus('grok', 'down', null)
+      },
+      lastAlert: null,
+      alertThreshold: 80,
+      failoverEnabled: true,
+      primaryService: 'chatgpt'
+    }
+
+    const result = findFailoverService(state)
+    expect(result).toBe('claude')
+  })
+
+  it('should return null when no healthy backup exists', () => {
+    const state: MonitorState = {
+      services: {
+        chatgpt: makeStatus('chatgpt', 'down', null),
+        claude: makeStatus('claude', 'down', null),
+        gemini: makeStatus('gemini', 'degraded', 1000),
+        grok: makeStatus('grok', 'down', null)
+      },
+      lastAlert: null,
+      alertThreshold: 80,
+      failoverEnabled: true,
+      primaryService: 'chatgpt'
+    }
+
+    const result = findFailoverService(state)
+    expect(result).toBeNull()
+  })
+
+  it('should exclude the primary service', () => {
+    const state: MonitorState = {
+      services: {
+        chatgpt: makeStatus('chatgpt', 'healthy', 50),
+        claude: makeStatus('claude', 'healthy', 100),
+        gemini: makeStatus('gemini', 'healthy', 200),
+        grok: makeStatus('grok', 'healthy', 300)
+      },
+      lastAlert: null,
+      alertThreshold: 80,
+      failoverEnabled: true,
+      primaryService: 'chatgpt'
+    }
+
+    const result = findFailoverService(state)
+    expect(result).toBe('claude')
+  })
+
+  it('should pick gemini when claude is degraded', () => {
+    const state: MonitorState = {
+      services: {
+        chatgpt: makeStatus('chatgpt', 'down', null),
+        claude: makeStatus('claude', 'degraded', 5000),
+        gemini: makeStatus('gemini', 'healthy', 150),
+        grok: makeStatus('grok', 'down', null)
+      },
+      lastAlert: null,
+      alertThreshold: 80,
+      failoverEnabled: true,
+      primaryService: 'chatgpt'
+    }
+
+    const result = findFailoverService(state)
+    expect(result).toBe('gemini')
+  })
+})
@@ -0,0 +1,39 @@
+globalThis.chrome = {
+  runtime: {
+    onMessage: {
+      addListener: () => {},
+    },
+    onInstalled: {
+      addListener: () => {},
+    },
+    onStartup: {
+      addListener: () => {},
+    },
+  },
+  alarms: {
+    onAlarm: {
+      addListener: () => {},
+    },
+    create: async () => {},
+  },
+  tabs: {
+    onUpdated: {
+      addListener: () => {},
+    },
+    create: async () => {},
+    sendMessage: async () => {},
+  },
+  action: {
+    setBadgeText: async () => {},
+    setBadgeBackgroundColor: async () => {},
+  },
+  notifications: {
+    create: async () => {},
+  },
+  storage: {
+    local: {
+      get: async () => ({}),
+      set: async () => {},
+    },
+  },
+} as any;
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "lib": ["ES2022", "DOM"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "jsx": "react-jsx",
+    "outDir": "./dist",
+    "rootDir": ".",
+    "types": ["chrome", "vitest/globals"]
+  },
+  "include": ["src/**/*", "tests/**/*"],
+  "exclude": ["node_modules", "dist"]
+}
@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import { crx } from '@crxjs/vite-plugin'
+import manifest from './manifest.json' with { type: 'json' }
+
+export default defineConfig({
+  plugins: [
+    react(),
+    crx({ manifest }),
+  ],
+  build: {
+    outDir: 'dist',
+    emptyOutDir: true,
+  },
+})
@@ -0,0 +1,9 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    globals: true,
+    environment: 'jsdom',
+    setupFiles: ['./tests/setup.ts'],
+  },
+})