@syke1/mcp-server 1.3.20 → 1.4.1

package/dist/web/public/app.js

@@ -20,12 +20,424 @@ 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 = {
+let searchActive = false; // true when search input has text
+let _searchRAF = null; // RAF loop for search glow animation
+
+// ── File Tree state ──
+let fileTreeData = null;           // built tree structure
+let fileTreeExpanded = new Set();  // open folder paths
+let fileTreeFilter = '';           // search filter
+let fileTreeSort = 'name';        // sort mode
+let fileTreeModified = new Map();  // path → {type, timestamp}
+let fileTreeVisible = true;        // panel visibility
+let _fileTreeRenderTimer = null;   // debounce timer
+let _treeScrollLock = false;       // manual scroll lock
+let _treeScrollLockTimer = null;   // scroll lock timer
+
+let LAYER_HEX = {
   FE: "#00d4ff", BE: "#c084fc", DB: "#ff6b35",
   API: "#00ffaa", CONFIG: "#ffd700", UTIL: "#ff69b4",
 };
 
+// ═══════════════════════════════════════════
+// SETTINGS SYSTEM
+// ═══════════════════════════════════════════
+const SETTINGS_DEFAULTS = {
+  nodes: {
+    sizeMin: 30,
+    sizeMultiplier: 3,
+    opacity: 1.0,
+    resolution: 16,
+    selectedColor: "#ffffff",
+  },
+  links: {
+    normalWidth: 1.5,
+    highlightWidth: 4.0,
+    opacity: 0.9,
+    curvatureBase: 0.12,
+    normalAlpha: 0.25,
+    highlightColor: "#ff2d55",
+  },
+  particles: {
+    normalCount: 6,
+    highlightCount: 14,
+    normalWidth: 2.0,
+    highlightWidth: 4.5,
+    normalSpeed: 0.006,
+    highlightSpeed: 0.004,
+    highlightColor: "#ffffff",
+  },
+  colors: {
+    FE: "#00d4ff",
+    BE: "#c084fc",
+    DB: "#ff6b35",
+    API: "#00ffaa",
+    CONFIG: "#ffd700",
+    UTIL: "#ff69b4",
+  },
+  arrows: {
+    length: 4,
+    position: 1,
+  },
+  scene: {
+    background: "#050a18",
+    ambientIntensity: 8,
+    pointIntensity: 3,
+    pointDistance: 5000,
+    fogDensity: 0.00012,
+    scanlineOpacity: 1.0,
+  },
+  camera: {
+    initialZ: 3500,
+    autoRotateSpeed: 0.0005,
+    autoRotateRadius: 1600,
+    resetDistance: 1600,
+  },
+  animation: {
+    birthDuration: 2500,
+    birthScale: 3,
+    spawnX: 5000,
+    spawnY: 4000,
+    spawnZ: -2000,
+  },
+  physics: {
+    alphaDecay: 0.008,
+    velocityDecay: 0.3,
+    chargeStrength: -800,
+    sameLayerDistance: 250,
+    crossLayerDistance: 900,
+    clusterStrength: 0.015,
+  },
+  fileTree: {
+    panelWidth: 280,
+    fontSize: 11,
+    indentSize: 14,
+    pulseDuration: 5,
+    showLineCount: false,
+    showDeps: true,
+    showRisk: true,
+    autoScrollOnChange: true,
+    compactMode: false,
+  },
+};
+
+function deepMerge(defaults, override) {
+  const result = {};
+  for (const key of Object.keys(defaults)) {
+    if (typeof defaults[key] === "object" && defaults[key] !== null && !Array.isArray(defaults[key])) {
+      result[key] = deepMerge(defaults[key], override?.[key] || {});
+    } else {
+      result[key] = override?.[key] !== undefined ? override[key] : defaults[key];
+    }
+  }
+  return result;
+}
+
+function loadSettings() {
+  try {
+    const stored = JSON.parse(localStorage.getItem("syke-dashboard-settings") || "{}");
+    return deepMerge(SETTINGS_DEFAULTS, stored);
+  } catch (e) {
+    console.warn("[SYKE] Failed to load settings, using defaults", e);
+    return deepMerge(SETTINGS_DEFAULTS, {});
+  }
+}
+
+const SETTINGS = loadSettings();
+
+// Apply colors from settings on startup
+Object.assign(LAYER_HEX, SETTINGS.colors);
+
+function saveSettings() {
+  try {
+    localStorage.setItem("syke-dashboard-settings", JSON.stringify(SETTINGS));
+  } catch (e) {
+    console.warn("[SYKE] Failed to save settings", e);
+  }
+}
+
+function resetSettingsGroup(group) {
+  if (SETTINGS_DEFAULTS[group]) {
+    SETTINGS[group] = deepMerge(SETTINGS_DEFAULTS[group], {});
+    saveSettings();
+  }
+}
+
+function resetAllSettings() {
+  for (const group of Object.keys(SETTINGS_DEFAULTS)) {
+    SETTINGS[group] = deepMerge(SETTINGS_DEFAULTS[group], {});
+  }
+  Object.assign(LAYER_HEX, SETTINGS.colors);
+  saveSettings();
+}
+
+function applySettings(group) {
+  if (!Graph) return;
+  switch (group) {
+    case "nodes":
+      refreshGraph();
+      break;
+    case "links":
+      Graph.linkCurvature(link => SETTINGS.links.curvatureBase + (hc(getSrcId(link) + getTgtId(link)) % 20) * 0.01);
+      Graph.linkOpacity(SETTINGS.links.opacity);
+      refreshGraph();
+      break;
+    case "particles":
+      refreshGraph();
+      break;
+    case "colors":
+      Object.assign(LAYER_HEX, SETTINGS.colors);
+      if (graphData) {
+        const layerCounts = {};
+        graphData.nodes.forEach(n => { layerCounts[n.layer] = (layerCounts[n.layer] || 0) + 1; });
+        buildLegend(layerCounts);
+      }
+      refreshGraph();
+      break;
+    case "arrows":
+      Graph.linkDirectionalArrowLength(SETTINGS.arrows.length);
+      Graph.linkDirectionalArrowRelPos(SETTINGS.arrows.position);
+      break;
+    case "scene":
+      Graph.backgroundColor(SETTINGS.scene.background);
+      try {
+        const scene = Graph.scene();
+        if (scene) {
+          scene.children.forEach(c => {
+            if (c.isAmbientLight) c.intensity = SETTINGS.scene.ambientIntensity;
+            if (c.isPointLight) { c.intensity = SETTINGS.scene.pointIntensity; c.distance = SETTINGS.scene.pointDistance; }
+          });
+          if (scene.fog) scene.fog.density = SETTINGS.scene.fogDensity;
+        }
+      } catch(e) {}
+      const scanline = document.getElementById("scanline");
+      if (scanline) scanline.style.opacity = SETTINGS.scene.scanlineOpacity;
+      break;
+    case "physics":
+      Graph.d3AlphaDecay(SETTINGS.physics.alphaDecay);
+      Graph.d3VelocityDecay(SETTINGS.physics.velocityDecay);
+      try {
+        Graph.d3Force("charge").strength(SETTINGS.physics.chargeStrength);
+        Graph.d3Force("link")
+          .distance(l => srcLayer(l) === tgtLayer(l) ? SETTINGS.physics.sameLayerDistance : SETTINGS.physics.crossLayerDistance);
+        Graph.d3Force("cluster", clusterForce(SETTINGS.physics.clusterStrength));
+      } catch(e) {}
+      Graph.d3ReheatSimulation();
+      break;
+    case "camera":
+      // Camera values are read live in autoRotate loop, no action needed
+      break;
+    case "animation":
+      // Animation values are read when new nodes appear, no action needed
+      break;
+    case "fileTree":
+      applyFileTreeSettings();
+      break;
+  }
+}
+
+function setupSettings() {
+  const CTRL_MAP = [
+    // [group, key, selector, type]
+    ["nodes", "sizeMin", "#set-node-sizeMin", "range"],
+    ["nodes", "sizeMultiplier", "#set-node-sizeMultiplier", "range"],
+    ["nodes", "opacity", "#set-node-opacity", "range"],
+    ["nodes", "resolution", "#set-node-resolution", "range"],
+    ["nodes", "selectedColor", "#set-node-selectedColor", "color"],
+    ["links", "normalWidth", "#set-link-normalWidth", "range"],
+    ["links", "highlightWidth", "#set-link-highlightWidth", "range"],
+    ["links", "opacity", "#set-link-opacity", "range"],
+    ["links", "curvatureBase", "#set-link-curvatureBase", "range"],
+    ["links", "normalAlpha", "#set-link-normalAlpha", "range"],
+    ["links", "highlightColor", "#set-link-highlightColor", "color"],
+    ["particles", "normalCount", "#set-part-normalCount", "range"],
+    ["particles", "highlightCount", "#set-part-highlightCount", "range"],
+    ["particles", "normalWidth", "#set-part-normalWidth", "range"],
+    ["particles", "highlightWidth", "#set-part-highlightWidth", "range"],
+    ["particles", "normalSpeed", "#set-part-normalSpeed", "range"],
+    ["particles", "highlightSpeed", "#set-part-highlightSpeed", "range"],
+    ["particles", "highlightColor", "#set-part-highlightColor", "color"],
+    ["colors", "FE", "#set-color-FE", "color"],
+    ["colors", "BE", "#set-color-BE", "color"],
+    ["colors", "DB", "#set-color-DB", "color"],
+    ["colors", "API", "#set-color-API", "color"],
+    ["colors", "CONFIG", "#set-color-CONFIG", "color"],
+    ["colors", "UTIL", "#set-color-UTIL", "color"],
+    ["arrows", "length", "#set-arrow-length", "range"],
+    ["arrows", "position", "#set-arrow-position", "range"],
+    ["scene", "background", "#set-scene-background", "color"],
+    ["scene", "ambientIntensity", "#set-scene-ambientIntensity", "range"],
+    ["scene", "pointIntensity", "#set-scene-pointIntensity", "range"],
+    ["scene", "pointDistance", "#set-scene-pointDistance", "range"],
+    ["scene", "fogDensity", "#set-scene-fogDensity", "range"],
+    ["scene", "scanlineOpacity", "#set-scene-scanlineOpacity", "range"],
+    ["camera", "initialZ", "#set-cam-initialZ", "range"],
+    ["camera", "autoRotateSpeed", "#set-cam-autoRotateSpeed", "range"],
+    ["camera", "autoRotateRadius", "#set-cam-autoRotateRadius", "range"],
+    ["camera", "resetDistance", "#set-cam-resetDistance", "range"],
+    ["physics", "alphaDecay", "#set-phys-alphaDecay", "range"],
+    ["physics", "velocityDecay", "#set-phys-velocityDecay", "range"],
+    ["physics", "chargeStrength", "#set-phys-chargeStrength", "range"],
+    ["physics", "sameLayerDistance", "#set-phys-sameLayerDistance", "range"],
+    ["physics", "crossLayerDistance", "#set-phys-crossLayerDistance", "range"],
+    ["physics", "clusterStrength", "#set-phys-clusterStrength", "range"],
+    ["animation", "birthDuration", "#set-anim-birthDuration", "range"],
+    ["animation", "birthScale", "#set-anim-birthScale", "range"],
+    ["animation", "spawnX", "#set-anim-spawnX", "range"],
+    ["animation", "spawnY", "#set-anim-spawnY", "range"],
+    ["animation", "spawnZ", "#set-anim-spawnZ", "range"],
+    ["fileTree", "panelWidth", "#set-ft-panelWidth", "range"],
+    ["fileTree", "fontSize", "#set-ft-fontSize", "range"],
+    ["fileTree", "indentSize", "#set-ft-indentSize", "range"],
+    ["fileTree", "pulseDuration", "#set-ft-pulseDuration", "range"],
+    ["fileTree", "showLineCount", "#set-ft-showLineCount", "checkbox"],
+    ["fileTree", "showDeps", "#set-ft-showDeps", "checkbox"],
+    ["fileTree", "showRisk", "#set-ft-showRisk", "checkbox"],
+    ["fileTree", "autoScrollOnChange", "#set-ft-autoScrollOnChange", "checkbox"],
+    ["fileTree", "compactMode", "#set-ft-compactMode", "checkbox"],
+  ];
+
+  // Init values and bind events
+  for (const [group, key, selector, type] of CTRL_MAP) {
+    const el = document.querySelector(selector);
+    if (!el) continue;
+    const valEl = el.parentElement?.querySelector(".set-val");
+
+    if (type === "checkbox") {
+      el.checked = !!SETTINGS[group][key];
+      el.addEventListener("change", () => {
+        SETTINGS[group][key] = el.checked;
+        applySettings(group);
+        saveSettings();
+      });
+    } else {
+      el.value = SETTINGS[group][key];
+      if (valEl) valEl.textContent = formatSetVal(SETTINGS[group][key], type);
+      el.addEventListener("input", () => {
+        const v = type === "color" ? el.value : parseFloat(el.value);
+        SETTINGS[group][key] = v;
+        if (valEl) valEl.textContent = formatSetVal(v, type);
+        applySettings(group);
+        saveSettings();
+      });
+    }
+  }
+
+  // Collapsible sections
+  document.querySelectorAll(".set-section-hdr").forEach(hdr => {
+    hdr.addEventListener("click", () => {
+      const body = hdr.nextElementSibling;
+      const arrow = hdr.querySelector(".set-arrow");
+      if (body) body.classList.toggle("collapsed");
+      if (arrow) arrow.classList.toggle("open");
+    });
+  });
+
+  // Reset per group
+  document.querySelectorAll(".set-rst-btn").forEach(btn => {
+    btn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      const group = btn.dataset.group;
+      resetSettingsGroup(group);
+      applySettings(group);
+      // Refresh UI inputs
+      for (const [g, key, selector, type] of CTRL_MAP) {
+        if (g !== group) continue;
+        const el = document.querySelector(selector);
+        if (!el) continue;
+        if (type === "checkbox") { el.checked = !!SETTINGS[group][key]; }
+        else { el.value = SETTINGS[group][key]; }
+        const valEl = el.parentElement?.querySelector(".set-val");
+        if (valEl && type !== "checkbox") valEl.textContent = formatSetVal(SETTINGS[group][key], type);
+      }
+    });
+  });
+
+  // Reset all
+  const resetAllBtn = document.getElementById("set-reset-all");
+  if (resetAllBtn) {
+    resetAllBtn.addEventListener("click", () => {
+      resetAllSettings();
+      for (const group of Object.keys(SETTINGS_DEFAULTS)) applySettings(group);
+      // Refresh all UI inputs
+      for (const [group, key, selector, type] of CTRL_MAP) {
+        const el = document.querySelector(selector);
+        if (!el) continue;
+        if (type === "checkbox") { el.checked = !!SETTINGS[group][key]; }
+        else { el.value = SETTINGS[group][key]; }
+        const valEl = el.parentElement?.querySelector(".set-val");
+        if (valEl && type !== "checkbox") valEl.textContent = formatSetVal(SETTINGS[group][key], type);
+      }
+    });
+  }
+
+  // Export
+  const exportBtn = document.getElementById("set-export");
+  if (exportBtn) {
+    exportBtn.addEventListener("click", () => {
+      const blob = new Blob([JSON.stringify(SETTINGS, null, 2)], { type: "application/json" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "syke-settings.json";
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+  }
+
+  // Import
+  const importBtn = document.getElementById("set-import");
+  if (importBtn) {
+    importBtn.addEventListener("click", () => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = ".json";
+      input.addEventListener("change", () => {
+        const file = input.files[0];
+        if (!file) return;
+        const reader = new FileReader();
+        reader.onload = () => {
+          try {
+            const imported = JSON.parse(reader.result);
+            const merged = deepMerge(SETTINGS_DEFAULTS, imported);
+            for (const group of Object.keys(merged)) {
+              SETTINGS[group] = merged[group];
+            }
+            Object.assign(LAYER_HEX, SETTINGS.colors);
+            saveSettings();
+            for (const group of Object.keys(SETTINGS_DEFAULTS)) applySettings(group);
+            // Refresh all UI inputs
+            for (const [group, key, selector, type] of CTRL_MAP) {
+              const el = document.querySelector(selector);
+              if (!el) continue;
+              if (type === "checkbox") { el.checked = !!SETTINGS[group][key]; }
+              else { el.value = SETTINGS[group][key]; }
+              const valEl = el.parentElement?.querySelector(".set-val");
+              if (valEl && type !== "checkbox") valEl.textContent = formatSetVal(SETTINGS[group][key], type);
+            }
+          } catch(e) {
+            console.error("[SYKE] Import failed:", e);
+          }
+        };
+        reader.readAsText(file);
+      });
+      input.click();
+    });
+  }
+
+  // Apply scanline opacity on startup
+  const scanline = document.getElementById("scanline");
+  if (scanline) scanline.style.opacity = SETTINGS.scene.scanlineOpacity;
+}
+
+function formatSetVal(v, type) {
+  if (type === "color") return v;
+  if (Number.isInteger(v)) return v.toString();
+  if (Math.abs(v) < 0.01) return v.toFixed(5);
+  if (Math.abs(v) < 1) return v.toFixed(3);
+  return v.toFixed(1);
+}
+
 const LAYER_KEYS = ["FE", "BE", "DB", "API", "CONFIG", "UTIL"];
 
 const LAYER_CENTERS = {
@@ -49,7 +461,9 @@ document.addEventListener("DOMContentLoaded", async () => {
   setupKeyboardShortcuts();
   setupContextMenu();
   setupTabs();
+  setupSettings();
   setupProjectModal();
+  setupFileTree();
   initSSE();
   startHealthCheck();
 });
@@ -113,7 +527,7 @@ async function loadGraph() {
   const isReload = Graph !== null;
 
   // Spawn point for new nodes (top-right corner of 3D space)
-  const SPAWN = { x: 5000, y: 4000, z: -2000 };
+  const SPAWN = { x: SETTINGS.animation.spawnX, y: SETTINGS.animation.spawnY, z: SETTINGS.animation.spawnZ };
 
   // Preserve existing node positions on reload
   const currentPositions = {};
@@ -143,7 +557,7 @@ async function loadGraph() {
         startTime: Date.now(),
         spawnPos: { ...SPAWN },
         targetPos: { ...targetPos },
-        duration: 2500, // 2.5s flight time
+        duration: SETTINGS.animation.birthDuration,
       });
     }
 
@@ -181,6 +595,7 @@ async function loadGraph() {
   if (isReload) {
     Graph.graphData(graphData);
     buildLegend(layerCounts);
+    renderFileTreeDebounced();
     console.log("[SYKE] Graph updated (reload), birth animations:", birthAnimations.size);
 
     // ── Star birth camera choreography ──
@@ -209,7 +624,7 @@ async function loadGraph() {
       // Phase 3: Zoom out to overview (at 3.5s, 1.5s transition)
       setTimeout(() => {
         Graph.cameraPosition(
-          { x: 0, y: 0, z: 3500 },
+          { x: 0, y: 0, z: SETTINGS.camera.initialZ },
           { x: 0, y: 0, z: 0 },
           1500
         );
@@ -228,16 +643,22 @@ async function loadGraph() {
   const container = document.getElementById("3d-graph");
 
   Graph = ForceGraph3D()(container)
-    .width(window.innerWidth - 380)
+    .width(getGraphPanelWidth())
     .height(window.innerHeight - 100)
     .graphData(graphData)
-    .backgroundColor("#050a18")
+    .backgroundColor(SETTINGS.scene.background)
     .showNavInfo(false)
 
     .nodeColor(node => getNodeColor(node))
     .nodeVal(node => {
       if (!isNodeVisible(node)) return 0.001;
-      const base = Math.max(30, Math.sqrt(node.lineCount) * 3);
+      const base = Math.max(SETTINGS.nodes.sizeMin, Math.sqrt(node.lineCount) * SETTINGS.nodes.sizeMultiplier);
+      // Search mode: shrink non-matches, boost matches
+      if (searchActive) {
+        if (!highlightNodes.has(node.id)) return base * 0.3;
+        const pulse = 0.9 + 0.1 * Math.sin(Date.now() / 400);
+        return base * 1.4 * pulse;
+      }
       const hb = heartbeatNodes.get(node.id);
       if (hb) {
         const elapsed = Date.now() - hb.startTime;
@@ -255,13 +676,13 @@ async function loadGraph() {
       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
+        const scale = 1 + (SETTINGS.animation.birthScale - 1) * (1 - t) * (1 - t); // ease-out: Nx → 1x
         return base * scale;
       }
       return base;
     })
-    .nodeOpacity(1.0)
-    .nodeResolution(16)
+    .nodeOpacity(SETTINGS.nodes.opacity)
+    .nodeResolution(SETTINGS.nodes.resolution)
     .nodeVisibility(node => isNodeVisible(node))
     .nodeLabel(node => {
       const c = LAYER_HEX[node.layer] || "#ccc";
@@ -272,34 +693,36 @@ async function loadGraph() {
     })
 
     .linkColor(link => getLinkColor(link))
-    .linkWidth(link => highlightLinks.has(link) ? 4.0 : 1.5)
-    .linkOpacity(0.9)
+    .linkWidth(link => highlightLinks.has(link) ? SETTINGS.links.highlightWidth : SETTINGS.links.normalWidth)
+    .linkOpacity(SETTINGS.links.opacity)
     .linkVisibility(link => isLinkVisible(link))
-    .linkCurvature(link => 0.12 + (hc(getSrcId(link) + getTgtId(link)) % 20) * 0.01)
+    .linkCurvature(link => SETTINGS.links.curvatureBase + (hc(getSrcId(link) + getTgtId(link)) % 20) * 0.01)
     .linkCurveRotation(link => (hc(getTgtId(link) + getSrcId(link)) % 628) / 100)
 
     .linkDirectionalParticles(link => {
-      if (highlightLinks.has(link)) return 14;
+      if (searchActive) return highlightLinks.has(link) ? SETTINGS.particles.highlightCount : 0;
+      if (highlightLinks.has(link)) return SETTINGS.particles.highlightCount;
       const isActive = modifyingNodes.size > 0 || heartbeatNodes.size > 0;
-      return isActive ? 4 : 6;
+      return isActive ? Math.round(SETTINGS.particles.normalCount * 0.67) : SETTINGS.particles.normalCount;
     })
     .linkDirectionalParticleWidth(link => {
-      if (highlightLinks.has(link)) return 4.5;
+      if (highlightLinks.has(link)) return SETTINGS.particles.highlightWidth;
       const isActive = modifyingNodes.size > 0 || heartbeatNodes.size > 0;
-      return isActive ? 1.5 : 2.0;
+      return isActive ? SETTINGS.particles.normalWidth * 0.75 : SETTINGS.particles.normalWidth;
     })
-    .linkDirectionalParticleSpeed(link => highlightLinks.has(link) ? 0.004 : 0.006)
+    .linkDirectionalParticleSpeed(link => highlightLinks.has(link) ? SETTINGS.particles.highlightSpeed : SETTINGS.particles.normalSpeed)
     .linkDirectionalParticleColor(link => {
-      if (highlightLinks.has(link)) return "#ffffff";
+      if (searchActive && highlightLinks.has(link)) return LAYER_HEX[srcLayer(link)] || "#00d4ff";
+      if (highlightLinks.has(link)) return SETTINGS.particles.highlightColor;
       const isActive = modifyingNodes.size > 0 || heartbeatNodes.size > 0;
       if (isActive) return "rgba(150,180,220,0.6)";
       return LAYER_HEX[srcLayer(link)] || "#ff69b4";
     })
 
-    .linkDirectionalArrowLength(4)
-    .linkDirectionalArrowRelPos(1)
+    .linkDirectionalArrowLength(SETTINGS.arrows.length)
+    .linkDirectionalArrowRelPos(SETTINGS.arrows.position)
     .linkDirectionalArrowColor(link => {
-      if (highlightLinks.has(link)) return "#ff2d55";
+      if (highlightLinks.has(link)) return SETTINGS.links.highlightColor;
       return rgba(LAYER_HEX[srcLayer(link)] || "#ff69b4", 0.4);
     })
 
@@ -345,27 +768,28 @@ async function loadGraph() {
       }
     })
 
-    .d3AlphaDecay(0.008)
-    .d3VelocityDecay(0.3)
+    .d3AlphaDecay(SETTINGS.physics.alphaDecay)
+    .d3VelocityDecay(SETTINGS.physics.velocityDecay)
     .warmupTicks(300)
     .cooldownTicks(800)
     .enablePointerInteraction(true);
 
-  Graph.d3Force("cluster", clusterForce(0.015));
-  Graph.d3Force("charge").strength(-800);
+  Graph.d3Force("cluster", clusterForce(SETTINGS.physics.clusterStrength));
+  Graph.d3Force("charge").strength(SETTINGS.physics.chargeStrength);
   Graph.d3Force("link")
-    .distance(l => srcLayer(l) === tgtLayer(l) ? 250 : 900)
+    .distance(l => srcLayer(l) === tgtLayer(l) ? SETTINGS.physics.sameLayerDistance : SETTINGS.physics.crossLayerDistance)
     .strength(l => srcLayer(l) === tgtLayer(l) ? 0.2 : 0.05);
 
-  Graph.cameraPosition({ x: 0, y: 0, z: 3500 });
+  Graph.cameraPosition({ x: 0, y: 0, z: SETTINGS.camera.initialZ });
 
   setTimeout(() => {
     try {
       const scene = Graph.scene();
       if (!scene) return;
-      scene.add(new THREE.AmbientLight(0xffffff, 8));
-      scene.add(new THREE.PointLight(0xffffff, 3, 5000));
-      scene.fog = new THREE.FogExp2(0x050a18, 0.00012);
+      scene.add(new THREE.AmbientLight(0xffffff, SETTINGS.scene.ambientIntensity));
+      const ptLight = new THREE.PointLight(0xffffff, SETTINGS.scene.pointIntensity, SETTINGS.scene.pointDistance);
+      scene.add(ptLight);
+      scene.fog = new THREE.FogExp2(parseInt(SETTINGS.scene.background.replace("#",""), 16), SETTINGS.scene.fogDensity);
       console.log("[SYKE] Scene ready");
     } catch(e) { console.warn(e); }
   }, 500);
@@ -381,10 +805,11 @@ async function loadGraph() {
   container.addEventListener("touchstart", stopUser);
 
   window.addEventListener("resize", () => {
-    if (Graph) Graph.width(window.innerWidth - 380).height(window.innerHeight - 100);
+    if (Graph) Graph.width(getGraphPanelWidth()).height(window.innerHeight - 100);
   });
 
   buildLegend(layerCounts);
+  renderFileTreeDebounced();
   createNodeLabels();
   updateLabelsLoop();
 
@@ -528,13 +953,24 @@ function getNodeColor(node) {
     const pulse = 0.5 + 0.5 * Math.sin(t);
     return `rgb(255,${Math.round(180 + pulse * 75)},${Math.round(50 + pulse * 50)})`;
   }
-  if (node.id === selectedNodeId) return "#ffffff";
+  if (node.id === selectedNodeId) return SETTINGS.nodes.selectedColor;
   const base = LAYER_HEX[node.layer] || "#ff69b4";
   if (highlightNodes.size > 0 && !highlightNodes.has(node.id)) {
-    // When actively modifying → dim harder so protagonists stand out
+    if (searchActive) {
+      // Search mode: near-invisible ghost nodes
+      return dimHex(base, 0.06);
+    }
     const isActive = modifyingNodes.size > 0 || heartbeatNodes.size > 0;
     return dimHex(base, isActive ? 0.12 : 0.35);
   }
+  // Search match: pulsing bright glow
+  if (searchActive && highlightNodes.has(node.id)) {
+    const pulse = 0.85 + 0.15 * Math.sin(Date.now() / 300);
+    const r = Math.min(255, Math.round(parseInt(base.slice(1,3),16) * pulse + 40));
+    const g = Math.min(255, Math.round(parseInt(base.slice(3,5),16) * pulse + 40));
+    const b = Math.min(255, Math.round(parseInt(base.slice(5,7),16) * pulse + 40));
+    return `rgb(${r},${g},${b})`;
+  }
   return base;
 }
 
@@ -599,12 +1035,17 @@ function dimHex(hex, factor) {
 }
 
 function getLinkColor(link) {
-  if (highlightLinks.has(link)) return "#ff2d55";
+  if (searchActive && highlightLinks.has(link)) {
+    // Search mode: matched links glow with source layer color
+    return LAYER_HEX[srcLayer(link)] || "#00d4ff";
+  }
+  if (highlightLinks.has(link)) return SETTINGS.links.highlightColor;
   if (highlightNodes.size > 0 && !highlightLinks.has(link)) {
+    if (searchActive) return "rgba(30,40,60,0.02)"; // near-invisible
     const isActive = modifyingNodes.size > 0 || heartbeatNodes.size > 0;
     return isActive ? "rgba(60,70,90,0.03)" : "rgba(100,120,150,0.06)";
   }
-  return rgba(LAYER_HEX[srcLayer(link)] || "#ff69b4", 0.25);
+  return rgba(LAYER_HEX[srcLayer(link)] || "#ff69b4", SETTINGS.links.normalAlpha);
 }
 
 // ═══════════════════════════════════════════
@@ -689,11 +1130,11 @@ function buildLegend(counts) {
 let rotAngle = 0, rotRAF = null;
 function startAutoRotate() {
   if (!autoRotate || !Graph) return;
-  rotAngle += 0.0005;
+  rotAngle += SETTINGS.camera.autoRotateSpeed;
   Graph.cameraPosition({
-    x: 1600 * Math.sin(rotAngle),
+    x: SETTINGS.camera.autoRotateRadius * Math.sin(rotAngle),
     y: 200 + Math.sin(rotAngle * 0.3) * 100,
-    z: 1600 * Math.cos(rotAngle),
+    z: SETTINGS.camera.autoRotateRadius * Math.cos(rotAngle),
   });
   rotRAF = requestAnimationFrame(startAutoRotate);
 }
@@ -749,6 +1190,8 @@ async function handleNodeClick(node) {
   loadSimulation(node.id);
   // Start Star Wars code crawl
   startCodeCrawl(node.id);
+  // Sync file tree selection
+  treeScrollToFile(node.id);
 }
 
 function handleBackgroundClick() {
@@ -783,7 +1226,12 @@ async function showImpact(fileId, nd) {
   document.getElementById("impact-content").innerHTML = '<div class="loading"><div class="spinner"></div>TRACING...</div>';
 
   try {
-    const res = await fetch("/api/impact/" + fileId);
+    const res = await fetch("/api/impact/" + fileId.split("/").map(encodeURIComponent).join("/"));
+    const ct = res.headers.get("content-type") || "";
+    if (!ct.includes("application/json")) {
+      document.getElementById("impact-content").innerHTML = `<p class="placeholder">ERROR: Server returned non-JSON (${res.status})</p>`;
+      return;
+    }
     const impact = await res.json();
     if (!res.ok) { document.getElementById("impact-content").innerHTML = `<p class="placeholder">ERROR: ${impact.error}</p>`; return; }
 
@@ -876,7 +1324,12 @@ async function loadCodePreview(fileId) {
   const el = document.getElementById("code-content");
   el.innerHTML = '<div class="loading"><div class="spinner"></div>LOADING...</div>';
   try {
-    const res = await fetch("/api/file-content/" + fileId);
+    const res = await fetch("/api/file-content/" + fileId.split("/").map(encodeURIComponent).join("/"));
+    const ct = res.headers.get("content-type") || "";
+    if (!ct.includes("application/json")) {
+      el.innerHTML = `<p class="placeholder">ERROR: Server returned non-JSON (${res.status}). File: ${fileId}</p>`;
+      return;
+    }
     const data = await res.json();
     if (!res.ok) { el.innerHTML = `<p class="placeholder">ERROR: ${data.error}</p>`; return; }
 
@@ -901,7 +1354,12 @@ async function loadSimulation(fileId) {
   const el = document.getElementById("sim-content");
   el.innerHTML = '<div class="loading"><div class="spinner"></div>SIMULATING...</div>';
   try {
-    const res = await fetch("/api/simulate-delete/" + fileId);
+    const res = await fetch("/api/simulate-delete/" + fileId.split("/").map(encodeURIComponent).join("/"));
+    const ct = res.headers.get("content-type") || "";
+    if (!ct.includes("application/json")) {
+      el.innerHTML = `<p class="placeholder">ERROR: Server returned non-JSON (${res.status})</p>`;
+      return;
+    }
     const data = await res.json();
     if (!res.ok) { el.innerHTML = `<p class="placeholder">ERROR: ${data.error}</p>`; return; }
 
@@ -1437,6 +1895,9 @@ function setupKeyboardShortcuts() {
       case "s":
         if (selectedFile) { loadSimulation(selectedFile); switchTab("simulate"); }
         break;
+      case "t":
+        toggleFileTreePanel();
+        break;
       case "d":
         detectCycles();
         break;
@@ -1495,7 +1956,7 @@ function resetView() {
   if (pathMode) exitPathMode();
   stopCodeCrawl();
   refreshGraph();
-  Graph.cameraPosition({ x:0,y:0,z:1600 }, { x:0,y:0,z:0 }, 1000);
+  Graph.cameraPosition({ x:0,y:0,z:SETTINGS.camera.resetDistance }, { x:0,y:0,z:0 }, 1000);
 }
 
 function toggleAutoRotate() {
@@ -1548,22 +2009,67 @@ function setupEventListeners() {
   document.getElementById("btn-cancel-path").addEventListener("click", exitPathMode);
 
   document.getElementById("search-input").addEventListener("input", e => {
-    const q = e.target.value.toLowerCase();
+    const q = e.target.value.toLowerCase().trim();
     highlightNodes.clear(); highlightLinks.clear(); selectedNodeId = null;
-    if (q) {
-      graphData.nodes.forEach(n => {
-        if (n.fullPath.toLowerCase().includes(q) || n.layer.toLowerCase() === q || n.label.toLowerCase().includes(q)) highlightNodes.add(n.id);
+
+    if (!q) {
+      // ── Clear search: restore full view ──
+      searchActive = false;
+      if (_searchRAF) { cancelAnimationFrame(_searchRAF); _searchRAF = null; }
+      refreshGraph();
+      // Smooth zoom-out to overview
+      if (Graph) {
+        Graph.cameraPosition(
+          { x: 0, y: 0, z: SETTINGS.camera.resetDistance },
+          { x: 0, y: 0, z: 0 }, 800
+        );
+      }
+      return;
+    }
+
+    // ── Active search: find matching nodes ──
+    searchActive = true;
+    graphData.nodes.forEach(n => {
+      if (n.fullPath.toLowerCase().includes(q) || n.layer.toLowerCase() === q || n.label.toLowerCase().includes(q)) {
+        highlightNodes.add(n.id);
+      }
+    });
+
+    // Also highlight links between matched nodes
+    if (highlightNodes.size > 0) {
+      graphData.links.forEach(l => {
+        const sid = getSrcId(l), tid = getTgtId(l);
+        if (highlightNodes.has(sid) || highlightNodes.has(tid)) highlightLinks.add(l);
       });
-      if (highlightNodes.size > 0) {
-        const f = graphData.nodes.find(n => n.id === highlightNodes.values().next().value);
-        if (f && f.x != null) {
-          stopUser();
-          const d = Math.max(1, Math.hypot(f.x,f.y||0,f.z||0));
-          Graph.cameraPosition({x:f.x+200*f.x/d,y:(f.y||0)+200*(f.y||1)/d,z:(f.z||0)+200*(f.z||1)/d},{x:f.x,y:f.y||0,z:f.z||0},600);
+
+      // Camera: frame all matched nodes (centroid)
+      let cx = 0, cy = 0, cz = 0, cnt = 0;
+      graphData.nodes.forEach(n => {
+        if (highlightNodes.has(n.id) && n.x != null) {
+          cx += n.x; cy += (n.y || 0); cz += (n.z || 0); cnt++;
         }
+      });
+      if (cnt > 0) {
+        cx /= cnt; cy /= cnt; cz /= cnt;
+        stopUser();
+        const dist = cnt === 1 ? 600 : Math.min(2500, 800 + cnt * 80);
+        Graph.cameraPosition(
+          { x: cx + dist * 0.3, y: cy + dist * 0.2, z: cz + dist },
+          { x: cx, y: cy, z: cz }, 600
+        );
       }
     }
+
     refreshGraph();
+    // Start glow animation loop for search matches
+    if (!_searchRAF && highlightNodes.size > 0) {
+      function searchGlow() {
+        if (!searchActive) { _searchRAF = null; return; }
+        if (Graph) Graph.nodeColor(Graph.nodeColor());
+        _searchRAF = requestAnimationFrame(searchGlow);
+      }
+      _searchRAF = requestAnimationFrame(searchGlow);
+    }
   });
 
   document.getElementById("btn-toggle-hub").addEventListener("click", () => {
@@ -1607,8 +2113,9 @@ function setupEventListeners() {
     });
   });
 
-  // ── Resizable Right Panel ──
+  // ── Resizable Panels ──
   setupResizeHandle();
+  setupTreeResizeHandle();
 }
 
 // ═══════════════════════════════════════════
@@ -2255,6 +2762,16 @@ async function initSSE() {
     const data = JSON.parse(e.data);
     console.log("[SYKE:SSE] File change:", data.file, data.type, data.diffCount, "diffs");
 
+    // ── 0. Update file tree modification tracking ──
+    fileTreeModified.set(data.file, { type: data.type, timestamp: Date.now() });
+    renderFileTreeDebounced();
+    // Auto-clear pulse after pulseDuration
+    const pulseDur = (SETTINGS.fileTree.pulseDuration || 5) * 1000;
+    setTimeout(() => {
+      fileTreeModified.delete(data.file);
+      renderFileTreeDebounced();
+    }, pulseDur);
+
     // ── 1. Auto-select the modified node in 3D graph ──
     selectedFile = data.file;
     selectedNodeId = data.file;
@@ -2409,6 +2926,7 @@ async function initSSE() {
     setTimeout(async () => {
       await loadGraph();
       await loadHubFiles();
+      renderFileTreeDebounced();
     }, 1000);
   });
 
@@ -2528,6 +3046,489 @@ function renderRealtimePanel() {
 // ═══════════════════════════════════════════
 // RESIZABLE RIGHT PANEL
 // ═══════════════════════════════════════════
+// ═══════════════════════════════════════════
+// FILE TREE PANEL
+// ═══════════════════════════════════════════
+
+function getGraphPanelWidth() {
+  const rightPanel = document.getElementById("right-panel");
+  const treePanel = document.getElementById("file-tree-panel");
+  const rw = rightPanel ? rightPanel.offsetWidth : 380;
+  const tw = (treePanel && !treePanel.classList.contains("hidden")) ? treePanel.offsetWidth : 0;
+  // 8px per resize handle (tree + right)
+  return window.innerWidth - rw - tw - 16;
+}
+
+function updateDynamicRightOffsets() {
+  const rightPanel = document.getElementById("right-panel");
+  const treePanel = document.getElementById("file-tree-panel");
+  const rw = rightPanel ? rightPanel.offsetWidth : 380;
+  const tw = (treePanel && !treePanel.classList.contains("hidden")) ? treePanel.offsetWidth : 0;
+  const total = rw + tw + 16; // 2 resize handles × 8px
+  document.documentElement.style.setProperty("--right-offset", total + "px");
+}
+
+function toggleFileTreePanel() {
+  const panel = document.getElementById("file-tree-panel");
+  const treeResize = document.getElementById("tree-resize-handle");
+  if (!panel) return;
+  fileTreeVisible = !fileTreeVisible;
+  panel.classList.toggle("hidden", !fileTreeVisible);
+  if (treeResize) treeResize.style.display = fileTreeVisible ? "" : "none";
+  updateDynamicRightOffsets();
+  if (Graph) {
+    const gp = document.getElementById("graph-panel");
+    if (gp) Graph.width(gp.clientWidth);
+  }
+}
+
+function buildFileTree(nodes) {
+  if (!nodes || !nodes.length) { fileTreeData = null; return; }
+  const root = { name: "", children: {}, files: [], path: "" };
+
+  nodes.forEach(n => {
+    const parts = (n.fullPath || n.id).split("/").filter(Boolean);
+    let current = root;
+    for (let i = 0; i < parts.length - 1; i++) {
+      const folderName = parts[i];
+      const folderPath = parts.slice(0, i + 1).join("/");
+      if (!current.children[folderName]) {
+        current.children[folderName] = { name: folderName, children: {}, files: [], path: folderPath };
+      }
+      current = current.children[folderName];
+    }
+    current.files.push({
+      name: parts[parts.length - 1] || n.label,
+      node: n,
+      path: n.fullPath || n.id,
+    });
+  });
+
+  fileTreeData = root;
+}
+
+function countFilesRecursive(folder) {
+  let count = folder.files.length;
+  for (const child of Object.values(folder.children)) {
+    count += countFilesRecursive(child);
+  }
+  return count;
+}
+
+function getAggregateRisk(folder) {
+  const order = ["HIGH", "MEDIUM", "LOW", "NONE"];
+  let highest = 3; // NONE
+  for (const f of folder.files) {
+    const idx = order.indexOf(f.node.riskLevel);
+    if (idx >= 0 && idx < highest) highest = idx;
+  }
+  for (const child of Object.values(folder.children)) {
+    const childRisk = getAggregateRisk(child);
+    const idx = order.indexOf(childRisk);
+    if (idx >= 0 && idx < highest) highest = idx;
+  }
+  return order[highest];
+}
+
+function folderHasModifiedChild(folder) {
+  for (const f of folder.files) {
+    if (fileTreeModified.has(f.path)) return true;
+  }
+  for (const child of Object.values(folder.children)) {
+    if (folderHasModifiedChild(child)) return true;
+  }
+  return false;
+}
+
+function folderMatchesFilter(folder, filter) {
+  if (!filter) return true;
+  const fl = filter.toLowerCase();
+  for (const f of folder.files) {
+    if (f.name.toLowerCase().includes(fl) || f.path.toLowerCase().includes(fl)) return true;
+  }
+  for (const child of Object.values(folder.children)) {
+    if (child.name.toLowerCase().includes(fl) || folderMatchesFilter(child, filter)) return true;
+  }
+  return false;
+}
+
+function sortTreeItems(items, sortType) {
+  return [...items].sort((a, b) => {
+    switch (sortType) {
+      case "layer": {
+        const la = a.node ? (a.node.layer || "UTIL") : "";
+        const lb = b.node ? (b.node.layer || "UTIL") : "";
+        return la.localeCompare(lb) || (a.name || "").localeCompare(b.name || "");
+      }
+      case "risk": {
+        const order = { HIGH: 0, MEDIUM: 1, LOW: 2, NONE: 3 };
+        const ra = a.node ? (order[a.node.riskLevel] ?? 3) : 3;
+        const rb = b.node ? (order[b.node.riskLevel] ?? 3) : 3;
+        return ra - rb || (a.name || "").localeCompare(b.name || "");
+      }
+      case "deps": {
+        const da = a.node ? (a.node.dependentCount || 0) : 0;
+        const db = b.node ? (b.node.dependentCount || 0) : 0;
+        return db - da || (a.name || "").localeCompare(b.name || "");
+      }
+      case "modified": {
+        const ma = a.path && fileTreeModified.has(a.path) ? fileTreeModified.get(a.path).timestamp : 0;
+        const mb = b.path && fileTreeModified.has(b.path) ? fileTreeModified.get(b.path).timestamp : 0;
+        return mb - ma || (a.name || "").localeCompare(b.name || "");
+      }
+      default: // name
+        return (a.name || "").localeCompare(b.name || "");
+    }
+  });
+}
+
+function renderFileTree() {
+  if (!graphData || !graphData.nodes) return;
+  buildFileTree(graphData.nodes);
+  if (!fileTreeData) return;
+
+  const container = document.getElementById("tree-content");
+  const countEl = document.getElementById("tree-file-count");
+  if (!container) return;
+
+  const s = SETTINGS.fileTree;
+  const filter = fileTreeFilter.toLowerCase();
+  let totalFiles = 0;
+
+  // Nested rendering: each folder level produces a <div class="tree-group">
+  function renderGroup(folder) {
+    // Collect visible items (folders first, then files)
+    const visibleFolders = Object.values(folder.children)
+      .filter(c => !filter || folderMatchesFilter(c, filter))
+      .sort((a, b) => a.name.localeCompare(b.name));
+
+    const visibleFiles = sortTreeItems(
+      folder.files.filter(f => !filter || f.name.toLowerCase().includes(filter) || f.path.toLowerCase().includes(filter)),
+      fileTreeSort
+    );
+
+    const itemCount = visibleFolders.length + visibleFiles.length;
+    if (itemCount === 0) return "";
+
+    const hasModified = folderHasModifiedChild(folder);
+    const singleClass = itemCount === 1 ? " single-child" : "";
+    const modGroupClass = hasModified ? " has-modified" : "";
+    let html = `<div class="tree-group${singleClass}${modGroupClass}">`;
+
+    // ── Folders ──
+    for (const child of visibleFolders) {
+      const isOpen = fileTreeExpanded.has(child.path);
+      const fileCount = countFilesRecursive(child);
+      const hasModChild = folderHasModifiedChild(child);
+      const compactClass = s.compactMode ? " compact" : "";
+      const glowClass = hasModChild ? " folder-glow" : "";
+      const col = "var(--accent)";
+
+      html += `<div class="tree-node${glowClass}${compactClass}" data-path="${child.path}" data-type="folder">`;
+      html += `<div class="tree-dot" style="border-color:${col};box-shadow:0 0 8px rgba(0,212,255,0.4)"></div>`;
+      html += `<span class="tree-toggle${isOpen ? " open" : ""}" data-path="${child.path}">&#9654;</span>`;
+      html += `<span class="tree-name folder-name">${escHtml(child.name)}</span>`;
+      html += `<span class="tree-folder-count">${fileCount}</span>`;
+      html += `</div>`;
+
+      // Render expanded children as nested tree-group
+      if (isOpen) {
+        html += renderGroup(child);
+      }
+    }
+
+    // ── Files ──
+    for (const f of visibleFiles) {
+      totalFiles++;
+      const isSelected = selectedNodeId === f.node.id;
+      const isModified = fileTreeModified.has(f.path);
+      const modData = isModified ? fileTreeModified.get(f.path) : null;
+      const col = LAYER_HEX[f.node.layer] || "#999";
+      const compactClass = s.compactMode ? " compact" : "";
+      const selClass = isSelected ? " selected" : "";
+      const modClass = isModified ? " modified" : "";
+
+      html += `<div class="tree-node${selClass}${modClass}${compactClass}" style="font-size:${s.fontSize}px" data-path="${f.path}" data-node-id="${f.node.id}" data-type="file">`;
+      html += `<div class="tree-dot" style="background:${col};border-color:${col};box-shadow:0 0 8px ${col}"></div>`;
+      html += `<span class="tree-name">${escHtml(f.name)}</span>`;
+
+      // Badges
+      if (isModified && modData) {
+        const modLabel = modData.type === "added" ? "A" : modData.type === "deleted" ? "D" : "M";
+        const modCls = modData.type === "added" ? "mod-A" : modData.type === "deleted" ? "mod-D" : "mod-M";
+        html += `<span class="tree-mod-badge ${modCls}">${modLabel}</span>`;
+      }
+      if (s.showRisk && f.node.riskLevel && f.node.riskLevel !== "NONE") {
+        html += `<span class="tree-badge badge-risk-${f.node.riskLevel}">${f.node.riskLevel[0]}</span>`;
+      }
+      if (s.showDeps && f.node.dependentCount > 0) {
+        html += `<span class="tree-badge badge-deps">D${f.node.dependentCount}</span>`;
+      }
+      if (s.showLineCount && f.node.lineCount > 0) {
+        html += `<span class="tree-badge badge-lines">L${f.node.lineCount}</span>`;
+      }
+      html += `</div>`;
+    }
+
+    html += `</div>`; // close tree-group
+    return html;
+  }
+
+  container.innerHTML = renderGroup(fileTreeData);
+  if (countEl) countEl.textContent = totalFiles;
+}
+
+function escHtml(s) {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+
+function renderFileTreeDebounced() {
+  if (_fileTreeRenderTimer) clearTimeout(_fileTreeRenderTimer);
+  _fileTreeRenderTimer = setTimeout(() => {
+    renderFileTree();
+    _fileTreeRenderTimer = null;
+  }, 100);
+}
+
+function toggleFolder(path) {
+  if (fileTreeExpanded.has(path)) fileTreeExpanded.delete(path);
+  else fileTreeExpanded.add(path);
+  renderFileTree();
+}
+
+function expandAllFolders() {
+  if (!fileTreeData) return;
+  function collectPaths(folder) {
+    for (const child of Object.values(folder.children)) {
+      fileTreeExpanded.add(child.path);
+      collectPaths(child);
+    }
+  }
+  collectPaths(fileTreeData);
+  renderFileTree();
+}
+
+function collapseAllFolders() {
+  fileTreeExpanded.clear();
+  renderFileTree();
+}
+
+function treeScrollToFile(nodeId) {
+  if (!fileTreeData || !nodeId || _treeScrollLock) return;
+  // Find file path and expand parent folders
+  const node = graphData?.nodes.find(n => n.id === nodeId);
+  if (!node) return;
+  const fullPath = node.fullPath || nodeId;
+  const parts = fullPath.split("/").filter(Boolean);
+
+  // Expand all parent folders
+  for (let i = 1; i < parts.length; i++) {
+    const folderPath = parts.slice(0, i).join("/");
+    fileTreeExpanded.add(folderPath);
+  }
+
+  renderFileTree();
+
+  // Scroll to the file element
+  requestAnimationFrame(() => {
+    const container = document.getElementById("tree-scroll-container");
+    const el = document.querySelector(`[data-node-id="${CSS.escape(nodeId)}"]`);
+    if (el && container && SETTINGS.fileTree.autoScrollOnChange) {
+      el.scrollIntoView({ behavior: "smooth", block: "center" });
+    }
+  });
+}
+
+function applyFileTreeSettings() {
+  const panel = document.getElementById("file-tree-panel");
+  if (panel) {
+    const w = SETTINGS.fileTree.panelWidth;
+    panel.style.flex = `0 0 ${w}px`;
+    panel.style.width = `${w}px`;
+  }
+  updateDynamicRightOffsets();
+  renderFileTree();
+  if (Graph) {
+    const gp = document.getElementById("graph-panel");
+    if (gp) Graph.width(gp.clientWidth);
+  }
+}
+
+function setupFileTree() {
+  const container = document.getElementById("tree-content");
+  const searchInput = document.getElementById("tree-search-input");
+  const sortBtn = document.getElementById("tree-sort-btn");
+  const sortMenu = document.getElementById("tree-sort-menu");
+  const collapseBtn = document.getElementById("tree-collapse-all");
+  const scrollContainer = document.getElementById("tree-scroll-container");
+
+  if (!container) return;
+
+  // Click delegation for tree nodes
+  container.addEventListener("click", (e) => {
+    const node = e.target.closest(".tree-node");
+    if (!node) return;
+
+    if (node.dataset.type === "folder") {
+      toggleFolder(node.dataset.path);
+      return;
+    }
+
+    // File click → select in 3D graph
+    const nodeId = node.dataset.nodeId;
+    if (nodeId && graphData) {
+      const gNode = graphData.nodes.find(n => n.id === nodeId);
+      if (gNode) {
+        handleNodeClick(gNode);
+      }
+    }
+  });
+
+  // Toggle arrow click
+  container.addEventListener("click", (e) => {
+    const toggle = e.target.closest(".tree-toggle");
+    if (toggle) {
+      e.stopPropagation();
+      toggleFolder(toggle.dataset.path);
+    }
+  });
+
+  // Hover → highlight 3D node
+  container.addEventListener("mouseenter", (e) => {
+    const node = e.target.closest(".tree-node[data-type='file']");
+    if (!node || !Graph) return;
+    const nodeId = node.dataset.nodeId;
+    if (nodeId) {
+      highlightNodes.add(nodeId);
+      refreshGraph();
+    }
+  }, true);
+
+  container.addEventListener("mouseleave", (e) => {
+    const node = e.target.closest(".tree-node[data-type='file']");
+    if (!node || !Graph) return;
+    const nodeId = node.dataset.nodeId;
+    if (nodeId && nodeId !== selectedNodeId) {
+      highlightNodes.delete(nodeId);
+      refreshGraph();
+    }
+  }, true);
+
+  // Search filter
+  if (searchInput) {
+    searchInput.addEventListener("input", () => {
+      fileTreeFilter = searchInput.value.trim();
+      // Auto-expand when filtering
+      if (fileTreeFilter && fileTreeData) expandAllFolders();
+      else renderFileTree();
+    });
+  }
+
+  // Sort button + menu
+  if (sortBtn && sortMenu) {
+    sortBtn.addEventListener("click", (e) => {
+      e.stopPropagation();
+      sortMenu.classList.toggle("hidden");
+    });
+
+    sortMenu.querySelectorAll(".tree-sort-option").forEach(opt => {
+      opt.addEventListener("click", (e) => {
+        e.stopPropagation();
+        fileTreeSort = opt.dataset.sort;
+        sortMenu.querySelectorAll(".tree-sort-option").forEach(o => o.classList.remove("active"));
+        opt.classList.add("active");
+        sortMenu.classList.add("hidden");
+        renderFileTree();
+      });
+    });
+
+    // Close sort menu on outside click
+    document.addEventListener("click", () => {
+      if (sortMenu) sortMenu.classList.add("hidden");
+    });
+  }
+
+  // Collapse/expand all toggle
+  let allExpanded = false;
+  if (collapseBtn) {
+    collapseBtn.addEventListener("click", () => {
+      if (allExpanded) { collapseAllFolders(); collapseBtn.innerHTML = "&#9660;"; }
+      else { expandAllFolders(); collapseBtn.innerHTML = "&#9650;"; }
+      allExpanded = !allExpanded;
+    });
+  }
+
+  // Scroll lock: disable auto-scroll when user manually scrolls
+  if (scrollContainer) {
+    scrollContainer.addEventListener("scroll", () => {
+      _treeScrollLock = true;
+      if (_treeScrollLockTimer) clearTimeout(_treeScrollLockTimer);
+      _treeScrollLockTimer = setTimeout(() => { _treeScrollLock = false; }, 3000);
+    }, { passive: true });
+  }
+
+  // Apply initial settings
+  applyFileTreeSettings();
+  updateDynamicRightOffsets();
+}
+
+function setupTreeResizeHandle() {
+  const handle = document.getElementById("tree-resize-handle");
+  const panel = document.getElementById("file-tree-panel");
+  if (!handle || !panel) return;
+
+  let startX = 0;
+  let startW = 0;
+
+  function onMove(e) {
+    e.preventDefault();
+    const dx = e.clientX - startX;
+    const newW = Math.max(200, Math.min(500, startW + dx));
+    panel.style.flex = "0 0 " + newW + "px";
+    panel.style.width = newW + "px";
+    SETTINGS.fileTree.panelWidth = newW;
+    updateDynamicRightOffsets();
+    if (Graph) {
+      const gp = document.getElementById("graph-panel");
+      if (gp) Graph.width(gp.clientWidth);
+    }
+  }
+
+  function onUp() {
+    window.removeEventListener("mousemove", onMove, true);
+    window.removeEventListener("mouseup", onUp, true);
+    handle.classList.remove("dragging");
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    const overlay = document.getElementById("tree-resize-overlay");
+    if (overlay) overlay.remove();
+    saveSettings();
+    if (Graph) {
+      const gp = document.getElementById("graph-panel");
+      if (gp) Graph.width(gp.clientWidth);
+    }
+  }
+
+  handle.addEventListener("mousedown", (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    startX = e.clientX;
+    startW = panel.offsetWidth;
+    handle.classList.add("dragging");
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    const overlay = document.createElement("div");
+    overlay.id = "tree-resize-overlay";
+    overlay.style.cssText = "position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;cursor:col-resize;background:transparent;";
+    document.body.appendChild(overlay);
+    window.addEventListener("mousemove", onMove, true);
+    window.addEventListener("mouseup", onUp, true);
+  });
+}
+
+// ═══════════════════════════════════════════
+// RESIZE HANDLE (Right Panel)
+// ═══════════════════════════════════════════
 function setupResizeHandle() {
   const handle = document.getElementById("resize-handle");
   const panel = document.getElementById("right-panel");
@@ -2543,7 +3544,7 @@ function setupResizeHandle() {
     const newW = Math.max(250, Math.min(900, startW + dx));
     panel.style.flex = "0 0 " + newW + "px";
     panel.style.width = newW + "px";
-    if (hub) hub.style.right = newW + "px";
+    updateDynamicRightOffsets();
     if (Graph) {
       const gp = document.getElementById("graph-panel");
       if (gp) Graph.width(gp.clientWidth);
@@ -2587,82 +3588,23 @@ function setupResizeHandle() {
 // ═══════════════════════════════════════════
 // PROJECT SELECTOR
 // ═══════════════════════════════════════════
-let licenseTimerInterval = null;
-
 function updateLicenseBadge(plan, expiresAt) {
   const badge = document.getElementById("license-badge");
   if (!badge) return;
 
-  const planEl = badge.querySelector(".license-plan");
-  const timerEl = badge.querySelector(".license-timer");
-
-  // Clear previous timer
-  if (licenseTimerInterval) {
-    clearInterval(licenseTimerInterval);
-    licenseTimerInterval = null;
-  }
-
   badge.className = "license-badge";
 
-  if (plan === "pro" && expiresAt) {
-    const expiry = new Date(expiresAt);
-    const now = new Date();
-    const diffMs = expiry - now;
-
-    if (diffMs <= 0) {
-      // Expired
+  if (plan === "pro") {
+    if (expiresAt && new Date(expiresAt) < new Date()) {
       badge.classList.add("expired");
-      planEl.textContent = "EXPIRED";
-      timerEl.textContent = "";
+      badge.textContent = "EXPIRED";
     } else {
-      const totalDays = Math.ceil(diffMs / (1000 * 60 * 60 * 24));
-
-      if (totalDays <= 3) {
-        // Trial or near-expiry
-        badge.classList.add("trial-urgent");
-        planEl.textContent = "TRIAL";
-      } else if (totalDays <= 14) {
-        badge.classList.add("trial");
-        planEl.textContent = "TRIAL";
-      } else {
-        badge.classList.add("pro");
-        planEl.textContent = "PRO";
-      }
-
-      // Live countdown
-      function tick() {
-        const remaining = new Date(expiresAt) - new Date();
-        if (remaining <= 0) {
-          timerEl.textContent = "EXPIRED";
-          badge.className = "license-badge expired";
-          planEl.textContent = "EXPIRED";
-          clearInterval(licenseTimerInterval);
-          return;
-        }
-        const d = Math.floor(remaining / (1000 * 60 * 60 * 24));
-        const h = Math.floor((remaining % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
-        const m = Math.floor((remaining % (1000 * 60 * 60)) / (1000 * 60));
-        const s = Math.floor((remaining % (1000 * 60)) / 1000);
-
-        if (d > 0) {
-          timerEl.textContent = `D-${d} ${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
-        } else {
-          timerEl.textContent = `${String(h).padStart(2,"0")}:${String(m).padStart(2,"0")}:${String(s).padStart(2,"0")}`;
-        }
-      }
-      tick();
-      licenseTimerInterval = setInterval(tick, 1000);
-    }
-  } else if (plan === "pro") {
-    // Pro without expiry (permanent or subscription)
-    badge.classList.add("pro");
-    planEl.textContent = "PRO";
-    timerEl.textContent = "";
+      badge.classList.add("pro");
+      badge.textContent = "PRO";
+    }
   } else {
-    // Free
     badge.classList.add("free");
-    planEl.textContent = "FREE";
-    timerEl.textContent = "";
+    badge.textContent = "FREE";
   }
 }