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.
Files changed (41) hide show
  1. package/README.md +618 -0
  2. package/bin/cli.js +20 -0
  3. package/hooks/dashboard-hook-codex.sh +67 -0
  4. package/hooks/dashboard-hook-gemini.sh +102 -0
  5. package/hooks/dashboard-hook.ps1 +147 -0
  6. package/hooks/dashboard-hook.sh +142 -0
  7. package/hooks/dashboard-hooks-backup.json +103 -0
  8. package/hooks/install-hooks.js +543 -0
  9. package/hooks/reset.js +357 -0
  10. package/hooks/setup-wizard.js +156 -0
  11. package/package.json +52 -0
  12. package/public/css/dashboard.css +10200 -0
  13. package/public/index.html +915 -0
  14. package/public/js/analyticsPanel.js +467 -0
  15. package/public/js/app.js +1148 -0
  16. package/public/js/browserDb.js +806 -0
  17. package/public/js/chartUtils.js +383 -0
  18. package/public/js/historyPanel.js +298 -0
  19. package/public/js/movementManager.js +155 -0
  20. package/public/js/navController.js +32 -0
  21. package/public/js/robotManager.js +526 -0
  22. package/public/js/sceneManager.js +7 -0
  23. package/public/js/sessionPanel.js +2477 -0
  24. package/public/js/settingsManager.js +924 -0
  25. package/public/js/soundManager.js +249 -0
  26. package/public/js/statsPanel.js +118 -0
  27. package/public/js/terminalManager.js +391 -0
  28. package/public/js/timelinePanel.js +278 -0
  29. package/public/js/wsClient.js +88 -0
  30. package/server/apiRouter.js +321 -0
  31. package/server/config.js +120 -0
  32. package/server/hookProcessor.js +55 -0
  33. package/server/hookRouter.js +18 -0
  34. package/server/hookStats.js +107 -0
  35. package/server/index.js +314 -0
  36. package/server/logger.js +67 -0
  37. package/server/mqReader.js +218 -0
  38. package/server/serverConfig.js +27 -0
  39. package/server/sessionStore.js +1049 -0
  40. package/server/sshManager.js +339 -0
  41. 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
+ ![Node.js](https://img.shields.io/badge/Node.js-18+-green)
6
+ ![Express](https://img.shields.io/badge/Express-5.0-blue)
7
+ ![License](https://img.shields.io/badge/License-MIT-yellow)
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 &rarr; Waiting (30s)
378
+ - Waiting &rarr; Idle (2 min)
379
+ - Working &rarr; Idle (3 min)
380
+ - Approval/Input &rarr; 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** &middot; **Cat** &middot; **Alien** &middot; **Ghost** &middot; **Orb** &middot; **Dragon** &middot; **Penguin** &middot; **Octopus** &middot; **Mushroom** &middot; **Fox** &middot; **Unicorn** &middot; **Jellyfish** &middot; **Owl** &middot; **Bat** &middot; **Cactus** &middot; **Slime** &middot; **Pumpkin** &middot; **Yeti** &middot; **Crystal** &middot; **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** &middot; **sweat** &middot; **energy-ring** &middot; **sparks** &middot; **steam** &middot; **eye-cycle** &middot; **think-pulse** &middot; **head-tilt** &middot; **float** &middot; **breathe** &middot; **sway** &middot; **sparkle** &middot; **bounce** &middot; **flash** &middot; **shake** &middot; **fade** &middot; **shrink** &middot; **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