@syke1/mcp-server 1.4.0 → 1.4.2

package/dist/web/public/app.js

@@ -23,6 +23,17 @@ let birthAnimations = new Map(); // nodeId → { startTime, spawnPos, targetPos
 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",
@@ -97,6 +108,17 @@ const SETTINGS_DEFAULTS = {
     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) {
@@ -208,6 +230,9 @@ function applySettings(group) {
     case "animation":
       // Animation values are read when new nodes appear, no action needed
       break;
+    case "fileTree":
+      applyFileTreeSettings();
+      break;
   }
 }
 
@@ -261,6 +286,15 @@ function setupSettings() {
     ["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
@@ -268,16 +302,25 @@ function setupSettings() {
     const el = document.querySelector(selector);
     if (!el) continue;
     const valEl = el.parentElement?.querySelector(".set-val");
-    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();
-    });
+    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
@@ -302,9 +345,10 @@ function setupSettings() {
         if (g !== group) continue;
         const el = document.querySelector(selector);
         if (!el) continue;
-        el.value = SETTINGS[group][key];
+        if (type === "checkbox") { el.checked = !!SETTINGS[group][key]; }
+        else { el.value = SETTINGS[group][key]; }
         const valEl = el.parentElement?.querySelector(".set-val");
-        if (valEl) valEl.textContent = formatSetVal(SETTINGS[group][key], type);
+        if (valEl && type !== "checkbox") valEl.textContent = formatSetVal(SETTINGS[group][key], type);
       }
     });
   });
@@ -319,9 +363,10 @@ function setupSettings() {
       for (const [group, key, selector, type] of CTRL_MAP) {
         const el = document.querySelector(selector);
         if (!el) continue;
-        el.value = SETTINGS[group][key];
+        if (type === "checkbox") { el.checked = !!SETTINGS[group][key]; }
+        else { el.value = SETTINGS[group][key]; }
         const valEl = el.parentElement?.querySelector(".set-val");
-        if (valEl) valEl.textContent = formatSetVal(SETTINGS[group][key], type);
+        if (valEl && type !== "checkbox") valEl.textContent = formatSetVal(SETTINGS[group][key], type);
       }
     });
   }
@@ -365,9 +410,10 @@ function setupSettings() {
             for (const [group, key, selector, type] of CTRL_MAP) {
               const el = document.querySelector(selector);
               if (!el) continue;
-              el.value = SETTINGS[group][key];
+              if (type === "checkbox") { el.checked = !!SETTINGS[group][key]; }
+              else { el.value = SETTINGS[group][key]; }
               const valEl = el.parentElement?.querySelector(".set-val");
-              if (valEl) valEl.textContent = formatSetVal(SETTINGS[group][key], type);
+              if (valEl && type !== "checkbox") valEl.textContent = formatSetVal(SETTINGS[group][key], type);
             }
           } catch(e) {
             console.error("[SYKE] Import failed:", e);
@@ -417,6 +463,8 @@ document.addEventListener("DOMContentLoaded", async () => {
   setupTabs();
   setupSettings();
   setupProjectModal();
+  setupLicenseModal();
+  setupFileTree();
   initSSE();
   startHealthCheck();
 });
@@ -548,6 +596,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 ──
@@ -595,7 +644,7 @@ 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(SETTINGS.scene.background)
@@ -757,10 +806,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();
 
@@ -1141,6 +1191,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() {
@@ -1844,6 +1896,9 @@ function setupKeyboardShortcuts() {
       case "s":
         if (selectedFile) { loadSimulation(selectedFile); switchTab("simulate"); }
         break;
+      case "t":
+        toggleFileTreePanel();
+        break;
       case "d":
         detectCycles();
         break;
@@ -2059,8 +2114,9 @@ function setupEventListeners() {
     });
   });
 
-  // ── Resizable Right Panel ──
+  // ── Resizable Panels ──
   setupResizeHandle();
+  setupTreeResizeHandle();
 }
 
 // ═══════════════════════════════════════════
@@ -2707,6 +2763,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;
@@ -2861,6 +2927,7 @@ async function initSSE() {
     setTimeout(async () => {
       await loadGraph();
       await loadHubFiles();
+      renderFileTreeDebounced();
     }, 1000);
   });
 
@@ -2980,6 +3047,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");
@@ -2995,7 +3545,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);
@@ -3045,21 +3595,14 @@ function updateLicenseBadge(plan, expiresAt) {
 
   badge.className = "license-badge";
 
-  if (plan === "pro" && expiresAt) {
-    const diffMs = new Date(expiresAt) - new Date();
-    if (diffMs <= 0) {
+  if (plan === "pro") {
+    if (expiresAt && new Date(expiresAt) < new Date()) {
       badge.classList.add("expired");
       badge.textContent = "EXPIRED";
-    } else if (Math.ceil(diffMs / (1000 * 60 * 60 * 24)) <= 14) {
-      badge.classList.add("trial");
-      badge.textContent = "TRIAL";
     } else {
       badge.classList.add("pro");
       badge.textContent = "PRO";
     }
-  } else if (plan === "pro") {
-    badge.classList.add("pro");
-    badge.textContent = "PRO";
   } else {
     badge.classList.add("free");
     badge.textContent = "FREE";
@@ -3119,6 +3662,7 @@ async function loadProjectInfo() {
     }
     hideServerOffline();
     updateLicenseBadge(info.plan, info.expiresAt);
+    updateLicenseButton(info.plan);
     // Bottom bar: fetch version from npm registry
     updateBottomBar();
   } catch (e) {
@@ -3260,6 +3804,106 @@ async function switchProject(projectPath) {
   }
 }
 
+// ══════════════════════════════════════════════════════════════
+// LICENSE MODAL
+// ══════════════════════════════════════════════════════════════
+function setupLicenseModal() {
+  const btn = document.getElementById("btn-license");
+  const modal = document.getElementById("license-modal");
+  const input = document.getElementById("license-key-input");
+  const activateBtn = document.getElementById("btn-license-activate");
+  const deactivateBtn = document.getElementById("btn-license-deactivate");
+  const cancelBtn = document.getElementById("btn-license-cancel");
+  const statusEl = document.getElementById("license-modal-status");
+  if (!btn || !modal) return;
+
+  function openModal() {
+    modal.classList.remove("hidden");
+    input.value = "";
+    statusEl.textContent = "";
+    statusEl.className = "";
+    input.focus();
+  }
+  function closeModal() {
+    modal.classList.add("hidden");
+  }
+
+  btn.addEventListener("click", openModal);
+  cancelBtn.addEventListener("click", closeModal);
+  modal.addEventListener("click", (e) => { if (e.target === modal) closeModal(); });
+
+  activateBtn.addEventListener("click", async () => {
+    const key = input.value.trim();
+    if (!key || !key.startsWith("SYKE-")) {
+      statusEl.className = "error";
+      statusEl.textContent = "Key must start with SYKE-";
+      return;
+    }
+    statusEl.className = "loading";
+    statusEl.textContent = "VALIDATING...";
+    activateBtn.disabled = true;
+
+    try {
+      const res = await fetch("/api/set-license-key", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ key }),
+      });
+      const data = await res.json();
+      if (data.success && data.plan === "pro") {
+        statusEl.className = "success";
+        statusEl.textContent = "PRO ACTIVATED";
+        updateLicenseBadge("pro", data.expiresAt);
+        updateLicenseButton("pro");
+        setTimeout(closeModal, 1200);
+      } else {
+        statusEl.className = "error";
+        statusEl.textContent = data.error || "Activation failed";
+      }
+    } catch (err) {
+      statusEl.className = "error";
+      statusEl.textContent = "Network error";
+    }
+    activateBtn.disabled = false;
+  });
+
+  deactivateBtn.addEventListener("click", async () => {
+    if (!confirm("Remove license key? Dashboard will switch to Free mode.")) return;
+    statusEl.className = "loading";
+    statusEl.textContent = "REMOVING...";
+
+    try {
+      const res = await fetch("/api/set-license-key", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ key: null }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        statusEl.className = "success";
+        statusEl.textContent = "KEY REMOVED";
+        updateLicenseBadge("free", null);
+        updateLicenseButton("free");
+        setTimeout(closeModal, 800);
+      }
+    } catch {
+      statusEl.className = "error";
+      statusEl.textContent = "Failed to remove key";
+    }
+  });
+
+  input.addEventListener("keydown", (e) => {
+    if (e.key === "Enter") activateBtn.click();
+    if (e.key === "Escape") closeModal();
+  });
+}
+
+function updateLicenseButton(plan) {
+  const btn = document.getElementById("btn-license");
+  if (!btn) return;
+  btn.textContent = plan === "pro" ? "LICENSED" : "LICENSE";
+}
+
 function setupProjectModal() {
   const openBtn = document.getElementById("btn-change-project");
   const modal = document.getElementById("project-modal");