mirror of
https://github.com/garrytan/gstack.git
synced 2026-05-06 05:35:46 +02:00
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>
This commit is contained in:
Garry Tan
+107
-23
@@ -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;
|
||||
line-height: 1.5;
|
||||
font-size: 11px;
|
||||
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 {
|
||||
font-size: 10px;
|
||||
opacity: 0.5;
|
||||
margin-top: 4px;
|
||||
.chat-bubble .chat-time, .agent-response > .chat-time {
|
||||
font-size: 9px;
|
||||
opacity: 0.4;
|
||||
margin-top: 2px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ─── Debug Toggle ────────────────────────────────────── */
|
||||
.debug-toggle {
|
||||
/* ─── Agent Streaming Response ─────────────────────────── */
|
||||
.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;
|
||||
height: 32px;
|
||||
width: 26px;
|
||||
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;
|
||||
font-size: 11px;
|
||||
padding: 0 8px;
|
||||
font-size: 10px;
|
||||
color: var(--text-meta);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
+173
-17
@@ -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');
|
||||
bubble.className = `chat-bubble ${entry.role}`;
|
||||
// User messages → chat bubble
|
||||
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);
|
||||
// Simple markdown-ish: wrap ```...``` in <pre>
|
||||
content = content.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');
|
||||
// Bold **text**
|
||||
content = content.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
|
||||
// Line breaks
|
||||
content = content.replace(/\n/g, '<br>');
|
||||
// Legacy assistant messages (from /sidebar-response)
|
||||
if (entry.role === 'assistant') {
|
||||
const bubble = document.createElement('div');
|
||||
bubble.className = 'chat-bubble assistant';
|
||||
let content = escapeHtml(entry.message);
|
||||
content = content.replace(/```([\s\S]*?)```/g, '<pre>$1</pre>');
|
||||
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>`;
|
||||
chatMessages.appendChild(bubble);
|
||||
bubble.scrollIntoView({ behavior: 'smooth', block: 'end' });
|
||||
// Agent streaming events
|
||||
if (entry.role === 'agent') {
|
||||
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) => {
|
||||
if (resp && resp.url) updateConnection(resp.url);
|
||||
});
|
||||
// Try to connect immediately, retry every 2s until connected
|
||||
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 ───────────────────────────────────────────
|
||||
|
||||
|
||||
Reference in New Issue
Block a user