@syke1/mcp-server 1.4.0 → 1.4.2

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);
@@ -1941,6 +1941,125 @@ main {
   text-align: left;
 }
 
+/* ═══════════════════════════════════════════ */
+/* License Modal                               */
+/* ═══════════════════════════════════════════ */
+#license-modal {
+  position: fixed;
+  inset: 0;
+  background: rgba(5,10,24,0.85);
+  z-index: 400;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  backdrop-filter: blur(4px);
+}
+#license-modal.hidden { display: none; }
+
+.license-modal-panel {
+  background: var(--bg-secondary);
+  border: 1px solid var(--accent-dim);
+  border-radius: 6px;
+  padding: 24px 32px;
+  min-width: 420px;
+  max-width: 480px;
+  box-shadow: var(--glow-cyan), 0 16px 64px rgba(0,0,0,0.5);
+}
+.license-modal-panel h3 {
+  font-size: 12px;
+  color: var(--accent);
+  letter-spacing: 3px;
+  margin-bottom: 8px;
+}
+.license-modal-desc {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-bottom: 16px;
+}
+.license-input-row {
+  margin-bottom: 12px;
+}
+.license-input-row input {
+  width: 100%;
+  padding: 10px 14px;
+  background: rgba(0,0,0,0.5);
+  border: 1px solid var(--border);
+  border-radius: 3px;
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  font-size: 13px;
+  letter-spacing: 1.5px;
+  outline: none;
+  transition: border-color 0.2s;
+  box-sizing: border-box;
+}
+.license-input-row input:focus {
+  border-color: var(--accent);
+  box-shadow: 0 0 8px rgba(0,212,255,0.15);
+}
+.license-input-row input::placeholder {
+  color: var(--text-muted);
+  letter-spacing: 2px;
+  font-size: 11px;
+}
+#license-modal-status {
+  min-height: 20px;
+  font-size: 11px;
+  margin-bottom: 12px;
+}
+#license-modal-status.success { color: var(--green); }
+#license-modal-status.error { color: #ff5f57; }
+#license-modal-status.loading { color: var(--accent); }
+
+.license-modal-actions {
+  display: flex;
+  gap: 8px;
+  margin-bottom: 12px;
+}
+.license-modal-actions button {
+  padding: 8px 18px;
+  border: 1px solid var(--accent-dim);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--accent);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 2px;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+.license-modal-actions button:hover {
+  background: rgba(0,212,255,0.08);
+  border-color: var(--accent);
+}
+#btn-license-activate {
+  background: rgba(0,212,255,0.1) !important;
+  border-color: var(--accent) !important;
+  font-weight: 700;
+}
+.license-deactivate-btn {
+  color: #ff5f57 !important;
+  border-color: rgba(255,95,87,0.3) !important;
+}
+.license-deactivate-btn:hover {
+  background: rgba(255,95,87,0.08) !important;
+  border-color: #ff5f57 !important;
+}
+.license-modal-hint {
+  font-size: 10px;
+  color: var(--text-muted);
+}
+.license-modal-hint a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.license-btn {
+  font-size: 9px !important;
+  padding: 2px 8px !important;
+  letter-spacing: 1.5px;
+}
+
 /* ═══════════════════════════════════════════ */
 /* Project Switch Modal                        */
 /* ═══════════════════════════════════════════ */
@@ -2297,7 +2416,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 +2672,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.d.ts

@@ -35,4 +35,9 @@ export declare function createWebServer(getGraphFn: () => DependencyGraph, initi
     expiresAt?: string;
     error?: string;
     source?: string;
-}, hasAIKeyFn?: () => boolean): WebServerHandle;
+}, hasAIKeyFn?: () => boolean, setLicenseKeyFn?: (key: string | null) => Promise<{
+    success: boolean;
+    plan?: string;
+    expiresAt?: string;
+    error?: string;
+}>): WebServerHandle;