feat(browser-ext): move browser extension to browser-ext/ and update API client to tRPC

- Create browser-ext/ with full extension code (MV3 manifest, background service worker, content script, popup, options page) - Add tRPC API client that communicates with unified monolith endpoints - Implement cache, settings, and phishing detection utilities - Create extension tRPC router in web app (getAuthStatus, linkDevice, reportPhishing) - Configure Vite build with manifest V3 support - Write unit tests for cache, phishing detector, and API client - All 20 tests passing, TypeScript lint clean
2026-05-25 18:13:44 -04:00
parent 20dc5bf785
commit b03096f19d
30 changed files with 1474 additions and 5 deletions
--- a/browser-ext/src/popup/popup.html
+++ b/browser-ext/src/popup/popup.html
@@ -0,0 +1,129 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>ShieldAI</title>
+  <style>
+    :root {
+      --primary: #6366f1;
+      --danger: #ef4444;
+      --success: #22c55e;
+      --bg: #0f172a;
+      --surface: #1e293b;
+      --text: #f8fafc;
+      --muted: #94a3b8;
+    }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: var(--bg);
+      color: var(--text);
+      width: 360px;
+      padding: 16px;
+    }
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+    .logo {
+      width: 32px;
+      height: 32px;
+      background: var(--primary);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: bold;
+      font-size: 16px;
+    }
+    .status-badge {
+      margin-left: auto;
+      padding: 4px 10px;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 600;
+    }
+    .status-badge.linked { background: var(--success); color: #052e16; }
+    .status-badge.unlinked { background: var(--danger); color: #450a0a; }
+    .section {
+      background: var(--surface);
+      border-radius: 10px;
+      padding: 12px;
+      margin-bottom: 12px;
+    }
+    .section h3 {
+      font-size: 13px;
+      color: var(--muted);
+      margin-bottom: 8px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+    .btn {
+      display: block;
+      width: 100%;
+      padding: 10px;
+      border: none;
+      border-radius: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      cursor: pointer;
+      background: var(--primary);
+      color: white;
+      margin-bottom: 8px;
+    }
+    .btn:last-child { margin-bottom: 0; }
+    .btn-outline {
+      background: transparent;
+      border: 1px solid var(--primary);
+      color: var(--primary);
+    }
+    .detection {
+      padding: 8px 0;
+      border-bottom: 1px solid rgba(255,255,255,0.06);
+      font-size: 12px;
+    }
+    .detection:last-child { border-bottom: none; }
+    .detection .label {
+      color: var(--muted);
+      font-size: 11px;
+    }
+    .detection.spam { border-left: 3px solid var(--danger); padding-left: 8px; }
+    .detection.phishing { border-left: 3px solid #eab308; padding-left: 8px; }
+    .empty-state {
+      color: var(--muted);
+      font-size: 12px;
+      text-align: center;
+      padding: 16px;
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <div class="logo">S</div>
+    <span style="font-weight:600;font-size:15px;">ShieldAI</span>
+    <span id="authBadge" class="status-badge unlinked">Unlinked</span>
+  </div>
+
+  <div class="section">
+    <h3>Quick Actions</h3>
+    <button class="btn" id="checkNumberBtn">Check Phone Number</button>
+    <button class="btn btn-outline" id="reportSpamBtn">Report Spam</button>
+  </div>
+
+  <div class="section">
+    <h3>Recent Detections</h3>
+    <div id="detections">
+      <div class="empty-state">No recent detections</div>
+    </div>
+  </div>
+
+  <div class="section" style="text-align:center;">
+    <a href="#" id="openOptions" style="color:var(--primary);font-size:12px;text-decoration:none;">Settings</a>
+  </div>
+
+  <script type="module" src="./popup.ts"></script>
+</body>
+</html>