ai-agent-session-center 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +618 -0
- package/bin/cli.js +20 -0
- package/hooks/dashboard-hook-codex.sh +67 -0
- package/hooks/dashboard-hook-gemini.sh +102 -0
- package/hooks/dashboard-hook.ps1 +147 -0
- package/hooks/dashboard-hook.sh +142 -0
- package/hooks/dashboard-hooks-backup.json +103 -0
- package/hooks/install-hooks.js +543 -0
- package/hooks/reset.js +357 -0
- package/hooks/setup-wizard.js +156 -0
- package/package.json +52 -0
- package/public/css/dashboard.css +10200 -0
- package/public/index.html +915 -0
- package/public/js/analyticsPanel.js +467 -0
- package/public/js/app.js +1148 -0
- package/public/js/browserDb.js +806 -0
- package/public/js/chartUtils.js +383 -0
- package/public/js/historyPanel.js +298 -0
- package/public/js/movementManager.js +155 -0
- package/public/js/navController.js +32 -0
- package/public/js/robotManager.js +526 -0
- package/public/js/sceneManager.js +7 -0
- package/public/js/sessionPanel.js +2477 -0
- package/public/js/settingsManager.js +924 -0
- package/public/js/soundManager.js +249 -0
- package/public/js/statsPanel.js +118 -0
- package/public/js/terminalManager.js +391 -0
- package/public/js/timelinePanel.js +278 -0
- package/public/js/wsClient.js +88 -0
- package/server/apiRouter.js +321 -0
- package/server/config.js +120 -0
- package/server/hookProcessor.js +55 -0
- package/server/hookRouter.js +18 -0
- package/server/hookStats.js +107 -0
- package/server/index.js +314 -0
- package/server/logger.js +67 -0
- package/server/mqReader.js +218 -0
- package/server/serverConfig.js +27 -0
- package/server/sessionStore.js +1049 -0
- package/server/sshManager.js +339 -0
- package/server/wsManager.js +83 -0
|
@@ -0,0 +1,915 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>AI Agent Session Center</title>
|
|
7
|
+
<link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='6' fill='%230a0a1a'/%3E%3Ccircle cx='16' cy='13' r='7' fill='none' stroke='%2300e5ff' stroke-width='2'/%3E%3Ccircle cx='13.5' cy='12' r='1.5' fill='%2300e5ff'/%3E%3Ccircle cx='18.5' cy='12' r='1.5' fill='%2300e5ff'/%3E%3Cpath d='M13 16 Q16 19 19 16' fill='none' stroke='%2300e5ff' stroke-width='1' stroke-linecap='round'/%3E%3Crect x='14.5' y='4' width='3' height='3' rx='1' fill='%2300e5ff'/%3E%3Cline x1='16' y1='7' x2='16' y2='6' stroke='%2300e5ff' stroke-width='1.5'/%3E%3Crect x='9' y='22' width='14' height='6' rx='2' fill='none' stroke='%23ff9100' stroke-width='1.5'/%3E%3Cline x1='12' y1='24' x2='12' y2='26' stroke='%23ff9100' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='16' y1='24' x2='16' y2='26' stroke='%23ff9100' stroke-width='1' stroke-linecap='round'/%3E%3Cline x1='20' y1='24' x2='20' y2='26' stroke='%23ff9100' stroke-width='1' stroke-linecap='round'/%3E%3C/svg%3E">
|
|
8
|
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
9
|
+
<link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" rel="stylesheet">
|
|
10
|
+
<link rel="stylesheet" href="css/dashboard.css">
|
|
11
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/css/xterm.min.css">
|
|
12
|
+
<script src="https://cdn.jsdelivr.net/npm/@xterm/xterm@5/lib/xterm.js"></script>
|
|
13
|
+
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-fit@0/lib/addon-fit.js"></script>
|
|
14
|
+
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-unicode11@0/lib/addon-unicode11.js"></script>
|
|
15
|
+
<script src="https://cdn.jsdelivr.net/npm/@xterm/addon-web-links@0/lib/addon-web-links.js"></script>
|
|
16
|
+
</head>
|
|
17
|
+
<body>
|
|
18
|
+
<!-- Header -->
|
|
19
|
+
<header id="header">
|
|
20
|
+
<div class="header-title">
|
|
21
|
+
AI AGENT SESSION CENTER
|
|
22
|
+
</div>
|
|
23
|
+
<div id="live-search-bar">
|
|
24
|
+
<input type="text" id="live-search" placeholder="Filter sessions... ( / )">
|
|
25
|
+
</div>
|
|
26
|
+
<div id="global-stats"></div>
|
|
27
|
+
<button id="open-settings" class="settings-gear" title="Settings (S)">⚙</button>
|
|
28
|
+
</header>
|
|
29
|
+
|
|
30
|
+
<!-- Navigation Bar -->
|
|
31
|
+
<nav id="main-nav">
|
|
32
|
+
<button class="nav-btn active" data-view="live">LIVE SESSIONS</button>
|
|
33
|
+
<button class="nav-btn" data-view="history">SESSION HISTORY</button>
|
|
34
|
+
<button class="nav-btn" data-view="timeline">TIMELINE</button>
|
|
35
|
+
<button class="nav-btn" data-view="analytics">ANALYTICS</button>
|
|
36
|
+
<div class="nav-spacer"></div>
|
|
37
|
+
<div id="nav-actions">
|
|
38
|
+
<button id="nav-actions-toggle" class="nav-actions-toggle" title="Toggle actions">☰</button>
|
|
39
|
+
<div id="nav-actions-items">
|
|
40
|
+
<button id="qa-new-session" class="qa-btn qa-btn-terminal" title="Launch a new Claude session via SSH">+ NEW SESSION</button>
|
|
41
|
+
<button id="qa-quick-session" class="qa-btn qa-btn-quick" title="Quick launch with last config + label">⚡ QUICK</button>
|
|
42
|
+
<button id="qa-oneoff" class="qa-btn qa-btn-oneoff" title="Launch a one-off session (auto-review reminder)">ONEOFF</button>
|
|
43
|
+
<button id="qa-heavy" class="qa-btn qa-btn-heavy" title="Launch a high-priority session (auto-pinned, bold frame)">★ HEAVY</button>
|
|
44
|
+
<button id="qa-important" class="qa-btn qa-btn-important" title="Launch an important session (alert on completion)">⚠ IMPORTANT</button>
|
|
45
|
+
<button id="qa-new-group" class="qa-btn" title="Create a new group">+ NEW GROUP</button>
|
|
46
|
+
<div class="qa-separator"></div>
|
|
47
|
+
<button id="qa-mute-all" class="qa-btn" title="Mute all sessions">♫ MUTE ALL</button>
|
|
48
|
+
<button id="qa-archive-ended" class="qa-btn" title="Archive all ended sessions">⇩ ARCHIVE ENDED</button>
|
|
49
|
+
</div>
|
|
50
|
+
<button id="shortcuts-btn" class="nav-shortcuts-btn" title="Keyboard Shortcuts (?)"><svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="1" y="3" width="14" height="10" rx="2"/><line x1="4" y1="6" x2="5" y2="6"/><line x1="7" y1="6" x2="9" y2="6"/><line x1="11" y1="6" x2="12" y2="6"/><line x1="4" y1="9" x2="12" y2="9"/></svg></button>
|
|
51
|
+
</div>
|
|
52
|
+
</nav>
|
|
53
|
+
|
|
54
|
+
<!-- Keyboard Shortcuts Panel -->
|
|
55
|
+
<div id="shortcuts-modal" class="modal-overlay hidden">
|
|
56
|
+
<div class="modal-panel shortcuts-panel">
|
|
57
|
+
<div class="shortcuts-header">
|
|
58
|
+
<h3>Keyboard Shortcuts</h3>
|
|
59
|
+
<button id="shortcuts-close" class="modal-close">×</button>
|
|
60
|
+
</div>
|
|
61
|
+
<div class="shortcuts-body">
|
|
62
|
+
<div class="shortcuts-section">
|
|
63
|
+
<h4>Global</h4>
|
|
64
|
+
<div class="shortcut-row"><kbd>/</kbd><span>Focus search</span></div>
|
|
65
|
+
<div class="shortcut-row"><kbd>S</kbd><span>Toggle settings</span></div>
|
|
66
|
+
<div class="shortcut-row"><kbd>M</kbd><span>Mute / unmute all</span></div>
|
|
67
|
+
<div class="shortcut-row"><kbd>T</kbd><span>New session (none selected)</span></div>
|
|
68
|
+
<div class="shortcut-row"><kbd>Esc</kbd><span>Close panel / modal</span></div>
|
|
69
|
+
<div class="shortcut-row"><kbd>?</kbd><span>Toggle this panel</span></div>
|
|
70
|
+
</div>
|
|
71
|
+
<div class="shortcuts-section">
|
|
72
|
+
<h4>Selected Session</h4>
|
|
73
|
+
<div class="shortcut-row"><kbd>K</kbd><span>Kill process</span></div>
|
|
74
|
+
<div class="shortcut-row"><kbd>A</kbd><span>Archive session</span></div>
|
|
75
|
+
</div>
|
|
76
|
+
<div class="shortcuts-section">
|
|
77
|
+
<h4>Terminal</h4>
|
|
78
|
+
<div class="shortcut-row"><kbd>F11</kbd><span>Toggle fullscreen</span></div>
|
|
79
|
+
<div class="shortcut-row"><kbd>Ctrl+Enter</kbd><span>Send queued prompt</span></div>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
|
|
85
|
+
<!-- Live Sessions View -->
|
|
86
|
+
<div id="view-live" class="view-panel active">
|
|
87
|
+
<!-- Group containers injected here -->
|
|
88
|
+
<div id="groups-container"></div>
|
|
89
|
+
|
|
90
|
+
<!-- Ungrouped Session Cards Grid -->
|
|
91
|
+
<main id="sessions-grid"></main>
|
|
92
|
+
|
|
93
|
+
<!-- Empty State -->
|
|
94
|
+
<div id="empty-state">
|
|
95
|
+
<div class="empty-icon">●</div>
|
|
96
|
+
<h2>No Active Sessions</h2>
|
|
97
|
+
<p>Open a Claude Code session to see it appear here</p>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<!-- Session History View -->
|
|
103
|
+
<div id="view-history" class="view-panel hidden">
|
|
104
|
+
<div id="history-controls">
|
|
105
|
+
<input type="text" id="search-input" placeholder="Search sessions...">
|
|
106
|
+
<select id="history-project-filter">
|
|
107
|
+
<option value="">All Projects</option>
|
|
108
|
+
</select>
|
|
109
|
+
<select id="history-status-filter">
|
|
110
|
+
<option value="">All Statuses</option>
|
|
111
|
+
<option value="ended">Ended</option>
|
|
112
|
+
<option value="idle">Idle</option>
|
|
113
|
+
<option value="working">Working</option>
|
|
114
|
+
<option value="waiting">Waiting</option>
|
|
115
|
+
<option value="archived">Archived</option>
|
|
116
|
+
</select>
|
|
117
|
+
<input type="date" id="history-date-from" placeholder="From">
|
|
118
|
+
<input type="date" id="history-date-to" placeholder="To">
|
|
119
|
+
<select id="history-sort-by">
|
|
120
|
+
<option value="date">Date</option>
|
|
121
|
+
<option value="duration">Duration</option>
|
|
122
|
+
<option value="prompts">Prompts</option>
|
|
123
|
+
<option value="tools">Tools</option>
|
|
124
|
+
</select>
|
|
125
|
+
<button id="history-sort-dir" class="nav-btn" title="Toggle sort direction">DESC</button>
|
|
126
|
+
</div>
|
|
127
|
+
<div id="history-results"></div>
|
|
128
|
+
<div id="history-pagination"></div>
|
|
129
|
+
</div>
|
|
130
|
+
|
|
131
|
+
<!-- Timeline View -->
|
|
132
|
+
<div id="view-timeline" class="view-panel hidden">
|
|
133
|
+
<div id="timeline-controls">
|
|
134
|
+
<select id="timeline-granularity">
|
|
135
|
+
<option value="hour">Hourly</option>
|
|
136
|
+
<option value="day">Daily</option>
|
|
137
|
+
<option value="week">Weekly</option>
|
|
138
|
+
</select>
|
|
139
|
+
<select id="timeline-project-filter">
|
|
140
|
+
<option value="">All Projects</option>
|
|
141
|
+
</select>
|
|
142
|
+
<input type="date" id="timeline-date-from" placeholder="From">
|
|
143
|
+
<input type="date" id="timeline-date-to" placeholder="To">
|
|
144
|
+
</div>
|
|
145
|
+
<div id="timeline-chart"></div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<!-- Analytics View -->
|
|
149
|
+
<div id="view-analytics" class="view-panel hidden">
|
|
150
|
+
<div id="analytics-summary"></div>
|
|
151
|
+
<div id="analytics-grid">
|
|
152
|
+
<div class="analytics-card">
|
|
153
|
+
<h4>Tool Usage</h4>
|
|
154
|
+
<div id="tool-usage-chart"></div>
|
|
155
|
+
</div>
|
|
156
|
+
<div class="analytics-card">
|
|
157
|
+
<h4>Duration Trends</h4>
|
|
158
|
+
<div id="duration-trends-chart"></div>
|
|
159
|
+
</div>
|
|
160
|
+
<div class="analytics-card">
|
|
161
|
+
<h4>Active Projects</h4>
|
|
162
|
+
<div id="active-projects-chart"></div>
|
|
163
|
+
</div>
|
|
164
|
+
<div class="analytics-card">
|
|
165
|
+
<h4>Daily Heatmap</h4>
|
|
166
|
+
<div id="daily-heatmap-chart"></div>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
|
|
171
|
+
<!-- Activity Feed -->
|
|
172
|
+
<footer id="activity-feed" class="collapsed">
|
|
173
|
+
<div class="feed-header">
|
|
174
|
+
<span>ACTIVITY FEED</span>
|
|
175
|
+
<button id="feed-collapse-btn" class="feed-collapse-btn" title="Collapse activity feed">▼</button>
|
|
176
|
+
</div>
|
|
177
|
+
<div id="feed-entries"></div>
|
|
178
|
+
</footer>
|
|
179
|
+
|
|
180
|
+
<!-- Click-to-Select Detail Panel (slides in from right) -->
|
|
181
|
+
<div id="session-detail-overlay" class="hidden">
|
|
182
|
+
<div id="session-detail-panel">
|
|
183
|
+
<div class="detail-resize-handle" id="detail-resize-handle"></div>
|
|
184
|
+
<button id="close-detail">×</button>
|
|
185
|
+
<div class="detail-header">
|
|
186
|
+
<div class="detail-char-preview" id="detail-char-preview"></div>
|
|
187
|
+
<div class="detail-header-text">
|
|
188
|
+
<div class="detail-header-top">
|
|
189
|
+
<div class="detail-header-titles">
|
|
190
|
+
<h3 id="detail-project-name"></h3>
|
|
191
|
+
<div class="detail-title-row">
|
|
192
|
+
<input type="text" id="detail-title" placeholder="Add session title..." class="detail-title-input">
|
|
193
|
+
<input type="text" id="detail-label" list="detail-label-suggestions" placeholder="Label..." class="detail-label-input" autocomplete="off">
|
|
194
|
+
<datalist id="detail-label-suggestions"></datalist>
|
|
195
|
+
</div>
|
|
196
|
+
<div class="detail-label-chips" id="detail-label-chips"></div>
|
|
197
|
+
</div>
|
|
198
|
+
<select id="detail-char-model" class="detail-char-select">
|
|
199
|
+
<option value="">Default (global)</option>
|
|
200
|
+
<option value="robot">Robot</option>
|
|
201
|
+
<option value="cat">Cat</option>
|
|
202
|
+
<option value="alien">Alien</option>
|
|
203
|
+
<option value="ghost">Ghost</option>
|
|
204
|
+
<option value="orb">Orb</option>
|
|
205
|
+
<option value="dragon">Dragon</option>
|
|
206
|
+
<option value="penguin">Penguin</option>
|
|
207
|
+
<option value="octopus">Octopus</option>
|
|
208
|
+
<option value="mushroom">Mushroom</option>
|
|
209
|
+
<option value="fox">Fox</option>
|
|
210
|
+
<option value="unicorn">Unicorn</option>
|
|
211
|
+
<option value="jellyfish">Jellyfish</option>
|
|
212
|
+
<option value="owl">Owl</option>
|
|
213
|
+
<option value="bat">Bat</option>
|
|
214
|
+
<option value="cactus">Cactus</option>
|
|
215
|
+
<option value="slime">Slime</option>
|
|
216
|
+
<option value="pumpkin">Pumpkin</option>
|
|
217
|
+
<option value="yeti">Yeti</option>
|
|
218
|
+
<option value="crystal">Crystal</option>
|
|
219
|
+
<option value="bee">Bee</option>
|
|
220
|
+
</select>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="detail-meta">
|
|
223
|
+
<span id="detail-status-badge"></span>
|
|
224
|
+
<span id="detail-model"></span>
|
|
225
|
+
<span id="detail-duration"></span>
|
|
226
|
+
</div>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
|
|
230
|
+
<!-- Control buttons -->
|
|
231
|
+
<div class="ctrl-bar">
|
|
232
|
+
<button class="ctrl-btn kill" id="ctrl-kill" title="Kill Process">KILL</button>
|
|
233
|
+
<button class="ctrl-btn archive" id="ctrl-archive" title="Move to History">ARCHIVE</button>
|
|
234
|
+
<button class="ctrl-btn summarize" id="ctrl-summarize" title="Summarize & Archive">SUMMARIZE</button>
|
|
235
|
+
<button class="ctrl-btn delete" id="ctrl-delete" title="Permanently Delete Session">DELETE</button>
|
|
236
|
+
<button class="ctrl-btn alert" id="ctrl-alert" title="Duration Alert">ALERT</button>
|
|
237
|
+
<select id="detail-group-select" class="ctrl-select" title="Assign to group">
|
|
238
|
+
<option value="">No group</option>
|
|
239
|
+
</select>
|
|
240
|
+
</div>
|
|
241
|
+
|
|
242
|
+
<!-- Tab navigation -->
|
|
243
|
+
<div class="detail-tabs">
|
|
244
|
+
<button class="tab active" data-tab="terminal">Terminal</button>
|
|
245
|
+
<button class="tab" data-tab="conversation">Prompt History</button>
|
|
246
|
+
<button class="tab" data-tab="notes">Notes</button>
|
|
247
|
+
<button class="tab" data-tab="activity">Activity</button>
|
|
248
|
+
<button class="tab" data-tab="summary">Summary</button>
|
|
249
|
+
</div>
|
|
250
|
+
|
|
251
|
+
<!-- Terminal Tab -->
|
|
252
|
+
<div class="tab-content active" id="tab-terminal">
|
|
253
|
+
<div class="terminal-toolbar">
|
|
254
|
+
<div id="terminal-status" class="terminal-status">Not connected</div>
|
|
255
|
+
<button id="terminal-fullscreen-btn" class="terminal-fullscreen-btn" title="Fullscreen (F11)">⛶ FULLSCREEN</button>
|
|
256
|
+
</div>
|
|
257
|
+
<div id="terminal-container"></div>
|
|
258
|
+
<!-- Collapsible Prompt Queue below terminal -->
|
|
259
|
+
<div id="terminal-queue-panel" class="terminal-queue-panel collapsed">
|
|
260
|
+
<button id="terminal-queue-toggle" class="terminal-queue-toggle">
|
|
261
|
+
<span class="terminal-queue-toggle-arrow">▶</span>
|
|
262
|
+
PROMPT QUEUE <span id="terminal-queue-count" class="terminal-queue-count"></span>
|
|
263
|
+
</button>
|
|
264
|
+
<div class="terminal-queue-body">
|
|
265
|
+
<div class="queue-compose">
|
|
266
|
+
<textarea id="queue-textarea" placeholder="Add a prompt to the queue..." rows="2"></textarea>
|
|
267
|
+
<button id="queue-add-btn" class="ctrl-btn queue">ADD</button>
|
|
268
|
+
</div>
|
|
269
|
+
<div id="queue-list" class="terminal-queue-list"></div>
|
|
270
|
+
</div>
|
|
271
|
+
</div>
|
|
272
|
+
</div>
|
|
273
|
+
|
|
274
|
+
<!-- Prompt History Tab -->
|
|
275
|
+
<div class="tab-content" id="tab-conversation">
|
|
276
|
+
<div id="detail-conversation"></div>
|
|
277
|
+
</div>
|
|
278
|
+
|
|
279
|
+
<!-- Notes Tab -->
|
|
280
|
+
<div class="tab-content" id="tab-notes">
|
|
281
|
+
<div class="notes-compose">
|
|
282
|
+
<textarea id="note-textarea" placeholder="Add a note..." rows="3"></textarea>
|
|
283
|
+
<button id="save-note" class="ctrl-btn notes">Save Note</button>
|
|
284
|
+
</div>
|
|
285
|
+
<div id="notes-list"></div>
|
|
286
|
+
</div>
|
|
287
|
+
|
|
288
|
+
<!-- Activity Tab (combined tool calls, events, responses) -->
|
|
289
|
+
<div class="tab-content" id="tab-activity">
|
|
290
|
+
<div id="detail-activity-log"></div>
|
|
291
|
+
</div>
|
|
292
|
+
|
|
293
|
+
<!-- Summary Tab -->
|
|
294
|
+
<div class="tab-content" id="tab-summary">
|
|
295
|
+
<div id="summary-content">
|
|
296
|
+
<div class="tab-empty">No summary yet — click SUMMARIZE to generate one with AI</div>
|
|
297
|
+
</div>
|
|
298
|
+
</div>
|
|
299
|
+
</div>
|
|
300
|
+
</div>
|
|
301
|
+
|
|
302
|
+
<!-- Team Detail Modal -->
|
|
303
|
+
<div id="team-modal" class="modal-overlay hidden">
|
|
304
|
+
<div class="modal-panel team-modal-panel">
|
|
305
|
+
<div class="team-modal-header">
|
|
306
|
+
<h3 id="team-modal-name">Team</h3>
|
|
307
|
+
<span id="team-modal-count" class="team-modal-count">0 members</span>
|
|
308
|
+
<button id="team-modal-close" class="modal-close">×</button>
|
|
309
|
+
</div>
|
|
310
|
+
<div id="team-modal-grid" class="team-modal-grid"></div>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<!-- Summarize Prompt Selector Modal -->
|
|
315
|
+
<div id="summarize-modal" class="modal-overlay hidden">
|
|
316
|
+
<div class="modal-panel summarize-modal-panel">
|
|
317
|
+
<div class="summarize-modal-header">
|
|
318
|
+
<h3>Summarize Session</h3>
|
|
319
|
+
<button id="summarize-modal-close" class="modal-close">×</button>
|
|
320
|
+
</div>
|
|
321
|
+
<div class="summarize-modal-body">
|
|
322
|
+
<label class="summarize-label">Select a prompt template:</label>
|
|
323
|
+
<div id="summarize-prompt-list" class="summarize-prompt-list"></div>
|
|
324
|
+
<div class="summarize-custom-section">
|
|
325
|
+
<button id="summarize-toggle-custom" class="summarize-toggle-custom">+ Custom prompt</button>
|
|
326
|
+
<div id="summarize-custom-form" class="summarize-custom-form hidden">
|
|
327
|
+
<input type="text" id="summarize-custom-name" placeholder="Template name (e.g. Sprint Review)" class="summarize-custom-name">
|
|
328
|
+
<textarea id="summarize-custom-prompt" placeholder="Write your summary prompt instructions here..." class="summarize-custom-prompt" rows="8"></textarea>
|
|
329
|
+
<div class="summarize-custom-actions">
|
|
330
|
+
<button id="summarize-save-template" class="ctrl-btn notes">Save as Template</button>
|
|
331
|
+
<button id="summarize-use-once" class="ctrl-btn summarize">Use Once</button>
|
|
332
|
+
</div>
|
|
333
|
+
</div>
|
|
334
|
+
</div>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="summarize-modal-footer">
|
|
337
|
+
<button id="summarize-cancel" class="ctrl-btn">Cancel</button>
|
|
338
|
+
<button id="summarize-run" class="ctrl-btn summarize" disabled>Summarize</button>
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
<!-- Kill Confirmation Modal -->
|
|
344
|
+
<div id="kill-modal" class="modal-overlay hidden">
|
|
345
|
+
<div class="modal-panel">
|
|
346
|
+
<h3>Confirm Kill</h3>
|
|
347
|
+
<p id="kill-modal-msg">Are you sure you want to kill this session?</p>
|
|
348
|
+
<p style="font-size:10px;color:var(--accent-red);margin-bottom:12px;">This will send SIGTERM to the Claude process. Unsaved work may be lost.</p>
|
|
349
|
+
<div class="modal-actions">
|
|
350
|
+
<button id="kill-cancel" class="ctrl-btn">Cancel</button>
|
|
351
|
+
<button id="kill-confirm" class="ctrl-btn kill">Kill Process</button>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
</div>
|
|
355
|
+
|
|
356
|
+
<!-- Alert Configuration Modal -->
|
|
357
|
+
<div id="alert-modal" class="modal-overlay hidden">
|
|
358
|
+
<div class="modal-panel">
|
|
359
|
+
<h3>Set Duration Alert</h3>
|
|
360
|
+
<p>Alert when session exceeds:</p>
|
|
361
|
+
<div class="alert-input-row">
|
|
362
|
+
<input type="number" id="alert-minutes" min="1" value="30" class="alert-input">
|
|
363
|
+
<span>minutes</span>
|
|
364
|
+
</div>
|
|
365
|
+
<div class="modal-actions">
|
|
366
|
+
<button id="alert-cancel" class="ctrl-btn">Cancel</button>
|
|
367
|
+
<button id="alert-confirm" class="ctrl-btn alert">Set Alert</button>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
|
|
372
|
+
<!-- Settings Modal -->
|
|
373
|
+
<div id="settings-modal" class="modal-overlay hidden">
|
|
374
|
+
<div class="modal-panel settings-panel">
|
|
375
|
+
<div class="settings-header">
|
|
376
|
+
<h3>Settings</h3>
|
|
377
|
+
<span id="settings-autosave" class="autosave-indicator">Saved</span>
|
|
378
|
+
<button id="close-settings" class="modal-close">×</button>
|
|
379
|
+
</div>
|
|
380
|
+
|
|
381
|
+
<!-- Settings Tab Bar -->
|
|
382
|
+
<div class="settings-tabs">
|
|
383
|
+
<button class="settings-tab active" data-settings-tab="appearance">Appearance</button>
|
|
384
|
+
<button class="settings-tab" data-settings-tab="sounds">Sounds</button>
|
|
385
|
+
<button class="settings-tab" data-settings-tab="labels">Labels</button>
|
|
386
|
+
<button class="settings-tab" data-settings-tab="advanced">Advanced</button>
|
|
387
|
+
</div>
|
|
388
|
+
|
|
389
|
+
<!-- Appearance Tab -->
|
|
390
|
+
<div class="settings-tab-content active" id="settings-tab-appearance">
|
|
391
|
+
<div class="settings-section">
|
|
392
|
+
<h4>Theme</h4>
|
|
393
|
+
<div class="theme-grid" id="theme-grid">
|
|
394
|
+
<button class="theme-swatch active" data-theme="command-center" title="Command Center">
|
|
395
|
+
<div class="swatch-colors"><span style="background:#0a0a1a"></span><span style="background:#00e5ff"></span><span style="background:#ff9100"></span></div>
|
|
396
|
+
<span class="swatch-label">Command Center</span>
|
|
397
|
+
</button>
|
|
398
|
+
<button class="theme-swatch" data-theme="cyberpunk" title="Cyberpunk">
|
|
399
|
+
<div class="swatch-colors"><span style="background:#0d0221"></span><span style="background:#ff00ff"></span><span style="background:#00ffff"></span></div>
|
|
400
|
+
<span class="swatch-label">Cyberpunk</span>
|
|
401
|
+
</button>
|
|
402
|
+
<button class="theme-swatch" data-theme="warm" title="Warm">
|
|
403
|
+
<div class="swatch-colors"><span style="background:#faf6f1"></span><span style="background:#d97706"></span><span style="background:#b87333"></span></div>
|
|
404
|
+
<span class="swatch-label">Warm</span>
|
|
405
|
+
</button>
|
|
406
|
+
<button class="theme-swatch" data-theme="dracula" title="Dracula">
|
|
407
|
+
<div class="swatch-colors"><span style="background:#282a36"></span><span style="background:#bd93f9"></span><span style="background:#50fa7b"></span></div>
|
|
408
|
+
<span class="swatch-label">Dracula</span>
|
|
409
|
+
</button>
|
|
410
|
+
<button class="theme-swatch" data-theme="solarized" title="Solarized">
|
|
411
|
+
<div class="swatch-colors"><span style="background:#002b36"></span><span style="background:#2aa198"></span><span style="background:#cb4b16"></span></div>
|
|
412
|
+
<span class="swatch-label">Solarized</span>
|
|
413
|
+
</button>
|
|
414
|
+
<button class="theme-swatch" data-theme="nord" title="Nord">
|
|
415
|
+
<div class="swatch-colors"><span style="background:#2e3440"></span><span style="background:#88c0d0"></span><span style="background:#d08770"></span></div>
|
|
416
|
+
<span class="swatch-label">Nord</span>
|
|
417
|
+
</button>
|
|
418
|
+
<button class="theme-swatch" data-theme="monokai" title="Monokai">
|
|
419
|
+
<div class="swatch-colors"><span style="background:#272822"></span><span style="background:#66d9ef"></span><span style="background:#f92672"></span></div>
|
|
420
|
+
<span class="swatch-label">Monokai</span>
|
|
421
|
+
</button>
|
|
422
|
+
<button class="theme-swatch" data-theme="light" title="Light">
|
|
423
|
+
<div class="swatch-colors"><span style="background:#f0f2f5"></span><span style="background:#0ea5e9"></span><span style="background:#3b82f6"></span></div>
|
|
424
|
+
<span class="swatch-label">Light</span>
|
|
425
|
+
</button>
|
|
426
|
+
<button class="theme-swatch" data-theme="blonde" title="Blonde">
|
|
427
|
+
<div class="swatch-colors"><span style="background:#fdf8ef"></span><span style="background:#ca8a04"></span><span style="background:#a16207"></span></div>
|
|
428
|
+
<span class="swatch-label">Blonde</span>
|
|
429
|
+
</button>
|
|
430
|
+
</div>
|
|
431
|
+
</div>
|
|
432
|
+
|
|
433
|
+
<div class="settings-section">
|
|
434
|
+
<h4>Font Size</h4>
|
|
435
|
+
<div class="font-size-control">
|
|
436
|
+
<button class="font-btn" id="font-decrease">A-</button>
|
|
437
|
+
<span id="font-size-display">13px</span>
|
|
438
|
+
<button class="font-btn" id="font-increase">A+</button>
|
|
439
|
+
<input type="range" id="font-size-slider" min="10" max="20" value="13" step="1">
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
|
|
443
|
+
<div class="settings-section">
|
|
444
|
+
<h4>Scanline Effect</h4>
|
|
445
|
+
<label class="toggle-label">
|
|
446
|
+
<input type="checkbox" id="scanline-enabled" checked>
|
|
447
|
+
<span class="toggle-switch"></span>
|
|
448
|
+
Enable scanline overlay
|
|
449
|
+
</label>
|
|
450
|
+
</div>
|
|
451
|
+
|
|
452
|
+
<div class="settings-section">
|
|
453
|
+
<h4>Animation</h4>
|
|
454
|
+
<label style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;display:block;">Intensity (range of movement)</label>
|
|
455
|
+
<div class="anim-intensity-control">
|
|
456
|
+
<span>Low</span>
|
|
457
|
+
<input type="range" id="anim-intensity-slider" min="0" max="200" value="100" step="10">
|
|
458
|
+
<span id="anim-intensity-display">100%</span>
|
|
459
|
+
</div>
|
|
460
|
+
<label style="font-size:11px;color:var(--text-secondary);margin-bottom:6px;margin-top:8px;display:block;">Speed</label>
|
|
461
|
+
<div class="anim-intensity-control">
|
|
462
|
+
<span>Slow</span>
|
|
463
|
+
<input type="range" id="anim-speed-slider" min="30" max="200" value="100" step="10">
|
|
464
|
+
<span id="anim-speed-display">100%</span>
|
|
465
|
+
</div>
|
|
466
|
+
|
|
467
|
+
<h4 style="margin-top:16px;">Per-Action Movement Effects</h4>
|
|
468
|
+
<div class="movement-preview-section">
|
|
469
|
+
<div class="movement-preview-viewport" id="movement-preview-viewport">
|
|
470
|
+
<div class="movement-preview-label">Select an effect and click <strong>▶</strong> to preview</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
<div id="movement-action-grid" class="sound-action-grid"></div>
|
|
474
|
+
</div>
|
|
475
|
+
|
|
476
|
+
<div class="settings-section">
|
|
477
|
+
<h4>Character Model</h4>
|
|
478
|
+
<div class="char-grid" id="char-model-grid">
|
|
479
|
+
<button class="char-swatch active" data-model="robot" title="Robot">
|
|
480
|
+
<div class="char-preview char-preview-robot">
|
|
481
|
+
<div class="cp-antenna"></div>
|
|
482
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
483
|
+
<div class="cp-body"></div>
|
|
484
|
+
</div>
|
|
485
|
+
<span class="char-label">Robot</span>
|
|
486
|
+
</button>
|
|
487
|
+
<button class="char-swatch" data-model="cat" title="Cat">
|
|
488
|
+
<div class="char-preview char-preview-cat">
|
|
489
|
+
<div class="cp-ear cp-ear-l"></div><div class="cp-ear cp-ear-r"></div>
|
|
490
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
491
|
+
<div class="cp-body"></div>
|
|
492
|
+
<div class="cp-tail"></div>
|
|
493
|
+
</div>
|
|
494
|
+
<span class="char-label">Cat</span>
|
|
495
|
+
</button>
|
|
496
|
+
<button class="char-swatch" data-model="alien" title="Alien">
|
|
497
|
+
<div class="char-preview char-preview-alien">
|
|
498
|
+
<div class="cp-dome"><div class="cp-eye"></div><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
499
|
+
<div class="cp-body"></div>
|
|
500
|
+
</div>
|
|
501
|
+
<span class="char-label">Alien</span>
|
|
502
|
+
</button>
|
|
503
|
+
<button class="char-swatch" data-model="ghost" title="Ghost">
|
|
504
|
+
<div class="char-preview char-preview-ghost">
|
|
505
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
506
|
+
<div class="cp-tail"></div>
|
|
507
|
+
</div>
|
|
508
|
+
<span class="char-label">Ghost</span>
|
|
509
|
+
</button>
|
|
510
|
+
<button class="char-swatch" data-model="orb" title="Orb">
|
|
511
|
+
<div class="char-preview char-preview-orb">
|
|
512
|
+
<div class="cp-core"></div>
|
|
513
|
+
<div class="cp-ring"></div>
|
|
514
|
+
</div>
|
|
515
|
+
<span class="char-label">Orb</span>
|
|
516
|
+
</button>
|
|
517
|
+
<button class="char-swatch" data-model="dragon" title="Dragon">
|
|
518
|
+
<div class="char-preview char-preview-dragon">
|
|
519
|
+
<div class="cp-horn cp-horn-l"></div><div class="cp-horn cp-horn-r"></div>
|
|
520
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
521
|
+
<div class="cp-body"><div class="cp-wing"></div></div>
|
|
522
|
+
</div>
|
|
523
|
+
<span class="char-label">Dragon</span>
|
|
524
|
+
</button>
|
|
525
|
+
<button class="char-swatch" data-model="penguin" title="Penguin">
|
|
526
|
+
<div class="char-preview char-preview-penguin">
|
|
527
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
528
|
+
<div class="cp-beak"></div>
|
|
529
|
+
<div class="cp-body"></div>
|
|
530
|
+
</div>
|
|
531
|
+
<span class="char-label">Penguin</span>
|
|
532
|
+
</button>
|
|
533
|
+
<button class="char-swatch" data-model="octopus" title="Octopus">
|
|
534
|
+
<div class="char-preview char-preview-octopus">
|
|
535
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
536
|
+
<div class="cp-tentacles"></div>
|
|
537
|
+
</div>
|
|
538
|
+
<span class="char-label">Octopus</span>
|
|
539
|
+
</button>
|
|
540
|
+
<button class="char-swatch" data-model="mushroom" title="Mushroom">
|
|
541
|
+
<div class="char-preview char-preview-mushroom">
|
|
542
|
+
<div class="cp-cap"><div class="cp-spot"></div><div class="cp-spot"></div></div>
|
|
543
|
+
<div class="cp-stem"></div>
|
|
544
|
+
</div>
|
|
545
|
+
<span class="char-label">Mushroom</span>
|
|
546
|
+
</button>
|
|
547
|
+
<button class="char-swatch" data-model="fox" title="Fox">
|
|
548
|
+
<div class="char-preview char-preview-fox">
|
|
549
|
+
<div class="cp-ear cp-ear-l"></div><div class="cp-ear cp-ear-r"></div>
|
|
550
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
551
|
+
<div class="cp-body"></div>
|
|
552
|
+
<div class="cp-tail"></div>
|
|
553
|
+
</div>
|
|
554
|
+
<span class="char-label">Fox</span>
|
|
555
|
+
</button>
|
|
556
|
+
<button class="char-swatch" data-model="unicorn" title="Unicorn">
|
|
557
|
+
<div class="char-preview char-preview-unicorn">
|
|
558
|
+
<div class="cp-horn"></div>
|
|
559
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
560
|
+
<div class="cp-body"></div>
|
|
561
|
+
</div>
|
|
562
|
+
<span class="char-label">Unicorn</span>
|
|
563
|
+
</button>
|
|
564
|
+
<button class="char-swatch" data-model="jellyfish" title="Jellyfish">
|
|
565
|
+
<div class="char-preview char-preview-jellyfish">
|
|
566
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
567
|
+
<div class="cp-tentacles"></div>
|
|
568
|
+
</div>
|
|
569
|
+
<span class="char-label">Jellyfish</span>
|
|
570
|
+
</button>
|
|
571
|
+
<button class="char-swatch" data-model="owl" title="Owl">
|
|
572
|
+
<div class="char-preview char-preview-owl">
|
|
573
|
+
<div class="cp-tuft cp-tuft-l"></div><div class="cp-tuft cp-tuft-r"></div>
|
|
574
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
575
|
+
<div class="cp-beak"></div>
|
|
576
|
+
</div>
|
|
577
|
+
<span class="char-label">Owl</span>
|
|
578
|
+
</button>
|
|
579
|
+
<button class="char-swatch" data-model="bat" title="Bat">
|
|
580
|
+
<div class="char-preview char-preview-bat">
|
|
581
|
+
<div class="cp-ear cp-ear-l"></div><div class="cp-ear cp-ear-r"></div>
|
|
582
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
583
|
+
<div class="cp-wing"></div>
|
|
584
|
+
</div>
|
|
585
|
+
<span class="char-label">Bat</span>
|
|
586
|
+
</button>
|
|
587
|
+
<button class="char-swatch" data-model="cactus" title="Cactus">
|
|
588
|
+
<div class="char-preview char-preview-cactus">
|
|
589
|
+
<div class="cp-flower"></div>
|
|
590
|
+
<div class="cp-body"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
591
|
+
<div class="cp-arm"></div>
|
|
592
|
+
</div>
|
|
593
|
+
<span class="char-label">Cactus</span>
|
|
594
|
+
</button>
|
|
595
|
+
<button class="char-swatch" data-model="slime" title="Slime">
|
|
596
|
+
<div class="char-preview char-preview-slime">
|
|
597
|
+
<div class="cp-body"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
598
|
+
</div>
|
|
599
|
+
<span class="char-label">Slime</span>
|
|
600
|
+
</button>
|
|
601
|
+
<button class="char-swatch" data-model="pumpkin" title="Pumpkin">
|
|
602
|
+
<div class="char-preview char-preview-pumpkin">
|
|
603
|
+
<div class="cp-stem"></div>
|
|
604
|
+
<div class="cp-body"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
605
|
+
</div>
|
|
606
|
+
<span class="char-label">Pumpkin</span>
|
|
607
|
+
</button>
|
|
608
|
+
<button class="char-swatch" data-model="yeti" title="Yeti">
|
|
609
|
+
<div class="char-preview char-preview-yeti">
|
|
610
|
+
<div class="cp-horn cp-horn-l"></div><div class="cp-horn cp-horn-r"></div>
|
|
611
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
612
|
+
<div class="cp-body"></div>
|
|
613
|
+
</div>
|
|
614
|
+
<span class="char-label">Yeti</span>
|
|
615
|
+
</button>
|
|
616
|
+
<button class="char-swatch" data-model="crystal" title="Crystal">
|
|
617
|
+
<div class="char-preview char-preview-crystal">
|
|
618
|
+
<div class="cp-body"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
619
|
+
</div>
|
|
620
|
+
<span class="char-label">Crystal</span>
|
|
621
|
+
</button>
|
|
622
|
+
<button class="char-swatch" data-model="bee" title="Bee">
|
|
623
|
+
<div class="char-preview char-preview-bee">
|
|
624
|
+
<div class="cp-antenna"></div>
|
|
625
|
+
<div class="cp-head"><div class="cp-eye"></div><div class="cp-eye"></div></div>
|
|
626
|
+
<div class="cp-body"></div>
|
|
627
|
+
<div class="cp-wing"></div>
|
|
628
|
+
</div>
|
|
629
|
+
<span class="char-label">Bee</span>
|
|
630
|
+
</button>
|
|
631
|
+
</div>
|
|
632
|
+
</div>
|
|
633
|
+
</div>
|
|
634
|
+
|
|
635
|
+
<!-- Sounds Tab -->
|
|
636
|
+
<div class="settings-tab-content" id="settings-tab-sounds">
|
|
637
|
+
<div class="settings-section">
|
|
638
|
+
<h4>Master Controls</h4>
|
|
639
|
+
<div class="sound-controls">
|
|
640
|
+
<label class="toggle-label">
|
|
641
|
+
<input type="checkbox" id="sound-enabled" checked>
|
|
642
|
+
<span class="toggle-switch"></span>
|
|
643
|
+
Enable Sounds
|
|
644
|
+
</label>
|
|
645
|
+
<div class="volume-control">
|
|
646
|
+
<span>Volume</span>
|
|
647
|
+
<input type="range" id="sound-volume" min="0" max="1" step="0.1" value="0.5">
|
|
648
|
+
<span id="volume-display">50%</span>
|
|
649
|
+
</div>
|
|
650
|
+
</div>
|
|
651
|
+
</div>
|
|
652
|
+
<div class="settings-section">
|
|
653
|
+
<h4>Per-Action Sounds</h4>
|
|
654
|
+
<div id="sound-action-grid" class="sound-action-grid"></div>
|
|
655
|
+
</div>
|
|
656
|
+
</div>
|
|
657
|
+
|
|
658
|
+
<!-- Labels Tab -->
|
|
659
|
+
<div class="settings-tab-content" id="settings-tab-labels">
|
|
660
|
+
<div class="settings-section">
|
|
661
|
+
<h4>Built-in Label Alerts</h4>
|
|
662
|
+
<p class="settings-hint">Configure which sound and movement effect plays when a labeled session completes. These alerts fire on session end for ONEOFF, HEAVY, and IMPORTANT sessions.</p>
|
|
663
|
+
<div id="label-settings-grid" class="label-settings-grid"></div>
|
|
664
|
+
</div>
|
|
665
|
+
</div>
|
|
666
|
+
|
|
667
|
+
<!-- Advanced Tab -->
|
|
668
|
+
<div class="settings-tab-content" id="settings-tab-advanced">
|
|
669
|
+
<div class="settings-section">
|
|
670
|
+
<h4>Anthropic API Key <span class="settings-hint">(Claude Code)</span></h4>
|
|
671
|
+
<p class="settings-hint">Set once — automatically used for all Claude sessions.</p>
|
|
672
|
+
<div class="api-key-row">
|
|
673
|
+
<input type="password" id="settings-api-key" placeholder="sk-ant-..." class="settings-input api-key-input">
|
|
674
|
+
<button id="settings-api-key-toggle" class="api-key-toggle" title="Show/hide">SHOW</button>
|
|
675
|
+
<button id="settings-api-key-save" class="ctrl-btn notes">Save</button>
|
|
676
|
+
</div>
|
|
677
|
+
<div id="settings-api-key-status" class="settings-hint" style="margin-top:4px;"></div>
|
|
678
|
+
</div>
|
|
679
|
+
<div class="settings-section">
|
|
680
|
+
<h4>OpenAI API Key <span class="settings-hint">(Codex CLI)</span></h4>
|
|
681
|
+
<p class="settings-hint">Used when launching Codex CLI sessions.</p>
|
|
682
|
+
<div class="api-key-row">
|
|
683
|
+
<input type="password" id="settings-openai-key" placeholder="sk-..." class="settings-input api-key-input">
|
|
684
|
+
<button id="settings-openai-key-toggle" class="api-key-toggle" title="Show/hide">SHOW</button>
|
|
685
|
+
<button id="settings-openai-key-save" class="ctrl-btn notes">Save</button>
|
|
686
|
+
</div>
|
|
687
|
+
<div id="settings-openai-key-status" class="settings-hint" style="margin-top:4px;"></div>
|
|
688
|
+
</div>
|
|
689
|
+
<div class="settings-section">
|
|
690
|
+
<h4>Google API Key <span class="settings-hint">(Gemini CLI)</span></h4>
|
|
691
|
+
<p class="settings-hint">Used when launching Gemini CLI sessions.</p>
|
|
692
|
+
<div class="api-key-row">
|
|
693
|
+
<input type="password" id="settings-gemini-key" placeholder="AIza..." class="settings-input api-key-input">
|
|
694
|
+
<button id="settings-gemini-key-toggle" class="api-key-toggle" title="Show/hide">SHOW</button>
|
|
695
|
+
<button id="settings-gemini-key-save" class="ctrl-btn notes">Save</button>
|
|
696
|
+
</div>
|
|
697
|
+
<div id="settings-gemini-key-status" class="settings-hint" style="margin-top:4px;"></div>
|
|
698
|
+
</div>
|
|
699
|
+
|
|
700
|
+
<div class="settings-section">
|
|
701
|
+
<h4>Hook Trace Density</h4>
|
|
702
|
+
<p class="settings-hint">Controls which Claude Code events are tracked. Higher density = more detail but more overhead.</p>
|
|
703
|
+
<div id="hook-density-control" class="density-control">
|
|
704
|
+
<button class="density-btn" data-density="low">
|
|
705
|
+
<span class="density-btn-label">Low</span>
|
|
706
|
+
<span class="density-btn-desc">4 events: start, prompt, stop, end</span>
|
|
707
|
+
</button>
|
|
708
|
+
<button class="density-btn" data-density="medium">
|
|
709
|
+
<span class="density-btn-label">Medium</span>
|
|
710
|
+
<span class="density-btn-desc">7 events: + notifications, subagents</span>
|
|
711
|
+
</button>
|
|
712
|
+
<button class="density-btn" data-density="high">
|
|
713
|
+
<span class="density-btn-label">High</span>
|
|
714
|
+
<span class="density-btn-desc">9 events: + every tool call</span>
|
|
715
|
+
</button>
|
|
716
|
+
</div>
|
|
717
|
+
<div class="density-actions">
|
|
718
|
+
<button id="hook-install-btn" class="ctrl-btn notes">Install</button>
|
|
719
|
+
<button id="hook-uninstall-btn" class="ctrl-btn kill hidden">Uninstall</button>
|
|
720
|
+
</div>
|
|
721
|
+
<div id="hook-density-status" class="density-status">
|
|
722
|
+
<span class="hook-status-dot"></span> Checking...
|
|
723
|
+
</div>
|
|
724
|
+
</div>
|
|
725
|
+
|
|
726
|
+
<div class="settings-section">
|
|
727
|
+
<h4>Summary Prompt Templates</h4>
|
|
728
|
+
<p class="settings-hint">Manage prompt templates used when summarizing sessions. Click the star to set as default.</p>
|
|
729
|
+
<div id="settings-prompt-list" class="settings-prompt-list"></div>
|
|
730
|
+
<div class="settings-prompt-form">
|
|
731
|
+
<input type="text" id="settings-prompt-name" placeholder="Template name" class="settings-prompt-input">
|
|
732
|
+
<textarea id="settings-prompt-text" placeholder="Write your summary instructions..." class="settings-prompt-textarea" rows="6"></textarea>
|
|
733
|
+
<div class="settings-prompt-form-actions">
|
|
734
|
+
<button id="settings-prompt-save" class="ctrl-btn notes">Add Template</button>
|
|
735
|
+
<button id="settings-prompt-cancel-edit" class="ctrl-btn hidden">Cancel Edit</button>
|
|
736
|
+
</div>
|
|
737
|
+
</div>
|
|
738
|
+
</div>
|
|
739
|
+
|
|
740
|
+
<div class="settings-section">
|
|
741
|
+
<h4>Import / Export</h4>
|
|
742
|
+
<div class="advanced-actions">
|
|
743
|
+
<button id="export-settings" class="ctrl-btn export">Export Settings</button>
|
|
744
|
+
<button id="import-settings-btn" class="ctrl-btn notes">Import Settings</button>
|
|
745
|
+
<input type="file" id="import-settings-file" accept=".json" class="hidden">
|
|
746
|
+
</div>
|
|
747
|
+
</div>
|
|
748
|
+
|
|
749
|
+
<div class="settings-section">
|
|
750
|
+
<h4>Reset</h4>
|
|
751
|
+
<button id="reset-defaults" class="ctrl-btn kill">Reset All to Defaults</button>
|
|
752
|
+
</div>
|
|
753
|
+
|
|
754
|
+
<div class="settings-section">
|
|
755
|
+
<h4>Display</h4>
|
|
756
|
+
<label class="toggle-label">
|
|
757
|
+
<input type="checkbox" id="activity-feed-visible" checked>
|
|
758
|
+
<span class="toggle-switch"></span>
|
|
759
|
+
Show activity feed
|
|
760
|
+
</label>
|
|
761
|
+
</div>
|
|
762
|
+
</div>
|
|
763
|
+
</div>
|
|
764
|
+
</div>
|
|
765
|
+
|
|
766
|
+
|
|
767
|
+
<!-- New Session Modal -->
|
|
768
|
+
<div id="new-session-modal" class="modal-overlay hidden">
|
|
769
|
+
<div class="modal-panel new-session-panel">
|
|
770
|
+
<div class="new-session-header">
|
|
771
|
+
<h3>Launch Session</h3>
|
|
772
|
+
<button id="new-session-close" class="modal-close">×</button>
|
|
773
|
+
</div>
|
|
774
|
+
<div class="new-session-body">
|
|
775
|
+
<div class="ssh-field-row">
|
|
776
|
+
<div class="ssh-field ssh-field-grow">
|
|
777
|
+
<label>Session Label <span class="ssh-field-hint">(reusable tag)</span></label>
|
|
778
|
+
<input id="ssh-session-label" list="label-suggestions" placeholder="e.g. frontend, api, debug..." autocomplete="off">
|
|
779
|
+
<datalist id="label-suggestions"></datalist>
|
|
780
|
+
</div>
|
|
781
|
+
<div class="ssh-field ssh-field-grow">
|
|
782
|
+
<label>Session Title <span class="ssh-field-hint">(optional override)</span></label>
|
|
783
|
+
<input id="ssh-session-title" placeholder="Auto: project + label + #">
|
|
784
|
+
</div>
|
|
785
|
+
</div>
|
|
786
|
+
<div class="ssh-field-row">
|
|
787
|
+
<div class="ssh-field ssh-field-grow">
|
|
788
|
+
<label>Host</label>
|
|
789
|
+
<input id="ssh-host" value="localhost" placeholder="hostname or IP">
|
|
790
|
+
</div>
|
|
791
|
+
<div class="ssh-field ssh-field-small">
|
|
792
|
+
<label>Port</label>
|
|
793
|
+
<input id="ssh-port" type="number" value="22">
|
|
794
|
+
</div>
|
|
795
|
+
</div>
|
|
796
|
+
<div class="ssh-field">
|
|
797
|
+
<label>Username</label>
|
|
798
|
+
<input id="ssh-username" placeholder="your username">
|
|
799
|
+
</div>
|
|
800
|
+
<div class="ssh-field">
|
|
801
|
+
<label>Auth Method</label>
|
|
802
|
+
<select id="ssh-auth-method">
|
|
803
|
+
<option value="key">SSH Key (~/.ssh/id_rsa)</option>
|
|
804
|
+
<option value="agent">SSH Agent</option>
|
|
805
|
+
<option value="password">Password</option>
|
|
806
|
+
</select>
|
|
807
|
+
</div>
|
|
808
|
+
<div class="ssh-field hidden" id="ssh-password-row">
|
|
809
|
+
<label>Password</label>
|
|
810
|
+
<input id="ssh-password" type="password" placeholder="SSH password">
|
|
811
|
+
</div>
|
|
812
|
+
<div class="ssh-field" id="ssh-key-row">
|
|
813
|
+
<label>Key File</label>
|
|
814
|
+
<select id="ssh-key-select">
|
|
815
|
+
<option value="">Loading keys...</option>
|
|
816
|
+
</select>
|
|
817
|
+
</div>
|
|
818
|
+
<div class="ssh-field">
|
|
819
|
+
<label>Working Directory</label>
|
|
820
|
+
<input id="ssh-workdir" value="~" placeholder="~/projects/my-app">
|
|
821
|
+
</div>
|
|
822
|
+
<div class="ssh-field">
|
|
823
|
+
<label>Session Mode</label>
|
|
824
|
+
<div class="ssh-mode-toggle">
|
|
825
|
+
<button class="ssh-mode-btn active" data-mode="new">New Session</button>
|
|
826
|
+
<button class="ssh-mode-btn" data-mode="tmux-attach">Attach tmux</button>
|
|
827
|
+
<button class="ssh-mode-btn" data-mode="tmux-wrap">Wrap in tmux</button>
|
|
828
|
+
</div>
|
|
829
|
+
</div>
|
|
830
|
+
<div class="ssh-field hidden" id="ssh-tmux-row">
|
|
831
|
+
<label>tmux Sessions <button id="ssh-tmux-refresh" class="ssh-tmux-refresh" title="Refresh session list">↻</button></label>
|
|
832
|
+
<div id="ssh-tmux-list" class="ssh-tmux-list">
|
|
833
|
+
<div class="ssh-tmux-empty">Click refresh to load sessions</div>
|
|
834
|
+
</div>
|
|
835
|
+
</div>
|
|
836
|
+
<div class="ssh-field">
|
|
837
|
+
<label>Command</label>
|
|
838
|
+
<select id="ssh-command-preset">
|
|
839
|
+
<option value="claude">Claude Code</option>
|
|
840
|
+
<option value="claude --dangerously-skip-permissions">Claude Code (skip permissions)</option>
|
|
841
|
+
<option value="codex">Codex CLI</option>
|
|
842
|
+
<option value="gemini">Gemini CLI</option>
|
|
843
|
+
<option value="custom">Custom command...</option>
|
|
844
|
+
</select>
|
|
845
|
+
</div>
|
|
846
|
+
<div class="ssh-field hidden" id="ssh-custom-row">
|
|
847
|
+
<label>Custom Command</label>
|
|
848
|
+
<input id="ssh-custom-command" placeholder="e.g. claude --verbose">
|
|
849
|
+
</div>
|
|
850
|
+
<div class="ssh-field">
|
|
851
|
+
<label>API Key <span class="ssh-field-hint">(optional — overrides global setting)</span></label>
|
|
852
|
+
<input id="ssh-api-key" type="password" placeholder="Uses global key if empty">
|
|
853
|
+
</div>
|
|
854
|
+
<div class="ssh-field">
|
|
855
|
+
<label>Terminal Theme</label>
|
|
856
|
+
<select id="ssh-terminal-theme">
|
|
857
|
+
<option value="default">Default (Dashboard)</option>
|
|
858
|
+
<option value="dark">Dark</option>
|
|
859
|
+
<option value="monokai">Monokai</option>
|
|
860
|
+
<option value="dracula">Dracula</option>
|
|
861
|
+
<option value="solarized-dark">Solarized Dark</option>
|
|
862
|
+
<option value="nord">Nord</option>
|
|
863
|
+
<option value="github-dark">GitHub Dark</option>
|
|
864
|
+
</select>
|
|
865
|
+
</div>
|
|
866
|
+
</div>
|
|
867
|
+
<div class="new-session-footer">
|
|
868
|
+
<button id="ssh-connect" class="ctrl-btn terminal">CONNECT & LAUNCH</button>
|
|
869
|
+
<button id="ssh-cancel" class="ctrl-btn kill">CANCEL</button>
|
|
870
|
+
</div>
|
|
871
|
+
</div>
|
|
872
|
+
</div>
|
|
873
|
+
|
|
874
|
+
|
|
875
|
+
<!-- Quick Session Modal -->
|
|
876
|
+
<div id="quick-session-modal" class="modal-overlay hidden">
|
|
877
|
+
<div class="modal-panel quick-session-panel">
|
|
878
|
+
<div class="quick-session-header">
|
|
879
|
+
<h3>Quick Session</h3>
|
|
880
|
+
<button id="quick-session-close" class="modal-close">×</button>
|
|
881
|
+
</div>
|
|
882
|
+
<div class="quick-session-body">
|
|
883
|
+
<p class="quick-session-hint">Pick a label and launch with your last saved config.</p>
|
|
884
|
+
<div class="quick-label-chips" id="quick-label-chips"></div>
|
|
885
|
+
<div class="quick-label-input-row">
|
|
886
|
+
<input id="quick-label-input" list="quick-label-suggestions" placeholder="Or type a new label..." autocomplete="off">
|
|
887
|
+
<datalist id="quick-label-suggestions"></datalist>
|
|
888
|
+
</div>
|
|
889
|
+
<div class="quick-workdir-row">
|
|
890
|
+
<label for="quick-workdir">Working Directory:</label>
|
|
891
|
+
<input id="quick-workdir" type="text" placeholder="~/project" autocomplete="off">
|
|
892
|
+
</div>
|
|
893
|
+
</div>
|
|
894
|
+
<div class="quick-session-footer">
|
|
895
|
+
<button id="quick-session-launch" class="ctrl-btn terminal">LAUNCH</button>
|
|
896
|
+
<button id="quick-session-cancel" class="ctrl-btn">CANCEL</button>
|
|
897
|
+
</div>
|
|
898
|
+
</div>
|
|
899
|
+
</div>
|
|
900
|
+
|
|
901
|
+
<!-- Terminal Fullscreen Overlay -->
|
|
902
|
+
<div id="terminal-fullscreen-overlay" class="terminal-fullscreen-overlay hidden">
|
|
903
|
+
<div class="terminal-fullscreen-topbar">
|
|
904
|
+
<span class="terminal-fullscreen-title">Terminal</span>
|
|
905
|
+
<button id="terminal-fullscreen-exit" class="terminal-fullscreen-exit">EXIT FULLSCREEN (F11)</button>
|
|
906
|
+
</div>
|
|
907
|
+
<div id="terminal-fullscreen-container"></div>
|
|
908
|
+
</div>
|
|
909
|
+
|
|
910
|
+
<!-- Toast Container -->
|
|
911
|
+
<div id="toast-container"></div>
|
|
912
|
+
|
|
913
|
+
<script type="module" src="js/app.js"></script>
|
|
914
|
+
</body>
|
|
915
|
+
</html>
|