@syke1/mcp-server 1.3.8 → 1.3.10

package/dist/graph.js

@@ -38,6 +38,7 @@ exports.getGraph = getGraph;
 exports.refreshGraph = refreshGraph;
 const path = __importStar(require("path"));
 const plugin_1 = require("./languages/plugin");
+const typescript_1 = require("./languages/typescript");
 let cachedGraph = null;
 function buildGraph(projectRoot, packageName) {
     const detectedPlugins = (0, plugin_1.detectLanguages)(projectRoot);
@@ -103,5 +104,6 @@ function getGraph(projectRoot, packageName) {
 }
 function refreshGraph(projectRoot, packageName) {
     cachedGraph = null;
+    (0, typescript_1.clearAliasCache)();
     return buildGraph(projectRoot, packageName);
 }

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/languages/typescript.d.ts

@@ -1,2 +1,4 @@
 import { LanguagePlugin } from "./plugin";
+/** Clear cached aliases (call on project switch / graph refresh) */
+export declare function clearAliasCache(): void;
 export declare const typescriptPlugin: LanguagePlugin;

package/dist/languages/typescript.js

@@ -34,12 +34,53 @@ var __importStar = (this && this.__importStar) || (function () {
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.typescriptPlugin = void 0;
+exports.clearAliasCache = clearAliasCache;
 const fs = __importStar(require("fs"));
 const path = __importStar(require("path"));
 const plugin_1 = require("./plugin");
 const TS_IMPORT_RE = /(?:import|export)\s+.*?from\s+['"](.+?)['"]/;
 const TS_SIDE_EFFECT_RE = /^import\s+['"](.+?)['"]/;
 const JS_REQUIRE_RE = /(?:const|let|var)\s+\w+\s*=\s*require\s*\(\s*['"](.+?)['"]\s*\)/;
+const aliasCache = new Map(); // projectRoot → aliases
+function loadPathAliases(projectRoot) {
+    if (aliasCache.has(projectRoot))
+        return aliasCache.get(projectRoot);
+    const aliases = [];
+    try {
+        const tsconfigPath = path.join(projectRoot, "tsconfig.json");
+        if (!fs.existsSync(tsconfigPath)) {
+            aliasCache.set(projectRoot, aliases);
+            return aliases;
+        }
+        // Strip single-line comments (// ...) and trailing commas for lenient parsing
+        const raw = fs.readFileSync(tsconfigPath, "utf-8")
+            .replace(/\/\/.*$/gm, "")
+            .replace(/,\s*([\]}])/g, "$1");
+        const tsconfig = JSON.parse(raw);
+        const paths = tsconfig?.compilerOptions?.paths;
+        const baseUrl = tsconfig?.compilerOptions?.baseUrl || ".";
+        if (!paths) {
+            aliasCache.set(projectRoot, aliases);
+            return aliases;
+        }
+        const baseDir = path.resolve(projectRoot, baseUrl);
+        for (const [pattern, targets] of Object.entries(paths)) {
+            // Pattern like "@/*" → prefix "@/", target "./src/*" → baseDir + "src"
+            const prefix = pattern.endsWith("/*") ? pattern.slice(0, -1) : pattern;
+            const resolvedTargets = [];
+            for (const target of targets) {
+                const stripped = target.endsWith("/*") ? target.slice(0, -1) : target;
+                resolvedTargets.push(path.resolve(baseDir, stripped));
+            }
+            aliases.push({ prefix, targets: resolvedTargets });
+        }
+    }
+    catch (_) {
+        // Ignore parse errors
+    }
+    aliasCache.set(projectRoot, aliases);
+    return aliases;
+}
 function resolveTsImport(fromDir, importPath) {
     const base = path.resolve(fromDir, importPath);
     const candidates = [
@@ -49,6 +90,7 @@ function resolveTsImport(fromDir, importPath) {
         base + ".js",
         base + ".jsx",
         path.join(base, "index.ts"),
+        path.join(base, "index.tsx"),
         path.join(base, "index.js"),
     ];
     for (const candidate of candidates) {
@@ -58,6 +100,24 @@ function resolveTsImport(fromDir, importPath) {
     }
     return null;
 }
+/** Clear cached aliases (call on project switch / graph refresh) */
+function clearAliasCache() {
+    aliasCache.clear();
+}
+function resolveAliasImport(importPath, projectRoot) {
+    const aliases = loadPathAliases(projectRoot);
+    for (const alias of aliases) {
+        if (importPath.startsWith(alias.prefix)) {
+            const rest = importPath.slice(alias.prefix.length);
+            for (const targetDir of alias.targets) {
+                const resolved = resolveTsImport(targetDir, "./" + rest);
+                if (resolved)
+                    return resolved;
+            }
+        }
+    }
+    return null;
+}
 exports.typescriptPlugin = {
     id: "typescript",
     name: "TypeScript",
@@ -82,7 +142,7 @@ exports.typescriptPlugin = {
     discoverFiles(dir) {
         return (0, plugin_1.discoverAllFiles)(dir, [".ts", ".tsx", ".js", ".jsx"]).filter(f => !f.endsWith(".d.ts"));
     },
-    parseImports(filePath, _projectRoot, _sourceDir) {
+    parseImports(filePath, projectRoot, _sourceDir) {
         let content;
         try {
             content = fs.readFileSync(filePath, "utf-8");
@@ -100,11 +160,19 @@ exports.typescriptPlugin = {
                 importPath = match[1];
             if (!importPath)
                 continue;
-            if (!importPath.startsWith("."))
-                continue;
-            const resolved = resolveTsImport(fileDir, importPath);
-            if (resolved)
-                imports.push(resolved);
+            // Skip bare package imports (e.g. "react", "next/link", "firebase/app")
+            if (importPath.startsWith(".")) {
+                // Relative import
+                const resolved = resolveTsImport(fileDir, importPath);
+                if (resolved)
+                    imports.push(resolved);
+            }
+            else {
+                // Try path alias resolution (e.g. @/components/Sidebar → projectRoot/components/Sidebar)
+                const resolved = resolveAliasImport(importPath, projectRoot);
+                if (resolved)
+                    imports.push(resolved);
+            }
         }
         return imports;
     },

package/dist/web/public/app.js

@@ -27,12 +27,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 +54,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)
 }
 
 // ═══════════════════════════════════════════
@@ -112,9 +117,9 @@ async function loadGraph() {
       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: c.x + (Math.random() - 0.5) * 600,
+      y: c.y + (Math.random() - 0.5) * 600,
+      z: c.z + (Math.random() - 0.5) * 600,
     };
   });
   const links = raw.edges.map(e => ({ source: e.data.source, target: e.data.target }));
@@ -140,7 +145,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;
@@ -215,19 +220,19 @@ async function loadGraph() {
       node.fz = undefined;
     })
 
-    .d3AlphaDecay(0.015)
-    .d3VelocityDecay(0.35)
-    .warmupTicks(100)
-    .cooldownTicks(500)
+    .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 +262,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);
 }
 
 // ═══════════════════════════════════════════
@@ -604,7 +615,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 +1589,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 +1736,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 +1824,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 +1945,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 +2102,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 +2196,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 +2276,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 +2576,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.8",
+  "version": "1.3.10",
   "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",