npm - claude-live - Versions diffs - 2.0.8 → 3.0.1 - Mend

claude-live 2.0.8 → 3.0.1

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 (29) hide show

package/README.md +25 -41
package/bin/claude-live +0 -0
package/client/dist/assets/AgentDemoScene-CXlvncAb.js +147 -0
package/client/dist/assets/ColonizationDemoScene-Cils_y13.js +1 -0
package/client/dist/assets/EffectDemoScene-BXqCMwER.js +138 -0
package/client/dist/assets/SakuraPage-BfD0y3D9.js +518 -0
package/client/dist/assets/index-nnbWctP_.css +1 -0
package/client/dist/assets/index-zmiMo1Db.js +4430 -0
package/client/dist/index.html +2 -2
package/package.json +14 -8
package/server/history-reader.js +68 -0
package/server/index.js +115 -7
package/server/project-tree.js +178 -0
package/server/session-scanner.js +150 -0
package/server/transcript-parser.js +177 -0
package/client/dist/assets/BufferResource-B3YcFk1L.js +0 -185
package/client/dist/assets/CanvasRenderer-B7cP3KcG.js +0 -1
package/client/dist/assets/Filter-BXkJkOCD.js +0 -1
package/client/dist/assets/RenderTargetSystem-DkV5EZ2H.js +0 -172
package/client/dist/assets/WebGLRenderer-Cgmusykq.js +0 -156
package/client/dist/assets/WebGPURenderer-B_Gw9-ml.js +0 -41
package/client/dist/assets/browserAll-wXmCMyRg.js +0 -14
package/client/dist/assets/index-BGs_09Jl.js +0 -318
package/client/dist/assets/index-DjcKbX6b.css +0 -1
package/client/dist/assets/webworkerAll-Hyzs6HuJ.js +0 -83
package/hooks/hooks.json +0 -161
package/hooks/run-hook.cmd +0 -38
package/hooks/send-event +0 -5
package/hooks/session-start +0 -40

package/client/dist/index.html CHANGED Viewed

@@ -11,8 +11,8 @@
       body { background: #080808; overflow: hidden; }
       #root { width: 100vw; height: 100vh; }
     </style>
-    <script type="module" crossorigin src="/assets/index-BGs_09Jl.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-DjcKbX6b.css">
+    <script type="module" crossorigin src="/assets/index-zmiMo1Db.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-nnbWctP_.css">
   </head>
   <body>
     <div id="root"></div>

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "claude-live",
-  "version": "2.0.8",
+  "version": "3.0.1",
   "description": "Realtime Claude Code activity visualizer",
   "license": "MIT",
   "repository": "https://github.com/marisancans/claude-live",
@@ -12,30 +12,36 @@
     "start": "node server/index.js",
     "dev": "cd client && vite dev",
     "build": "cd client && vite build",
-    "test": "cd client && npx tsc --noEmit"
+    "test": "cd client && npx tsc --noEmit",
+    "test:server": "vitest run --config vitest.config.server.js"
   },
   "files": [
     "server/",
     "bin/",
     "client/dist/",
     ".claude-plugin/",
-    "commands/",
-    "hooks/"
+    "commands/"
   ],
   "engines": {
     "node": ">=18"
   },
   "devDependencies": {
-    "howler": "^2.2.4",
     "@types/howler": "^2.2.12",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.2.0",
+    "@types/three": "^0.183.1",
     "@vitejs/plugin-react": "^4.2.0",
-    "pixi-filters": "^6.0.0",
-    "pixi.js": "^8.0.0",
-    "react": "^18.2.0",
+    "howler": "^2.2.4",
+"react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "three": "^0.183.2",
     "typescript": "^5.3.0",
     "vite": "^5.1.0"
+  },
+  "dependencies": {
+    "@dgreenheck/ez-tree": "^1.1.0",
+    "@types/three": "^0.183.1",
+    "d3-force-3d": "^3.0.6",
+    "three": "^0.183.2"
   }
 }

package/server/history-reader.js ADDED Viewed

@@ -0,0 +1,68 @@
+import { readFileSync, readdirSync, statSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+import { TranscriptParser } from './transcript-parser.js';
+function listSessionFiles(projectsDir) {
+  const files = [];
+  let entries;
+  try {
+    entries = readdirSync(projectsDir, { withFileTypes: true });
+  } catch {
+    return files;
+  }
+  for (const entry of entries) {
+    if (!entry.isDirectory()) continue;
+    const dirPath = join(projectsDir, entry.name);
+    let sessionFiles;
+    try {
+      sessionFiles = readdirSync(dirPath).filter(name => name.endsWith('.jsonl'));
+    } catch {
+      continue;
+    }
+    for (const file of sessionFiles) {
+      const filePath = join(dirPath, file);
+      try {
+        files.push({ filePath, mtime: statSync(filePath).mtimeMs });
+      } catch {
+        // ignore unreadable files
+      }
+    }
+  }
+  return files.sort((a, b) => a.mtime - b.mtime);
+}
+export function readProjectHistoryFromDisk(projectsDir, projectId, options = {}) {
+  const normalizedProjectId = resolve(projectId);
+  const maxSessions = options.maxSessions ?? 40;
+  const maxEvents = options.maxEvents ?? 4000;
+  const files = listSessionFiles(projectsDir);
+  const selectedFiles = files.slice(-maxSessions);
+  const events = [];
+  for (const { filePath } of selectedFiles) {
+    const parser = new TranscriptParser(event => {
+      if (typeof event.cwd !== 'string') return;
+      if (resolve(event.cwd) !== normalizedProjectId) return;
+      events.push(event);
+      if (events.length > maxEvents) events.splice(0, events.length - maxEvents);
+    });
+    let text;
+    try {
+      text = readFileSync(filePath, 'utf8');
+    } catch {
+      continue;
+    }
+    for (const line of text.split('\n')) {
+      if (!line.trim()) continue;
+      parser.processLine(line);
+    }
+  }
+  return events.sort((a, b) => a.timestamp - b.timestamp);
+}

package/server/index.js CHANGED Viewed

@@ -3,6 +3,10 @@ import { readFileSync, existsSync, statSync } from 'fs'
 import { join, extname, resolve, sep } from 'path'
 import { fileURLToPath } from 'url'
 import { dirname } from 'path'
+import { homedir } from 'os'
+import { SessionScanner } from './session-scanner.js'
+import { buildProjectTree, listActiveProjects } from './project-tree.js'
+import { readProjectHistoryFromDisk } from './history-reader.js'
 const __dirname = dirname(fileURLToPath(import.meta.url))
 const VERSION = JSON.parse(readFileSync(join(__dirname, '..', 'package.json'), 'utf8')).version
@@ -26,22 +30,55 @@ const MIME = {
 }
 const clients = new Set()
+const eventHistory = [] // all events seen since server start
+const MAX_HISTORY = 5000
+const CORS_HEADERS = {
+  'Access-Control-Allow-Origin': '*',
+  'Access-Control-Allow-Methods': 'GET,POST,OPTIONS',
+  'Access-Control-Allow-Headers': 'Content-Type',
+}
+function filterHistory(events, { sessionId, projectId }) {
+  return events.filter(event => {
+    if (sessionId && event.session_id !== sessionId) return false
+    if (projectId && resolve(event.cwd || '') !== projectId) return false
+    return true
+  })
+}
 function broadcast(data) {
   const msg = `data: ${JSON.stringify(data)}\n\n`
   for (const res of clients) {
     try { res.write(msg) } catch { clients.delete(res) }
   }
+  // Buffer for history API
+  if (data.type === 'event') {
+    eventHistory.push(data.data)
+    if (eventHistory.length > MAX_HISTORY) eventHistory.splice(0, eventHistory.length - MAX_HISTORY)
+  }
 }
 const server = createServer((req, res) => {
-  // POST /hook — receive event, broadcast to SSE clients
-  if (req.method === 'POST' && req.url === '/hook') {
+  for (const [key, value] of Object.entries(CORS_HEADERS)) {
+    res.setHeader(key, value)
+  }
+  if (req.method === 'OPTIONS') {
+    res.writeHead(204)
+    res.end()
+    return
+  }
+  const requestUrl = new URL(req.url || '/', 'http://localhost')
+  const pathname = requestUrl.pathname
+  // POST /hook — used by debug panel to inject test events
+  if (req.method === 'POST' && pathname === '/hook') {
     let body = ''
     req.on('data', c => body += c)
     req.on('end', () => {
       try {
         const event = JSON.parse(body)
+        if (!event.id) event.id = `hook-${Date.now()}-${Math.random().toString(36).slice(2, 8)}`
         broadcast({ type: 'event', data: event })
         res.writeHead(200, { 'Content-Type': 'application/json' })
         res.end('{"ok":true}')
@@ -54,14 +91,70 @@ const server = createServer((req, res) => {
   }
   // GET /health — health check
-  if (req.method === 'GET' && req.url === '/health') {
+  if (req.method === 'GET' && pathname === '/health') {
     res.writeHead(200, { 'Content-Type': 'application/json' })
     res.end(JSON.stringify({ ok: true, version: VERSION, clients: clients.size, port: PORT }))
     return
   }
+  if (req.method === 'GET' && pathname === '/api/projects') {
+    res.writeHead(200, { 'Content-Type': 'application/json' })
+    res.end(JSON.stringify({ projects: listActiveProjects(eventHistory) }))
+    return
+  }
+  if (req.method === 'GET' && pathname === '/api/project-tree') {
+    const projects = listActiveProjects(eventHistory)
+    const projectId = requestUrl.searchParams.get('project')
+    if (!projectId) {
+      res.writeHead(400, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify({ error: 'missing project query parameter' }))
+      return
+    }
+    const normalizedId = resolve(projectId)
+    const project = projects.find(item => resolve(item.root) === normalizedId)
+    if (!project) {
+      res.writeHead(404, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify({ error: 'project not active or unavailable' }))
+      return
+    }
+    try {
+      const tree = buildProjectTree(project.root)
+      res.writeHead(200, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify(tree))
+    } catch (error) {
+      res.writeHead(500, { 'Content-Type': 'application/json' })
+      res.end(JSON.stringify({ error: error instanceof Error ? error.message : 'failed to build tree' }))
+    }
+    return
+  }
+  // GET /api/history?session=ID — events for a specific session since last compact
+  if (req.method === 'GET' && pathname === '/api/history') {
+    const sessionFilter = requestUrl.searchParams.get('session')
+    const projectFilter = requestUrl.searchParams.get('project')
+    const persisted = requestUrl.searchParams.get('persisted') === '1'
+    const normalizedProject = projectFilter ? resolve(projectFilter) : null
+    let events = persisted && normalizedProject
+      ? readProjectHistoryFromDisk(PROJECTS_DIR, normalizedProject)
+      : eventHistory
+    events = filterHistory(events, { sessionId: sessionFilter, projectId: normalizedProject })
+    // Only return events since the last PostCompact — history before that is irrelevant
+    let lastCompact = -1
+    for (let i = events.length - 1; i >= 0; i--) {
+      if (events[i].hook_event_name === 'PostCompact') { lastCompact = i; break }
+    }
+    if (lastCompact >= 0) events = events.slice(lastCompact + 1)
+    res.writeHead(200, { 'Content-Type': 'application/json' })
+    res.end(JSON.stringify(events))
+    return
+  }
   // GET /events — SSE stream
-  if (req.method === 'GET' && req.url === '/events') {
+  if (req.method === 'GET' && pathname === '/events') {
     res.writeHead(200, {
       'Content-Type': 'text/event-stream',
       'Cache-Control': 'no-cache',
@@ -77,7 +170,7 @@ const server = createServer((req, res) => {
   }
   // Static files
-  const urlPath = new URL(req.url, 'http://localhost').pathname
+  const urlPath = pathname
   let filePath = join(DIST, urlPath === '/' ? 'index.html' : urlPath)
   if (!resolve(filePath).startsWith(resolve(DIST) + sep) && resolve(filePath) !== resolve(DIST)) {
     filePath = join(DIST, 'index.html')
@@ -96,6 +189,21 @@ const server = createServer((req, res) => {
   res.end(readFileSync(filePath))
 })
-server.listen(PORT, () => {
-  console.log(`claude-live running at http://localhost:${PORT}`)
+const PROJECTS_DIR = process.env.CLAUDE_PROJECTS_DIR
+  || join(homedir(), '.claude', 'projects')
+const scanner = new SessionScanner(PROJECTS_DIR, event => {
+  broadcast({ type: 'event', data: event })
 })
+// Only auto-start when run directly (not imported for testing)
+const isMainModule = process.argv[1] && resolve(process.argv[1]) === resolve(fileURLToPath(import.meta.url))
+if (isMainModule) {
+  server.listen(PORT, () => {
+    console.log(`claude-live running at http://localhost:${PORT}`)
+    scanner.start()
+    console.log(`watching ${PROJECTS_DIR} for sessions`)
+  })
+}
+export { server, scanner, broadcast }

package/server/project-tree.js ADDED Viewed

@@ -0,0 +1,178 @@
+import { readdirSync, statSync } from 'node:fs';
+import { basename, join, resolve, sep } from 'node:path';
+const DEFAULT_IGNORES = new Set([
+  '.git',
+  '.cache',
+  '.next',
+  '.nuxt',
+  '.output',
+  '.parcel-cache',
+  '.pnpm-store',
+  '.superpowers',
+  '.svelte-kit',
+  '.turbo',
+  '.worktrees',
+  '.yarn',
+  'build',
+  'coverage',
+  'dist',
+  'node_modules',
+  'out',
+  'target',
+  'tmp',
+  'temp',
+]);
+const DEFAULT_LIMITS = {
+  maxDepth: 7,
+  maxChildren: 48,
+  maxNodes: 1200,
+};
+function toPosixPath(value) {
+  return value.split(sep).join('/');
+}
+function makeProjectLabel(rootPath) {
+  return basename(rootPath) || rootPath;
+}
+function shouldIgnore(entry) {
+  if (DEFAULT_IGNORES.has(entry.name)) return true;
+  if (entry.isSymbolicLink()) return true;
+  return false;
+}
+function compareEntries(a, b) {
+  if (a.isDirectory() && !b.isDirectory()) return -1;
+  if (!a.isDirectory() && b.isDirectory()) return 1;
+  return a.name.localeCompare(b.name);
+}
+export function listActiveProjects(events) {
+  const projects = new Map();
+  for (const event of events) {
+    if (!event || typeof event.cwd !== 'string' || !event.cwd) continue;
+    const projectId = resolve(event.cwd);
+    let project = projects.get(projectId);
+    if (!project) {
+      project = {
+        id: projectId,
+        root: projectId,
+        label: makeProjectLabel(projectId),
+        eventCount: 0,
+        lastEventTime: 0,
+        sessionIds: new Set(),
+      };
+      projects.set(projectId, project);
+    }
+    project.eventCount += 1;
+    project.lastEventTime = Math.max(project.lastEventTime, Number(event.timestamp) || 0);
+    if (event.session_id) project.sessionIds.add(event.session_id);
+  }
+  return [...projects.values()]
+    .map(project => ({
+      id: project.id,
+      root: project.root,
+      label: project.label,
+      eventCount: project.eventCount,
+      lastEventTime: project.lastEventTime,
+      sessionCount: project.sessionIds.size,
+    }))
+    .sort((a, b) => b.lastEventTime - a.lastEventTime || a.label.localeCompare(b.label));
+}
+export function buildProjectTree(rootPath, options = {}) {
+  const root = resolve(rootPath);
+  const limits = { ...DEFAULT_LIMITS, ...options };
+  const stats = {
+    directories: 0,
+    files: 0,
+    totalNodes: 0,
+    maxDepthReached: 0,
+    truncated: false,
+  };
+  function visit(absPath, relPath, depth) {
+    if (stats.totalNodes >= limits.maxNodes) {
+      stats.truncated = true;
+      return null;
+    }
+    let st;
+    try {
+      st = statSync(absPath);
+    } catch {
+      return null;
+    }
+    const pathId = relPath || '.';
+    const name = relPath ? basename(absPath) : makeProjectLabel(root);
+    stats.totalNodes += 1;
+    stats.maxDepthReached = Math.max(stats.maxDepthReached, depth);
+    if (!st.isDirectory()) {
+      stats.files += 1;
+      return {
+        id: pathId,
+        name,
+        path: pathId,
+        type: 'file',
+        depth,
+      };
+    }
+    stats.directories += 1;
+    const node = {
+      id: pathId,
+      name,
+      path: pathId,
+      type: 'folder',
+      depth,
+      children: [],
+    };
+    if (depth >= limits.maxDepth) {
+      try {
+        if (readdirSync(absPath).length > 0) stats.truncated = true;
+      } catch {
+        // ignore unreadable directories
+      }
+      return node;
+    }
+    let entries;
+    try {
+      entries = readdirSync(absPath, { withFileTypes: true })
+        .filter(entry => !shouldIgnore(entry))
+        .sort(compareEntries);
+    } catch {
+      return node;
+    }
+    if (entries.length > limits.maxChildren) {
+      entries = entries.slice(0, limits.maxChildren);
+      stats.truncated = true;
+    }
+    for (const entry of entries) {
+      const childRelPath = relPath ? toPosixPath(join(relPath, entry.name)) : entry.name;
+      const childNode = visit(join(absPath, entry.name), childRelPath, depth + 1);
+      if (childNode) node.children.push(childNode);
+    }
+    return node;
+  }
+  return {
+    projectId: root,
+    rootPath: root,
+    label: makeProjectLabel(root),
+    tree: visit(root, '', 0),
+    stats,
+  };
+}

package/server/session-scanner.js ADDED Viewed

@@ -0,0 +1,150 @@
+import { readdirSync, statSync, openSync, readSync, closeSync, watch } from 'node:fs';
+import { join } from 'node:path';
+import { TranscriptParser } from './transcript-parser.js';
+const MAX_SESSIONS = 50;
+const SCAN_INTERVAL = 5000;
+const POLL_INTERVAL = 3000;
+const ACTIVE_AGE_MS = 10 * 60 * 1000; // Only watch sessions modified in last 10 minutes
+export class SessionScanner {
+  constructor(projectsDir, onEvent) {
+    this.projectsDir = projectsDir;
+    this.onEvent = onEvent;
+    this.sessions = new Map();
+    this._scanTimer = null;
+    this._pollTimer = null;
+    this._dirWatcher = null;
+  }
+  start() {
+    this.scan();
+    this._scanTimer = setInterval(() => this.scan(), SCAN_INTERVAL);
+    this._pollTimer = setInterval(() => this.pollAll(), POLL_INTERVAL);
+    try {
+      this._dirWatcher = watch(this.projectsDir, { recursive: false }, () => {
+        this.scan();
+      });
+    } catch {
+      // fs.watch may not be supported
+    }
+  }
+  stop() {
+    if (this._scanTimer) { clearInterval(this._scanTimer); this._scanTimer = null; }
+    if (this._pollTimer) { clearInterval(this._pollTimer); this._pollTimer = null; }
+    if (this._dirWatcher) { this._dirWatcher.close(); this._dirWatcher = null; }
+    for (const session of this.sessions.values()) {
+      if (session.watcher) { session.watcher.close(); }
+    }
+    this.sessions.clear();
+  }
+  scan() {
+    let subdirs;
+    try {
+      subdirs = readdirSync(this.projectsDir, { withFileTypes: true })
+        .filter(d => d.isDirectory())
+        .map(d => d.name);
+    } catch {
+      return;
+    }
+    // Prune stale sessions (no longer recently modified)
+    const now = Date.now();
+    for (const [path, session] of this.sessions) {
+      try {
+        const mtime = statSync(path).mtimeMs;
+        if (now - mtime >= ACTIVE_AGE_MS) {
+          if (session.watcher) session.watcher.close();
+          this.sessions.delete(path);
+        }
+      } catch {
+        if (session.watcher) session.watcher.close();
+        this.sessions.delete(path);
+      }
+    }
+    // Collect all JSONL files with their mtimes
+    const candidates = [];
+    for (const subdir of subdirs) {
+      const dirPath = join(this.projectsDir, subdir);
+      let files;
+      try {
+        files = readdirSync(dirPath).filter(f => f.endsWith('.jsonl'));
+      } catch {
+        continue;
+      }
+      for (const file of files) {
+        const filePath = join(dirPath, file);
+        if (this.sessions.has(filePath)) continue;
+        try {
+          const mtime = statSync(filePath).mtimeMs;
+          // Only consider recently active sessions
+          if (now - mtime < ACTIVE_AGE_MS) {
+            candidates.push({ filePath, mtime });
+          }
+        } catch { continue; }
+      }
+    }
+    // Sort by most recent first so active sessions get priority
+    candidates.sort((a, b) => b.mtime - a.mtime);
+    for (const { filePath } of candidates) {
+      if (this.sessions.size >= MAX_SESSIONS) break;
+      const parser = new TranscriptParser(this.onEvent);
+      let watcher = null;
+      try {
+        watcher = watch(filePath, () => this._readNewLines(this.sessions.get(filePath)));
+      } catch { /* ignore */ }
+      const session = { filePath, offset: 0, parser, watcher };
+      this.sessions.set(filePath, session);
+      this._readNewLines(session);
+    }
+  }
+  pollAll() {
+    for (const session of this.sessions.values()) {
+      this._readNewLines(session);
+    }
+  }
+  _readNewLines(session) {
+    if (!session) return;
+    let size;
+    try {
+      size = statSync(session.filePath).size;
+    } catch {
+      return;
+    }
+    if (size === session.offset) return;
+    if (size < session.offset) {
+      session.offset = 0;
+      session.parser = new TranscriptParser(this.onEvent);
+    }
+    const bytesToRead = size - session.offset;
+    const buf = Buffer.alloc(bytesToRead);
+    let fd;
+    try {
+      fd = openSync(session.filePath, 'r');
+      readSync(fd, buf, 0, bytesToRead, session.offset);
+    } finally {
+      if (fd !== undefined) closeSync(fd);
+    }
+    const text = buf.toString('utf8');
+    const lines = text.split('\n');
+    for (const line of lines) {
+      if (line.trim()) {
+        session.parser.processLine(line);
+      }
+    }
+    session.offset = size;
+  }
+}