forked from garrytan/gstack
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathsidepanel.html
More file actions
188 lines (171 loc) · 9.12 KB
/
Copy pathsidepanel.html
File metadata and controls
188 lines (171 loc) · 9.12 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="sidepanel.css">
<link rel="stylesheet" href="lib/xterm.css">
</head>
<body>
<!-- Security shield — reflects ~/.gstack/security/session-state.json status.
Hidden until the sidebar knows its state (avoids flicker on first load).
Consumes /health.security — see browse/src/security.ts getStatus(). -->
<div class="security-shield" id="security-shield" role="status" aria-label="Security status: unknown" style="display:none" title="Security">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/>
</svg>
<span class="security-shield-label" id="security-shield-label">SEC</span>
</div>
<!-- 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>
<!-- 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="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>