cc-sidepanel: Brave/Chrome MV3 side-panel extension for a live Claude Code seat

extension/sidepanel.html

@@ -0,0 +1,102 @@
+<!doctype html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>CC Sidepanel</title>
+<style>
+  :root { color-scheme: dark; }
+  body {
+    margin: 0; padding: 10px; background: #16141c; color: #eae6f5;
+    font: 13px/1.4 ui-monospace, "SF Mono", Menlo, monospace;
+    display: flex; flex-direction: column; height: 100vh; box-sizing: border-box;
+  }
+  select, textarea, button {
+    font: inherit; background: #221f2b; color: #eae6f5;
+    border: 1px solid #3a3548; border-radius: 6px; padding: 6px;
+  }
+  #seat-row { display: flex; gap: 6px; margin-bottom: 8px; }
+  #seat { flex: 1; }
+  #refresh { cursor: pointer; }
+  #screen {
+    flex: 1; overflow-y: auto; white-space: pre-wrap; word-break: break-word;
+    background: #0e0c13; border: 1px solid #2c2836; border-radius: 6px;
+    padding: 8px; margin-bottom: 8px; font-size: 12px;
+  }
+  #input-row { display: flex; gap: 6px; }
+  #text { flex: 1; resize: none; height: 44px; }
+  #send { cursor: pointer; background: #6b4fd6; border-color: #6b4fd6; padding: 0 14px; }
+  #status { font-size: 11px; opacity: .6; margin-bottom: 6px; }
+  #ctx {
+    font-size: 11px; color: #9d8fd0; margin-bottom: 6px;
+    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+  }
+
+  /* Parsed blocks */
+  .blk { margin: 0 0 8px; padding-left: 8px; border-left: 2px solid transparent; }
+  .blk .tag {
+    display: block; font-size: 10px; letter-spacing: .05em;
+    text-transform: lowercase; opacity: .75; margin-bottom: 2px;
+  }
+  .blk .body { display: block; }
+
+  .blk.user {
+    border-left-color: #a78bfa;
+    background: linear-gradient(90deg, #241d3d 0%, #1b1729 100%);
+    border-radius: 0 5px 5px 0; padding: 6px 8px 6px 9px;
+    color: #ddd2ff; font-weight: 600;
+  }
+  .blk.user .tag { color: #b9a5f5; font-weight: 700; opacity: .9; }
+
+  .blk.assistant      { border-left-color: #3f8f7a; }
+  .blk.assistant .tag { color: #6ec4a8; }
+
+  .blk.tool {
+    border-left-color: #7a6a3f; background: #191621;
+    border-radius: 0 4px 4px 0; padding: 4px 6px 4px 8px;
+    font-size: 11px; color: #c8bda2;
+  }
+  .blk.tool .tag  { color: #d6b25f; }
+  .blk.tool .body { opacity: .8; }
+
+  .blk.thinking {
+    border-left-color: #4a4459; font-size: 11px; font-style: italic;
+    color: #8b83a0; opacity: .8;
+  }
+  .blk.thinking .tag { color: #6f6885; }
+
+  .blk.plain { color: #a29ab5; }
+  .blk.meta  { font-size: 10px; opacity: .35; text-align: right; margin-bottom: 6px; }
+
+  /* The live heartbeat — the seat is thinking RIGHT NOW. Pure gold, and it
+     breathes, so a glance tells you working vs finished without reading it. */
+  .blk.pulse {
+    color: #ffd700; font-weight: 700; font-size: 11.5px;
+    letter-spacing: .02em; text-shadow: 0 0 8px rgba(255, 215, 0, .35);
+    animation: pulse-breathe 1.6s ease-in-out infinite;
+    margin-bottom: 6px;
+  }
+  @keyframes pulse-breathe {
+    0%, 100% { opacity: 1; }
+    50%      { opacity: .55; }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .blk.pulse { animation: none; }
+  }
+</style>
+</head>
+<body>
+  <div id="seat-row">
+    <select id="seat"><option>loading seats…</option></select>
+    <button id="refresh" title="refresh seat list">⟳</button>
+    <button id="compact-toggle" title="showing parsed blocks — click for raw pane">🧹</button>
+  </div>
+  <div id="ctx"></div>
+  <div id="status">—</div>
+  <div id="screen">connecting…</div>
+  <div id="input-row">
+    <textarea id="text" placeholder="type, enter to send"></textarea>
+    <button id="send">send</button>
+  </div>
+  <script src="sidepanel.js"></script>
+</body>
+</html>