seeclaudecode 1.0.5 → 1.0.7

package/README.md

@@ -1,7 +1,8 @@
 # SeeClaudeCode
 
 Real-time visualization of your repository structure while Claude Code edits your codebase.
-![SeeClaudeCode Screenshot](https://raw.githubusercontent.com/ninajlu/seeclaudecode/main/screenshot.jpg)
+
+![SeeClaudeCode Screenshot](https://seeclaudecode.fly.dev/screenshot.jpg)
 
 ## Features
 

package/landing/index.html

@@ -819,7 +819,7 @@
       <div class="nav-links">
         <a href="#features">Features</a>
         <a href="#how-it-works">How it works</a>
-        <a href="https://github.com/ninajlu/seeclaudecode">GitHub</a>
+        <!--<a href="https://github.com/ninajlu/seeclaudecode">GitHub</a>-->
       </div>
 
       <div class="nav-buttons">
@@ -841,9 +841,9 @@
         WATCH AGENTS WRITE CODE
       </div>
 
-      <h1>See what Claude Code<br>is actually doing.</h1>
+      <h1>See what Claude Code<br>is <em>actually</em> doing.</h1>
 
-      <p>SeeClaudeCode visualizes your codebase changes and Git Diff in real-time so you know what files and directories Claude Code is editing.</p>
+      <p>SeeClaudeCode visualizes your codebase for changes in real-time so you know what files and directories Claude Code is editing.</p>
 
       <div class="hero-buttons">
         <a href="https://www.npmjs.com/package/seeclaudecode" class="btn btn-primary btn-lg">
@@ -853,9 +853,9 @@
             <polyline points="12 5 19 12 12 19"></polyline>
           </svg>
         </a>
-        <a href="https://github.com/ninajlu/seeclaudecode" class="btn btn-outline btn-lg">
+        <!--<a href="https://github.com/ninajlu/seeclaudecode" class="btn btn-outline btn-lg">
           View on GitHub
-        </a>
+        </a>-->
       </div>
     </div>
 
@@ -865,7 +865,7 @@
         <div class="preview-dot red"></div>
         <div class="preview-dot yellow"></div>
         <div class="preview-dot green"></div>
-        <span class="preview-title">seeclaudecode_monitor.exe</span>
+        <span class="preview-title">seeclaudecode.exe</span>
       </div>
       <div class="preview-content">
         <div class="rf-graph">
@@ -1060,8 +1060,8 @@
   <!-- Features -->
   <section id="features" class="features">
     <div class="section-header">
-      <h2>Transparency for the AI Age</h2>
-      <p>Development shouldn't be a black box. We bridge the gap between AI coding agents and humans.</p>
+      <h2>Can't figure out what Claude Code is doing?</h2>
+      <p>Don't worry! SeeClaudeCode visualizes your code base and shows you which files and folders Claude is editing in real-time.</p>
     </div>
 
     <div class="features-grid">
@@ -1095,8 +1095,8 @@
             <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"></polygon>
           </svg>
         </div>
-        <h3>Instant Understanding</h3>
-        <p>Visual cues and color-coded status indicators help non-technical builders code.</p>
+        <h3>Built for Ah-Ha Moments</h3>
+        <p>Visual cues and color-coded status indicators help non-technical builders learn how to code.</p>
       </div>
     </div>
   </section>
@@ -1106,7 +1106,7 @@
     <div class="terminal-container">
       <div class="terminal-content">
         <h3>Bridging the Gap</h3>
-        <p>Can't figure out what Claude Code is doing? SeeClaudeCode visualizes your code base and shows you which files and folders Claude is editing in real-time.</p>
+        <p>Development shouldn't be a black box. We bridge the gap between AI coding agents and humans.</p>
 
         <ul class="check-list">
           <li>
@@ -1181,7 +1181,7 @@
       </div>
 
       <div class="footer-links">
-        <a href="https://github.com/ninajlu/seeclaudecode">GitHub</a>
+        <!--<a href="https://github.com/ninajlu/seeclaudecode">GitHub</a>-->
         <a href="https://www.npmjs.com/package/seeclaudecode">npm</a>
       </div>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "seeclaudecode",
-  "version": "1.0.5",
+  "version": "1.0.7",
   "description": "Real-time visualization of repository structure - watch Claude Code edit your codebase",
   "main": "server.js",
   "type": "module",

package/public/app.js

@@ -68,8 +68,17 @@ class SeeClaude {
     switch (data.type) {
       case 'init':
         data.activeFiles?.forEach(f => this.activeFiles.add(f));
-        data.changedFiles?.forEach(f => this.changedFiles.add(f));
+        data.changedFiles?.forEach(f => {
+          this.changedFiles.add(f);
+          this.updateChangedPaths(f);
+        });
+        // Restore activity history from server
+        if (data.activities && data.activities.length > 0) {
+          this.activities = data.activities;
+          this.renderActivityFeed();
+        }
         this.updateActivePaths();
+        this.buildGraphData(); // Rebuild graph with change data
         this.render();
         break;
 
@@ -97,25 +106,86 @@ class SeeClaude {
 
   handleActiveEdit(data) {
     this.activeFiles.add(data.file);
+    this.changedFiles.add(data.file); // Also mark as changed immediately
     this.updateActivePaths();
+    this.updateChangedPaths(data.file); // Update parent paths
 
     const fileName = data.file.split('/').pop();
     document.getElementById('current-task').textContent = `Editing ${fileName}`;
 
-    this.addActivity('edit', `Editing ${fileName}`, data.file, true);
+    // Use activity from server if available, otherwise create one
+    if (data.activity) {
+      // Check if we already have this activity
+      if (!this.activities.find(a => a.id === data.activity.id)) {
+        this.activities.unshift(data.activity);
+        if (this.activities.length > 20) this.activities.pop();
+        this.renderActivityFeed();
+      }
+    } else {
+      this.addActivity('edit', `Editing ${fileName}`, data.file, true);
+    }
+
     this.expandPathTo(data.file);
+
+    // Rebuild graph to include the new file
+    this.buildGraphData();
     this.render();
   }
 
+  updateChangedPaths(filePath) {
+    const normalizedPath = filePath.replace(/\\/g, '/');
+    const parts = normalizedPath.split('/');
+    let currentPath = '';
+    for (let i = 0; i < parts.length - 1; i++) {
+      currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+      this.changedPaths.add(currentPath);
+    }
+  }
+
   handleEditComplete(data) {
     this.activeFiles.clear();
     this.activePaths.clear();
-    data.files.forEach(f => this.changedFiles.add(f));
+
+    // Use fresh changedFiles from server if available (reflects actual git status)
+    if (data.changedFiles) {
+      this.changedFiles.clear();
+      this.changedPaths.clear();
+      data.changedFiles.forEach(f => {
+        this.changedFiles.add(f);
+        this.updateChangedPaths(f);
+      });
+    } else {
+      // Fallback: use diff data
+      if (data.diff) {
+        [...(data.diff.modified || []), ...(data.diff.created || []), ...(data.diff.deleted || [])].forEach(f => {
+          this.changedFiles.add(f);
+          this.updateChangedPaths(f);
+        });
+      }
+    }
 
     document.getElementById('current-task').textContent = `Finished editing ${data.files.length} file(s)`;
 
-    this.addActivity('complete', `Completed editing`, `${data.files.length} file(s) modified`);
+    // Mark all "Editing" activities as no longer active
+    this.activities.forEach(a => {
+      if (a.isActive) a.isActive = false;
+    });
+
+    // Use activity from server if available, otherwise create one
+    if (data.activity) {
+      if (!this.activities.find(a => a.id === data.activity.id)) {
+        this.activities.unshift(data.activity);
+        if (this.activities.length > 20) this.activities.pop();
+      }
+      this.renderActivityFeed();
+    } else {
+      this.addActivity('complete', `Completed editing`, `${data.files.length} file(s) modified`);
+    }
+
     this.updateDiffPanel(data.diff);
+
+    // Rebuild graph with updated change data
+    this.buildGraphData();
     this.render();
 
     setTimeout(() => {
@@ -368,6 +438,25 @@ class SeeClaude {
     const horizontalGap = 50;
     const verticalGap = 200;   // Extra space for vertical file lists below directories
 
+    // Build a map of changed files for quick lookup by directory
+    const changedFilesByDir = new Map();
+    this.changedFiles.forEach(filePath => {
+      const parts = filePath.split('/');
+      const fileName = parts.pop();
+      const dirPath = parts.length > 0 ? parts.join('/') : '.';
+
+      if (!changedFilesByDir.has(dirPath)) {
+        changedFilesByDir.set(dirPath, []);
+      }
+      changedFilesByDir.get(dirPath).push({
+        name: fileName,
+        path: filePath,
+        type: 'file',
+        extension: fileName.split('.').pop() || '',
+        category: this.getFileCategoryByExt(fileName.split('.').pop() || '')
+      });
+    });
+
     // Count changed files in a directory (recursive)
     const countChangedFiles = (node) => {
       if (!node) return 0;
@@ -383,7 +472,13 @@ class SeeClaude {
       if (!node.children) return thisChanged;
 
       const childCount = node.children.reduce((sum, child) => sum + countChangedFiles(child), 0);
-      return childCount;
+
+      // Also count changed files that might not be in the structure
+      const extraChangedFiles = changedFilesByDir.get(node.path) || [];
+      const structureFilePaths = new Set((node.children || []).filter(c => c.type === 'file').map(c => c.path));
+      const extraCount = extraChangedFiles.filter(f => !structureFilePaths.has(f.path)).length;
+
+      return childCount + extraCount;
     };
 
     // Calculate subtree width
@@ -399,6 +494,9 @@ class SeeClaude {
       return Math.max(nodeWidth, childWidths.reduce((a, b) => a + b, 0) + horizontalGap * (dirs.length - 1));
     };
 
+    // Track which files we've already added
+    const addedFilePaths = new Set();
+
     // Position directories and changed files
     const positionNode = (node, depth, x, y, parentId = null) => {
       if (node.type !== 'directory') return;
@@ -409,8 +507,13 @@ class SeeClaude {
       const dirs = node.children?.filter(c => c.type === 'directory') || [];
       const changedCount = countChangedFiles(node);
 
-      // Get changed files in this directory
-      const changedFiles = files.filter(f => this.changedFiles.has(f.path));
+      // Get changed files in this directory - combine structure files and any extra changed files
+      const structureChangedFiles = files.filter(f => this.changedFiles.has(f.path));
+      const structureFilePaths = new Set(files.map(f => f.path));
+
+      // Also get changed files that aren't in the structure
+      const extraChangedFiles = (changedFilesByDir.get(nodeId) || []).filter(f => !structureFilePaths.has(f.path));
+      const allChangedFiles = [...structureChangedFiles, ...extraChangedFiles];
 
       this.graphNodes.push({
         id: nodeId,
@@ -425,7 +528,7 @@ class SeeClaude {
         dirCount: dirs.length,
         childCount: node.children?.length || 0,
         changedCount,
-        hasChangedFiles: changedFiles.length > 0
+        hasChangedFiles: allChangedFiles.length > 0
       });
 
       if (parentId) {
@@ -433,15 +536,18 @@ class SeeClaude {
       }
 
       // Show changed files VERTICALLY below the directory
-      if (changedFiles.length > 0) {
+      if (allChangedFiles.length > 0) {
         const fileWidth = 130;
         const fileHeight = 22;
         const fileGap = 4;
-        const visibleFiles = changedFiles.slice(0, 5); // Limit to 5 files
+        const visibleFiles = allChangedFiles.slice(0, 5); // Limit to 5 files
         const fileX = x; // Centered below directory
         const startY = y + nodeHeight / 2 + 30; // Start below the directory
 
         visibleFiles.forEach((file, idx) => {
+          if (addedFilePaths.has(file.path)) return; // Skip if already added
+          addedFilePaths.add(file.path);
+
           const fileY = startY + idx * (fileHeight + fileGap);
 
           this.graphNodes.push({
@@ -462,11 +568,11 @@ class SeeClaude {
         });
 
         // Show "+N more" indicator if there are more files
-        if (changedFiles.length > 5) {
+        if (allChangedFiles.length > 5) {
           const moreY = startY + visibleFiles.length * (fileHeight + fileGap);
           this.graphNodes.push({
             id: `${nodeId}-more`,
-            label: `+${changedFiles.length - 5} more`,
+            label: `+${allChangedFiles.length - 5} more`,
             path: node.path,
             x: fileX,
             y: moreY,
@@ -491,6 +597,75 @@ class SeeClaude {
     };
 
     positionNode(this.structure, 0, 0, 50);
+
+    // Add any remaining changed files that weren't in the structure at all
+    // (files in directories not shown in the graph)
+    const orphanedFiles = [];
+    this.changedFiles.forEach(filePath => {
+      if (!addedFilePaths.has(filePath)) {
+        const parts = filePath.split('/');
+        const fileName = parts.pop();
+        orphanedFiles.push({
+          name: fileName,
+          path: filePath,
+          category: this.getFileCategoryByExt(fileName.split('.').pop() || '')
+        });
+      }
+    });
+
+    // If there are orphaned files, add them to the root
+    if (orphanedFiles.length > 0) {
+      const rootNode = this.graphNodes.find(n => n.id === '.');
+      if (rootNode) {
+        const fileHeight = 22;
+        const fileGap = 4;
+        const startY = rootNode.y + nodeHeight / 2 + 30;
+
+        // Check if root already has changed files below it
+        const existingRootFiles = this.graphNodes.filter(n =>
+          n.isChangedFile && this.graphEdges.some(e => e.source === '.' && e.target === n.id)
+        );
+        const offsetY = existingRootFiles.length * (fileHeight + fileGap);
+
+        orphanedFiles.slice(0, 5).forEach((file, idx) => {
+          const fileY = startY + offsetY + idx * (fileHeight + fileGap);
+
+          this.graphNodes.push({
+            id: file.path,
+            label: file.name,
+            type: file.category || 'file',
+            path: file.path,
+            x: rootNode.x,
+            y: fileY,
+            category: file.category,
+            isDirectory: false,
+            isFile: true,
+            isChangedFile: true,
+            isOrphanedFile: true,
+            childCount: 0
+          });
+
+          this.graphEdges.push({ source: '.', target: file.path, hasChanges: true, isFileEdge: true });
+        });
+      }
+    }
+  }
+
+  getFileCategoryByExt(ext) {
+    const categories = {
+      code: ['js', 'ts', 'jsx', 'tsx', 'py', 'rb', 'go', 'rs', 'java', 'c', 'cpp', 'h', 'cs', 'php', 'swift', 'kt'],
+      style: ['css', 'scss', 'sass', 'less', 'styl'],
+      markup: ['html', 'htm', 'xml', 'svg'],
+      config: ['json', 'yaml', 'yml', 'toml', 'ini', 'env', 'config'],
+      docs: ['md', 'mdx', 'txt', 'rst', 'doc', 'pdf'],
+      data: ['sql', 'graphql', 'prisma'],
+      image: ['png', 'jpg', 'jpeg', 'gif', 'webp', 'ico', 'bmp']
+    };
+
+    for (const [category, extensions] of Object.entries(categories)) {
+      if (extensions.includes(ext)) return category;
+    }
+    return 'other';
   }
 
   getNodeType(node) {

package/server.js

@@ -29,9 +29,27 @@ const state = {
   activeFiles: new Set(),
   changedFiles: new Set(),
   repoStructure: null,
-  lastActivity: Date.now()
+  lastActivity: Date.now(),
+  activities: [] // Persist activity history
 };
 
+// Add activity to history
+function addActivity(type, action, description, filePath = null, isActive = false) {
+  const activity = {
+    id: Date.now(),
+    type,
+    action,
+    description,
+    filePath,
+    time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+    isActive
+  };
+
+  state.activities.unshift(activity);
+  if (state.activities.length > 50) state.activities.pop(); // Keep last 50 activities
+  return activity;
+}
+
 // Serve static files
 app.use(express.static(join(__dirname, 'public')));
 
@@ -363,14 +381,30 @@ function broadcast(data) {
 }
 
 // WebSocket connection handler
-wss.on('connection', (ws) => {
+wss.on('connection', async (ws) => {
   console.log('📱 Client connected');
 
-  // Send current state to new client
+  // Get FRESH git status - only show files with actual pending changes
+  let changedFiles = [];
+  try {
+    const gitStatus = await git.status();
+    changedFiles = [
+      ...gitStatus.modified,
+      ...gitStatus.created,
+      ...gitStatus.deleted
+    ];
+    // Update server state with fresh git status
+    state.changedFiles = new Set(changedFiles);
+  } catch (e) {
+    // Ignore git errors
+  }
+
+  // Send current state to new client including activity history
   ws.send(JSON.stringify({
     type: 'init',
     activeFiles: Array.from(state.activeFiles),
-    changedFiles: Array.from(state.changedFiles)
+    changedFiles: changedFiles,
+    activities: state.activities
   }));
 
   ws.on('close', () => {
@@ -415,12 +449,17 @@ function handleFileActivity(eventType, filePath) {
   state.changedFiles.add(relativePath);
   state.lastActivity = Date.now();
 
-  // Broadcast active edit
+  // Add to activity history
+  const fileName = relativePath.split('/').pop();
+  const activity = addActivity('edit', `Editing ${fileName}`, relativePath, relativePath, true);
+
+  // Broadcast active edit with activity
   broadcast({
     type: 'active',
     file: relativePath,
     event: eventType,
-    timestamp: Date.now()
+    timestamp: Date.now(),
+    activity
   });
 
   // Clear previous timer and set new one
@@ -434,11 +473,34 @@ function handleFileActivity(eventType, filePath) {
     // Get git diff for changed files
     const diff = await getGitDiff();
 
+    // Update state.changedFiles to reflect ACTUAL git status (not accumulated)
+    state.changedFiles = new Set([
+      ...(diff.modified || []),
+      ...(diff.created || []),
+      ...(diff.deleted || [])
+    ]);
+
+    // Add completion activity
+    const completeActivity = addActivity(
+      'complete',
+      'Completed editing',
+      `${completedFiles.length} file(s) modified`,
+      null,
+      false
+    );
+
+    // Mark all "Editing" activities as no longer active
+    state.activities.forEach(a => {
+      if (a.isActive) a.isActive = false;
+    });
+
     broadcast({
       type: 'complete',
       files: completedFiles,
       diff,
-      timestamp: Date.now()
+      changedFiles: Array.from(state.changedFiles), // Send fresh list
+      timestamp: Date.now(),
+      activity: completeActivity
     });
 
     console.log(`✅ Editing complete. Changed files: ${completedFiles.join(', ')}`);