@syke1/mcp-server 1.4.0 → 1.4.1

package/dist/web/public/index.html

@@ -120,6 +120,34 @@
       </div>
     </section>
 
+    <!-- Tree Resize Handle -->
+    <div id="tree-resize-handle"></div>
+
+    <!-- File Tree Panel -->
+    <aside id="file-tree-panel">
+      <div id="tree-header">
+        <div class="tree-title-row">
+          <span class="tree-title">FILE TREE</span>
+          <span id="tree-file-count" class="tree-count">0</span>
+        </div>
+        <div id="tree-search-bar">
+          <input type="text" id="tree-search-input" placeholder="FILTER FILES...">
+          <button id="tree-sort-btn" class="tree-tool-btn">SORT</button>
+          <div id="tree-sort-menu" class="hidden">
+            <div class="tree-sort-option active" data-sort="name">BY NAME</div>
+            <div class="tree-sort-option" data-sort="layer">BY LAYER</div>
+            <div class="tree-sort-option" data-sort="risk">BY RISK</div>
+            <div class="tree-sort-option" data-sort="deps">BY DEPS</div>
+            <div class="tree-sort-option" data-sort="modified">BY RECENT</div>
+          </div>
+          <button id="tree-collapse-all" class="tree-tool-btn" title="Toggle expand">&#9660;</button>
+        </div>
+      </div>
+      <div id="tree-scroll-container">
+        <div id="tree-content"></div>
+      </div>
+    </aside>
+
     <!-- Resize Handle -->
     <div id="resize-handle"></div>
 
@@ -266,6 +294,20 @@
               <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>
 
+            <!-- FILE TREE -->
+            <div class="set-section-hdr"><span class="set-arrow open">&#9654;</span> FILE TREE <button class="set-rst-btn" data-group="fileTree">RST</button></div>
+            <div class="set-section-body">
+              <div class="set-row"><label>Panel Width</label><input type="range" id="set-ft-panelWidth" min="200" max="500" step="10"><span class="set-val"></span></div>
+              <div class="set-row"><label>Font Size</label><input type="range" id="set-ft-fontSize" min="9" max="14" step="1"><span class="set-val"></span></div>
+              <div class="set-row"><label>Indent Size</label><input type="range" id="set-ft-indentSize" min="8" max="24" step="2"><span class="set-val"></span></div>
+              <div class="set-row"><label>Pulse Duration</label><input type="range" id="set-ft-pulseDuration" min="2" max="10" step="1"><span class="set-val"></span></div>
+              <div class="set-row set-row-checkbox"><label>Show Line Count</label><input type="checkbox" id="set-ft-showLineCount"><span class="set-val"></span></div>
+              <div class="set-row set-row-checkbox"><label>Show Deps</label><input type="checkbox" id="set-ft-showDeps"><span class="set-val"></span></div>
+              <div class="set-row set-row-checkbox"><label>Show Risk</label><input type="checkbox" id="set-ft-showRisk"><span class="set-val"></span></div>
+              <div class="set-row set-row-checkbox"><label>Auto-scroll</label><input type="checkbox" id="set-ft-autoScrollOnChange"><span class="set-val"></span></div>
+              <div class="set-row set-row-checkbox"><label>Compact Mode</label><input type="checkbox" id="set-ft-compactMode"><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">
@@ -355,6 +397,7 @@
       <div class="shortcut-row"><kbd>F</kbd><span>Focus on selected</span></div>
       <div class="shortcut-row"><kbd>C</kbd><span>View code</span></div>
       <div class="shortcut-row"><kbd>S</kbd><span>Simulate deletion</span></div>
+      <div class="shortcut-row"><kbd>T</kbd><span>Toggle file tree</span></div>
       <div class="shortcut-row"><kbd>D</kbd><span>Detect cycles</span></div>
       <div class="shortcut-row"><kbd>?</kbd><span>Show shortcuts</span></div>
       <div class="shortcut-row"><kbd>Esc</kbd><span>Deselect / Close</span></div>

package/dist/web/public/style.css

@@ -1207,7 +1207,7 @@ main {
   position: fixed;
   bottom: 0;
   left: 0;
-  right: 380px;
+  right: var(--right-offset, 380px);
   background: var(--bg-secondary);
   border-top: 1px solid var(--border);
   transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
@@ -2297,7 +2297,7 @@ main {
   position: fixed;
   bottom: 0;
   left: 0;
-  right: 380px;
+  right: var(--right-offset, 380px);
   height: 28px;
   background: rgba(5, 10, 24, 0.85);
   border-top: 1px solid rgba(0, 212, 255, 0.1);
@@ -2553,3 +2553,565 @@ main {
   border: none;
   border-radius: 1px;
 }
+
+/* ═══════════════════════════════════════════ */
+/* FILE TREE PANEL                             */
+/* ═══════════════════════════════════════════ */
+
+/* Tree Resize Handle (identical pattern to #resize-handle) */
+#tree-resize-handle {
+  width: 8px;
+  cursor: col-resize;
+  background: var(--bg-secondary);
+  position: relative;
+  flex-shrink: 0;
+  z-index: 20;
+  transition: background 0.2s;
+  border-left: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+}
+
+#tree-resize-handle::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 2px;
+  height: 48px;
+  border-radius: 2px;
+  background: var(--text-secondary);
+  opacity: 0.5;
+  transition: all 0.2s;
+}
+
+#tree-resize-handle:hover {
+  background: rgba(0, 212, 255, 0.08);
+  border-color: var(--accent-dim);
+}
+
+#tree-resize-handle:hover::before {
+  background: var(--accent);
+  height: 64px;
+  opacity: 1;
+  box-shadow: var(--glow-cyan);
+}
+
+#tree-resize-handle.dragging {
+  background: rgba(0, 212, 255, 0.12);
+  border-color: var(--accent);
+}
+
+#tree-resize-handle.dragging::before {
+  background: var(--accent);
+  height: 100%;
+  opacity: 1;
+  box-shadow: var(--glow-cyan);
+}
+
+/* File Tree Panel */
+#file-tree-panel {
+  flex: 0 0 280px;
+  width: 280px;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-secondary);
+  border-left: 1px solid var(--border);
+  border-right: 1px solid var(--border);
+  overflow: hidden;
+  position: relative;
+  font-family: 'Consolas', 'JetBrains Mono', monospace;
+}
+
+#file-tree-panel.hidden {
+  display: none;
+}
+
+#file-tree-panel::before {
+  content: '';
+  position: absolute;
+  top: 0; left: -1px;
+  width: 1px;
+  height: 100%;
+  background: linear-gradient(180deg, var(--accent) 0%, transparent 30%, transparent 70%, var(--accent) 100%);
+  opacity: 0.2;
+}
+
+/* Tree Header */
+#tree-header {
+  padding: 10px 12px 8px;
+  border-bottom: 1px solid var(--border);
+  flex-shrink: 0;
+}
+
+.tree-title-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 8px;
+}
+
+.tree-title {
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--accent);
+  letter-spacing: 3px;
+}
+
+.tree-count {
+  font-size: 9px;
+  color: var(--text-secondary);
+  background: rgba(0,212,255,0.08);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  padding: 1px 6px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* Tree Search Bar */
+#tree-search-bar {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  position: relative;
+}
+
+#tree-search-input {
+  flex: 1;
+  padding: 4px 8px;
+  background: rgba(0,0,0,0.3);
+  color: var(--accent);
+  border: 1px solid var(--border);
+  border-radius: 2px;
+  font-size: 10px;
+  font-family: inherit;
+  letter-spacing: 1px;
+  outline: none;
+  transition: border-color 0.2s;
+}
+
+#tree-search-input::placeholder {
+  color: var(--text-secondary);
+  letter-spacing: 2px;
+  font-size: 9px;
+}
+
+#tree-search-input:focus {
+  border-color: var(--accent);
+  box-shadow: var(--glow-cyan);
+}
+
+.tree-tool-btn {
+  padding: 3px 8px;
+  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: 1px;
+  transition: all 0.2s;
+}
+
+.tree-tool-btn:hover {
+  color: var(--accent);
+  border-color: var(--accent);
+}
+
+/* Sort Dropdown Menu */
+#tree-sort-menu {
+  position: absolute;
+  top: 100%;
+  right: 32px;
+  margin-top: 4px;
+  background: rgba(10,22,40,0.97);
+  border: 1px solid var(--accent-dim);
+  border-radius: 3px;
+  z-index: 100;
+  box-shadow: var(--glow-cyan), 0 8px 24px rgba(0,0,0,0.5);
+  backdrop-filter: blur(8px);
+  min-width: 120px;
+}
+
+#tree-sort-menu.hidden { display: none; }
+
+.tree-sort-option {
+  padding: 6px 12px;
+  font-size: 9px;
+  letter-spacing: 2px;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: all 0.15s;
+}
+
+.tree-sort-option:hover {
+  background: rgba(0,212,255,0.12);
+  color: var(--accent);
+}
+
+.tree-sort-option.active {
+  color: var(--accent);
+  background: rgba(0,212,255,0.06);
+}
+
+/* Tree Scroll Container */
+#tree-scroll-container {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+#tree-scroll-container::-webkit-scrollbar { width: 4px; }
+#tree-scroll-container::-webkit-scrollbar-track { background: transparent; }
+#tree-scroll-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
+#tree-scroll-container::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }
+
+/* Tree Content */
+#tree-content {
+  padding: 6px 0 6px 0;
+}
+
+/* ═══════════════════════════════════════════ */
+/* METRO RAIL TREE (GitKraken-style)           */
+/* ═══════════════════════════════════════════ */
+
+/* ── Tree Group: wraps sibling nodes, draws vertical rail line ── */
+.tree-group {
+  position: relative;
+  margin-left: 16px;
+}
+
+#tree-content > .tree-group {
+  margin-left: 4px;
+}
+
+/* Vertical rail line spanning entire group */
+.tree-group::before {
+  content: '';
+  position: absolute;
+  left: 11px;
+  top: 14px;
+  bottom: 14px;
+  width: 2px;
+  background: linear-gradient(180deg,
+    rgba(0,212,255,0.08),
+    rgba(0,212,255,0.22) 15%,
+    rgba(0,212,255,0.22) 85%,
+    rgba(0,212,255,0.08)
+  );
+  border-radius: 1px;
+  z-index: 1;
+}
+
+/* Subtle glow on the line */
+.tree-group::after {
+  content: '';
+  position: absolute;
+  left: 9px;
+  top: 14px;
+  bottom: 14px;
+  width: 6px;
+  background: rgba(0,212,255,0.04);
+  border-radius: 3px;
+  z-index: 0;
+  filter: blur(2px);
+}
+
+.tree-group.single-child::before,
+.tree-group.single-child::after {
+  display: none;
+}
+
+/* ── Tree Node (file/folder row) ── */
+.tree-node {
+  display: flex;
+  align-items: center;
+  position: relative;
+  min-height: 30px;
+  padding-left: 30px;
+  padding-right: 8px;
+  cursor: pointer;
+  transition: all 0.15s;
+  font-size: 11px;
+  color: var(--text-primary);
+  border-right: 2px solid transparent;
+}
+
+.tree-node:hover {
+  background: rgba(0,212,255,0.06);
+}
+
+.tree-node:hover .tree-name {
+  color: var(--accent);
+}
+
+.tree-node.selected {
+  background: rgba(0,212,255,0.1);
+  border-right-color: var(--accent);
+}
+
+.tree-node.compact {
+  min-height: 24px;
+}
+
+/* ── The Dot: sits ON the vertical rail line ── */
+.tree-dot {
+  position: absolute;
+  left: 5px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  border: 2.5px solid var(--bg-secondary);
+  z-index: 3;
+  transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+/* File dots: filled solid */
+.tree-node[data-type="file"] .tree-dot {
+  /* background + box-shadow set inline via style attr */
+}
+
+/* Folder dots: hollow ring with glow */
+.tree-node[data-type="folder"] .tree-dot {
+  background: var(--bg-secondary) !important;
+  border-width: 2.5px;
+}
+
+/* Hover: dot grows + stronger glow */
+.tree-node:hover .tree-dot {
+  transform: translateY(-50%) scale(1.35);
+}
+
+/* Selected: dot pulses */
+.tree-node.selected .tree-dot {
+  transform: translateY(-50%) scale(1.4);
+  border-color: var(--bg-primary);
+}
+
+/* ── Folder toggle arrow (after dot, before name) ── */
+.tree-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  font-size: 7px;
+  color: var(--text-secondary);
+  transition: transform 0.2s ease, color 0.15s;
+  flex-shrink: 0;
+  user-select: none;
+  margin-right: 2px;
+}
+
+.tree-toggle.open {
+  transform: rotate(90deg);
+}
+
+.tree-node:hover .tree-toggle {
+  color: var(--accent);
+}
+
+/* ── Tree node name ── */
+.tree-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transition: color 0.15s;
+}
+
+.tree-name.folder-name {
+  font-weight: 600;
+  color: var(--text-secondary);
+  letter-spacing: 0.3px;
+}
+
+.tree-node:hover .tree-name.folder-name {
+  color: var(--accent);
+}
+
+/* Folder file count badge */
+.tree-folder-count {
+  font-size: 8px;
+  color: var(--text-secondary);
+  margin-left: 6px;
+  padding: 0 5px;
+  background: rgba(0,212,255,0.06);
+  border: 1px solid rgba(26,45,77,0.4);
+  border-radius: 8px;
+  font-variant-numeric: tabular-nums;
+  flex-shrink: 0;
+  opacity: 0.7;
+}
+
+/* ── Badges ── */
+.tree-badge {
+  font-size: 8px;
+  padding: 0 4px;
+  border-radius: 2px;
+  margin-left: 4px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.tree-badge.badge-deps {
+  color: var(--text-secondary);
+  background: rgba(90,117,153,0.15);
+}
+
+.tree-badge.badge-lines {
+  color: var(--text-secondary);
+  background: rgba(90,117,153,0.15);
+}
+
+.tree-badge.badge-risk-HIGH {
+  color: var(--risk-high);
+  background: rgba(255,45,85,0.15);
+}
+
+.tree-badge.badge-risk-MEDIUM {
+  color: var(--risk-medium);
+  background: rgba(255,159,10,0.15);
+}
+
+.tree-badge.badge-risk-LOW {
+  color: var(--risk-low);
+  background: rgba(48,209,88,0.15);
+}
+
+.tree-badge.badge-risk-NONE {
+  color: var(--risk-none);
+  background: rgba(58,79,111,0.1);
+}
+
+/* Modification status badges */
+.tree-mod-badge {
+  font-size: 8px;
+  font-weight: 700;
+  padding: 0 5px;
+  border-radius: 2px;
+  margin-left: 4px;
+  letter-spacing: 0.5px;
+  flex-shrink: 0;
+}
+
+.tree-mod-badge.mod-M {
+  color: var(--risk-medium);
+  background: rgba(255,159,10,0.2);
+}
+
+.tree-mod-badge.mod-A {
+  color: var(--risk-low);
+  background: rgba(48,209,88,0.2);
+}
+
+.tree-mod-badge.mod-D {
+  color: var(--risk-high);
+  background: rgba(255,45,85,0.2);
+}
+
+/* ── Modified file: white pulse animation ── */
+@keyframes tree-file-pulse {
+  0%, 100% {
+    text-shadow: 0 0 6px rgba(255,255,255,0.3);
+  }
+  50% {
+    text-shadow: 0 0 14px rgba(255,255,255,0.7);
+  }
+}
+
+@keyframes tree-dot-pulse {
+  0%, 100% {
+    transform: translateY(-50%) scale(1);
+    box-shadow: 0 0 8px rgba(255,255,255,0.4);
+  }
+  50% {
+    transform: translateY(-50%) scale(1.5);
+    box-shadow: 0 0 16px rgba(255,255,255,0.8);
+  }
+}
+
+.tree-node.modified {
+  color: #ffffff;
+  animation: tree-file-pulse 1.5s ease-in-out infinite;
+}
+
+.tree-node.modified .tree-name {
+  color: #ffffff;
+  font-weight: 700;
+}
+
+.tree-node.modified .tree-dot {
+  background: #ffffff !important;
+  border-color: rgba(255,255,255,0.6) !important;
+  animation: tree-dot-pulse 1.5s ease-in-out infinite;
+}
+
+/* Folder glow when child is modified */
+.tree-node.folder-glow .tree-dot {
+  box-shadow: 0 0 10px rgba(255,255,255,0.3) !important;
+}
+
+.tree-node.folder-glow .tree-name {
+  color: rgba(255,255,255,0.6);
+}
+
+/* ── Rail line glow when group has modifications ── */
+.tree-group.has-modified::before {
+  background: linear-gradient(180deg,
+    rgba(0,212,255,0.08),
+    rgba(255,255,255,0.3) 15%,
+    rgba(255,255,255,0.3) 85%,
+    rgba(0,212,255,0.08)
+  );
+}
+
+/* ── Checkbox styling for SET panel ── */
+.set-row-checkbox {
+  justify-content: space-between;
+}
+
+.set-row-checkbox input[type="checkbox"] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 32px;
+  height: 16px;
+  border-radius: 8px;
+  background: var(--border);
+  position: relative;
+  cursor: pointer;
+  transition: all 0.2s;
+  flex-shrink: 0;
+}
+
+.set-row-checkbox input[type="checkbox"]::before {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--text-secondary);
+  transition: all 0.2s;
+}
+
+.set-row-checkbox input[type="checkbox"]:checked {
+  background: rgba(0,212,255,0.3);
+  border-color: var(--accent);
+}
+
+.set-row-checkbox input[type="checkbox"]:checked::before {
+  left: 18px;
+  background: var(--accent);
+  box-shadow: 0 0 6px rgba(0,212,255,0.5);
+}
+
+.set-row-checkbox .set-val {
+  display: none;
+}

package/dist/web/server.js

@@ -746,6 +746,7 @@ function createWebServer(getGraphFn, initialFileCache, switchProjectFn, getProje
             fileCount: graph.files.size,
             edgeCount,
             plan: license?.plan || "free",
+            planSource: license?.source || "default",
             expiresAt: license?.expiresAt || null,
             freeFileLimit: 50,
             sykeVersion,

package/package.json

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