@syke1/mcp-server 1.3.20 → 1.4.1

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 {
@@ -1237,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);
@@ -2327,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);
@@ -2342,3 +2312,806 @@ 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;
+}
+
+/* ═══════════════════════════════════════════ */
+/* 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;
+}