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
package/README.md
ADDED
|
@@ -0,0 +1,618 @@
|
|
|
1
|
+
# AI Agent Session Center
|
|
2
|
+
|
|
3
|
+
A real-time dashboard for monitoring and managing all your AI coding agent sessions. Launch, monitor, and control Claude Code, Codex CLI, and Gemini CLI sessions from a unified interface with embedded SSH terminals, approval alerts, and comprehensive analytics.
|
|
4
|
+
|
|
5
|
+

|
|
6
|
+

|
|
7
|
+

|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Quick Start
|
|
12
|
+
|
|
13
|
+
### Using npx (Recommended - No Install Required)
|
|
14
|
+
|
|
15
|
+
```bash
|
|
16
|
+
npx ai-agent-session-center
|
|
17
|
+
```
|
|
18
|
+
|
|
19
|
+
That's it! The dashboard will start at **http://localhost:3333** and automatically configure hooks.
|
|
20
|
+
|
|
21
|
+
### Global Install
|
|
22
|
+
|
|
23
|
+
```bash
|
|
24
|
+
npm install -g ai-agent-session-center
|
|
25
|
+
ai-agent-session-center
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### From Source
|
|
29
|
+
|
|
30
|
+
```bash
|
|
31
|
+
git clone <repo-url>
|
|
32
|
+
cd ai-agent-session-center
|
|
33
|
+
npm install
|
|
34
|
+
npm start
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
### CLI Options
|
|
38
|
+
|
|
39
|
+
```bash
|
|
40
|
+
ai-agent-session-center [options]
|
|
41
|
+
|
|
42
|
+
Options:
|
|
43
|
+
--port <number> Server port (default: 3333)
|
|
44
|
+
--no-open Don't auto-open browser
|
|
45
|
+
--debug Enable verbose logging
|
|
46
|
+
|
|
47
|
+
Examples:
|
|
48
|
+
npx ai-agent-session-center --port 8080
|
|
49
|
+
ai-agent-session-center --no-open --debug
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
All active AI agent sessions appear automatically as animated character cards with live status updates.
|
|
53
|
+
|
|
54
|
+
---
|
|
55
|
+
|
|
56
|
+
## Usage Guide
|
|
57
|
+
|
|
58
|
+
### Starting Your First Session
|
|
59
|
+
|
|
60
|
+
1. **Launch the dashboard:**
|
|
61
|
+
```bash
|
|
62
|
+
npm start
|
|
63
|
+
```
|
|
64
|
+
Opens at http://localhost:3333
|
|
65
|
+
|
|
66
|
+
2. **Create a session:**
|
|
67
|
+
- Click **+ NEW SESSION** button (or press `T`)
|
|
68
|
+
- Fill in the launch form:
|
|
69
|
+
- **Connection:** Choose "Local" for localhost or "SSH" for remote
|
|
70
|
+
- **Label:** Tag for organization (e.g., "frontend", "api", "debug")
|
|
71
|
+
- **Title:** Optional custom display name
|
|
72
|
+
- **CLI:** Select Claude Code, Codex CLI, Gemini CLI, or custom command
|
|
73
|
+
- **Directory:** Working directory for the session
|
|
74
|
+
- **API Key:** Optional per-session override
|
|
75
|
+
|
|
76
|
+
3. **Watch it appear:**
|
|
77
|
+
- A new animated character card appears in the dashboard
|
|
78
|
+
- The character animates based on what Claude is doing
|
|
79
|
+
- Status updates in real-time via WebSocket
|
|
80
|
+
|
|
81
|
+
### Using the Terminal
|
|
82
|
+
|
|
83
|
+
1. **Open a session's terminal:**
|
|
84
|
+
- Click any session card
|
|
85
|
+
- Click the **Terminal** tab in the detail panel
|
|
86
|
+
|
|
87
|
+
2. **Execute commands:**
|
|
88
|
+
- Type any command and press Enter
|
|
89
|
+
- Commands run in Claude's shell environment
|
|
90
|
+
- See output in real-time
|
|
91
|
+
|
|
92
|
+
3. **Queue prompts for Claude:**
|
|
93
|
+
- Type a prompt in the text area at the top
|
|
94
|
+
- Press `Ctrl+Enter` to add to queue
|
|
95
|
+
- Send when ready (queued prompts appear as chips)
|
|
96
|
+
|
|
97
|
+
4. **Fullscreen mode:**
|
|
98
|
+
- Press `F11` while terminal is focused
|
|
99
|
+
- Press `F11` again to exit
|
|
100
|
+
|
|
101
|
+
### Responding to Approvals
|
|
102
|
+
|
|
103
|
+
When Claude needs approval for a tool call:
|
|
104
|
+
|
|
105
|
+
1. **You'll notice:**
|
|
106
|
+
- Card border turns **screaming yellow**
|
|
107
|
+
- Character **shakes** with floating **"!"**
|
|
108
|
+
- **3-burst alarm** plays (repeats every 10s)
|
|
109
|
+
- Banner says "NEEDS YOUR APPROVAL"
|
|
110
|
+
|
|
111
|
+
2. **Respond:**
|
|
112
|
+
- Click the card to open detail panel
|
|
113
|
+
- Or switch to your terminal where Claude is running
|
|
114
|
+
- Approve/deny the tool call in the terminal
|
|
115
|
+
- Card returns to normal once resolved
|
|
116
|
+
|
|
117
|
+
3. **False alarm?**
|
|
118
|
+
- Fast tools (Read, Grep, Glob) auto-approve instantly
|
|
119
|
+
- Only blocking tools trigger alerts
|
|
120
|
+
- Adjust thresholds in `server/config.js` if needed
|
|
121
|
+
|
|
122
|
+
### Managing Multiple Sessions
|
|
123
|
+
|
|
124
|
+
1. **Use labels:**
|
|
125
|
+
- Launch sessions with descriptive labels
|
|
126
|
+
- Quick presets: **ONEOFF**, **★ HEAVY**, **⚠ IMPORTANT**
|
|
127
|
+
|
|
128
|
+
2. **Organize into groups:**
|
|
129
|
+
- Drag sessions onto group headers
|
|
130
|
+
- Or assign from detail panel → **Group** dropdown
|
|
131
|
+
- Groups persist in localStorage
|
|
132
|
+
|
|
133
|
+
3. **Pin important sessions:**
|
|
134
|
+
- Click the **★** icon in the detail panel
|
|
135
|
+
- Pinned sessions stay at the top
|
|
136
|
+
|
|
137
|
+
4. **Archive completed work:**
|
|
138
|
+
- Press `A` with session selected
|
|
139
|
+
- Or click **ARCHIVE** in detail panel
|
|
140
|
+
- View archived sessions in **History** tab
|
|
141
|
+
|
|
142
|
+
### Searching Session History
|
|
143
|
+
|
|
144
|
+
1. **Open History tab:**
|
|
145
|
+
- Click **History** in the navigation bar
|
|
146
|
+
|
|
147
|
+
2. **Full-text search:**
|
|
148
|
+
- Type in the search box (or press `/` anywhere)
|
|
149
|
+
- Searches prompts, responses, and tool names
|
|
150
|
+
- Powered by SQLite FTS5 for fast results
|
|
151
|
+
|
|
152
|
+
3. **Filter results:**
|
|
153
|
+
- Use dropdowns for project, status, date range
|
|
154
|
+
- Sort by date, duration, prompt count, or tool calls
|
|
155
|
+
- Paginated (50 per page)
|
|
156
|
+
|
|
157
|
+
4. **View a historical session:**
|
|
158
|
+
- Click any row to open full details
|
|
159
|
+
- All conversation history, tools, and events preserved
|
|
160
|
+
|
|
161
|
+
### Analyzing Usage Patterns
|
|
162
|
+
|
|
163
|
+
1. **Open Analytics tab:**
|
|
164
|
+
- Click **Analytics** in the navigation bar
|
|
165
|
+
|
|
166
|
+
2. **Tool Usage breakdown:**
|
|
167
|
+
- See which tools Claude uses most
|
|
168
|
+
- Bar chart with percentages
|
|
169
|
+
- Filter by date range
|
|
170
|
+
|
|
171
|
+
3. **Duration Trends:**
|
|
172
|
+
- How long your sessions run over time
|
|
173
|
+
- Choose granularity: hour/day/week/month
|
|
174
|
+
- Line chart visualization
|
|
175
|
+
|
|
176
|
+
4. **Daily Heatmap:**
|
|
177
|
+
- See when you use Claude most
|
|
178
|
+
- Hour-by-day grid
|
|
179
|
+
- Darker = more active
|
|
180
|
+
|
|
181
|
+
### Customizing Appearance
|
|
182
|
+
|
|
183
|
+
1. **Open Settings:**
|
|
184
|
+
- Click the gear icon or press `S`
|
|
185
|
+
|
|
186
|
+
2. **Change theme:**
|
|
187
|
+
- **Appearance** section → **Theme** dropdown
|
|
188
|
+
- 9 themes available (6 dark, 3 light)
|
|
189
|
+
- Changes apply instantly
|
|
190
|
+
|
|
191
|
+
3. **Adjust card size:**
|
|
192
|
+
- **Card Size** dropdown: small/compact/normal/large
|
|
193
|
+
- Useful when monitoring many sessions
|
|
194
|
+
|
|
195
|
+
4. **Character model:**
|
|
196
|
+
- **Default Character** dropdown
|
|
197
|
+
- 20 models to choose from
|
|
198
|
+
- Override per-session in detail panel
|
|
199
|
+
|
|
200
|
+
5. **Animation controls:**
|
|
201
|
+
- **Animation Intensity:** 0-100% (how dramatic)
|
|
202
|
+
- **Animation Speed:** 0.5x-3x (how fast)
|
|
203
|
+
- **Scanline Effect:** CRT-style overlay toggle
|
|
204
|
+
|
|
205
|
+
### Customizing Sounds
|
|
206
|
+
|
|
207
|
+
1. **Open Settings → Sounds:**
|
|
208
|
+
- Enable/disable sound globally
|
|
209
|
+
- Adjust master volume (0-100%)
|
|
210
|
+
|
|
211
|
+
2. **Configure per-action sounds:**
|
|
212
|
+
- 19 actions organized by category
|
|
213
|
+
- 16 available tones (chirp, ping, alarm, etc.)
|
|
214
|
+
- Click **Preview** to hear each tone
|
|
215
|
+
- Set any action to "none" to mute it
|
|
216
|
+
|
|
217
|
+
3. **Examples:**
|
|
218
|
+
- `approvalNeeded` → `urgentAlarm` (default screamer)
|
|
219
|
+
- `toolWrite` → `blip` (subtle edit notification)
|
|
220
|
+
- `sessionEnd` → `cascade` (satisfying completion)
|
|
221
|
+
|
|
222
|
+
### Customizing Movement Effects
|
|
223
|
+
|
|
224
|
+
1. **Open Settings → Movement:**
|
|
225
|
+
- Configure visual effects per action
|
|
226
|
+
- 18 effects available
|
|
227
|
+
|
|
228
|
+
2. **Effect types:**
|
|
229
|
+
- **sweat** — droplets fall from character
|
|
230
|
+
- **shake** — vibration for urgency
|
|
231
|
+
- **sparkle** — celebratory stars
|
|
232
|
+
- **fade** — ghost-like transparency
|
|
233
|
+
- **breathe** — subtle pulse
|
|
234
|
+
|
|
235
|
+
3. **Defaults:**
|
|
236
|
+
- `toolWrite` → sweat drops
|
|
237
|
+
- `approvalNeeded` → shake
|
|
238
|
+
- `sessionEnd` → fade
|
|
239
|
+
- `taskComplete` → sparkle
|
|
240
|
+
|
|
241
|
+
### Working with Teams
|
|
242
|
+
|
|
243
|
+
When Claude spawns agent teams:
|
|
244
|
+
|
|
245
|
+
1. **Auto-detection:**
|
|
246
|
+
- Dashboard detects parent/child relationships
|
|
247
|
+
- Team badge appears on parent session card
|
|
248
|
+
|
|
249
|
+
2. **View team members:**
|
|
250
|
+
- Click the **Team** badge
|
|
251
|
+
- Modal shows all team members
|
|
252
|
+
- Navigate between team members
|
|
253
|
+
|
|
254
|
+
3. **Monitoring teams:**
|
|
255
|
+
- All team members appear as separate cards
|
|
256
|
+
- Grouped together visually
|
|
257
|
+
- Each has independent status/terminal
|
|
258
|
+
|
|
259
|
+
### Advanced Workflows
|
|
260
|
+
|
|
261
|
+
**Workflow 1: Quick iteration cycles**
|
|
262
|
+
1. Launch with **⚡ QUICK** button
|
|
263
|
+
2. Terminal tab → queue multiple prompts
|
|
264
|
+
3. Send all at once with batch submit
|
|
265
|
+
4. Monitor progress via character animations
|
|
266
|
+
|
|
267
|
+
**Workflow 2: Remote development**
|
|
268
|
+
1. **+ NEW SESSION** → SSH connection
|
|
269
|
+
2. Enter hostname from your `~/.ssh/config`
|
|
270
|
+
3. Choose working directory on remote
|
|
271
|
+
4. Terminal uses native SSH (respects your agent)
|
|
272
|
+
|
|
273
|
+
**Workflow 3: Long-running tasks**
|
|
274
|
+
1. Launch session with **⚠ IMPORTANT** label
|
|
275
|
+
2. Set duration alert in detail panel
|
|
276
|
+
3. Let it run in background
|
|
277
|
+
4. Get notified when threshold exceeded
|
|
278
|
+
|
|
279
|
+
**Workflow 4: Multi-project juggling**
|
|
280
|
+
1. Create groups: "Frontend", "Backend", "DevOps"
|
|
281
|
+
2. Launch sessions with appropriate labels
|
|
282
|
+
3. Drag sessions into groups
|
|
283
|
+
4. Minimize inactive groups
|
|
284
|
+
|
|
285
|
+
**Workflow 5: Session review**
|
|
286
|
+
1. Archive completed sessions
|
|
287
|
+
2. **History** tab → search for specific work
|
|
288
|
+
3. **Export** button → download full transcript
|
|
289
|
+
4. **Summarize** → generate AI summary
|
|
290
|
+
|
|
291
|
+
---
|
|
292
|
+
|
|
293
|
+
## Core Features
|
|
294
|
+
|
|
295
|
+
### 🚀 Launch Sessions
|
|
296
|
+
|
|
297
|
+
**Three Ways to Start:**
|
|
298
|
+
|
|
299
|
+
1. **+ NEW SESSION** — Full SSH terminal with configuration:
|
|
300
|
+
- Local or remote connections (native SSH, uses your ~/.ssh/config and agent)
|
|
301
|
+
- Session labels for organization (e.g., "frontend", "api", "debug")
|
|
302
|
+
- Custom titles for disambiguation
|
|
303
|
+
- Choose CLI: Claude Code, Codex CLI, Gemini CLI, or custom command
|
|
304
|
+
- tmux integration: attach to existing sessions or wrap new ones
|
|
305
|
+
- Per-session terminal themes
|
|
306
|
+
- API keys (optional per-session override of global settings)
|
|
307
|
+
|
|
308
|
+
2. **⚡ QUICK** — Launch with last config + just pick a label
|
|
309
|
+
- Remembers your SSH config from the last full launch
|
|
310
|
+
- One-click workflow for rapid session spawning
|
|
311
|
+
|
|
312
|
+
3. **Preset Labels** — Quick buttons for common workflows:
|
|
313
|
+
- **ONEOFF** — One-off task with completion review reminder
|
|
314
|
+
- **★ HEAVY** — High-priority session (auto-pinned to top)
|
|
315
|
+
- **⚠ IMPORTANT** — Alert on completion
|
|
316
|
+
|
|
317
|
+
**Pro Tip:** Use `T` keyboard shortcut to open New Session modal
|
|
318
|
+
|
|
319
|
+
---
|
|
320
|
+
|
|
321
|
+
### 📺 Embedded Terminals
|
|
322
|
+
|
|
323
|
+
Each session gets a **full xterm.js terminal** in the detail panel:
|
|
324
|
+
|
|
325
|
+
- **Direct command execution** — Run commands in the same shell Claude is using
|
|
326
|
+
- **Prompt queue** — Add prompts to a queue, send them with Ctrl+Enter
|
|
327
|
+
- **Session persistence** — Reconnects automatically if dashboard refreshes
|
|
328
|
+
- **Fullscreen mode** — F11 to go fullscreen for focused work
|
|
329
|
+
- **Terminal themes** — 7 built-in themes (or match dashboard theme)
|
|
330
|
+
- **tmux support** — Attach to existing tmux sessions or create new ones
|
|
331
|
+
|
|
332
|
+
**Workflow:** Click any session card → Terminal tab → Start typing. Your commands run in the same environment as Claude.
|
|
333
|
+
|
|
334
|
+
---
|
|
335
|
+
|
|
336
|
+
### 🚨 Approval Alerts (Never Miss a Blocked Tool)
|
|
337
|
+
|
|
338
|
+
When Claude needs your approval for a tool call:
|
|
339
|
+
|
|
340
|
+
- Card turns **screaming yellow** with "NEEDS YOUR APPROVAL" banner
|
|
341
|
+
- Character **shakes** with floating **"!"** exclamation mark
|
|
342
|
+
- **3-burst alarm** plays and **repeats every 10 seconds** until you respond
|
|
343
|
+
- No false alarms — auto-approved tools (Read, Grep, Glob) resolve instantly
|
|
344
|
+
|
|
345
|
+
**Detection:** Monitors tool timing. If `PostToolUse` doesn't arrive within 3s (fast tools) or 15s (medium tools like WebFetch), approval is required.
|
|
346
|
+
|
|
347
|
+
**Input Detection:** Tools requiring your answer (`AskUserQuestion`, `EnterPlanMode`) trigger a distinct "WAITING FOR YOUR ANSWER" state with a softer chime sound.
|
|
348
|
+
|
|
349
|
+
---
|
|
350
|
+
|
|
351
|
+
## Live Session Dashboard
|
|
352
|
+
|
|
353
|
+
Every active Claude Code session appears as an animated character card. At a glance you can see:
|
|
354
|
+
|
|
355
|
+
- **What each session is doing** — idle, prompting, working, waiting for input, or needing approval
|
|
356
|
+
- **Project name and working directory** for each session
|
|
357
|
+
- **Live duration timer** counting up since session start
|
|
358
|
+
- **Prompt count and tool call count** updating in real time
|
|
359
|
+
- **Activity feed** at the bottom showing events as they happen
|
|
360
|
+
|
|
361
|
+
### Status Colors
|
|
362
|
+
|
|
363
|
+
| Status | What it means | Visual |
|
|
364
|
+
|--------|---------------|--------|
|
|
365
|
+
| **Idle** | No activity | Green border, calm character |
|
|
366
|
+
| **Prompting** | You just sent a prompt | Cyan pulse, walking animation |
|
|
367
|
+
| **Working** | Claude is calling tools | Orange pulse, running animation |
|
|
368
|
+
| **Waiting** | Claude finished, your turn | Soft blue, gentle pulse |
|
|
369
|
+
| **Approval** | Tool blocked, needs your yes/no | Yellow screaming, alarm sound |
|
|
370
|
+
| **Input** | Waiting for your answer | Purple glow, chime sound |
|
|
371
|
+
| **Ended** | Session closed | Red, faded, auto-removed after 60s |
|
|
372
|
+
|
|
373
|
+
### Auto-Idle Timeouts
|
|
374
|
+
|
|
375
|
+
Sessions automatically transition to prevent stale states:
|
|
376
|
+
|
|
377
|
+
- Prompting → Waiting (30s)
|
|
378
|
+
- Waiting → Idle (2 min)
|
|
379
|
+
- Working → Idle (3 min)
|
|
380
|
+
- Approval/Input → Idle (10 min safety net)
|
|
381
|
+
|
|
382
|
+
---
|
|
383
|
+
|
|
384
|
+
## 20 Character Models
|
|
385
|
+
|
|
386
|
+
All characters are CSS-animated (no WebGL required). Pick a character globally or per-session.
|
|
387
|
+
|
|
388
|
+
**Robot** · **Cat** · **Alien** · **Ghost** · **Orb** · **Dragon** · **Penguin** · **Octopus** · **Mushroom** · **Fox** · **Unicorn** · **Jellyfish** · **Owl** · **Bat** · **Cactus** · **Slime** · **Pumpkin** · **Yeti** · **Crystal** · **Bee**
|
|
389
|
+
|
|
390
|
+
Set a global default in Settings > Character Model, or override per-session in the detail panel.
|
|
391
|
+
|
|
392
|
+
---
|
|
393
|
+
|
|
394
|
+
## Session Detail Panel
|
|
395
|
+
|
|
396
|
+
Click any session card to open a slide-in panel with everything about that session:
|
|
397
|
+
|
|
398
|
+
- **Conversation** — full prompt/response history in order, with tool calls inline
|
|
399
|
+
- **Tool Log** — every tool call with input summaries and timestamps
|
|
400
|
+
- **Events** — raw session event stream
|
|
401
|
+
- **Notes** — attach persistent notes to any session
|
|
402
|
+
- **Summary** — AI-generated session summaries (uses prompt templates you can customize)
|
|
403
|
+
|
|
404
|
+
### Session Controls
|
|
405
|
+
|
|
406
|
+
| Button | What it does |
|
|
407
|
+
|--------|-------------|
|
|
408
|
+
| **OPEN IN EDITOR** | Jump to the project in your editor |
|
|
409
|
+
| **KILL** | Send SIGTERM to the Claude process (with confirmation) |
|
|
410
|
+
| **ARCHIVE** | Hide from live view, still accessible in history |
|
|
411
|
+
| **SUMMARIZE** | Generate an AI summary using a prompt template |
|
|
412
|
+
| **EXPORT** | Download the full session transcript as JSON |
|
|
413
|
+
| **NOTES** | Add/view persistent notes |
|
|
414
|
+
| **ALERT** | Get notified when a session exceeds a duration threshold |
|
|
415
|
+
|
|
416
|
+
You can also set per-session **character models**, **accent colors**, and **custom titles**.
|
|
417
|
+
|
|
418
|
+
---
|
|
419
|
+
|
|
420
|
+
## Session Groups
|
|
421
|
+
|
|
422
|
+
Organize sessions into named groups. Drag-and-drop or assign from the detail panel. Groups are persisted in localStorage. Useful when running many sessions across different projects.
|
|
423
|
+
|
|
424
|
+
---
|
|
425
|
+
|
|
426
|
+
## Team Detection
|
|
427
|
+
|
|
428
|
+
When Claude Code spawns agent teams (via the Agent SDK), the dashboard detects parent/child session relationships and groups them together. Click the team badge to see all members in a modal.
|
|
429
|
+
|
|
430
|
+
---
|
|
431
|
+
|
|
432
|
+
## Sound System
|
|
433
|
+
|
|
434
|
+
16 synthesized tones (no audio files needed) mapped to 19 configurable actions, all generated via the Web Audio API:
|
|
435
|
+
|
|
436
|
+
**Tones:** chirp, ping, chime, ding, blip, swoosh, click, beep, warble, buzz, cascade, fanfare, alarm, thud, urgentAlarm, none
|
|
437
|
+
|
|
438
|
+
**Actions organized by category:**
|
|
439
|
+
|
|
440
|
+
| Category | Actions |
|
|
441
|
+
|----------|---------|
|
|
442
|
+
| **Session Events** | sessionStart, sessionEnd, promptSubmit, taskComplete |
|
|
443
|
+
| **Tool Calls** | toolRead, toolWrite, toolEdit, toolBash, toolGrep, toolGlob, toolWebFetch, toolTask, toolOther |
|
|
444
|
+
| **System** | approvalNeeded, inputNeeded, alert, kill, archive, subagentStart, subagentStop |
|
|
445
|
+
|
|
446
|
+
The `urgentAlarm` is the approval screamer — a loud 3-burst square wave alarm that repeats every 10 seconds until you act.
|
|
447
|
+
|
|
448
|
+
Configure in **Settings > Sounds**: pick which tone plays for each action, adjust master volume, or mute entirely.
|
|
449
|
+
|
|
450
|
+
---
|
|
451
|
+
|
|
452
|
+
## Movement Effects
|
|
453
|
+
|
|
454
|
+
18 visual effects that trigger per-action, mirroring the sound system:
|
|
455
|
+
|
|
456
|
+
**none** · **sweat** · **energy-ring** · **sparks** · **steam** · **eye-cycle** · **think-pulse** · **head-tilt** · **float** · **breathe** · **sway** · **sparkle** · **bounce** · **flash** · **shake** · **fade** · **shrink** · **dissolve**
|
|
457
|
+
|
|
458
|
+
Each action (same 19 as sounds) can be assigned any effect. Defaults are sensible — `toolWrite` triggers sweat drops, `approvalNeeded` triggers shake, `sessionEnd` triggers fade.
|
|
459
|
+
|
|
460
|
+
---
|
|
461
|
+
|
|
462
|
+
## 9 Themes
|
|
463
|
+
|
|
464
|
+
| Dark | Light |
|
|
465
|
+
|------|-------|
|
|
466
|
+
| Command Center (default) | Light |
|
|
467
|
+
| Cyberpunk | Warm |
|
|
468
|
+
| Dracula | Blonde |
|
|
469
|
+
| Nord | |
|
|
470
|
+
| Monokai | |
|
|
471
|
+
| Solarized | |
|
|
472
|
+
|
|
473
|
+
Switch in **Settings > Appearance**. Every element respects the active theme via CSS custom properties.
|
|
474
|
+
|
|
475
|
+
---
|
|
476
|
+
|
|
477
|
+
## Session History
|
|
478
|
+
|
|
479
|
+
All sessions are persisted to a local SQLite database (`data/sessions.db`). The **History** tab gives you:
|
|
480
|
+
|
|
481
|
+
- Full-text search across all prompts, responses, and tool names (powered by FTS5)
|
|
482
|
+
- Filter by project, status, or date range
|
|
483
|
+
- Sort by date, duration, prompt count, or tool calls
|
|
484
|
+
- Pagination (50 per page)
|
|
485
|
+
|
|
486
|
+
Historical sessions from `~/.claude/projects/` are auto-imported on startup via JSONL parsing.
|
|
487
|
+
|
|
488
|
+
---
|
|
489
|
+
|
|
490
|
+
## Timeline View
|
|
491
|
+
|
|
492
|
+
Visual timeline showing when sessions were active. Switch between hourly, daily, or weekly granularity. Filter by project and date range.
|
|
493
|
+
|
|
494
|
+
---
|
|
495
|
+
|
|
496
|
+
## Analytics
|
|
497
|
+
|
|
498
|
+
The **Analytics** tab shows usage patterns:
|
|
499
|
+
|
|
500
|
+
- **Tool Usage** — bar chart of which tools Claude uses most, with percentages
|
|
501
|
+
- **Duration Trends** — how long your sessions run over time (hour/day/week/month granularity)
|
|
502
|
+
- **Active Projects** — ranked by session count
|
|
503
|
+
- **Daily Heatmap** — hour-by-day grid showing when you use Claude most
|
|
504
|
+
|
|
505
|
+
---
|
|
506
|
+
|
|
507
|
+
## Keyboard Shortcuts
|
|
508
|
+
|
|
509
|
+
| Key | Action |
|
|
510
|
+
|-----|--------|
|
|
511
|
+
| `/` | Focus search bar |
|
|
512
|
+
| `Esc` | Close panel / modal |
|
|
513
|
+
| `S` | Open settings |
|
|
514
|
+
| `K` | Kill selected session |
|
|
515
|
+
| `A` | Archive selected session |
|
|
516
|
+
| `E` | Export selected session |
|
|
517
|
+
| `N` | Session notes |
|
|
518
|
+
| `?` | Show shortcuts help |
|
|
519
|
+
|
|
520
|
+
---
|
|
521
|
+
|
|
522
|
+
## Settings
|
|
523
|
+
|
|
524
|
+
**Appearance** — theme, font size (10-20px), card size (small/compact/normal/large), scanline CRT effect, animation intensity and speed sliders, default character model
|
|
525
|
+
|
|
526
|
+
**Sounds** — enable/disable, master volume, per-action tone selection with live preview
|
|
527
|
+
|
|
528
|
+
**Advanced** — summary prompt template editor, import/export settings as JSON, reset to defaults, activity feed toggle
|
|
529
|
+
|
|
530
|
+
All settings persist in the SQLite database and survive restarts.
|
|
531
|
+
|
|
532
|
+
---
|
|
533
|
+
|
|
534
|
+
## How It Works
|
|
535
|
+
|
|
536
|
+
```
|
|
537
|
+
Claude Code ──(hooks)──> Express Server ──(WebSocket)──> Browser Dashboard
|
|
538
|
+
│
|
|
539
|
+
SQLite DB
|
|
540
|
+
(sessions, analytics,
|
|
541
|
+
settings, notes)
|
|
542
|
+
```
|
|
543
|
+
|
|
544
|
+
1. Claude Code fires hook events (session start, prompt, tool use, stop, etc.)
|
|
545
|
+
2. A bash hook script enriches the JSON with terminal metadata (PID, TTY, terminal app, tab ID) and POSTs it to `localhost:3333`
|
|
546
|
+
3. The server processes events, updates the in-memory state machine + SQLite (dual-write)
|
|
547
|
+
4. WebSocket pushes updates to all connected browsers
|
|
548
|
+
5. The dashboard renders everything in real time with CSS animations and Web Audio
|
|
549
|
+
|
|
550
|
+
All hooks run with `async: true` and fire-and-forget — they never slow down Claude.
|
|
551
|
+
|
|
552
|
+
### Terminal Support
|
|
553
|
+
|
|
554
|
+
The hook script detects and enriches events with metadata from: **iTerm2**, **Kitty**, **Warp**, **WezTerm**, **Ghostty**, **VS Code**, **JetBrains IDEs**, and **tmux**. It also manages terminal tab titles (sets them to "Claude: \<project\>" via OSC escape sequences).
|
|
555
|
+
|
|
556
|
+
---
|
|
557
|
+
|
|
558
|
+
## Tech Stack
|
|
559
|
+
|
|
560
|
+
| Component | Technology |
|
|
561
|
+
|-----------|-----------|
|
|
562
|
+
| Backend | Node.js (ESM) + Express 5 |
|
|
563
|
+
| WebSocket | ws 8 |
|
|
564
|
+
| Database | SQLite (better-sqlite3) with WAL mode + FTS5 |
|
|
565
|
+
| Frontend | Vanilla JS (ES2022, zero build step) |
|
|
566
|
+
| Characters | CSS-animated (20 models) |
|
|
567
|
+
| Audio | Web Audio API (synthesized, no audio files) |
|
|
568
|
+
| Font | JetBrains Mono |
|
|
569
|
+
| Hooks | Bash (macOS/Linux) + PowerShell (Windows) |
|
|
570
|
+
|
|
571
|
+
---
|
|
572
|
+
|
|
573
|
+
## Project Structure
|
|
574
|
+
|
|
575
|
+
```
|
|
576
|
+
server/
|
|
577
|
+
├── index.js # Express + WebSocket server entry (port 3333)
|
|
578
|
+
├── sessionStore.js # In-memory state machine with SQLite dual-write
|
|
579
|
+
├── hookRouter.js # POST /api/hooks endpoint
|
|
580
|
+
├── apiRouter.js # REST API (sessions, analytics, settings, search)
|
|
581
|
+
├── wsManager.js # WebSocket broadcast to connected browsers
|
|
582
|
+
├── db.js # SQLite schema, tables, FTS5, prepared statements
|
|
583
|
+
├── config.js # Tool categories, timeouts, status animations
|
|
584
|
+
├── queryEngine.js # Session search, filtering, pagination
|
|
585
|
+
├── analytics.js # Tool usage, duration trends, heatmaps
|
|
586
|
+
├── importer.js # Historical JSONL session importer
|
|
587
|
+
└── logger.js # Debug-aware colored logging
|
|
588
|
+
|
|
589
|
+
public/
|
|
590
|
+
├── index.html # Dashboard UI
|
|
591
|
+
├── css/
|
|
592
|
+
│ └── dashboard.css # 9 themes, animations, responsive layout
|
|
593
|
+
└── js/
|
|
594
|
+
├── app.js # Bootstrap: WS connect, event routing
|
|
595
|
+
├── sessionPanel.js # Session cards, detail panel, drag-drop groups
|
|
596
|
+
├── robotManager.js # 20 CSS character models
|
|
597
|
+
├── soundManager.js # 16 synthesized tones, per-action mapping
|
|
598
|
+
├── movementManager.js # 18 movement effects, per-action mapping
|
|
599
|
+
├── settingsManager.js # Settings persistence, theme/font management
|
|
600
|
+
├── statsPanel.js # Global stats header bar
|
|
601
|
+
├── wsClient.js # WebSocket client with auto-reconnect
|
|
602
|
+
├── navController.js # View switching (live/history/timeline/analytics)
|
|
603
|
+
├── historyPanel.js # Full-text search, filters, pagination
|
|
604
|
+
├── timelinePanel.js # Hour/day/week timeline charts
|
|
605
|
+
├── analyticsPanel.js # Tool breakdown, duration trends, heatmaps
|
|
606
|
+
└── chartUtils.js # SVG bar charts, line charts, heatmaps
|
|
607
|
+
|
|
608
|
+
hooks/
|
|
609
|
+
├── dashboard-hook.sh # Bash: enriches JSON, POSTs to localhost:3333
|
|
610
|
+
├── dashboard-hook.ps1 # PowerShell: Windows variant
|
|
611
|
+
└── install-hooks.js # Merges hook config into ~/.claude/settings.json
|
|
612
|
+
```
|
|
613
|
+
|
|
614
|
+
---
|
|
615
|
+
|
|
616
|
+
## License
|
|
617
|
+
|
|
618
|
+
MIT
|
package/bin/cli.js
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
#!/usr/bin/env node
|
|
2
|
+
// CLI entry point for npx/global install
|
|
3
|
+
|
|
4
|
+
import { fileURLToPath } from 'url';
|
|
5
|
+
import { dirname, join } from 'path';
|
|
6
|
+
import { spawn } from 'child_process';
|
|
7
|
+
|
|
8
|
+
const __dirname = dirname(fileURLToPath(import.meta.url));
|
|
9
|
+
const serverPath = join(__dirname, '..', 'server', 'index.js');
|
|
10
|
+
|
|
11
|
+
// Forward all args to the server
|
|
12
|
+
const args = process.argv.slice(2);
|
|
13
|
+
const child = spawn('node', [serverPath, ...args], {
|
|
14
|
+
stdio: 'inherit',
|
|
15
|
+
cwd: join(__dirname, '..')
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
child.on('exit', (code) => {
|
|
19
|
+
process.exit(code || 0);
|
|
20
|
+
});
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
#!/bin/bash
|
|
2
|
+
# AI Agent Session Center - Codex CLI hook relay (macOS / Linux)
|
|
3
|
+
# Codex CLI passes JSON as a command-line argument ($1), NOT via stdin.
|
|
4
|
+
# Only one event type: agent-turn-complete → mapped to "Stop".
|
|
5
|
+
# The notify command is inherently fire-and-forget (async).
|
|
6
|
+
|
|
7
|
+
SENT_AT=$(date +%s)
|
|
8
|
+
INPUT="${1:-{}}"
|
|
9
|
+
|
|
10
|
+
# --- Everything runs in background so the hook returns instantly ---
|
|
11
|
+
{
|
|
12
|
+
|
|
13
|
+
# ── Parse JSON fields from the notify payload ──
|
|
14
|
+
# Codex provides: type, thread-id, cwd, input-messages, last-assistant-message
|
|
15
|
+
SESSION_ID=$(echo "$INPUT" | jq -r '.["thread-id"] // empty' 2>/dev/null)
|
|
16
|
+
CWD=$(echo "$INPUT" | jq -r '.cwd // empty' 2>/dev/null)
|
|
17
|
+
EVENT_TYPE=$(echo "$INPUT" | jq -r '.type // "agent-turn-complete"' 2>/dev/null)
|
|
18
|
+
|
|
19
|
+
# ── Map Codex events to dashboard-compatible event names ──
|
|
20
|
+
case "$EVENT_TYPE" in
|
|
21
|
+
agent-turn-complete) MAPPED_EVENT="Stop" ;;
|
|
22
|
+
*) MAPPED_EVENT="Stop" ;;
|
|
23
|
+
esac
|
|
24
|
+
|
|
25
|
+
# ── Build enriched JSON ──
|
|
26
|
+
ENRICHED=$(echo "$INPUT" | jq -c \
|
|
27
|
+
--arg event "$MAPPED_EVENT" \
|
|
28
|
+
--arg session_id "$SESSION_ID" \
|
|
29
|
+
--arg cwd "$CWD" \
|
|
30
|
+
--arg pid "$PPID" \
|
|
31
|
+
--arg sent_at "$SENT_AT" \
|
|
32
|
+
--arg agent_terminal_id "${AGENT_MANAGER_TERMINAL_ID:-}" \
|
|
33
|
+
--arg codex_event "$EVENT_TYPE" \
|
|
34
|
+
'
|
|
35
|
+
{
|
|
36
|
+
hook_event_name: $event,
|
|
37
|
+
session_id: (if $session_id != "" then $session_id else null end),
|
|
38
|
+
cwd: (if $cwd != "" then $cwd else null end),
|
|
39
|
+
claude_pid: ($pid | tonumber),
|
|
40
|
+
hook_sent_at: (($sent_at | tonumber) * 1000),
|
|
41
|
+
agent_terminal_id: (if $agent_terminal_id != "" then $agent_terminal_id else null end),
|
|
42
|
+
response: (.["last-assistant-message"] // null),
|
|
43
|
+
prompt: (if .["input-messages"] then (.["input-messages"] | last | .content // null) else null end),
|
|
44
|
+
model: (.model // null),
|
|
45
|
+
source: "codex",
|
|
46
|
+
codex_event: $codex_event
|
|
47
|
+
}
|
|
48
|
+
' 2>/dev/null)
|
|
49
|
+
|
|
50
|
+
[ -z "$ENRICHED" ] && ENRICHED="{\"hook_event_name\":\"$MAPPED_EVENT\",\"session_id\":\"$SESSION_ID\",\"cwd\":\"$CWD\",\"source\":\"codex\"}"
|
|
51
|
+
|
|
52
|
+
# ── Deliver to dashboard via file-based MQ (primary) or HTTP (fallback) ──
|
|
53
|
+
MQ_DIR="/tmp/claude-session-center"
|
|
54
|
+
MQ_FILE="$MQ_DIR/queue.jsonl"
|
|
55
|
+
|
|
56
|
+
if [ -d "$MQ_DIR" ]; then
|
|
57
|
+
echo "$ENRICHED" >> "$MQ_FILE" 2>/dev/null
|
|
58
|
+
else
|
|
59
|
+
echo "$ENRICHED" | curl -s --connect-timeout 1 -m 3 -X POST \
|
|
60
|
+
-H "Content-Type: application/json" \
|
|
61
|
+
--data-binary @- \
|
|
62
|
+
http://localhost:3333/api/hooks &>/dev/null
|
|
63
|
+
fi
|
|
64
|
+
|
|
65
|
+
} &>/dev/null &
|
|
66
|
+
disown
|
|
67
|
+
exit 0
|