feat: Chrome extension Side Panel + Conductor API proposal

Chrome extension (Manifest V3, sideload): - Side Panel with live activity feed, @ref overlays, dark terminal aesthetic - Background worker: health polling, SSE relay, ref fetching - Popup: port config, connection status, side panel launcher - Content script: floating ref panel with @ref badges Conductor API proposal (docs/designs/CONDUCTOR_SESSION_API.md): - SSE endpoint for full Claude Code session mirroring in Side Panel - Discovery via HTTP endpoint (not filesystem — extensions can't read files) TODOS.md: add $B watch, multi-agent tabs, cross-platform CDP, Web Store publishing. Mark CDP mode as shipped. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-07-07 00:27:56 +02:00 · 2026-03-21 10:23:47 -07:00
parent f240893ab2
commit 410d0abd9b
14 changed files with 1258 additions and 4 deletions
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body {
+      width: 240px;
+      background: #0a0a0a;
+      color: #e0e0e0;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
+      font-size: 13px;
+      padding: 16px;
+    }
+    h1 {
+      font-size: 16px;
+      font-weight: 700;
+      color: #fff;
+      margin-bottom: 16px;
+      letter-spacing: -0.3px;
+    }
+    label {
+      display: block;
+      font-size: 12px;
+      color: #888;
+      margin-bottom: 4px;
+    }
+    input {
+      width: 100%;
+      padding: 8px;
+      background: #1a1a1a;
+      border: 1px solid #333;
+      border-radius: 4px;
+      color: #fff;
+      font-family: 'SF Mono', 'Fira Code', monospace;
+      font-size: 13px;
+      outline: none;
+      transition: border-color 0.15s;
+    }
+    input:focus { border-color: #4ade80; }
+    .status {
+      margin: 12px 0;
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #555;
+      flex-shrink: 0;
+    }
+    .dot.connected { background: #4ade80; }
+    .dot.error { background: #f87171; }
+    .dot.reconnecting {
+      background: #fbbf24;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 0.4; }
+      50% { opacity: 1; }
+    }
+    .status-text { color: #888; font-size: 12px; }
+    .status-text.connected { color: #4ade80; }
+    .details { color: #666; font-size: 11px; margin-top: 2px; }
+    button {
+      width: 100%;
+      margin-top: 12px;
+      padding: 8px;
+      background: #0a2a14;
+      border: 1px solid #4ade80;
+      border-radius: 4px;
+      color: #4ade80;
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 0.15s;
+    }
+    button:hover { background: #0f3a1c; }
+  </style>
+</head>
+<body>
+  <h1>gstack</h1>
+
+  <label>Port</label>
+  <input type="text" id="port" placeholder="34567" autocomplete="off">
+
+  <div class="status">
+    <div class="dot" id="dot"></div>
+    <span class="status-text" id="status-text">Disconnected</span>
+  </div>
+  <div class="details" id="details"></div>
+
+  <button id="side-panel-btn">Open Side Panel</button>
+
+  <script src="popup.js"></script>
+</body>
+</html>