CalvinBackup/gstack
1
0
Fork 0
mirror of https://github.com/garrytan/gstack.git synced 2026-05-09 22:57:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: connection status pill — floating indicator when gstack controls Chrome

Browse Source 
Small pill in bottom-right corner of every page: "● gstack · 3 refs"
Shows when connected via CDP, fades to 30% opacity after 3s, full on hover.
Disappears entirely when disconnected.

Background worker now notifies content scripts on connect/disconnect state
changes so the pill appears/disappears without polling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Garry Tan
2026-03-21 12:17:38 -07:00
parent 10847933b6
commit f62377748b
3 changed files with 126 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
extension/content.css
+46 -1
View File
@@ -1,9 +1,54 @@
/* gstack browse — ref overlay styles */
/* gstack browse — ref overlay + status pill styles */
#gstack-ref-overlays {
font-family: 'SF Mono', 'Fira Code', monospace !important;
}
/* Connection status pill — bottom-right corner */
#gstack-status-pill {
position: fixed;
bottom: 16px;
right: 16px;
z-index: 2147483646;
display: flex;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: rgba(10, 10, 10, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(74, 222, 128, 0.3);
border-radius: 20px;
color: #e0e0e0;
font-family: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
font-size: 11px;
font-weight: 500;
letter-spacing: 0.02em;
pointer-events: none;
transition: opacity 0.5s ease;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}
#gstack-status-pill:hover {
opacity: 1 !important;
pointer-events: auto;
}
.gstack-pill-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 6px rgba(74, 222, 128, 0.5);
flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
#gstack-status-pill {
transition: none;
}
}
.gstack-ref-badge {
position: absolute;
background: rgba(220, 38, 38, 0.9);