@syke1/mcp-server 1.3.9 → 1.3.11

package/dist/languages/plugin.js

@@ -101,6 +101,7 @@ const SKIP_DIRS = new Set([
     "node_modules", ".git", "dist", "build", ".dart_tool", ".pub-cache",
     "__pycache__", ".mypy_cache", ".pytest_cache", "venv", ".venv",
     "target", "vendor", ".gradle", "bin", "obj",
+    ".next", "out", ".nuxt", ".output",
 ]);
 function discoverAllFiles(rootDir, extensions, extraSkipDirs) {
     const results = [];

package/dist/web/public/app.js

@@ -18,6 +18,8 @@ let crawlData = null;
 let modifyingNodes = new Set(); // nodes currently being modified by AI
 let heartbeatNodes = new Map(); // nodeId → { riskLevel, startTime, interval }
 let diffScrollAnim = null; // animation for diff scroll
+let knownNodeIds = new Set(); // track existing nodes for star-birth detection
+let birthAnimations = new Map(); // nodeId → { startTime, spawnPos, targetPos }
 
 const LAYER_HEX = {
   FE: "#00d4ff", BE: "#c084fc", DB: "#ff6b35",
@@ -27,12 +29,12 @@ const LAYER_HEX = {
 const LAYER_KEYS = ["FE", "BE", "DB", "API", "CONFIG", "UTIL"];
 
 const LAYER_CENTERS = {
-  FE:     { x: -800, y:  300, z: -300 },
-  BE:     { x:  800, y:  300, z:  300 },
-  DB:     { x:    0, y: -700, z:  600 },
-  API:    { x:  700, y: -400, z: -600 },
-  CONFIG: { x: -700, y:  800, z:  500 },
-  UTIL:   { x:    0, y:   50, z:    0 },
+  FE:     { x: -2500, y:  1000, z: -1000 },
+  BE:     { x:  2500, y:  1000, z:  1000 },
+  DB:     { x:     0, y: -2200, z:  1800 },
+  API:    { x:  2200, y: -1200, z: -1800 },
+  CONFIG: { x: -2200, y:  2500, z:  1500 },
+  UTIL:   { x:     0, y:   200, z:     0 },
 };
 
 // ═══════════════════════════════════════════
@@ -54,18 +56,23 @@ document.addEventListener("DOMContentLoaded", async () => {
 
 // Periodic server health check (catches server down even without SSE)
 let healthCheckTimer = null;
+let healthFailCount = 0;
+const HEALTH_FAIL_THRESHOLD = 3; // Show offline only after 3 consecutive failures
 function startHealthCheck() {
   if (healthCheckTimer) return;
   healthCheckTimer = setInterval(async () => {
     try {
-      const res = await fetch("/api/project-info", { signal: AbortSignal.timeout(3000) });
+      const res = await fetch("/api/project-info", { signal: AbortSignal.timeout(10000) });
       if (res.ok) {
-        // Server is alive — if overlay was showing, hideServerOffline handles reconnection
+        healthFailCount = 0; // Reset on success
       }
     } catch (e) {
-      showServerOffline();
+      healthFailCount++;
+      if (healthFailCount >= HEALTH_FAIL_THRESHOLD) {
+        showServerOffline();
+      }
     }
-  }, 10000); // Check every 10 seconds
+  }, 30000); // Check every 30 seconds (not 10)
 }
 
 // ═══════════════════════════════════════════
@@ -103,20 +110,62 @@ async function loadGraph() {
   }
   hideWelcomeOverlay();
 
+  const isReload = Graph !== null;
+
+  // Spawn point for new nodes (top-right corner of 3D space)
+  const SPAWN = { x: 5000, y: 4000, z: -2000 };
+
+  // Preserve existing node positions on reload
+  const currentPositions = {};
+  if (isReload) {
+    const cur = Graph.graphData();
+    cur.nodes.forEach(n => {
+      currentPositions[n.id] = { x: n.x, y: n.y, z: n.z };
+    });
+  }
+
   const nodes = raw.nodes.map(n => {
     const layer = n.data.layer || "UTIL";
     const c = LAYER_CENTERS[layer] || LAYER_CENTERS.UTIL;
+    const isNew = knownNodeIds.size > 0 && !knownNodeIds.has(n.data.id);
+
+    // For existing nodes on reload: keep their current simulated position
+    const targetPos = currentPositions[n.data.id] || {
+      x: c.x + (Math.random() - 0.5) * 600,
+      y: c.y + (Math.random() - 0.5) * 600,
+      z: c.z + (Math.random() - 0.5) * 600,
+    };
+
+    // New node: spawn from far corner, will animate to target
+    if (isNew) {
+      console.log("[SYKE] ★ Star birth:", n.data.id);
+      birthAnimations.set(n.data.id, {
+        startTime: Date.now(),
+        spawnPos: { ...SPAWN },
+        targetPos: { ...targetPos },
+        duration: 2500, // 2.5s flight time
+      });
+    }
+
     return {
       id: n.data.id, label: n.data.label, fullPath: n.data.fullPath,
       riskLevel: n.data.riskLevel, dependentCount: n.data.dependentCount,
       lineCount: n.data.lineCount || 0, importsCount: n.data.importsCount || 0,
       depth: n.data.depth || 0, group: n.data.group,
       layer, action: n.data.action || "X", env: n.data.env || "PROD",
-      x: c.x + (Math.random() - 0.5) * 200,
-      y: c.y + (Math.random() - 0.5) * 200,
-      z: c.z + (Math.random() - 0.5) * 200,
+      x: isNew ? SPAWN.x : targetPos.x,
+      y: isNew ? SPAWN.y : targetPos.y,
+      z: isNew ? SPAWN.z : targetPos.z,
+      // Pin new nodes at SPAWN so simulation doesn't skip their animation
+      fx: isNew ? SPAWN.x : undefined,
+      fy: isNew ? SPAWN.y : undefined,
+      fz: isNew ? SPAWN.z : undefined,
+      _isNew: isNew,
     };
   });
+
+  // Update known node IDs
+  knownNodeIds = new Set(nodes.map(n => n.id));
   const links = raw.edges.map(e => ({ source: e.data.source, target: e.data.target }));
   graphData = { nodes, links };
 
@@ -128,6 +177,15 @@ async function loadGraph() {
   const highRisk = nodes.filter(n => n.riskLevel === "HIGH").length;
   document.getElementById("stat-high").textContent = highRisk;
 
+  // ── RELOAD: just update data, no graph re-creation ──
+  if (isReload) {
+    Graph.graphData(graphData);
+    buildLegend(layerCounts);
+    console.log("[SYKE] Graph updated (reload), birth animations:", birthAnimations.size);
+    return;
+  }
+
+  // ── FIRST LOAD: create new Graph instance ──
   const container = document.getElementById("3d-graph");
 
   Graph = ForceGraph3D()(container)
@@ -140,7 +198,7 @@ async function loadGraph() {
     .nodeColor(node => getNodeColor(node))
     .nodeVal(node => {
       if (!isNodeVisible(node)) return 0.001;
-      const base = Math.max(2, Math.sqrt(node.lineCount / 3));
+      const base = Math.max(8, Math.sqrt(node.lineCount) * 0.8);
       const hb = heartbeatNodes.get(node.id);
       if (hb) {
         const elapsed = Date.now() - hb.startTime;
@@ -153,6 +211,14 @@ async function loadGraph() {
         const pulse = 0.5 + 0.5 * Math.sin(Date.now() / 200);
         return base * (1 + pulse * 0.4);
       }
+      // Star birth: start large, shrink to normal
+      const birth = birthAnimations.get(node.id);
+      if (birth) {
+        const t = Math.min(1, (Date.now() - birth.startTime) / birth.duration);
+        if (t >= 1) birthAnimations.delete(node.id);
+        const scale = 1 + (3 - 1) * (1 - t) * (1 - t); // ease-out: 3x → 1x
+        return base * scale;
+      }
       return base;
     })
     .nodeOpacity(1.0)
@@ -215,19 +281,44 @@ async function loadGraph() {
       node.fz = undefined;
     })
 
-    .d3AlphaDecay(0.015)
-    .d3VelocityDecay(0.35)
-    .warmupTicks(100)
-    .cooldownTicks(500)
+    // Star birth: animate pinned position from SPAWN → target on each tick
+    .onEngineTick(() => {
+      if (birthAnimations.size === 0) return;
+      const now = Date.now();
+      for (const [nodeId, anim] of birthAnimations) {
+        const node = graphData.nodes.find(n => n.id === nodeId);
+        if (!node) continue;
+        const t = Math.min(1, (now - anim.startTime) / anim.duration);
+        if (t < 1) {
+          // Ease-out cubic: fast start, gentle landing
+          const ease = 1 - Math.pow(1 - t, 3);
+          node.fx = anim.spawnPos.x + (anim.targetPos.x - anim.spawnPos.x) * ease;
+          node.fy = anim.spawnPos.y + (anim.targetPos.y - anim.spawnPos.y) * ease;
+          node.fz = anim.spawnPos.z + (anim.targetPos.z - anim.spawnPos.z) * ease;
+        } else {
+          // Animation done: unpin, let simulation fine-tune position
+          node.fx = undefined;
+          node.fy = undefined;
+          node.fz = undefined;
+          birthAnimations.delete(nodeId);
+          console.log("[SYKE] ★ Star birth complete:", nodeId);
+        }
+      }
+    })
+
+    .d3AlphaDecay(0.008)
+    .d3VelocityDecay(0.3)
+    .warmupTicks(300)
+    .cooldownTicks(800)
     .enablePointerInteraction(true);
 
-  Graph.d3Force("cluster", clusterForce(0.25));
-  Graph.d3Force("charge").strength(-25);
+  Graph.d3Force("cluster", clusterForce(0.015));
+  Graph.d3Force("charge").strength(-800);
   Graph.d3Force("link")
-    .distance(l => srcLayer(l) === tgtLayer(l) ? 35 : 150)
-    .strength(l => srcLayer(l) === tgtLayer(l) ? 0.8 : 0.2);
+    .distance(l => srcLayer(l) === tgtLayer(l) ? 250 : 900)
+    .strength(l => srcLayer(l) === tgtLayer(l) ? 0.2 : 0.05);
 
-  Graph.cameraPosition({ x: 0, y: 0, z: 1600 });
+  Graph.cameraPosition({ x: 0, y: 0, z: 3500 });
 
   setTimeout(() => {
     try {
@@ -257,6 +348,12 @@ async function loadGraph() {
   buildLegend(layerCounts);
   createNodeLabels();
   updateLabelsLoop();
+
+  // ── Auto-start code crawl with highest-hub file on initial load ──
+  setTimeout(() => {
+    const topNode = nodes.slice().sort((a, b) => b.dependentCount - a.dependentCount)[0];
+    if (topNode) startCodeCrawl(topNode.id);
+  }, 2000);
 }
 
 // ═══════════════════════════════════════════
@@ -366,6 +463,26 @@ function getNodeColor(node) {
     return `rgb(${r},${g},${b})`;
   }
 
+  // Star birth: bright white → cyan → normal layer color
+  const birth = birthAnimations.get(node.id);
+  if (birth) {
+    const t = Math.min(1, (Date.now() - birth.startTime) / birth.duration);
+    const layerHex = LAYER_HEX[node.layer] || "#ff69b4";
+    const lr = parseInt(layerHex.slice(1,3),16);
+    const lg = parseInt(layerHex.slice(3,5),16);
+    const lb = parseInt(layerHex.slice(5,7),16);
+    if (t < 0.3) {
+      // Phase 1: white → cyan flash
+      const p = t / 0.3;
+      return `rgb(${Math.round(255*(1-p))},${255},${255})`;
+    } else {
+      // Phase 2: cyan → normal layer color (smooth blend)
+      const p = (t - 0.3) / 0.7;
+      const ease = p * p; // ease-in for gentle arrival
+      return `rgb(${Math.round(lr*ease)},${Math.round(255+(lg-255)*ease)},${Math.round(255+(lb-255)*ease)})`;
+    }
+  }
+
   // AI is modifying this node → bright pulsing white/orange
   if (modifyingNodes.has(node.id)) {
     const t = Date.now() / 200;
@@ -604,7 +721,7 @@ function handleBackgroundClick() {
   document.getElementById("code-content").innerHTML = '<p class="placeholder">Select a node to preview source code</p>';
   document.getElementById("sim-content").innerHTML = '<p class="placeholder">Select a node, then switch to SIM tab</p>';
   document.getElementById("btn-ai-analyze").disabled = true;
-  stopCodeCrawl();
+  // Don't stop code crawl — keep it always visible
   refreshGraph();
 }
 
@@ -1578,10 +1695,52 @@ function stopCodeCrawl() {
   if (crawlUserTimer) { clearTimeout(crawlUserTimer); crawlUserTimer = null; }
   const vp = document.getElementById("crawl-viewport");
   if (vp) { vp.removeEventListener("wheel", pauseAutoScroll); vp.removeEventListener("mousedown", pauseAutoScroll); vp.removeEventListener("touchstart", pauseAutoScroll); }
-  document.getElementById("code-crawl").classList.remove("active");
+  // Code crawl stays always visible — never hide
   crawlData = null;
 }
 
+// ═══════════════════════════════════════════
+// CODE CRAWL: DRAG SUPPORT
+// ═══════════════════════════════════════════
+(function initCrawlDrag() {
+  let isDragging = false, startX, startY, startLeft, startTop;
+  document.addEventListener("DOMContentLoaded", () => {
+    const crawlEl = document.getElementById("code-crawl");
+    const header = document.getElementById("crawl-header");
+    if (!crawlEl || !header) return;
+
+    header.addEventListener("mousedown", (e) => {
+      if (e.target.closest("#crawl-viewport")) return;
+      isDragging = true;
+      crawlEl.classList.add("dragging");
+      const rect = crawlEl.getBoundingClientRect();
+      const parent = crawlEl.offsetParent.getBoundingClientRect();
+      startX = e.clientX;
+      startY = e.clientY;
+      startLeft = rect.left - parent.left;
+      startTop = rect.top - parent.top;
+      crawlEl.style.left = startLeft + "px";
+      crawlEl.style.top = startTop + "px";
+      crawlEl.style.bottom = "auto";
+      e.preventDefault();
+    });
+
+    document.addEventListener("mousemove", (e) => {
+      if (!isDragging) return;
+      const dx = e.clientX - startX;
+      const dy = e.clientY - startY;
+      crawlEl.style.left = (startLeft + dx) + "px";
+      crawlEl.style.top = (startTop + dy) + "px";
+    });
+
+    document.addEventListener("mouseup", () => {
+      if (!isDragging) return;
+      isDragging = false;
+      crawlEl.classList.remove("dragging");
+    });
+  });
+})();
+
 // ═══════════════════════════════════════════
 // REAL-TIME DIFF VIEWER (SSE-driven)
 // ═══════════════════════════════════════════
@@ -1683,6 +1842,9 @@ function showRealtimeDiff(data) {
 
   contentEl.innerHTML = html;
 
+  // ── Mirror diff to CODE tab (VS Code style) ──
+  renderCodeTabDiff(data, html);
+
   // ── Animated diff scroll: sweep through file, pause on changes ──
   if (diffScrollAnim) cancelAnimationFrame(diffScrollAnim);
   viewport.scrollTop = 0;
@@ -1768,6 +1930,97 @@ function updateDiffWithAnalysis(analysis) {
 }
 
 // ═══════════════════════════════════════════
+// CODE TAB: VS Code-style real-time diff viewer
+// ═══════════════════════════════════════════
+let codeTabScrollAnim = null;
+
+function renderCodeTabDiff(data, diffHtml) {
+  const codeEl = document.getElementById("code-content");
+  if (!codeEl) return;
+
+  // Build VS Code-style header
+  const fileName = data.file.split("/").pop();
+  const ext = fileName.split(".").pop();
+  const langLabel = { ts: "TypeScript", tsx: "TypeScript React", js: "JavaScript", jsx: "JSX",
+    dart: "Dart", py: "Python", go: "Go", rs: "Rust", java: "Java", cpp: "C++", rb: "Ruby",
+    css: "CSS", html: "HTML", json: "JSON", md: "Markdown", yaml: "YAML", yml: "YAML" }[ext] || ext.toUpperCase();
+  const changeIcon = data.type === "added" ? "A" : data.type === "deleted" ? "D" : "M";
+  const changeCls = data.type === "added" ? "vsc-added" : data.type === "deleted" ? "vsc-deleted" : "vsc-modified";
+
+  let html = `<div class="vsc-editor">`;
+  // Tab bar (like VS Code file tab)
+  html += `<div class="vsc-tab-bar">`;
+  html += `<div class="vsc-tab active">`;
+  html += `<span class="vsc-tab-change ${changeCls}">${changeIcon}</span>`;
+  html += `<span class="vsc-tab-name">${fileName}</span>`;
+  html += `<span class="vsc-tab-lang">${langLabel}</span>`;
+  html += `</div>`;
+  html += `</div>`;
+  // Breadcrumb path
+  html += `<div class="vsc-breadcrumb">${data.file}</div>`;
+  // Diff content area (reuse crawl-line classes)
+  html += `<div class="vsc-diff-body">${diffHtml}</div>`;
+  // Status bar
+  const lineCount = data.newContent ? data.newContent.length : 0;
+  const diffCount = data.diffCount || 0;
+  html += `<div class="vsc-status-bar">`;
+  html += `<span class="vsc-status-item">${langLabel}</span>`;
+  html += `<span class="vsc-status-item">Ln ${lineCount}</span>`;
+  html += `<span class="vsc-status-item vsc-status-diff">+${diffCount} changes</span>`;
+  html += `<span class="vsc-status-item">${new Date().toLocaleTimeString()}</span>`;
+  html += `</div>`;
+  html += `</div>`;
+
+  codeEl.innerHTML = html;
+
+  // Auto-switch to CODE tab
+  switchTab("code");
+
+  // Auto-scroll to first change
+  if (codeTabScrollAnim) cancelAnimationFrame(codeTabScrollAnim);
+  setTimeout(() => {
+    const diffBody = codeEl.querySelector(".vsc-diff-body");
+    const firstChange = diffBody?.querySelector(".crawl-line.added, .crawl-line.changed, .crawl-line.removed");
+    if (firstChange && diffBody) {
+      firstChange.scrollIntoView({ behavior: "smooth", block: "center" });
+      firstChange.classList.add("diff-flash-active");
+      setTimeout(() => firstChange.classList.remove("diff-flash-active"), 1200);
+    }
+  }, 300);
+}
+
+function updateCodeTabAnalysis(analysis) {
+  const statusBar = document.querySelector(".vsc-status-bar");
+  if (!statusBar) return;
+
+  const riskColors = { CRITICAL: "#f85149", HIGH: "#ff6b6b", MEDIUM: "#e3b341", LOW: "#3fb950", SAFE: "#3fb950" };
+  const color = riskColors[analysis.riskLevel] || "#888";
+  statusBar.style.background = analysis.riskLevel === "CRITICAL" || analysis.riskLevel === "HIGH" ? "#6e1b1b" : "#007acc";
+
+  // Add risk badge to status bar
+  const existing = statusBar.querySelector(".vsc-risk-badge");
+  if (existing) existing.remove();
+  const badge = document.createElement("span");
+  badge.className = "vsc-risk-badge";
+  badge.style.cssText = `background:${color};color:#fff;padding:1px 6px;border-radius:2px;font-weight:bold;font-size:10px;`;
+  badge.textContent = analysis.riskLevel;
+  statusBar.prepend(badge);
+
+  // Add AI summary banner to diff body
+  const diffBody = document.querySelector(".vsc-diff-body");
+  if (diffBody && analysis.summary) {
+    const banner = document.createElement("div");
+    banner.className = "vsc-ai-banner";
+    banner.style.cssText = `padding:8px 16px;background:rgba(0,122,204,0.15);border-left:3px solid ${color};color:${color};font-size:11px;margin:0;`;
+    let text = `AI: ${analysis.summary}`;
+    if (analysis.suggestion) text += ` — ${analysis.suggestion}`;
+    banner.textContent = text;
+    const firstBanner = diffBody.querySelector(".diff-banner");
+    if (firstBanner) firstBanner.after(banner);
+    else diffBody.prepend(banner);
+  }
+}
+
 // ═══════════════════════════════════════════
 // AUDIT RESULT (shown after analysis completes)
 // ═══════════════════════════════════════════
@@ -1798,14 +2051,7 @@ function showAuditResult(analysis) {
         <div class="audit-meta">${analysis.affectedNodes?.length || 0} files checked · ${analysis.analysisMs}ms</div>
       </div>`;
 
-    // Fade out after 8s
-    setTimeout(() => {
-      crawlEl.classList.remove("active");
-      contentEl.innerHTML = "";
-      headerName.textContent = "";
-      headerStatus.textContent = "";
-      headerStatus.style.color = "";
-    }, 8000);
+    // Keep showing audit result — don't hide code crawl
   } else {
     // ── WARNING: issues found — keep showing ──
     headerName.textContent = analysis.file;
@@ -1962,6 +2208,7 @@ async function initSSE() {
   sseSource.addEventListener("connected", (e) => {
     const data = JSON.parse(e.data);
     console.log("[SYKE:SSE] Connected, cache:", data.cacheSize, "files");
+    healthFailCount = 0; // Reset health failures on SSE connect
     updateSSEStatus("LIVE", "connected");
   });
 
@@ -2055,6 +2302,8 @@ async function initSSE() {
 
     // Update diff view with analysis risk badge
     updateDiffWithAnalysis(analysis);
+    // Also update CODE tab with analysis result
+    updateCodeTabAnalysis(analysis);
 
     addRealtimeEvent({
       type: "result",
@@ -2133,24 +2382,34 @@ async function initSSE() {
     updateSSEStatus("PROJECT LOADED", "connected");
   });
 
+  let sseRetryCount = 0;
   sseSource.onerror = async () => {
-    console.warn("[SYKE:SSE] Connection error");
-    updateSSEStatus("OFFLINE", "offline");
+    console.warn("[SYKE:SSE] Connection error, retry #" + (sseRetryCount + 1));
     sseSource.close();
     sseSource = null;
-    if (sseBlocked) return; // Don't reconnect if Pro-only block
+    if (sseBlocked) return;
 
-    // Check if server is actually down (not just SSE hiccup)
-    try {
-      const probe = await fetch("/api/project-info");
-      if (!probe.ok) throw new Error("not ok");
-    } catch (e) {
-      // Server is truly down — show offline overlay
-      showServerOffline();
+    sseRetryCount++;
+    updateSSEStatus("RECONNECTING...", "warning");
+
+    // Only show offline after 5 consecutive SSE failures
+    if (sseRetryCount >= 5) {
+      try {
+        const probe = await fetch("/api/project-info", { signal: AbortSignal.timeout(8000) });
+        if (!probe.ok) throw new Error("not ok");
+        // Server alive but SSE failing — just keep retrying
+        sseRetryCount = 0;
+      } catch (e) {
+        showServerOffline();
+      }
     }
 
+    // Exponential backoff: 2s, 4s, 8s, 16s, max 30s
+    const delay = Math.min(2000 * Math.pow(2, sseRetryCount - 1), 30000);
     if (sseReconnectTimer) clearTimeout(sseReconnectTimer);
-    sseReconnectTimer = setTimeout(initSSE, 3000);
+    sseReconnectTimer = setTimeout(() => {
+      initSSE();
+    }, delay);
   };
 }
 
@@ -2423,7 +2682,7 @@ async function loadProjectInfo() {
     updateLicenseBadge(info.plan, info.expiresAt);
   } catch (e) {
     console.warn("[SYKE] Failed to load project info:", e);
-    showServerOffline();
+    // Don't immediately show offline — let health check handle it
   }
 }
 

package/dist/web/public/style.css

@@ -660,9 +660,11 @@ main {
 
 #code-content {
   flex: 1;
-  overflow-y: auto;
+  overflow: hidden;
   font-size: 11px;
   line-height: 1.6;
+  display: flex;
+  flex-direction: column;
 }
 
 .code-block {
@@ -689,6 +691,148 @@ main {
   opacity: 0.5;
 }
 
+/* ── VS Code-style Code Editor (CODE tab) ── */
+.vsc-editor {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #1e1e1e;
+  border: 1px solid #333;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.vsc-tab-bar {
+  display: flex;
+  align-items: center;
+  background: #252526;
+  border-bottom: 1px solid #333;
+  min-height: 36px;
+  padding: 0 4px;
+}
+
+.vsc-tab {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: #1e1e1e;
+  border-top: 2px solid #007acc;
+  border-right: 1px solid #333;
+  font-size: 12px;
+  color: #ccc;
+  white-space: nowrap;
+}
+
+.vsc-tab-change {
+  font-size: 10px;
+  font-weight: bold;
+  padding: 1px 4px;
+  border-radius: 2px;
+}
+.vsc-tab-change.vsc-modified { color: #e2c08d; }
+.vsc-tab-change.vsc-added { color: #73c991; }
+.vsc-tab-change.vsc-deleted { color: #f44747; }
+
+.vsc-tab-name { color: #fff; }
+.vsc-tab-lang { color: #666; font-size: 10px; }
+
+.vsc-breadcrumb {
+  padding: 4px 12px;
+  font-size: 11px;
+  color: #888;
+  background: #1e1e1e;
+  border-bottom: 1px solid #2a2a2a;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.vsc-diff-body {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: auto;
+  background: #1e1e1e;
+  padding: 4px 0;
+  font-family: 'Consolas', 'SF Mono', 'Fira Code', monospace;
+  font-size: 12px;
+  line-height: 20px;
+}
+
+/* Scrollbar styling for diff body */
+.vsc-diff-body::-webkit-scrollbar { width: 10px; }
+.vsc-diff-body::-webkit-scrollbar-track { background: #1e1e1e; }
+.vsc-diff-body::-webkit-scrollbar-thumb { background: #424242; border-radius: 4px; }
+.vsc-diff-body::-webkit-scrollbar-thumb:hover { background: #555; }
+
+/* Override crawl-line in diff body for VS Code look */
+.vsc-diff-body .crawl-line {
+  padding: 0 16px 0 0;
+  min-height: 20px;
+  display: flex;
+  align-items: center;
+  border: none;
+  margin: 0;
+  font-size: 12px;
+}
+
+.vsc-diff-body .crawl-line .cl-num {
+  min-width: 48px;
+  padding-right: 12px;
+  text-align: right;
+  color: #5a5a5a;
+  user-select: none;
+  font-size: 12px;
+  background: #1e1e1e;
+}
+
+.vsc-diff-body .crawl-line.added {
+  background: rgba(35, 134, 54, 0.2);
+  border-left: 3px solid #28a745;
+}
+.vsc-diff-body .crawl-line.added .cl-num { background: rgba(35, 134, 54, 0.15); color: #73c991; }
+
+.vsc-diff-body .crawl-line.removed {
+  background: rgba(248, 81, 73, 0.15);
+  border-left: 3px solid #f85149;
+}
+.vsc-diff-body .crawl-line.removed .cl-num { background: rgba(248, 81, 73, 0.1); color: #f85149; }
+
+.vsc-diff-body .crawl-line.changed {
+  background: rgba(227, 179, 65, 0.12);
+  border-left: 3px solid #e3b341;
+}
+.vsc-diff-body .crawl-line.changed .cl-num { background: rgba(227, 179, 65, 0.08); color: #e3b341; }
+
+.vsc-diff-body .diff-banner {
+  padding: 6px 16px;
+  font-size: 11px;
+  margin: 0;
+  border-radius: 0;
+  border-left: 3px solid;
+}
+
+.vsc-diff-body .diff-marker {
+  min-width: 16px;
+  text-align: center;
+  font-weight: bold;
+}
+
+.vsc-status-bar {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 2px 12px;
+  background: #007acc;
+  color: #fff;
+  font-size: 11px;
+  min-height: 24px;
+  flex-shrink: 0;
+}
+
+.vsc-status-item { white-space: nowrap; }
+.vsc-status-diff { font-weight: bold; }
+
 /* ── Simulation Panel ── */
 #sim-panel {
   flex: 1;
@@ -1192,52 +1336,134 @@ main {
    STAR WARS CODE CRAWL
    ═══════════════════════════════════════════ */
 
+/* ── FBI/CIA Code Crawl Overlay ── */
 #code-crawl {
   position: absolute;
-  right: 20px;
-  top: 60px;
+  left: 20px;
+  bottom: 20px;
   width: 500px;
-  max-height: 500px;
+  height: 500px;
   pointer-events: auto;
-  z-index: 7;
+  z-index: 10;
   overflow: hidden;
-  display: none;
-  border-radius: 4px;
+  display: block;
+  border-radius: 6px;
+  background: rgba(2, 8, 20, 0.92);
+  border: 1px solid rgba(0, 212, 255, 0.25);
+  box-shadow:
+    0 0 30px rgba(0, 212, 255, 0.15),
+    0 0 60px rgba(0, 212, 255, 0.05),
+    inset 0 0 80px rgba(0, 0, 0, 0.5);
+  backdrop-filter: blur(8px);
+  cursor: grab;
+  transition: box-shadow 0.3s ease;
+}
+
+#code-crawl:hover {
+  box-shadow:
+    0 0 40px rgba(0, 212, 255, 0.25),
+    0 0 80px rgba(0, 212, 255, 0.08),
+    inset 0 0 80px rgba(0, 0, 0, 0.5);
 }
 
 #code-crawl.active {
-  display: block;
+  animation: crawl-open 0.4s ease-out;
 }
 
-#crawl-header {
+@keyframes crawl-open {
+  0% { opacity: 0; transform: scale(0.85); }
+  100% { opacity: 1; transform: scale(1); }
+}
+
+/* Scan line sweep effect */
+#code-crawl::before {
+  content: '';
   position: absolute;
-  top: 0;
-  left: 0; right: 0;
-  padding: 6px 12px;
+  top: 0; left: 0; right: 0;
+  height: 2px;
+  background: linear-gradient(90deg, transparent, var(--accent), transparent);
+  z-index: 5;
+  animation: crawl-scanline 3s linear infinite;
+  opacity: 0.6;
+}
+
+@keyframes crawl-scanline {
+  0% { top: 0; opacity: 0.8; }
+  100% { top: 100%; opacity: 0; }
+}
+
+/* Corner brackets (FBI terminal style) */
+#code-crawl::after {
+  content: '';
+  position: absolute;
+  inset: 4px;
+  border: 1px solid rgba(0, 212, 255, 0.12);
+  border-radius: 3px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+/* Dragging state */
+#code-crawl.dragging {
+  cursor: grabbing;
+  opacity: 0.9;
+  box-shadow:
+    0 0 50px rgba(0, 212, 255, 0.3),
+    0 0 100px rgba(0, 212, 255, 0.1);
+}
+
+#crawl-header {
+  position: relative;
+  padding: 8px 12px;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  z-index: 2;
-  background: linear-gradient(180deg, rgba(5,10,24,0.98) 60%, transparent 100%);
+  z-index: 3;
+  background: linear-gradient(180deg, rgba(0, 15, 35, 0.95) 0%, rgba(0, 10, 25, 0.8) 100%);
+  border-bottom: 1px solid rgba(0, 212, 255, 0.15);
+  cursor: grab;
+}
+
+#crawl-header::before {
+  content: '◉ LIVE INTERCEPT';
+  font-size: 8px;
+  letter-spacing: 3px;
+  color: var(--risk-high);
+  position: absolute;
+  top: -1px;
+  left: 12px;
+  animation: intercept-blink 1.5s ease-in-out infinite;
+}
+
+@keyframes intercept-blink {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.3; }
 }
 
 #crawl-file-name {
-  font-size: 9px;
+  font-size: 10px;
   color: var(--accent);
-  letter-spacing: 2px;
+  letter-spacing: 1.5px;
   font-weight: 600;
   text-transform: uppercase;
-  opacity: 0.7;
+  opacity: 0.8;
+  margin-top: 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 320px;
 }
 
 #crawl-status {
   font-size: 9px;
   letter-spacing: 2px;
   color: var(--risk-low);
+  margin-top: 10px;
 }
 
 #crawl-status.modifying {
   color: var(--risk-high);
+  text-shadow: 0 0 8px rgba(255, 45, 85, 0.6);
   animation: status-blink 0.6s ease-in-out infinite;
 }
 
@@ -1248,24 +1474,80 @@ main {
 
 #crawl-viewport {
   position: absolute;
-  top: 28px; left: 0; right: 0; bottom: 0;
+  top: 42px; left: 0; right: 0; bottom: 0;
   overflow-y: auto;
   overflow-x: hidden;
 }
 
+/* Scrollbar */
+#crawl-viewport::-webkit-scrollbar { width: 6px; }
+#crawl-viewport::-webkit-scrollbar-track { background: transparent; }
+#crawl-viewport::-webkit-scrollbar-thumb { background: rgba(0, 212, 255, 0.2); border-radius: 3px; }
+
+/* Top/bottom fade for cinema effect */
+#crawl-viewport::before,
+#crawl-viewport::after {
+  content: '';
+  position: sticky;
+  display: block;
+  height: 40px;
+  z-index: 2;
+  pointer-events: none;
+}
+#crawl-viewport::before {
+  top: 0;
+  background: linear-gradient(180deg, rgba(2, 8, 20, 0.95) 0%, transparent 100%);
+}
+#crawl-viewport::after {
+  bottom: 0;
+  background: linear-gradient(0deg, rgba(2, 8, 20, 0.95) 0%, transparent 100%);
+}
+
 #crawl-content {
-  padding: 4px 8px;
+  padding: 8px 10px;
 }
 
-/* Individual crawl line — VS Code Dark+ style base */
+/* Individual crawl line — FBI terminal style */
 .crawl-line {
   font-family: 'Consolas', 'SF Mono', 'Fira Code', monospace;
   font-size: 11px;
-  line-height: 1.5;
+  line-height: 1.6;
   white-space: pre;
-  color: #d4d4d4;
+  color: rgba(200, 214, 229, 0.5);
   overflow: hidden;
   text-overflow: ellipsis;
+  padding: 0 4px;
+  transition: color 0.3s, background 0.3s;
+}
+
+/* Non-changed lines are dim / ghostly */
+.crawl-line:not(.added):not(.removed):not(.changed) {
+  color: rgba(200, 214, 229, 0.25);
+}
+
+/* Changed lines glow bright */
+.crawl-line.added, .crawl-line.removed, .crawl-line.changed {
+  color: #d4d4d4;
+}
+
+/* Staggered fade-in for each line */
+#code-crawl.active .crawl-line {
+  animation: line-materialize 0.5s ease-out both;
+}
+#code-crawl.active .crawl-line:nth-child(1)  { animation-delay: 0.02s; }
+#code-crawl.active .crawl-line:nth-child(2)  { animation-delay: 0.04s; }
+#code-crawl.active .crawl-line:nth-child(3)  { animation-delay: 0.06s; }
+#code-crawl.active .crawl-line:nth-child(4)  { animation-delay: 0.08s; }
+#code-crawl.active .crawl-line:nth-child(5)  { animation-delay: 0.10s; }
+#code-crawl.active .crawl-line:nth-child(6)  { animation-delay: 0.12s; }
+#code-crawl.active .crawl-line:nth-child(7)  { animation-delay: 0.14s; }
+#code-crawl.active .crawl-line:nth-child(8)  { animation-delay: 0.16s; }
+#code-crawl.active .crawl-line:nth-child(9)  { animation-delay: 0.18s; }
+#code-crawl.active .crawl-line:nth-child(10) { animation-delay: 0.20s; }
+
+@keyframes line-materialize {
+  0% { opacity: 0; transform: translateX(8px); filter: blur(2px); }
+  100% { opacity: 1; transform: translateX(0); filter: blur(0); }
 }
 
 .crawl-line .cl-num {
@@ -1577,12 +1859,6 @@ main {
   100% { background: transparent; }
 }
 
-/* Crawl status when modifying */
-#crawl-status.modifying {
-  color: var(--risk-medium);
-  animation: sse-pulse 0.5s infinite;
-}
-
 /* ═══════════════════════════════════════════ */
 /* Audit Result (post-analysis)                */
 /* ═══════════════════════════════════════════ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syke1/mcp-server",
-  "version": "1.3.9",
+  "version": "1.3.11",
   "mcpName": "io.github.khalomsky/syke",
   "description": "AI code impact analysis MCP server — dependency graphs, cascade detection, and a mandatory build gate for AI coding agents",
   "main": "dist/index.js",