CalvinBackup/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-07-17 21:17:23 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
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
2026-03-21 16:58:44 -07:00
parent be871b702e
commit 0551a78a0d
3 changed files with 284 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/sidepanel.css
+107 -23
View File
@@ -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;
}