Files
gstack/extension/sidepanel.html
T
Garry Tan 410d0abd9b feat: Chrome extension Side Panel + Conductor API proposal
Chrome extension (Manifest V3, sideload):
- Side Panel with live activity feed, @ref overlays, dark terminal aesthetic
- Background worker: health polling, SSE relay, ref fetching
- Popup: port config, connection status, side panel launcher
- Content script: floating ref panel with @ref badges

Conductor API proposal (docs/designs/CONDUCTOR_SESSION_API.md):
- SSE endpoint for full Claude Code session mirroring in Side Panel
- Discovery via HTTP endpoint (not filesystem — extensions can't read files)

TODOS.md: add $B watch, multi-agent tabs, cross-platform CDP, Web Store publishing.
Mark CDP mode as shipped.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 10:23:47 -07:00

63 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sidepanel.css">
</head>
<body>
<!-- Header -->
<header>
<div class="header-left">
<span class="monogram">G</span>
<span class="title">gstack</span>
</div>
<div class="header-right">
<span class="dot" id="header-dot"></span>
<span class="header-port" id="header-port"></span>
</div>
</header>
<!-- Tab Bar -->
<nav class="tabs" role="tablist">
<button class="tab active" role="tab" aria-selected="true" data-tab="activity">Activity</button>
<button class="tab" role="tab" aria-selected="false" data-tab="refs">Refs</button>
<button class="tab disabled" role="tab" aria-selected="false" data-tab="session" disabled title="Requires Conductor">Session</button>
</nav>
<!-- Activity Tab -->
<main id="tab-activity" class="tab-content active" role="log" aria-live="polite">
<div class="empty-state" id="empty-state">
<p>Waiting for commands...</p>
<p class="muted">Run a browse command to see activity here.</p>
</div>
<div id="activity-feed"></div>
</main>
<!-- Refs Tab -->
<main id="tab-refs" class="tab-content">
<div class="empty-state" id="refs-empty">
<p>No refs yet</p>
<p class="muted">Run <code>snapshot</code> to see element refs.</p>
</div>
<div id="refs-list"></div>
<div class="refs-footer" id="refs-footer"></div>
</main>
<!-- Session Tab -->
<main id="tab-session" class="tab-content">
<div class="session-placeholder">
<p>Full session view requires Conductor.</p>
<p class="muted">Activity tab shows browse commands.</p>
</div>
</main>
<!-- Footer -->
<footer>
<span id="footer-url"></span>
<span id="footer-info"></span>
</footer>
<script src="sidepanel.js"></script>
</body>
</html>