feat: sidebar chat UI — streaming events, agent status, reconnect retry

Sidebar panel improvements:
- Chat tab renders streaming agent events (tool_use, text, result)
- Thinking dots animation while agent processes
- Agent error display with styled error blocks
- tryConnect() with 2s retry loop for initial connection
- Debug tabs (Activity/Refs) hidden behind gear toggle
- Clear chat button
- Compact tool call display with path shortening

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

extension/sidepanel.css

@@ -51,7 +51,7 @@ body {
   background: var(--bg-base);
   color: var(--text-body);
   font-family: var(--font-system);
-  font-size: 13px;
+  font-size: 12px;
   height: 100vh;
   display: flex;
   flex-direction: column;
@@ -124,10 +124,10 @@ body::after {
 
 .chat-bubble {
   max-width: 90%;
-  padding: 8px 12px;
+  padding: 6px 10px;
   border-radius: var(--radius-lg);
-  font-size: 13px;
+  font-size: 11px;
-  line-height: 1.5;
+  line-height: 1.4;
   word-break: break-word;
   animation: slideIn 150ms ease-out;
 }
@@ -155,15 +155,99 @@ body::after {
   font-size: 12px;
   white-space: pre-wrap;
 }
-.chat-bubble .chat-time {
+.chat-bubble .chat-time, .agent-response > .chat-time {
-  font-size: 10px;
+  font-size: 9px;
-  opacity: 0.5;
+  opacity: 0.4;
-  margin-top: 4px;
+  margin-top: 2px;
   display: block;
 }
 
-/* ─── Debug Toggle ────────────────────────────────────── */
+/* ─── Agent Streaming Response ─────────────────────────── */
-.debug-toggle {
+.agent-response {
+  align-self: flex-start;
+  max-width: 95%;
+  background: var(--bg-surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-md);
+  border-bottom-left-radius: var(--radius-sm);
+  padding: 6px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  animation: slideIn 150ms ease-out;
+}
+.agent-tool {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 3px;
+  font-size: 10px;
+  font-family: var(--font-mono);
+  overflow: hidden;
+}
+.tool-name {
+  color: var(--amber-500);
+  font-weight: 600;
+  flex-shrink: 0;
+}
+.tool-input {
+  color: var(--text-disabled);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agent-text {
+  color: var(--text-body);
+  font-size: 11px;
+  line-height: 1.4;
+  word-break: break-word;
+}
+.agent-text pre {
+  background: var(--bg-base);
+  border: 1px solid var(--border-subtle);
+  border-radius: 3px;
+  padding: 4px 6px;
+  margin: 4px 0;
+  overflow-x: auto;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  white-space: pre-wrap;
+}
+.agent-error {
+  color: var(--error);
+  font-size: 12px;
+  font-family: var(--font-mono);
+}
+
+/* Thinking dots animation */
+.agent-thinking {
+  display: flex;
+  gap: 4px;
+  padding: 4px 0;
+}
+.thinking-dot {
+  width: 4px;
+  height: 4px;
+  background: var(--text-disabled);
+  border-radius: 50%;
+  animation: thinkingPulse 1.4s ease-in-out infinite;
+}
+.thinking-dot:nth-child(2) { animation-delay: 0.2s; }
+.thinking-dot:nth-child(3) { animation-delay: 0.4s; }
+@keyframes thinkingPulse {
+  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
+  40% { opacity: 1; transform: scale(1); }
+}
+
+/* ─── Footer Buttons ──────────────────────────────────── */
+.footer-left {
+  display: flex;
+  gap: 4px;
+}
+.footer-btn, .debug-toggle {
   background: none;
   border: 1px solid var(--border);
   border-radius: var(--radius-sm);
@@ -174,7 +258,7 @@ body::after {
   cursor: pointer;
   transition: all 150ms;
 }
-.debug-toggle:hover {
+.footer-btn:hover, .debug-toggle:hover {
   color: var(--text-label);
   border-color: var(--zinc-600);
 }
@@ -407,7 +491,7 @@ body::after {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 12px;
+  padding: 6px 8px;
   background: var(--bg-surface);
   border-top: 1px solid var(--border);
   flex-shrink: 0;
@@ -415,7 +499,7 @@ body::after {
 .command-prompt {
   color: var(--amber-500);
   font-family: var(--font-mono);
-  font-size: 14px;
+  font-size: 12px;
   font-weight: 700;
   flex-shrink: 0;
   user-select: none;
@@ -425,15 +509,15 @@ body::after {
   background: var(--bg-base);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
-  padding: 8px 10px;
+  padding: 6px 8px;
   color: var(--text-heading);
   font-family: var(--font-system);
-  font-size: 13px;
+  font-size: 11px;
   outline: none;
   transition: border-color 150ms;
 }
 .command-input:focus { border-color: var(--amber-500); }
-.command-input::placeholder { color: var(--text-disabled); font-size: 12px; }
+.command-input::placeholder { color: var(--text-disabled); font-size: 10px; }
 .command-input.sent {
   border-color: var(--success);
   transition: border-color 150ms;
@@ -448,13 +532,13 @@ body::after {
   75% { transform: translateX(4px); }
 }
 .send-btn {
-  width: 32px;
+  width: 26px;
-  height: 32px;
+  height: 26px;
   background: var(--amber-500);
   border: none;
-  border-radius: var(--radius-md);
+  border-radius: var(--radius-sm);
   color: #000;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 700;
   cursor: pointer;
   flex-shrink: 0;
@@ -472,14 +556,14 @@ body::after {
 
 /* ─── Footer ──────────────────────────────────────────── */
 footer {
-  height: 32px;
+  height: 28px;
   background: var(--bg-surface);
   border-top: 1px solid var(--border);
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0 12px;
+  padding: 0 8px;
-  font-size: 11px;
+  font-size: 10px;
   color: var(--text-meta);
   flex-shrink: 0;
 }

extension/sidepanel.html

@@ -43,7 +43,10 @@
 
   <!-- Footer with connection + debug toggle -->
   <footer>
-    <button class="debug-toggle" id="debug-toggle" title="Toggle debug panels">debug</button>
+    <div class="footer-left">
+      <button class="debug-toggle" id="debug-toggle" title="Toggle debug panels">debug</button>
+      <button class="footer-btn" id="clear-chat" title="Clear chat">clear</button>
+    </div>
     <div class="footer-right">
       <span class="dot" id="footer-dot"></span>
       <span class="footer-port" id="footer-port" title="Click to change port"></span>

extension/sidepanel.js

@@ -29,25 +29,152 @@ function formatChatTime(ts) {
   return d.toLocaleTimeString('en-US', { hour12: false, hour: '2-digit', minute: '2-digit' });
 }
 
-function addChatBubble(entry) {
+// Current streaming state
+let agentContainer = null; // The container for the current agent response
+let agentTextEl = null;    // The text accumulator element
+let agentText = '';        // Accumulated text
+
+function addChatEntry(entry) {
   // Remove welcome message on first real message
   const welcome = chatMessages.querySelector('.chat-welcome');
   if (welcome) welcome.remove();
 
-  const bubble = document.createElement('div');
+  // User messages → chat bubble
-  bubble.className = `chat-bubble ${entry.role}`;
+  if (entry.role === 'user') {
+    const bubble = document.createElement('div');
+    bubble.className = 'chat-bubble user';
+    bubble.innerHTML = `${escapeHtml(entry.message)}<span class="chat-time">${formatChatTime(entry.ts)}</span>`;
+    chatMessages.appendChild(bubble);
+    bubble.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    return;
+  }
 
-  let content = escapeHtml(entry.message);
+  // Legacy assistant messages (from /sidebar-response)
-  // Simple markdown-ish: wrap ```...``` in <pre>
+  if (entry.role === 'assistant') {
-  content = content.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');
+    const bubble = document.createElement('div');
-  // Bold **text**
+    bubble.className = 'chat-bubble assistant';
-  content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    let content = escapeHtml(entry.message);
-  // Line breaks
+    content = content.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');
-  content = content.replace(/\n/g, '<br>');
+    content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    content = content.replace(/\n/g, '<br>');
+    bubble.innerHTML = `${content}<span class="chat-time">${formatChatTime(entry.ts)}</span>`;
+    chatMessages.appendChild(bubble);
+    bubble.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    return;
+  }
 
-  bubble.innerHTML = `${content}<span class="chat-time">${formatChatTime(entry.ts)}</span>`;
+  // Agent streaming events
-  chatMessages.appendChild(bubble);
+  if (entry.role === 'agent') {
-  bubble.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    handleAgentEvent(entry);
+    return;
+  }
+}
+
+function handleAgentEvent(entry) {
+  if (entry.type === 'agent_start') {
+    // Create a new agent response container
+    agentText = '';
+    agentContainer = document.createElement('div');
+    agentContainer.className = 'agent-response';
+    agentTextEl = null;
+    chatMessages.appendChild(agentContainer);
+
+    // Add thinking indicator
+    const thinking = document.createElement('div');
+    thinking.className = 'agent-thinking';
+    thinking.id = 'agent-thinking';
+    thinking.innerHTML = '<span class="thinking-dot"></span><span class="thinking-dot"></span><span class="thinking-dot"></span>';
+    agentContainer.appendChild(thinking);
+    agentContainer.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    return;
+  }
+
+  if (entry.type === 'agent_done') {
+    // Remove thinking indicator
+    const thinking = document.getElementById('agent-thinking');
+    if (thinking) thinking.remove();
+    // Add timestamp
+    if (agentContainer) {
+      const ts = document.createElement('span');
+      ts.className = 'chat-time';
+      ts.textContent = formatChatTime(entry.ts);
+      agentContainer.appendChild(ts);
+    }
+    agentContainer = null;
+    agentTextEl = null;
+    return;
+  }
+
+  if (entry.type === 'agent_error') {
+    const thinking = document.getElementById('agent-thinking');
+    if (thinking) thinking.remove();
+    if (!agentContainer) {
+      agentContainer = document.createElement('div');
+      agentContainer.className = 'agent-response';
+      chatMessages.appendChild(agentContainer);
+    }
+    const err = document.createElement('div');
+    err.className = 'agent-error';
+    err.textContent = entry.error || 'Unknown error';
+    agentContainer.appendChild(err);
+    agentContainer = null;
+    return;
+  }
+
+  if (!agentContainer) {
+    agentContainer = document.createElement('div');
+    agentContainer.className = 'agent-response';
+    chatMessages.appendChild(agentContainer);
+  }
+
+  // Remove thinking indicator on first real content
+  const thinking = document.getElementById('agent-thinking');
+  if (thinking) thinking.remove();
+
+  if (entry.type === 'tool_use') {
+    const toolEl = document.createElement('div');
+    toolEl.className = 'agent-tool';
+    const toolName = entry.tool || 'Tool';
+    const toolInput = entry.input || '';
+    toolEl.innerHTML = `<span class="tool-name">${escapeHtml(toolName)}</span> <span class="tool-input">${escapeHtml(toolInput)}</span>`;
+    agentContainer.appendChild(toolEl);
+    agentContainer.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    return;
+  }
+
+  if (entry.type === 'text' || entry.type === 'result') {
+    // Full text replacement
+    agentText = entry.text || '';
+    if (!agentTextEl) {
+      agentTextEl = document.createElement('div');
+      agentTextEl.className = 'agent-text';
+      agentContainer.appendChild(agentTextEl);
+    }
+    let content = escapeHtml(agentText);
+    content = content.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');
+    content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    content = content.replace(/\n/g, '<br>');
+    agentTextEl.innerHTML = content;
+    agentContainer.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    return;
+  }
+
+  if (entry.type === 'text_delta') {
+    // Incremental text append
+    agentText += entry.text || '';
+    if (!agentTextEl) {
+      agentTextEl = document.createElement('div');
+      agentTextEl.className = 'agent-text';
+      agentContainer.appendChild(agentTextEl);
+    }
+    let content = escapeHtml(agentText);
+    content = content.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');
+    content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+    content = content.replace(/\n/g, '<br>');
+    agentTextEl.innerHTML = content;
+    agentContainer.scrollIntoView({ behavior: 'smooth', block: 'end' });
+    return;
+  }
 }
 
 async function sendMessage() {
@@ -107,13 +234,33 @@ async function pollChat() {
     const data = await resp.json();
     if (data.entries && data.entries.length > 0) {
       for (const entry of data.entries) {
-        addChatBubble(entry);
+        addChatEntry(entry);
       }
       chatLineCount = data.total;
     }
   } catch {}
 }
 
+// ─── Clear Chat ─────────────────────────────────────────────────
+
+document.getElementById('clear-chat').addEventListener('click', async () => {
+  if (!serverUrl) return;
+  try {
+    await fetch(`${serverUrl}/sidebar-chat/clear`, { method: 'POST' });
+  } catch {}
+  // Reset local state
+  chatLineCount = 0;
+  agentContainer = null;
+  agentTextEl = null;
+  agentText = '';
+  chatMessages.innerHTML = `
+    <div class="chat-welcome">
+      <div class="chat-welcome-icon">G</div>
+      <p>Send a message to Claude Code.</p>
+      <p class="muted">Your agent will see it and act on it.</p>
+    </div>`;
+});
+
 // ─── Debug Tabs ─────────────────────────────────────────────────
 
 const debugToggle = document.getElementById('debug-toggle');
@@ -341,9 +488,18 @@ portInput.addEventListener('keydown', (e) => {
   if (e.key === 'Escape') { portInput.style.display = 'none'; portLabel.style.display = ''; }
 });
 
-chrome.runtime.sendMessage({ type: 'getServerUrl' }, (resp) => {
+// Try to connect immediately, retry every 2s until connected
-  if (resp && resp.url) updateConnection(resp.url);
+function tryConnect() {
-});
+  chrome.runtime.sendMessage({ type: 'getServerUrl' }, (resp) => {
+    if (resp && resp.url) {
+      updateConnection(resp.url);
+    } else {
+      // Retry in 2s
+      setTimeout(tryConnect, 2000);
+    }
+  });
+}
+tryConnect();
 
 // ─── Message Listener ───────────────────────────────────────────