mirror of
https://github.com/garrytan/gstack.git
synced 2026-09-09 14:38:59 +02:00
f4e84b4dc9
The sidebar's SEC shield has been dead UI since the PTY terminal rewrite: nothing set its data-status, nothing unhid it, and the /health.security field behind it read getStatus() off ~/.gstack/security/session-state.json — a file whose ONLY writer (sidebar-agent.ts) was deleted with the chat path. /health therefore reported a permanent 'inactive', or a stale FALSE-GREEN 'protected' wherever an old state file survived on disk (a single unit-test run was enough to plant one). A green shield sourced from leftover state reads as "no threats detected" when the real state is "not measured" — the same fail-open class as #2026. Removed (dead surfaces only): the shield markup/CSS and the stale sidepanel.js comment; the /health security field and server.ts's getStatus import; getStatus / SecurityStatus / StatusDetail / SessionState / read+writeSessionState (and security.ts's dead child_process import); the session-state + getStatus unit tests — including the round-trip test that wrote real fixture data into ~/.gstack and left /health green forever. (The PR's security-sidepanel-dom.test.ts deletion already happened on main via #2230; its resolveDisconnectCause guard landed via the #2085 typeof fix. Neither re-applied.) Kept, per ENG-OV9 — security.ts has LIVE consumers: the pure combiner (combineVerdict + THRESHOLDS), canary utilities, and extractDomain stay; server.ts's /pty-inject-scan L4 path (isSidecarAvailable + scanWithSidecar) is untouched. browse/test/server-security-surface.test.ts pins BOTH directions: the dead surface stays dead (no /health security field, no getStatus import, no reader of the security session-state file, shield markup gone) and the live half stays live (sidecar wiring in server.ts, combiner/canary exports in security.ts, /health carries no token — the v1.63 regression wall). A future re-feed from LIVE signals must update that test deliberately rather than resurrect the state-file path. F13 (same commit): CLAUDE.md's Sidebar security stack section, ARCHITECTURE.md's prompt-injection Visibility + critical-constraint paragraphs, and BROWSER.md's security section now describe the removed surfaces as history, not live features. Net -166 lines. Tests: server-security-surface + security + security-adversarial(+fixes) + security-integration + server-auth 114 pass; sidepanel-* + extension-token + extension-sender-auth 58 pass / 2 skip. Re-derived from PR #2557 by @frederik-kaster-noygear. Co-authored-by: Frederik Kaster <frederik.kaster@noygear.ai> Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
193 lines
9.2 KiB
HTML
193 lines
9.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<link rel="stylesheet" href="sidepanel.css">
|
|
<link rel="stylesheet" href="lib/xterm.css">
|
|
</head>
|
|
<body>
|
|
<!-- Connection status banner -->
|
|
<div class="conn-banner" id="conn-banner" style="display:none">
|
|
<span class="conn-banner-text" id="conn-banner-text">Reconnecting...</span>
|
|
<div class="conn-banner-actions" id="conn-banner-actions" style="display:none">
|
|
<button class="conn-btn" id="conn-reconnect">Reconnect</button>
|
|
<button class="conn-btn conn-copy" id="conn-copy" title="Copy command">/open-gstack-browser</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Browser tab bar -->
|
|
<div class="browser-tabs" id="browser-tabs" style="display:none"></div>
|
|
|
|
<!-- Terminal pane is now the sole primary surface. Activity / Refs /
|
|
Inspector still exist behind the `debug` toggle in the footer. -->
|
|
<main id="tab-terminal" class="tab-content active" role="tabpanel" aria-label="Terminal">
|
|
<!-- Toolbar with browser quick-actions on the left, Restart on the right.
|
|
Restart is always visible so the user can force a fresh claude any
|
|
time, not just from the ENDED state. -->
|
|
<div class="terminal-toolbar" id="terminal-toolbar">
|
|
<div class="terminal-toolbar-actions">
|
|
<button id="chat-cleanup-btn" class="terminal-toolbar-btn" title="Remove ads, banners, popups">🧹 Cleanup</button>
|
|
<button id="chat-screenshot-btn" class="terminal-toolbar-btn" title="Take a screenshot">📸 Screenshot</button>
|
|
<button id="chat-cookies-btn" class="terminal-toolbar-btn" title="Import cookies from your browser">🍪 Cookies</button>
|
|
</div>
|
|
<button class="terminal-toolbar-btn" id="terminal-restart-now" title="Restart Claude Code session">↻ Restart</button>
|
|
</div>
|
|
<div class="terminal-bootstrap" id="terminal-bootstrap">
|
|
<div class="terminal-bootstrap-icon">▸</div>
|
|
<p id="terminal-bootstrap-status">Starting Claude Code...</p>
|
|
<p class="muted" id="terminal-bootstrap-hint">Real PTY. Real terminal. Real claude.</p>
|
|
<pre id="loading-debug" class="muted" style="font-size:11px; font-family:'JetBrains Mono',monospace; white-space:pre-wrap; margin-top:8px; color:#71717A;"></pre>
|
|
</div>
|
|
<div class="terminal-install-card" id="terminal-install-card" style="display:none">
|
|
<p><strong>Claude Code not found</strong></p>
|
|
<p class="muted">Install: <a href="https://docs.anthropic.com/en/docs/claude-code" target="_blank">docs.anthropic.com/en/docs/claude-code</a></p>
|
|
<button class="install-retry-btn" id="terminal-install-retry">I installed it — try again</button>
|
|
</div>
|
|
<div class="terminal-mount" id="terminal-mount" style="display:none"></div>
|
|
<div class="terminal-ended" id="terminal-ended" style="display:none">
|
|
<p>Session ended.</p>
|
|
<button class="install-retry-btn" id="terminal-restart">Start a new session</button>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Debug: Activity Tab (hidden by default) -->
|
|
<main id="tab-activity" class="tab-content" 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>
|
|
|
|
<!-- Debug: Refs Tab (hidden by default) -->
|
|
<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>
|
|
|
|
<!-- Debug: Inspector Tab (hidden by default) -->
|
|
<main id="tab-inspector" class="tab-content">
|
|
<!-- Toolbar: always visible -->
|
|
<div class="inspector-toolbar" id="inspector-toolbar">
|
|
<button class="inspector-pick-btn" id="inspector-pick-btn" title="Pick an element (click, then click any element on the page)">
|
|
<span class="inspector-pick-icon">✛</span> Pick
|
|
</button>
|
|
<span class="inspector-selected" id="inspector-selected"></span>
|
|
<span class="inspector-mode-badge" id="inspector-mode-badge" style="display:none"></span>
|
|
<div style="flex:1"></div>
|
|
<button id="inspector-cleanup-btn" class="inspector-action-btn" title="Remove ads, banners, popups">🧹</button>
|
|
<button id="inspector-screenshot-btn" class="inspector-action-btn" title="Take a screenshot">📸</button>
|
|
</div>
|
|
|
|
<!-- Inspector content area -->
|
|
<div class="inspector-content" id="inspector-content">
|
|
<!-- Empty state (before first pick) -->
|
|
<div class="inspector-empty" id="inspector-empty">
|
|
<div class="inspector-empty-icon">✛</div>
|
|
<p>Pick an element to inspect</p>
|
|
<p class="muted">Click the button above, then click any element on the page</p>
|
|
</div>
|
|
|
|
<!-- Loading state -->
|
|
<div class="inspector-loading" id="inspector-loading" style="display:none">
|
|
<div class="inspector-loading-text">Inspecting...</div>
|
|
<div class="inspector-skeleton">
|
|
<div class="inspector-skeleton-bar"></div>
|
|
<div class="inspector-skeleton-bar"></div>
|
|
<div class="inspector-skeleton-bar"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Error state -->
|
|
<div class="inspector-error" id="inspector-error" style="display:none"></div>
|
|
|
|
<!-- Inspector data panels -->
|
|
<div class="inspector-panels" id="inspector-panels" style="display:none">
|
|
<!-- Box Model -->
|
|
<div class="inspector-section" id="inspector-boxmodel-section">
|
|
<div class="inspector-section-header">Box Model</div>
|
|
<div class="inspector-boxmodel" id="inspector-boxmodel"></div>
|
|
</div>
|
|
|
|
<!-- Matched Rules -->
|
|
<div class="inspector-section" id="inspector-rules-section">
|
|
<button class="inspector-section-toggle" data-section="rules" aria-expanded="true">
|
|
<span class="inspector-toggle-arrow">▼</span>
|
|
<span>Matched Rules</span>
|
|
<span class="inspector-rule-count" id="inspector-rule-count"></span>
|
|
</button>
|
|
<div class="inspector-section-body" id="inspector-rules" role="tree"></div>
|
|
</div>
|
|
|
|
<!-- Computed Styles -->
|
|
<div class="inspector-section" id="inspector-computed-section">
|
|
<button class="inspector-section-toggle collapsed" data-section="computed" aria-expanded="false">
|
|
<span class="inspector-toggle-arrow">▶</span>
|
|
<span>Computed</span>
|
|
</button>
|
|
<div class="inspector-section-body collapsed" id="inspector-computed"></div>
|
|
</div>
|
|
|
|
<!-- Quick Edit -->
|
|
<div class="inspector-section" id="inspector-quickedit-section">
|
|
<button class="inspector-section-toggle collapsed" data-section="quickedit" aria-expanded="false">
|
|
<span class="inspector-toggle-arrow">▶</span>
|
|
<span>Quick Edit</span>
|
|
</button>
|
|
<div class="inspector-section-body collapsed" id="inspector-quickedit"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Send to Agent: sticky bottom -->
|
|
<div class="inspector-send" id="inspector-send" style="display:none">
|
|
<button class="inspector-send-btn" id="inspector-send-btn">Send to Agent</button>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- Tab guardrail toast (hidden until /memory poll trips a threshold) -->
|
|
<div class="mem-toast" id="mem-toast" role="dialog" aria-label="Memory pressure warning" style="display:none">
|
|
<div class="mem-toast-header">
|
|
<strong id="mem-toast-title">High memory pressure</strong>
|
|
<button class="mem-toast-close" id="mem-toast-close" aria-label="Dismiss">×</button>
|
|
</div>
|
|
<div class="mem-toast-body" id="mem-toast-body"></div>
|
|
<div class="mem-toast-actions">
|
|
<button class="mem-toast-btn primary" id="mem-toast-close-selected">Close selected</button>
|
|
<button class="mem-toast-btn" id="mem-toast-snooze">Snooze</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer with connection + debug toggle -->
|
|
<footer>
|
|
<div class="footer-left">
|
|
<button class="debug-toggle" id="debug-toggle" title="Toggle debug panels">debug</button>
|
|
<button class="footer-btn" id="reload-sidebar" title="Reload sidebar">reload</button>
|
|
</div>
|
|
<div class="footer-right">
|
|
<span class="footer-mem" id="footer-mem" title="Process memory + tab count from $B memory (polled every 30s, paused if slow)"></span>
|
|
<span class="dot" id="footer-dot"></span>
|
|
<span class="footer-port" id="footer-port" title="Click to change port"></span>
|
|
<input type="text" class="port-input" id="port-input" placeholder="34567" autocomplete="off" style="display:none">
|
|
</div>
|
|
</footer>
|
|
|
|
<!-- Debug tab bar (hidden by default) -->
|
|
<nav class="tabs debug-tabs" id="debug-tabs" role="tablist" style="display:none">
|
|
<button class="tab" role="tab" data-tab="activity">Activity</button>
|
|
<button class="tab" role="tab" data-tab="refs">Refs</button>
|
|
<button class="tab" role="tab" data-tab="inspector">Inspector</button>
|
|
<button class="tab close-debug" id="close-debug" title="Close debug">×</button>
|
|
</nav>
|
|
|
|
<script src="lib/xterm.js"></script>
|
|
<script src="lib/xterm-addon-fit.js"></script>
|
|
<script src="sidepanel.js"></script>
|
|
<script src="sidepanel-terminal.js"></script>
|
|
</body>
|
|
</html>
|