@syke1/mcp-server 1.3.19 → 1.4.0

package/dist/web/public/app.js

@@ -20,12 +20,378 @@ 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 }
+let searchActive = false; // true when search input has text
+let _searchRAF = null; // RAF loop for search glow animation
 
-const LAYER_HEX = {
+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,
+  },
+};
+
+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;
+  }
+}
+
+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"],
+  ];
+
+  // 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");
+    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;
+        el.value = SETTINGS[group][key];
+        const valEl = el.parentElement?.querySelector(".set-val");
+        if (valEl) 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;
+        el.value = SETTINGS[group][key];
+        const valEl = el.parentElement?.querySelector(".set-val");
+        if (valEl) 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;
+              el.value = SETTINGS[group][key];
+              const valEl = el.parentElement?.querySelector(".set-val");
+              if (valEl) 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,6 +415,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   setupKeyboardShortcuts();
   setupContextMenu();
   setupTabs();
+  setupSettings();
   setupProjectModal();
   initSSE();
   startHealthCheck();
@@ -113,7 +480,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 +510,7 @@ async function loadGraph() {
         startTime: Date.now(),
         spawnPos: { ...SPAWN },
         targetPos: { ...targetPos },
-        duration: 2500, // 2.5s flight time
+        duration: SETTINGS.animation.birthDuration,
       });
     }
 
@@ -209,7 +576,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
         );
@@ -231,13 +598,19 @@ async function loadGraph() {
     .width(window.innerWidth - 380)
     .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 +628,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 +645,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 +720,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);
@@ -528,13 +904,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 +986,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 +1081,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);
 }
@@ -783,7 +1175,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 +1273,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 +1303,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; }
 
@@ -1495,7 +1902,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 +1955,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", () => {
@@ -2587,82 +3039,30 @@ 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;
-
+    const diffMs = new Date(expiresAt) - new Date();
     if (diffMs <= 0) {
-      // Expired
       badge.classList.add("expired");
-      planEl.textContent = "EXPIRED";
-      timerEl.textContent = "";
+      badge.textContent = "EXPIRED";
+    } else if (Math.ceil(diffMs / (1000 * 60 * 60 * 24)) <= 14) {
+      badge.classList.add("trial");
+      badge.textContent = "TRIAL";
     } 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);
+      badge.classList.add("pro");
+      badge.textContent = "PRO";
     }
   } else if (plan === "pro") {
-    // Pro without expiry (permanent or subscription)
     badge.classList.add("pro");
-    planEl.textContent = "PRO";
-    timerEl.textContent = "";
+    badge.textContent = "PRO";
   } else {
-    // Free
     badge.classList.add("free");
-    planEl.textContent = "FREE";
-    timerEl.textContent = "";
+    badge.textContent = "FREE";
   }
 }
 
@@ -2731,7 +3131,7 @@ async function updateBottomBar() {
   const el = document.getElementById("bottom-info");
   if (!el) return;
   try {
-    const r = await fetch("https://registry.npmjs.org/@syke1/mcp-server");
+    const r = await fetch("https://registry.npmjs.org/@syke1/mcp-server", { cache: "no-store" });
     const data = await r.json();
     const version = data["dist-tags"]?.latest || "?";
     const publishDate = data.time?.[version]?.slice(0, 10) || "?";

package/dist/web/public/index.html

@@ -19,15 +19,12 @@
       <span class="logo-text">SYKE</span>
       <span class="logo-sub">CODE IMPACT RADAR</span>
       <span id="sse-status" class="sse-indicator offline">OFFLINE</span>
+      <span id="license-badge" class="license-badge free">FREE</span>
     </div>
     <div class="project-selector">
       <span id="current-project" class="project-path">Loading...</span>
       <button id="btn-change-project" class="top-btn" title="Switch project">OPEN</button>
     </div>
-    <div id="license-badge" class="license-badge free">
-      <span class="license-plan">FREE</span>
-      <span class="license-timer"></span>
-    </div>
     <div class="top-controls">
       <button id="btn-cycles" class="top-btn" title="Detect circular dependencies">CYCLES</button>
       <button id="btn-stats" class="top-btn" title="Toggle statistics panel">STATS</button>
@@ -134,6 +131,7 @@
         <button class="panel-tab" data-tab="code">CODE</button>
         <button class="panel-tab" data-tab="simulate">SIM</button>
         <button class="panel-tab" data-tab="live">LIVE</button>
+        <button class="panel-tab" data-tab="settings">SET</button>
       </div>
 
       <!-- Tab: Info (default) -->
@@ -192,6 +190,105 @@
           </div>
         </section>
       </div>
+
+      <!-- Tab: Settings -->
+      <div id="tab-settings" class="tab-content">
+        <div class="set-panel">
+          <!-- Top action bar -->
+          <div class="set-actions">
+            <button id="set-reset-all" class="set-action-btn set-danger">RESET ALL</button>
+            <button id="set-export" class="set-action-btn">EXPORT</button>
+            <button id="set-import" class="set-action-btn">IMPORT</button>
+          </div>
+
+          <div class="set-scroll">
+            <!-- NODES -->
+            <div class="set-section-hdr"><span class="set-arrow open">&#9654;</span> NODES <button class="set-rst-btn" data-group="nodes">RST</button></div>
+            <div class="set-section-body">
+              <div class="set-row"><label>Size Min</label><input type="range" id="set-node-sizeMin" min="5" max="100" step="1"><span class="set-val"></span></div>
+              <div class="set-row"><label>Size Multiplier</label><input type="range" id="set-node-sizeMultiplier" min="0.5" max="10" step="0.1"><span class="set-val"></span></div>
+              <div class="set-row"><label>Opacity</label><input type="range" id="set-node-opacity" min="0.1" max="1" step="0.05"><span class="set-val"></span></div>
+              <div class="set-row"><label>Resolution</label><input type="range" id="set-node-resolution" min="4" max="32" step="2"><span class="set-val"></span></div>
+              <div class="set-row"><label>Selected Color</label><input type="color" id="set-node-selectedColor"><span class="set-val"></span></div>
+            </div>
+
+            <!-- LINKS -->
+            <div class="set-section-hdr"><span class="set-arrow open">&#9654;</span> LINKS <button class="set-rst-btn" data-group="links">RST</button></div>
+            <div class="set-section-body">
+              <div class="set-row"><label>Normal Width</label><input type="range" id="set-link-normalWidth" min="0.1" max="8" step="0.1"><span class="set-val"></span></div>
+              <div class="set-row"><label>Highlight Width</label><input type="range" id="set-link-highlightWidth" min="1" max="12" step="0.5"><span class="set-val"></span></div>
+              <div class="set-row"><label>Opacity</label><input type="range" id="set-link-opacity" min="0.1" max="1" step="0.05"><span class="set-val"></span></div>
+              <div class="set-row"><label>Curvature</label><input type="range" id="set-link-curvatureBase" min="0" max="0.5" step="0.01"><span class="set-val"></span></div>
+              <div class="set-row"><label>Normal Alpha</label><input type="range" id="set-link-normalAlpha" min="0.05" max="1" step="0.05"><span class="set-val"></span></div>
+              <div class="set-row"><label>Highlight Color</label><input type="color" id="set-link-highlightColor"><span class="set-val"></span></div>
+            </div>
+
+            <!-- PARTICLES -->
+            <div class="set-section-hdr"><span class="set-arrow open">&#9654;</span> PARTICLES <button class="set-rst-btn" data-group="particles">RST</button></div>
+            <div class="set-section-body">
+              <div class="set-row"><label>Normal Count</label><input type="range" id="set-part-normalCount" min="0" max="20" step="1"><span class="set-val"></span></div>
+              <div class="set-row"><label>Highlight Count</label><input type="range" id="set-part-highlightCount" min="0" max="30" step="1"><span class="set-val"></span></div>
+              <div class="set-row"><label>Normal Width</label><input type="range" id="set-part-normalWidth" min="0.5" max="6" step="0.1"><span class="set-val"></span></div>
+              <div class="set-row"><label>Highlight Width</label><input type="range" id="set-part-highlightWidth" min="1" max="10" step="0.5"><span class="set-val"></span></div>
+              <div class="set-row"><label>Normal Speed</label><input type="range" id="set-part-normalSpeed" min="0.001" max="0.02" step="0.001"><span class="set-val"></span></div>
+              <div class="set-row"><label>Highlight Speed</label><input type="range" id="set-part-highlightSpeed" min="0.001" max="0.02" step="0.001"><span class="set-val"></span></div>
+              <div class="set-row"><label>Highlight Color</label><input type="color" id="set-part-highlightColor"><span class="set-val"></span></div>
+            </div>
+
+            <!-- LAYER COLORS -->
+            <div class="set-section-hdr"><span class="set-arrow open">&#9654;</span> LAYER COLORS <button class="set-rst-btn" data-group="colors">RST</button></div>
+            <div class="set-section-body">
+              <div class="set-row"><label>FE (Frontend)</label><input type="color" id="set-color-FE"><span class="set-val"></span></div>
+              <div class="set-row"><label>BE (Backend)</label><input type="color" id="set-color-BE"><span class="set-val"></span></div>
+              <div class="set-row"><label>DB (Database)</label><input type="color" id="set-color-DB"><span class="set-val"></span></div>
+              <div class="set-row"><label>API</label><input type="color" id="set-color-API"><span class="set-val"></span></div>
+              <div class="set-row"><label>CONFIG</label><input type="color" id="set-color-CONFIG"><span class="set-val"></span></div>
+              <div class="set-row"><label>UTIL</label><input type="color" id="set-color-UTIL"><span class="set-val"></span></div>
+            </div>
+
+            <!-- SCENE -->
+            <div class="set-section-hdr"><span class="set-arrow open">&#9654;</span> SCENE <button class="set-rst-btn" data-group="scene">RST</button></div>
+            <div class="set-section-body">
+              <div class="set-row"><label>Background</label><input type="color" id="set-scene-background"><span class="set-val"></span></div>
+              <div class="set-row"><label>Ambient Light</label><input type="range" id="set-scene-ambientIntensity" min="0" max="20" step="0.5"><span class="set-val"></span></div>
+              <div class="set-row"><label>Point Light</label><input type="range" id="set-scene-pointIntensity" min="0" max="10" step="0.5"><span class="set-val"></span></div>
+              <div class="set-row"><label>Light Distance</label><input type="range" id="set-scene-pointDistance" min="1000" max="20000" step="500"><span class="set-val"></span></div>
+              <div class="set-row"><label>Fog Density</label><input type="range" id="set-scene-fogDensity" min="0" max="0.001" step="0.00001"><span class="set-val"></span></div>
+              <div class="set-row"><label>Scanline</label><input type="range" id="set-scene-scanlineOpacity" min="0" max="1" step="0.05"><span class="set-val"></span></div>
+            </div>
+
+            <!-- CAMERA -->
+            <div class="set-section-hdr"><span class="set-arrow open">&#9654;</span> CAMERA <button class="set-rst-btn" data-group="camera">RST</button></div>
+            <div class="set-section-body">
+              <div class="set-row"><label>Initial Distance</label><input type="range" id="set-cam-initialZ" min="500" max="8000" step="100"><span class="set-val"></span></div>
+              <div class="set-row"><label>Rotate Speed</label><input type="range" id="set-cam-autoRotateSpeed" min="0.0001" max="0.003" step="0.0001"><span class="set-val"></span></div>
+              <div class="set-row"><label>Orbit Radius</label><input type="range" id="set-cam-autoRotateRadius" min="400" max="5000" step="100"><span class="set-val"></span></div>
+              <div class="set-row"><label>Reset Distance</label><input type="range" id="set-cam-resetDistance" min="500" max="5000" step="100"><span class="set-val"></span></div>
+            </div>
+
+            <!-- ADVANCED (collapsed by default) -->
+            <div class="set-section-hdr"><span class="set-arrow">&#9654;</span> ADVANCED <button class="set-rst-btn" data-group="physics">RST</button></div>
+            <div class="set-section-body collapsed">
+              <div class="set-sub-title">PHYSICS</div>
+              <div class="set-row"><label>Alpha Decay</label><input type="range" id="set-phys-alphaDecay" min="0.001" max="0.05" step="0.001"><span class="set-val"></span></div>
+              <div class="set-row"><label>Velocity Decay</label><input type="range" id="set-phys-velocityDecay" min="0.05" max="0.8" step="0.01"><span class="set-val"></span></div>
+              <div class="set-row"><label>Charge Strength</label><input type="range" id="set-phys-chargeStrength" min="-3000" max="-100" step="50"><span class="set-val"></span></div>
+              <div class="set-row"><label>Same-Layer Dist</label><input type="range" id="set-phys-sameLayerDistance" min="50" max="800" step="10"><span class="set-val"></span></div>
+              <div class="set-row"><label>Cross-Layer Dist</label><input type="range" id="set-phys-crossLayerDistance" min="200" max="3000" step="50"><span class="set-val"></span></div>
+              <div class="set-row"><label>Cluster Force</label><input type="range" id="set-phys-clusterStrength" min="0" max="0.1" step="0.001"><span class="set-val"></span></div>
+              <div class="set-sub-title">ANIMATION</div>
+              <div class="set-row"><label>Birth Duration</label><input type="range" id="set-anim-birthDuration" min="500" max="5000" step="100"><span class="set-val"></span></div>
+              <div class="set-row"><label>Birth Scale</label><input type="range" id="set-anim-birthScale" min="1" max="8" step="0.5"><span class="set-val"></span></div>
+              <div class="set-row"><label>Spawn X</label><input type="range" id="set-anim-spawnX" min="-10000" max="10000" step="500"><span class="set-val"></span></div>
+              <div class="set-row"><label>Spawn Y</label><input type="range" id="set-anim-spawnY" min="-10000" max="10000" step="500"><span class="set-val"></span></div>
+              <div class="set-row"><label>Spawn Z</label><input type="range" id="set-anim-spawnZ" min="-10000" max="10000" step="500"><span class="set-val"></span></div>
+              <div class="set-sub-title">ARROWS</div>
+              <div class="set-row"><label>Arrow Length</label><input type="range" id="set-arrow-length" min="0" max="20" step="1"><span class="set-val"></span></div>
+              <div class="set-row"><label>Arrow Position</label><input type="range" id="set-arrow-position" min="0" max="1" step="0.05"><span class="set-val"></span></div>
+            </div>
+          </div>
+        </div>
+      </div>
     </aside>
   </main>
 

package/dist/web/public/style.css

@@ -123,17 +123,15 @@ body {
   text-transform: uppercase;
 }
 
-/* ── License Badge ── */
+/* ── License Badge (inline, next to SSE indicator) ── */
 .license-badge {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 5px 16px;
-  border-radius: 20px;
-  font-size: 11px;
+  font-size: 9px;
+  letter-spacing: 1.5px;
+  padding: 2px 8px;
+  border-radius: 3px;
+  border: 1px solid var(--border);
+  margin-left: 8px;
   font-weight: 700;
-  letter-spacing: 2px;
-  border: 1px solid;
   transition: all 0.3s;
   cursor: default;
 }
@@ -141,50 +139,22 @@ body {
 .license-badge.free {
   color: #8899aa;
   border-color: rgba(136,153,170,0.4);
-  background: rgba(136,153,170,0.12);
 }
 
 .license-badge.pro {
   color: #ffd700;
   border-color: rgba(255,215,0,0.4);
-  background: rgba(255,215,0,0.08);
   text-shadow: 0 0 8px rgba(255,215,0,0.3);
 }
 
 .license-badge.trial {
   color: var(--risk-medium);
   border-color: rgba(255,159,10,0.4);
-  background: rgba(255,159,10,0.08);
-}
-
-.license-badge.trial-urgent {
-  color: var(--risk-high);
-  border-color: rgba(255,45,85,0.4);
-  background: rgba(255,45,85,0.08);
-  animation: license-urgent 1.5s ease-in-out infinite;
 }
 
 .license-badge.expired {
   color: var(--risk-high);
   border-color: rgba(255,45,85,0.4);
-  background: rgba(255,45,85,0.1);
-}
-
-@keyframes license-urgent {
-  0%, 100% { opacity: 1; }
-  50% { opacity: 0.6; }
-}
-
-.license-plan {
-  font-weight: 700;
-}
-
-.license-timer {
-  font-size: 9px;
-  font-weight: 400;
-  letter-spacing: 1px;
-  opacity: 0.85;
-  font-variant-numeric: tabular-nums;
 }
 
 .top-controls {
@@ -2342,3 +2312,244 @@ main {
   z-index: 50;
   backdrop-filter: blur(8px);
 }
+
+/* ═══════════════════════════════════════════ */
+/* SETTINGS PANEL                              */
+/* ═══════════════════════════════════════════ */
+#tab-settings {
+  overflow: hidden;
+}
+
+.set-panel {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.set-actions {
+  display: flex;
+  gap: 6px;
+  padding: 10px 14px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.set-action-btn {
+  flex: 1;
+  padding: 6px 0;
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 9px;
+  font-family: inherit;
+  font-weight: 600;
+  letter-spacing: 2px;
+  transition: all 0.2s;
+}
+
+.set-action-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+  box-shadow: var(--glow-cyan);
+}
+
+.set-action-btn.set-danger:hover {
+  color: var(--risk-high);
+  border-color: var(--risk-high);
+  box-shadow: var(--glow-red);
+}
+
+.set-scroll {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px 0;
+}
+
+.set-scroll::-webkit-scrollbar { width: 4px; }
+.set-scroll::-webkit-scrollbar-track { background: transparent; }
+.set-scroll::-webkit-scrollbar-thumb { background: var(--accent-dim); border-radius: 2px; }
+
+/* Section header */
+.set-section-hdr {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 14px;
+  cursor: pointer;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  color: var(--accent);
+  border-bottom: 1px solid rgba(26,45,77,0.3);
+  user-select: none;
+  transition: background 0.2s;
+}
+
+.set-section-hdr:hover {
+  background: rgba(0,212,255,0.04);
+}
+
+.set-arrow {
+  display: inline-block;
+  font-size: 8px;
+  transition: transform 0.25s ease;
+  color: var(--text-secondary);
+}
+
+.set-arrow.open {
+  transform: rotate(90deg);
+}
+
+.set-rst-btn {
+  margin-left: auto;
+  padding: 2px 8px;
+  background: transparent;
+  color: var(--text-secondary);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  cursor: pointer;
+  font-size: 8px;
+  font-family: inherit;
+  font-weight: 600;
+  letter-spacing: 1px;
+  transition: all 0.2s;
+}
+
+.set-rst-btn:hover {
+  color: var(--risk-medium);
+  border-color: var(--risk-medium);
+}
+
+/* Section body */
+.set-section-body {
+  padding: 6px 14px;
+  border-bottom: 1px solid rgba(26,45,77,0.2);
+}
+
+.set-section-body.collapsed {
+  display: none;
+}
+
+.set-sub-title {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 2px;
+  color: var(--text-secondary);
+  margin: 8px 0 4px;
+  padding-top: 6px;
+  border-top: 1px solid rgba(26,45,77,0.3);
+}
+
+.set-sub-title:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+}
+
+/* Individual control row */
+.set-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 3px 0;
+}
+
+.set-row label {
+  font-size: 10px;
+  color: var(--text-secondary);
+  letter-spacing: 0.5px;
+  min-width: 100px;
+  flex-shrink: 0;
+}
+
+.set-row .set-val {
+  font-size: 9px;
+  color: var(--accent);
+  min-width: 48px;
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+}
+
+/* Range slider styling */
+.set-row input[type="range"] {
+  -webkit-appearance: none;
+  appearance: none;
+  flex: 1;
+  height: 3px;
+  background: var(--border);
+  border-radius: 2px;
+  outline: none;
+  cursor: pointer;
+}
+
+.set-row input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 2px solid var(--bg-primary);
+  box-shadow: 0 0 6px rgba(0,212,255,0.5);
+  cursor: pointer;
+  transition: box-shadow 0.2s, transform 0.15s;
+}
+
+.set-row input[type="range"]::-webkit-slider-thumb:hover {
+  box-shadow: 0 0 12px rgba(0,212,255,0.8);
+  transform: scale(1.2);
+}
+
+.set-row input[type="range"]:active::-webkit-slider-thumb {
+  box-shadow: 0 0 16px rgba(0,212,255,1);
+  transform: scale(1.3);
+}
+
+.set-row input[type="range"]::-moz-range-thumb {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--accent);
+  border: 2px solid var(--bg-primary);
+  box-shadow: 0 0 6px rgba(0,212,255,0.5);
+  cursor: pointer;
+}
+
+.set-row input[type="range"]::-moz-range-track {
+  height: 3px;
+  background: var(--border);
+  border-radius: 2px;
+  border: none;
+}
+
+/* Color picker styling */
+.set-row input[type="color"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 28px;
+  height: 20px;
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  background: transparent;
+  cursor: pointer;
+  padding: 1px;
+  transition: border-color 0.2s, box-shadow 0.2s;
+}
+
+.set-row input[type="color"]:hover {
+  border-color: var(--accent);
+  box-shadow: 0 0 8px rgba(0,212,255,0.4);
+}
+
+.set-row input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 0;
+}
+
+.set-row input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 1px;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@syke1/mcp-server",
-  "version": "1.3.19",
+  "version": "1.4.0",
   "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",