seeclaudecode 1.0.0

package/public/app.js

@@ -0,0 +1,1282 @@
+// SeeClaude - Watch Claude Code Work
+class SeeClaude {
+  constructor() {
+    this.ws = null;
+    this.structure = null;
+    this.activeFiles = new Set();
+    this.changedFiles = new Set();
+    this.changedPaths = new Set(); // Parent directories of changed files
+    this.activePaths = new Set();
+    this.activities = [];
+    this.currentView = 'graph';
+    this.expandedNodes = new Set();
+    this.graphNodes = [];
+    this.graphEdges = [];
+    this.isPanelOpen = true;
+
+    // Pan/zoom state for graph
+    this.panX = 0;
+    this.panY = 0;
+    this.zoom = 1;
+    this.isDragging = false;
+    this.lastMouseX = 0;
+    this.lastMouseY = 0;
+
+    this.init();
+  }
+
+  async init() {
+    this.createTooltip();
+    this.setupWebSocket();
+    this.setupEventListeners();
+    await this.loadStructure();
+    await this.loadGitStatus(); // Wait for git status before rendering
+    this.buildGraphData(); // Rebuild with change data
+    this.render();
+  }
+
+  createTooltip() {
+    this.tooltip = document.createElement('div');
+    this.tooltip.className = 'tooltip';
+    document.body.appendChild(this.tooltip);
+  }
+
+  setupWebSocket() {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    this.ws = new WebSocket(`${protocol}//${window.location.host}`);
+
+    this.ws.onopen = () => {
+      document.getElementById('connection-state').textContent = 'Connected';
+      document.getElementById('status-indicator').classList.add('connected');
+      this.addActivity('system', 'Connected to server', 'Connection established');
+    };
+
+    this.ws.onclose = () => {
+      document.getElementById('connection-state').textContent = 'Disconnected';
+      document.getElementById('status-indicator').classList.remove('connected');
+      this.addActivity('system', 'Connection lost', 'Attempting to reconnect...');
+      setTimeout(() => this.setupWebSocket(), 3000);
+    };
+
+    this.ws.onmessage = (event) => {
+      const data = JSON.parse(event.data);
+      this.handleMessage(data);
+    };
+  }
+
+  handleMessage(data) {
+    switch (data.type) {
+      case 'init':
+        data.activeFiles?.forEach(f => this.activeFiles.add(f));
+        data.changedFiles?.forEach(f => this.changedFiles.add(f));
+        this.updateActivePaths();
+        this.render();
+        break;
+
+      case 'active':
+        this.handleActiveEdit(data);
+        break;
+
+      case 'complete':
+        this.handleEditComplete(data);
+        break;
+    }
+  }
+
+  updateActivePaths() {
+    this.activePaths.clear();
+    this.activeFiles.forEach(file => {
+      const parts = file.split('/');
+      let currentPath = '';
+      for (let i = 0; i < parts.length - 1; i++) {
+        currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+        this.activePaths.add(currentPath);
+      }
+    });
+  }
+
+  handleActiveEdit(data) {
+    this.activeFiles.add(data.file);
+    this.updateActivePaths();
+
+    const fileName = data.file.split('/').pop();
+    document.getElementById('current-task').textContent = `Editing ${fileName}`;
+
+    this.addActivity('edit', `Editing ${fileName}`, data.file, true);
+    this.expandPathTo(data.file);
+    this.render();
+  }
+
+  handleEditComplete(data) {
+    this.activeFiles.clear();
+    this.activePaths.clear();
+    data.files.forEach(f => this.changedFiles.add(f));
+
+    document.getElementById('current-task').textContent = `Finished editing ${data.files.length} file(s)`;
+
+    this.addActivity('complete', `Completed editing`, `${data.files.length} file(s) modified`);
+    this.updateDiffPanel(data.diff);
+    this.render();
+
+    setTimeout(() => {
+      document.getElementById('current-task').textContent = 'Waiting for activity...';
+    }, 5000);
+  }
+
+  addActivity(type, action, description, isActive = false) {
+    const activity = {
+      id: Date.now(),
+      type,
+      action,
+      description,
+      time: new Date().toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }),
+      isActive
+    };
+
+    this.activities.unshift(activity);
+    if (this.activities.length > 20) this.activities.pop();
+    this.renderActivityFeed();
+  }
+
+  renderActivityFeed() {
+    const container = document.getElementById('activity-feed');
+
+    if (this.activities.length === 0) {
+      container.innerHTML = `
+        <div class="activity-empty">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+            <circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/>
+          </svg>
+          <p>Waiting for Claude Code activity...</p>
+        </div>
+      `;
+      return;
+    }
+
+    container.innerHTML = this.activities.map(activity => `
+      <div class="activity-item ${activity.isActive ? 'active' : ''}">
+        <div class="activity-header">
+          <span class="activity-action">${activity.action}</span>
+          <span class="activity-time">${activity.time}</span>
+        </div>
+        <div class="activity-description">${activity.description}</div>
+      </div>
+    `).join('');
+  }
+
+  updateDiffPanel(diff) {
+    if (!diff) return;
+
+    const filesCount = (diff.modified?.length || 0) + (diff.created?.length || 0);
+    document.getElementById('files-count').textContent = filesCount;
+
+    let additions = 0, deletions = 0;
+    diff.fileDiffs?.forEach(fd => {
+      additions += fd.additions || 0;
+      deletions += fd.deletions || 0;
+    });
+
+    document.getElementById('additions-count').textContent = additions;
+    document.getElementById('deletions-count').textContent = deletions;
+
+    if (diff.modified?.length > 0 || diff.created?.length > 0) {
+      const file = diff.modified[0] || diff.created[0];
+      document.getElementById('diff-file').textContent = file;
+    }
+
+    const diffContent = document.getElementById('diff-content');
+    if (diff.fileDiffs?.length > 0) {
+      const fd = diff.fileDiffs[0];
+      diffContent.innerHTML = `
+        <div class="diff-line context">
+          <div class="diff-line-number">...</div>
+          <div class="diff-line-content">// Changes in ${fd.file}</div>
+        </div>
+        ${fd.additions > 0 ? `
+          <div class="diff-line added">
+            <div class="diff-line-number">+</div>
+            <div class="diff-line-content">+ ${fd.additions} line(s) added</div>
+          </div>
+        ` : ''}
+        ${fd.deletions > 0 ? `
+          <div class="diff-line removed">
+            <div class="diff-line-number">-</div>
+            <div class="diff-line-content">- ${fd.deletions} line(s) removed</div>
+          </div>
+        ` : ''}
+      `;
+    }
+  }
+
+  async showFileDiff(filePath) {
+    if (!filePath) return;
+    if (filePath === '.') filePath = '';
+
+    try {
+      const response = await fetch(`/api/diff/${encodeURIComponent(filePath || '.')}`);
+      const diff = await response.json();
+
+      const diffContent = document.getElementById('diff-content');
+
+      // Handle directory diff
+      if (diff.type === 'directory') {
+        document.getElementById('diff-file').textContent = filePath || 'Root';
+        document.getElementById('additions-count').textContent = diff.totalAdditions || 0;
+        document.getElementById('deletions-count').textContent = diff.totalDeletions || 0;
+        document.getElementById('files-count').textContent = diff.fileCount || 0;
+
+        if (diff.status === 'unchanged' || !diff.files || diff.files.length === 0) {
+          diffContent.innerHTML = `
+            <div class="diff-empty">
+              <p>No changes in this directory</p>
+            </div>
+          `;
+        } else {
+          // Render all file diffs
+          diffContent.innerHTML = diff.files.map(fileDiff => `
+            <div class="diff-file-section">
+              <div class="diff-file-header">
+                <span class="diff-file-name">${this.escapeHtml(fileDiff.file)}</span>
+                <span class="diff-file-stats">
+                  <span class="stat-add">+${fileDiff.additions || 0}</span>
+                  <span class="stat-del">-${fileDiff.deletions || 0}</span>
+                </span>
+              </div>
+              ${fileDiff.lines?.map(line => {
+                if (line.type === 'hunk') {
+                  return `<div class="diff-line hunk"><div class="diff-line-content">${this.escapeHtml(line.content)}</div></div>`;
+                }
+                const lineNum = line.lineNumber || '';
+                const prefix = line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' ';
+                return `
+                  <div class="diff-line ${line.type}">
+                    <div class="diff-line-number">${lineNum}</div>
+                    <div class="diff-line-prefix">${prefix}</div>
+                    <div class="diff-line-content">${this.escapeHtml(line.content)}</div>
+                  </div>
+                `;
+              }).join('') || '<div class="diff-line context"><div class="diff-line-content">No changes</div></div>'}
+            </div>
+          `).join('');
+        }
+      } else {
+        // Single file diff
+        document.getElementById('diff-file').textContent = filePath;
+        document.getElementById('additions-count').textContent = diff.additions || 0;
+        document.getElementById('deletions-count').textContent = diff.deletions || 0;
+        document.getElementById('files-count').textContent = '1';
+
+        if (diff.status === 'unchanged') {
+          diffContent.innerHTML = `
+            <div class="diff-empty">
+              <p>No changes in this file</p>
+            </div>
+          `;
+        } else if (!diff.lines || diff.lines.length === 0) {
+          diffContent.innerHTML = `
+            <div class="diff-empty">
+              <p>No diff available for this file</p>
+              ${diff.error ? `<p class="diff-error">${diff.error}</p>` : ''}
+            </div>
+          `;
+        } else {
+          diffContent.innerHTML = diff.lines.map(line => {
+            if (line.type === 'hunk') {
+              return `<div class="diff-line hunk"><div class="diff-line-content">${this.escapeHtml(line.content)}</div></div>`;
+            }
+            const lineNum = line.lineNumber || '';
+            const prefix = line.type === 'added' ? '+' : line.type === 'removed' ? '-' : ' ';
+            return `
+              <div class="diff-line ${line.type}">
+                <div class="diff-line-number">${lineNum}</div>
+                <div class="diff-line-prefix">${prefix}</div>
+                <div class="diff-line-content">${this.escapeHtml(line.content)}</div>
+              </div>
+            `;
+          }).join('');
+        }
+      }
+
+      // Make sure the panel is open
+      if (!this.isPanelOpen) {
+        this.isPanelOpen = true;
+        document.getElementById('right-panel').classList.remove('hidden');
+        document.getElementById('panel-toggle').classList.add('hidden');
+      }
+    } catch (error) {
+      console.error('Failed to load diff:', error);
+    }
+  }
+
+  escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text || '';
+    return div.innerHTML;
+  }
+
+  async loadStructure() {
+    try {
+      const response = await fetch('/api/structure');
+      this.structure = await response.json();
+      this.buildGraphData();
+      this.expandFirstLevels(this.structure, 2);
+      this.render();
+    } catch (error) {
+      console.error('Failed to load structure:', error);
+    }
+  }
+
+  async loadGitStatus() {
+    try {
+      const response = await fetch('/api/diff');
+      const diff = await response.json();
+      this.updateDiffPanel(diff);
+
+      // Add all changed files
+      [...(diff.modified || []), ...(diff.created || []), ...(diff.deleted || [])].forEach(f => {
+        // Normalize path separators
+        const normalizedPath = f.replace(/\\/g, '/');
+        this.changedFiles.add(normalizedPath);
+
+        // Also mark parent directories as having changes
+        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);
+        }
+      });
+
+      console.log('Changed files:', Array.from(this.changedFiles));
+      console.log('Changed paths:', Array.from(this.changedPaths));
+      this.buildGraphData(); // Rebuild graph with change data
+      this.render();
+    } catch (error) {
+      console.error('Failed to load git status:', error);
+    }
+  }
+
+  buildGraphData() {
+    if (!this.structure) return;
+
+    this.graphNodes = [];
+    this.graphEdges = [];
+
+    // Layout settings
+    const nodeWidth = 160;
+    const nodeHeight = 50;
+    const horizontalGap = 50;
+    const verticalGap = 200;   // Extra space for vertical file lists below directories
+
+    // Count changed files in a directory (recursive)
+    const countChangedFiles = (node) => {
+      if (!node) return 0;
+
+      // Check if this exact path is changed
+      const thisChanged = this.changedFiles.has(node.path) ? 1 : 0;
+
+      if (node.type === 'file') {
+        return thisChanged;
+      }
+
+      // For directories, count all changed children
+      if (!node.children) return thisChanged;
+
+      const childCount = node.children.reduce((sum, child) => sum + countChangedFiles(child), 0);
+      return childCount;
+    };
+
+    // Calculate subtree width
+    const calculateWidth = (node, depth) => {
+      if (depth >= 4 || node.type !== 'directory' || !node.children) {
+        return nodeWidth;
+      }
+
+      const dirs = node.children.filter(c => c.type === 'directory').slice(0, 5);
+      if (dirs.length === 0) return nodeWidth;
+
+      const childWidths = dirs.map(d => calculateWidth(d, depth + 1));
+      return Math.max(nodeWidth, childWidths.reduce((a, b) => a + b, 0) + horizontalGap * (dirs.length - 1));
+    };
+
+    // Position directories and changed files
+    const positionNode = (node, depth, x, y, parentId = null) => {
+      if (node.type !== 'directory') return;
+
+      const nodeId = node.path || '.';
+      const nodeType = this.getNodeType(node);
+      const files = node.children?.filter(c => c.type === 'file') || [];
+      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));
+
+      this.graphNodes.push({
+        id: nodeId,
+        label: node.name,
+        type: nodeType,
+        path: node.path,
+        x,
+        y,
+        category: node.category,
+        isDirectory: true,
+        fileCount: files.length,
+        dirCount: dirs.length,
+        childCount: node.children?.length || 0,
+        changedCount,
+        hasChangedFiles: changedFiles.length > 0
+      });
+
+      if (parentId) {
+        this.graphEdges.push({ source: parentId, target: nodeId, hasChanges: changedCount > 0 });
+      }
+
+      // Show changed files VERTICALLY below the directory
+      if (changedFiles.length > 0) {
+        const fileWidth = 130;
+        const fileHeight = 22;
+        const fileGap = 4;
+        const visibleFiles = changedFiles.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) => {
+          const fileY = startY + idx * (fileHeight + fileGap);
+
+          this.graphNodes.push({
+            id: file.path,
+            label: file.name,
+            type: file.category || 'file',
+            path: file.path,
+            x: fileX,
+            y: fileY,
+            category: file.category,
+            isDirectory: false,
+            isFile: true,
+            isChangedFile: true,
+            childCount: 0
+          });
+
+          this.graphEdges.push({ source: nodeId, target: file.path, hasChanges: true, isFileEdge: true });
+        });
+
+        // Show "+N more" indicator if there are more files
+        if (changedFiles.length > 5) {
+          const moreY = startY + visibleFiles.length * (fileHeight + fileGap);
+          this.graphNodes.push({
+            id: `${nodeId}-more`,
+            label: `+${changedFiles.length - 5} more`,
+            path: node.path,
+            x: fileX,
+            y: moreY,
+            isMoreIndicator: true
+          });
+        }
+      }
+
+      if (depth >= 4 || dirs.length === 0) return;
+
+      // Position child directories
+      const visibleDirs = dirs.slice(0, 5);
+      const childWidths = visibleDirs.map(d => calculateWidth(d, depth + 1));
+      const totalWidth = childWidths.reduce((a, b) => a + b, 0) + horizontalGap * (visibleDirs.length - 1);
+      let childX = x - totalWidth / 2;
+
+      visibleDirs.forEach((dir, i) => {
+        const dirWidth = childWidths[i];
+        positionNode(dir, depth + 1, childX + dirWidth / 2, y + verticalGap + nodeHeight, nodeId);
+        childX += dirWidth + horizontalGap;
+      });
+    };
+
+    positionNode(this.structure, 0, 0, 50);
+
+    // Reset pan
+    this.panX = 0;
+    this.panY = 0;
+  }
+
+  getNodeType(node) {
+    if (node.type === 'directory') {
+      const name = node.name.toLowerCase();
+      if (name.includes('server') || name.includes('api') || name.includes('backend')) return 'server';
+      if (name.includes('client') || name.includes('src') || name.includes('components') || name.includes('pages')) return 'client';
+      if (name.includes('db') || name.includes('prisma') || name.includes('database')) return 'database';
+      if (name.includes('public') || name.includes('static') || name.includes('assets')) return 'assets';
+      if (name.includes('scripts') || name.includes('docker')) return 'config';
+      return 'folder';
+    }
+    return node.category || 'file';
+  }
+
+  expandFirstLevels(node, levels, currentLevel = 0) {
+    if (currentLevel >= levels || !node) return;
+    if (node.type === 'directory') {
+      this.expandedNodes.add(node.path);
+      node.children?.forEach(child => this.expandFirstLevels(child, levels, currentLevel + 1));
+    }
+  }
+
+  expandPathTo(filePath) {
+    const parts = filePath.split('/');
+    let currentPath = '';
+    for (let i = 0; i < parts.length - 1; i++) {
+      currentPath = currentPath ? `${currentPath}/${parts[i]}` : parts[i];
+      this.expandedNodes.add(currentPath);
+    }
+    this.render();
+  }
+
+  setupEventListeners() {
+    // View buttons
+    document.querySelectorAll('.view-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('.view-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        this.currentView = btn.dataset.view;
+        this.panX = 0;
+        this.panY = 0;
+        this.zoom = 1;
+        this.render();
+      });
+    });
+
+    // Panel toggle
+    document.getElementById('close-panel').addEventListener('click', () => {
+      this.isPanelOpen = false;
+      document.getElementById('right-panel').classList.add('hidden');
+      document.getElementById('panel-toggle').classList.remove('hidden');
+    });
+
+    document.getElementById('panel-toggle').addEventListener('click', () => {
+      this.isPanelOpen = true;
+      document.getElementById('right-panel').classList.remove('hidden');
+      document.getElementById('panel-toggle').classList.add('hidden');
+    });
+  }
+
+  setupGraphInteraction(container) {
+    const wrapper = container.querySelector('.graph-wrapper');
+    if (!wrapper) return;
+
+    // Mouse wheel zoom
+    wrapper.addEventListener('wheel', (e) => {
+      e.preventDefault();
+      const delta = e.deltaY > 0 ? 0.9 : 1.1;
+      this.zoom = Math.max(0.2, Math.min(3, this.zoom * delta));
+      this.updateGraphTransform();
+    }, { passive: false });
+
+    // Pan with mouse drag
+    wrapper.addEventListener('mousedown', (e) => {
+      if (e.target.closest('.graph-node')) return;
+      this.isDragging = true;
+      this.lastMouseX = e.clientX;
+      this.lastMouseY = e.clientY;
+      wrapper.style.cursor = 'grabbing';
+    });
+
+    wrapper.addEventListener('mousemove', (e) => {
+      if (!this.isDragging) return;
+      const dx = e.clientX - this.lastMouseX;
+      const dy = e.clientY - this.lastMouseY;
+      this.panX += dx;
+      this.panY += dy;
+      this.lastMouseX = e.clientX;
+      this.lastMouseY = e.clientY;
+      this.updateGraphTransform();
+    });
+
+    wrapper.addEventListener('mouseup', () => {
+      this.isDragging = false;
+      wrapper.style.cursor = 'grab';
+    });
+
+    wrapper.addEventListener('mouseleave', () => {
+      this.isDragging = false;
+      wrapper.style.cursor = 'grab';
+    });
+
+    wrapper.style.cursor = 'grab';
+  }
+
+  updateGraphTransform() {
+    const svg = document.querySelector('.graph-svg');
+    if (svg) {
+      svg.style.transform = `translate(${this.panX}px, ${this.panY}px) scale(${this.zoom})`;
+    }
+  }
+
+  isPathActive(path) {
+    return this.activeFiles.has(path) || this.activePaths.has(path);
+  }
+
+  isPathChanged(path) {
+    // Normalize path
+    const normalizedPath = path?.replace(/\\/g, '/');
+    // Check if this exact file is changed OR if it's a directory containing changes
+    return this.changedFiles.has(normalizedPath) || this.changedPaths.has(normalizedPath);
+  }
+
+  render() {
+    const container = document.getElementById('view-container');
+
+    if (!this.structure) {
+      container.innerHTML = `
+        <div class="loading">
+          <div class="loading-spinner"></div>
+          <p>Loading repository structure...</p>
+        </div>
+      `;
+      return;
+    }
+
+    switch (this.currentView) {
+      case 'graph':
+        this.renderGraphView(container);
+        break;
+      case 'files':
+        this.renderFileExplorer(container);
+        break;
+      case 'tree':
+        this.renderSunburstView(container);
+        break;
+    }
+  }
+
+  renderGraphView(container) {
+    const width = container.clientWidth || 1000;
+    const height = container.clientHeight || 600;
+
+    // Calculate bounds
+    const padding = 150;
+    const minX = Math.min(...this.graphNodes.map(n => n.x)) - padding;
+    const maxX = Math.max(...this.graphNodes.map(n => n.x)) + padding;
+    const minY = Math.min(...this.graphNodes.map(n => n.y)) - padding;
+    const maxY = Math.max(...this.graphNodes.map(n => n.y)) + padding;
+
+    const svgWidth = maxX - minX + 300;
+    const svgHeight = maxY - minY + 200;
+
+    container.innerHTML = `
+      <div class="graph-container">
+        <div class="graph-wrapper">
+          <svg class="graph-svg" width="${svgWidth}" height="${svgHeight}" viewBox="${minX - 150} ${minY - 100} ${svgWidth} ${svgHeight}">
+            <defs>
+              <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
+                <feGaussianBlur stdDeviation="3" result="coloredBlur"/>
+                <feMerge>
+                  <feMergeNode in="coloredBlur"/>
+                  <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+              </filter>
+              <filter id="glow-strong" x="-50%" y="-50%" width="200%" height="200%">
+                <feGaussianBlur stdDeviation="6" result="coloredBlur"/>
+                <feMerge>
+                  <feMergeNode in="coloredBlur"/>
+                  <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+              </filter>
+              <filter id="glow-yellow" x="-50%" y="-50%" width="200%" height="200%">
+                <feFlood flood-color="hsl(45, 93%, 58%)" flood-opacity="0.6" result="flood"/>
+                <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
+                <feGaussianBlur in="mask" stdDeviation="4" result="coloredBlur"/>
+                <feMerge>
+                  <feMergeNode in="coloredBlur"/>
+                  <feMergeNode in="SourceGraphic"/>
+                </feMerge>
+              </filter>
+            </defs>
+            <g class="edges"></g>
+            <g class="nodes"></g>
+          </svg>
+        </div>
+        <div class="graph-controls">
+          <button class="control-btn" id="zoom-in" title="Zoom In">+</button>
+          <button class="control-btn" id="zoom-out" title="Zoom Out">-</button>
+          <button class="control-btn" id="zoom-reset" title="Reset View">⟲</button>
+        </div>
+      </div>
+    `;
+
+    const svg = container.querySelector('.graph-svg');
+    const edgesGroup = svg.querySelector('.edges');
+    const nodesGroup = svg.querySelector('.nodes');
+
+    // Draw edges
+    this.graphEdges.forEach(edge => {
+      const source = this.graphNodes.find(n => n.id === edge.source);
+      const target = this.graphNodes.find(n => n.id === edge.target);
+      if (!source || !target) return;
+
+      const isActive = this.isPathActive(source.path) || this.isPathActive(target.path);
+      const hasChanges = edge.hasChanges || this.isPathChanged(target.path);
+      const isFileEdge = edge.isFileEdge;
+
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+
+      // Different path for file edges vs directory edges
+      if (isFileEdge) {
+        // Short vertical edge to file below
+        path.setAttribute('d', `M${source.x},${source.y + 25} L${target.x},${target.y - 12}`);
+      } else {
+        // Vertical edge to directory
+        const sourceY = source.y + 25;
+        const targetY = target.y - 25;
+        const midY = (sourceY + targetY) / 2;
+        path.setAttribute('d', `M${source.x},${sourceY} C${source.x},${midY} ${target.x},${midY} ${target.x},${targetY}`);
+      }
+
+      const classes = ['graph-edge'];
+      if (isActive) classes.push('active');
+      if (hasChanges) classes.push('has-changes');
+      if (isFileEdge) classes.push('file-edge');
+      path.setAttribute('class', classes.join(' '));
+
+      // Pulsing dashed line for changes
+      if (hasChanges) {
+        path.setAttribute('stroke', 'hsl(45, 93%, 58%)');
+        path.setAttribute('stroke-dasharray', '8,4');
+        path.setAttribute('filter', 'url(#glow-yellow)');
+      } else if (isActive) {
+        path.setAttribute('stroke-dasharray', '8,4');
+        path.setAttribute('filter', 'url(#glow)');
+      }
+
+      edgesGroup.appendChild(path);
+    });
+
+    // Draw nodes (directories and changed files)
+    this.graphNodes.forEach(node => {
+      // Handle "+N more" indicator
+      if (node.isMoreIndicator) {
+        const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        g.setAttribute('class', 'graph-node more-indicator');
+        g.setAttribute('transform', `translate(${node.x - 30}, ${node.y - 10})`);
+
+        const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        text.setAttribute('x', '0');
+        text.setAttribute('y', '12');
+        text.setAttribute('font-size', '10');
+        text.setAttribute('fill', 'hsl(45, 93%, 58%)');
+        text.setAttribute('font-weight', '600');
+        text.textContent = node.label;
+        g.appendChild(text);
+
+        g.addEventListener('click', (e) => {
+          e.stopPropagation();
+          this.showFileDiff(node.path);
+        });
+        g.style.cursor = 'pointer';
+
+        nodesGroup.appendChild(g);
+        return;
+      }
+
+      const isActive = this.isPathActive(node.path);
+      const isDirectlyActive = this.activeFiles.has(node.path);
+      const isChanged = this.isPathChanged(node.path);
+      const isFile = node.isFile;
+      const isChangedFile = node.isChangedFile;
+      // Check both pre-calculated count and current changedPaths
+      const hasChanges = node.changedCount > 0 || this.changedPaths.has(node.path) || isChanged;
+
+      const g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+      const classes = ['graph-node'];
+      if (isActive) classes.push('active');
+      if (isDirectlyActive) classes.push('directly-active');
+      if (hasChanges || isChangedFile) classes.push('has-changes');
+      if (isFile) classes.push('file-node');
+      g.setAttribute('class', classes.join(' '));
+
+      if (isFile) {
+        // Render changed file node (compact)
+        const width = 140;
+        const height = 26;
+        g.setAttribute('transform', `translate(${node.x - width/2}, ${node.y - height/2})`);
+
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('class', 'node-bg');
+        rect.setAttribute('width', width);
+        rect.setAttribute('height', height);
+        rect.setAttribute('rx', '4');
+        rect.setAttribute('filter', 'url(#glow-yellow)');
+        g.appendChild(rect);
+
+        // File icon
+        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        icon.setAttribute('x', '10');
+        icon.setAttribute('y', '17');
+        icon.setAttribute('font-size', '11');
+        icon.textContent = this.getFileIcon(node.path?.split('.').pop() || '');
+        g.appendChild(icon);
+
+        // File name
+        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        label.setAttribute('class', 'node-label file-label');
+        label.setAttribute('x', '26');
+        label.setAttribute('y', '17');
+        label.setAttribute('font-size', '10');
+        label.textContent = node.label.length > 16 ? node.label.slice(0, 14) + '...' : node.label;
+        g.appendChild(label);
+
+        // M badge
+        const badge = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        badge.setAttribute('x', width - 12);
+        badge.setAttribute('y', '17');
+        badge.setAttribute('text-anchor', 'middle');
+        badge.setAttribute('font-size', '9');
+        badge.setAttribute('font-weight', '700');
+        badge.setAttribute('fill', 'hsl(45, 93%, 58%)');
+        badge.textContent = 'M';
+        g.appendChild(badge);
+      } else {
+        // Render directory node
+        const width = 160;
+        const height = 50;
+        g.setAttribute('transform', `translate(${node.x - width/2}, ${node.y - height/2})`);
+
+        const rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+        rect.setAttribute('class', 'node-bg');
+        rect.setAttribute('width', width);
+        rect.setAttribute('height', height);
+        rect.setAttribute('rx', '8');
+        if (hasChanges) {
+          rect.setAttribute('filter', 'url(#glow-yellow)');
+        } else if (isDirectlyActive) {
+          rect.setAttribute('filter', 'url(#glow-strong)');
+        }
+        g.appendChild(rect);
+
+        // Icon background
+        const iconBg = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
+        iconBg.setAttribute('cx', '25');
+        iconBg.setAttribute('cy', '25');
+        iconBg.setAttribute('r', '16');
+        iconBg.setAttribute('class', 'node-icon-bg');
+        g.appendChild(iconBg);
+
+        // Icon
+        const icon = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        icon.setAttribute('class', 'node-icon');
+        icon.setAttribute('x', '25');
+        icon.setAttribute('y', '30');
+        icon.setAttribute('text-anchor', 'middle');
+        icon.setAttribute('font-size', '14');
+        icon.textContent = this.getNodeIcon(node.type);
+        g.appendChild(icon);
+
+        // Label
+        const label = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        label.setAttribute('class', 'node-label');
+        label.setAttribute('x', '48');
+        label.setAttribute('y', '20');
+        label.setAttribute('font-size', '11');
+        label.textContent = node.label.length > 12 ? node.label.slice(0, 10) + '...' : node.label;
+        g.appendChild(label);
+
+        // Stats line
+        const stats = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+        stats.setAttribute('class', 'node-type');
+        stats.setAttribute('x', '48');
+        stats.setAttribute('y', '34');
+        stats.setAttribute('font-size', '9');
+        const statsText = `${node.fileCount || 0} files, ${node.dirCount || 0} dirs`;
+        stats.textContent = statsText;
+        g.appendChild(stats);
+
+        // Changed badge
+        if (hasChanges && node.changedCount > 0) {
+          const badgeBg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
+          badgeBg.setAttribute('x', width - 35);
+          badgeBg.setAttribute('y', '5');
+          badgeBg.setAttribute('width', '30');
+          badgeBg.setAttribute('height', '16');
+          badgeBg.setAttribute('rx', '8');
+          badgeBg.setAttribute('class', 'change-badge');
+          g.appendChild(badgeBg);
+
+          const badgeText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+          badgeText.setAttribute('x', width - 20);
+          badgeText.setAttribute('y', '16');
+          badgeText.setAttribute('text-anchor', 'middle');
+          badgeText.setAttribute('font-size', '9');
+          badgeText.setAttribute('font-weight', '600');
+          badgeText.setAttribute('fill', 'hsl(222, 47%, 11%)');
+          badgeText.textContent = node.changedCount;
+          g.appendChild(badgeText);
+        }
+      }
+
+      // Hover events
+      g.addEventListener('mouseenter', (e) => this.showTooltip(e, node));
+      g.addEventListener('mousemove', (e) => this.moveTooltip(e));
+      g.addEventListener('mouseleave', () => this.hideTooltip());
+
+      // Click to show diff
+      g.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.showFileDiff(node.path);
+      });
+
+      nodesGroup.appendChild(g);
+    });
+
+    // Setup interactions
+    this.setupGraphInteraction(container);
+
+    // Zoom controls
+    document.getElementById('zoom-in').addEventListener('click', () => {
+      this.zoom = Math.min(3, this.zoom * 1.2);
+      this.updateGraphTransform();
+    });
+
+    document.getElementById('zoom-out').addEventListener('click', () => {
+      this.zoom = Math.max(0.3, this.zoom / 1.2);
+      this.updateGraphTransform();
+    });
+
+    document.getElementById('zoom-reset').addEventListener('click', () => {
+      this.zoom = 1;
+      this.panX = 0;
+      this.panY = 0;
+      this.updateGraphTransform();
+    });
+  }
+
+  getNodeIcon(type) {
+    const icons = {
+      folder: '📁',
+      server: '🖥️',
+      client: '💻',
+      database: '🗄️',
+      assets: '🖼️',
+      config: '⚙️',
+      code: '📄',
+      style: '🎨',
+      docs: '📝'
+    };
+    return icons[type] || '📄';
+  }
+
+  renderFileExplorer(container) {
+    container.innerHTML = `
+      <div class="file-explorer">
+        <div class="file-tree">
+          <div class="file-tree-header">
+            <h3>EXPLORER</h3>
+          </div>
+          <div class="file-tree-content" id="file-tree-content"></div>
+        </div>
+      </div>
+    `;
+
+    const content = document.getElementById('file-tree-content');
+    this.renderTreeNode(this.structure, content, 0);
+  }
+
+  renderTreeNode(node, container, depth) {
+    const isActive = this.isPathActive(node.path);
+    const isDirectlyActive = this.activeFiles.has(node.path);
+    const isChanged = this.isPathChanged(node.path);
+    const isExpanded = this.expandedNodes.has(node.path);
+    const hasChildren = node.type === 'directory' && node.children?.length > 0;
+
+    // For directories, check if any children are changed
+    let hasChangedChildren = false;
+    if (hasChildren) {
+      const countChanges = (n) => {
+        if (this.isPathChanged(n.path)) return true;
+        if (n.children) return n.children.some(countChanges);
+        return false;
+      };
+      hasChangedChildren = node.children.some(countChanges);
+    }
+
+    const item = document.createElement('div');
+    const classes = ['tree-item'];
+    if (isActive) classes.push('active');
+    if (isDirectlyActive) classes.push('directly-active');
+    if (isChanged || hasChangedChildren) classes.push('has-changes');
+    item.className = classes.join(' ');
+    item.style.paddingLeft = `${depth * 16 + 8}px`;
+
+    const chevron = hasChildren ? (isExpanded ? '▼' : '▶') : '  ';
+    const icon = node.type === 'directory' ? '📁' : this.getFileIcon(node.extension);
+
+    item.innerHTML = `
+      <span class="tree-chevron ${isExpanded ? 'expanded' : ''}">${chevron}</span>
+      <span class="tree-item-icon">${icon}</span>
+      <span class="tree-item-name">${node.name}</span>
+      ${isChanged ? '<span class="tree-item-badge yellow-pulse">M</span>' : ''}
+      ${hasChangedChildren && !isChanged ? '<span class="tree-item-badge yellow-pulse">•</span>' : ''}
+      ${isDirectlyActive ? '<span class="tree-pulse-dot green"></span>' : ''}
+    `;
+
+    item.addEventListener('click', (e) => {
+      if (hasChildren) {
+        if (this.expandedNodes.has(node.path)) {
+          this.expandedNodes.delete(node.path);
+        } else {
+          this.expandedNodes.add(node.path);
+        }
+        this.render();
+      } else {
+        // File clicked - show diff
+        this.showFileDiff(node.path);
+      }
+    });
+
+    // Double click on directory to show diff for modified files in it
+    if (hasChildren) {
+      item.addEventListener('dblclick', (e) => {
+        e.stopPropagation();
+        this.showFileDiff(node.path);
+      });
+    }
+
+    container.appendChild(item);
+
+    if (hasChildren && isExpanded) {
+      const childContainer = document.createElement('div');
+      childContainer.className = 'tree-children';
+      node.children.forEach(child => this.renderTreeNode(child, childContainer, depth + 1));
+      container.appendChild(childContainer);
+    }
+  }
+
+  getFileIcon(ext) {
+    const icons = {
+      js: '📜', ts: '📘', tsx: '⚛️', jsx: '⚛️',
+      css: '🎨', scss: '🎨', html: '🌐',
+      json: '📋', md: '📝', py: '🐍'
+    };
+    return icons[ext] || '📄';
+  }
+
+  renderSunburstView(container) {
+    const width = container.clientWidth || 800;
+    const height = container.clientHeight || 600;
+    const centerX = width / 2;
+    const centerY = height / 2;
+    const maxRadius = Math.min(width, height) / 2 - 100;
+
+    container.innerHTML = `
+      <div class="sunburst-container">
+        <svg class="sunburst-svg" viewBox="0 0 ${width} ${height}">
+          <defs>
+            <filter id="sunburst-glow-green" x="-50%" y="-50%" width="200%" height="200%">
+              <feFlood flood-color="hsl(150, 100%, 50%)" flood-opacity="0.6" result="flood"/>
+              <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
+              <feGaussianBlur in="mask" stdDeviation="6" result="coloredBlur"/>
+              <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+              </feMerge>
+            </filter>
+            <filter id="sunburst-glow-yellow" x="-50%" y="-50%" width="200%" height="200%">
+              <feFlood flood-color="hsl(45, 100%, 55%)" flood-opacity="0.7" result="flood"/>
+              <feComposite in="flood" in2="SourceGraphic" operator="in" result="mask"/>
+              <feGaussianBlur in="mask" stdDeviation="8" result="coloredBlur"/>
+              <feMerge>
+                <feMergeNode in="coloredBlur"/>
+                <feMergeNode in="SourceGraphic"/>
+              </feMerge>
+            </filter>
+          </defs>
+        </svg>
+        <div class="sunburst-legend">
+          <h4>STATUS</h4>
+          <div class="legend-items">
+            <div class="legend-row"><span class="legend-swatch yellow-glow" style="background-color: hsl(45, 93%, 50%); display: inline-block;"></span>Pending Changes (Yellow)</div>
+            <div class="legend-row"><span class="legend-swatch green-glow" style="background-color: hsl(150, 80%, 45%); display: inline-block;"></span>Currently Editing (Green)</div>
+            <div class="legend-row"><span class="legend-swatch" style="background-color: hsl(217, 15%, 18%); display: inline-block; opacity: 0.4;"></span>Unchanged (Muted)</div>
+          </div>
+        </div>
+      </div>
+    `;
+
+    const svg = container.querySelector('.sunburst-svg');
+
+    const calculateSize = (node) => {
+      if (node.type === 'file') return 1;
+      if (!node.children?.length) return 1;
+      return node.children.reduce((sum, child) => sum + calculateSize(child), 0);
+    };
+
+    const drawArc = (node, startAngle, endAngle, depth, maxDepth = 4) => {
+      if (depth > maxDepth) return;
+
+      const innerRadius = depth === 0 ? 0 : 60 + (depth - 1) * 50;
+      const outerRadius = depth === 0 ? 60 : innerRadius + 45;
+      const clampedOuter = Math.min(outerRadius, maxRadius);
+
+      if (clampedOuter <= innerRadius) return;
+
+      const isActive = this.isPathActive(node.path);
+      const isDirectlyActive = this.activeFiles.has(node.path);
+      const isChanged = this.isPathChanged(node.path);
+
+      const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+      path.setAttribute('d', this.createArcPath(centerX, centerY, innerRadius, clampedOuter, startAngle, endAngle));
+
+      // Color logic:
+      // - Yellow for pending changes (git diff)
+      // - Green for currently editing (active)
+      // - Muted for unchanged
+      if (isChanged) {
+        // YELLOW for pending changes
+        path.setAttribute('fill', 'hsl(45, 93%, 50%)');
+        path.setAttribute('stroke', 'hsl(45, 100%, 60%)');
+        path.setAttribute('stroke-width', '3');
+        path.setAttribute('opacity', '1');
+      } else if (isDirectlyActive) {
+        // GREEN for currently editing
+        path.setAttribute('fill', 'hsl(150, 80%, 45%)');
+        path.setAttribute('stroke', 'hsl(150, 100%, 50%)');
+        path.setAttribute('stroke-width', '4');
+        path.setAttribute('opacity', '1');
+      } else if (isActive) {
+        // Slightly highlighted for parent of active
+        path.setAttribute('fill', this.getArcColor(node));
+        path.setAttribute('stroke', 'hsl(150, 60%, 40%)');
+        path.setAttribute('stroke-width', '2');
+        path.setAttribute('opacity', '0.8');
+      } else {
+        // Muted but visible for unchanged
+        path.setAttribute('fill', this.getMutedColor(node));
+        path.setAttribute('stroke', 'hsl(222, 20%, 25%)');
+        path.setAttribute('stroke-width', '1');
+        path.setAttribute('opacity', '0.5');
+      }
+
+      const classes = ['sunburst-arc'];
+      if (isDirectlyActive) {
+        classes.push('directly-active');
+        path.setAttribute('filter', 'url(#sunburst-glow-green)');
+      } else if (isChanged) {
+        classes.push('changed');
+        path.setAttribute('filter', 'url(#sunburst-glow-yellow)');
+      }
+      path.setAttribute('class', classes.join(' '));
+
+      path.addEventListener('mouseenter', (e) => this.showTooltip(e, node));
+      path.addEventListener('mousemove', (e) => this.moveTooltip(e));
+      path.addEventListener('mouseleave', () => this.hideTooltip());
+
+      // Click to show diff
+      path.addEventListener('click', (e) => {
+        e.stopPropagation();
+        this.showFileDiff(node.path);
+      });
+
+      svg.appendChild(path);
+
+      if (node.children?.length) {
+        const totalSize = node.children.reduce((sum, child) => sum + calculateSize(child), 0);
+        let currentAngle = startAngle;
+
+        node.children.forEach(child => {
+          const childSize = calculateSize(child);
+          const childAngle = (childSize / totalSize) * (endAngle - startAngle);
+          drawArc(child, currentAngle, currentAngle + childAngle, depth + 1, maxDepth);
+          currentAngle += childAngle;
+        });
+      }
+    };
+
+    drawArc(this.structure, 0, Math.PI * 2, 0);
+
+    // Center label
+    const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
+    text.setAttribute('x', centerX);
+    text.setAttribute('y', centerY);
+    text.setAttribute('text-anchor', 'middle');
+    text.setAttribute('dominant-baseline', 'middle');
+    text.setAttribute('fill', 'white');
+    text.setAttribute('font-size', '14');
+    text.setAttribute('font-weight', '600');
+    text.setAttribute('font-family', 'Orbitron, sans-serif');
+    text.textContent = this.structure.name;
+    svg.appendChild(text);
+  }
+
+  createArcPath(cx, cy, innerRadius, outerRadius, startAngle, endAngle) {
+    const start = startAngle - Math.PI / 2;
+    const end = endAngle - Math.PI / 2;
+
+    const x1 = cx + innerRadius * Math.cos(start);
+    const y1 = cy + innerRadius * Math.sin(start);
+    const x2 = cx + outerRadius * Math.cos(start);
+    const y2 = cy + outerRadius * Math.sin(start);
+    const x3 = cx + outerRadius * Math.cos(end);
+    const y3 = cy + outerRadius * Math.sin(end);
+    const x4 = cx + innerRadius * Math.cos(end);
+    const y4 = cy + innerRadius * Math.sin(end);
+
+    const largeArc = endAngle - startAngle > Math.PI ? 1 : 0;
+
+    if (innerRadius === 0) {
+      return `M ${cx} ${cy} L ${x2} ${y2} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x3} ${y3} Z`;
+    }
+
+    return `M ${x1} ${y1} L ${x2} ${y2} A ${outerRadius} ${outerRadius} 0 ${largeArc} 1 ${x3} ${y3} L ${x4} ${y4} A ${innerRadius} ${innerRadius} 0 ${largeArc} 0 ${x1} ${y1} Z`;
+  }
+
+  getArcColor(node) {
+    if (node.type === 'directory') return 'hsl(217, 91%, 50%)';
+    const colors = {
+      code: 'hsl(142, 76%, 45%)',
+      style: 'hsl(330, 80%, 55%)',
+      config: 'hsl(45, 90%, 50%)',
+      docs: 'hsl(200, 90%, 50%)',
+      markup: 'hsl(280, 70%, 55%)',
+      data: 'hsl(170, 70%, 45%)',
+      image: 'hsl(25, 80%, 50%)'
+    };
+    return colors[node.category] || 'hsl(215, 20%, 45%)';
+  }
+
+  getMutedColor(node) {
+    // Return desaturated but visible versions for unchanged items
+    if (node.type === 'directory') return 'hsl(217, 20%, 28%)';
+    const mutedColors = {
+      code: 'hsl(142, 15%, 28%)',
+      style: 'hsl(330, 15%, 30%)',
+      config: 'hsl(45, 15%, 30%)',
+      docs: 'hsl(200, 15%, 30%)',
+      markup: 'hsl(280, 12%, 30%)',
+      data: 'hsl(170, 12%, 28%)',
+      image: 'hsl(25, 15%, 30%)'
+    };
+    return mutedColors[node.category] || 'hsl(215, 12%, 26%)';
+  }
+
+  showTooltip(e, node) {
+    const type = node.type === 'directory' ? 'Directory' : (node.category || 'File');
+    const childInfo = node.childCount ? ` (${node.childCount} items)` : (node.children?.length ? ` (${node.children.length} items)` : '');
+
+    this.tooltip.innerHTML = `
+      <strong>${node.label || node.name}</strong>
+      <div class="tooltip-type">${type}${childInfo}</div>
+      <div class="tooltip-path">${node.path}</div>
+    `;
+    this.tooltip.style.display = 'block';
+    this.moveTooltip(e);
+  }
+
+  moveTooltip(e) {
+    this.tooltip.style.left = (e.clientX + 15) + 'px';
+    this.tooltip.style.top = (e.clientY + 15) + 'px';
+  }
+
+  hideTooltip() {
+    this.tooltip.style.display = 'none';
+  }
+}
+
+// Initialize
+document.addEventListener('DOMContentLoaded', () => {
+  window.seeclaude = new SeeClaude();
+});