@syke1/mcp-server 1.4.0 → 1.4.2

package/dist/web/public/index.html

@@ -20,6 +20,7 @@
       <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>
+      <button id="btn-license" class="top-btn license-btn">LICENSE</button>
     </div>
     <div class="project-selector">
       <span id="current-project" class="project-path">Loading...</span>
@@ -120,6 +121,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 +295,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 +398,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>
@@ -393,6 +437,24 @@
     </div>
   </div>
 
+  <!-- License Modal -->
+  <div id="license-modal" class="hidden">
+    <div class="license-modal-panel">
+      <h3>ACTIVATE LICENSE</h3>
+      <p class="license-modal-desc">Enter your SYKE API key to unlock Pro features.</p>
+      <div class="license-input-row">
+        <input type="text" id="license-key-input" placeholder="SYKE-XXXX-XXXX-XXXX-XXXX" spellcheck="false" autocomplete="off">
+      </div>
+      <div id="license-modal-status"></div>
+      <div class="license-modal-actions">
+        <button id="btn-license-activate">ACTIVATE</button>
+        <button id="btn-license-deactivate" class="license-deactivate-btn">REMOVE KEY</button>
+        <button id="btn-license-cancel">CANCEL</button>
+      </div>
+      <p class="license-modal-hint">Get your key at <a href="https://syke.cloud/dashboard" target="_blank">syke.cloud/dashboard</a></p>
+    </div>
+  </div>
+
   <!-- Bottom status bar -->
   <div id="bottom-bar">
     <span id="bottom-info">SYKE v--- · ---</span>