I tried to paste in clipboard contents of mcp_config.json but it again opened the deepsite editor pane - Follow Up Deployment

index.html

@@ -25,35 +25,73 @@
             min-height: 500px;
             max-height: 70vh;
             overflow-y: auto;
+            background-color: #1e293b;
+            background-image: radial-gradient(#334155 1px, transparent 1px);
+            background-size: 20px 20px;
+            padding: 20px;
+            border-radius: 8px;
         }
         .json-item {
             transition: all 0.2s ease;
+            margin: 5px 0;
+            border-radius: 6px;
+            background-color: #334155;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+            position: relative;
+            display: block;
+        }
+        .json-item-content {
+            padding: 8px 12px;
+            margin-left: 0;
+            display: inline-block;
+            min-width: 200px;
             border-left: 3px solid transparent;
         }
+        .json-item:hover .json-item-content {
+            background-color: #475569;
+            border-left: 3px solid #60a5fa;
+        }
+        .json-item.selected .json-item-content {
+            background-color: #475569;
+            border-left: 3px solid #60a5fa;
+            box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
+        }
+        .json-item.editing .json-item-content {
+            background-color: #64748b;
+            border-left: 3px solid #fbbf24;
+            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5);
+        }
         .json-item:hover {
-            background-color: #f1f5f9;
-            border-left: 3px solid #3b82f6;
+            background-color: #475569;
+            border-left: 3px solid #60a5fa;
         }
         .json-item.selected {
-            background-color: #dbeafe;
-            border-left: 3px solid #3b82f6;
+            background-color: #475569;
+            border-left: 3px solid #60a5fa;
+            box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
+        }
+        .json-item.editing {
+            background-color: #64748b;
+            border-left: 3px solid #fbbf24;
+            box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.5);
         }
         .json-item.dragging {
             opacity: 0.5;
-            background-color: #dbeafe;
+            background-color: #475569;
         }
         .json-item.drag-over {
-            border-top: 2px dashed #3b82f6;
+            border-top: 2px dashed #60a5fa;
         }
         .json-key {
             font-weight: 600;
-            color: #4338ca;
+            color: #93c5fd;
+            margin-right: 8px;
         }
         .json-value {
-            color: #0f766e;
+            color: #6ee7b7;
         }
         .json-bracket {
-            color: #64748b;
+            color: #94a3b8;
         }
         .btn {
             transition: all 0.2s ease;
@@ -67,27 +105,30 @@
             top: 0;
             bottom: 0;
             width: 1px;
-            background-color: #cbd5e1;
+            background-color: #475569;
         }
         .cursor-pointer {
             cursor: pointer;
         }
         .editable:focus {
-            outline: 2px solid #3b82f6;
+            outline: 2px solid #60a5fa;
             border-radius: 4px;
         }
         .editable {
             min-width: 20px;
             display: inline-block;
+            background-color: rgba(96, 165, 250, 0.1);
+            padding: 2px 4px;
+            border-radius: 4px;
         }
         .toolbar-btn {
             transition: all 0.2s;
         }
         .toolbar-btn:hover {
-            background-color: #e2e8f0;
+            background-color: #475569;
         }
         .toolbar-btn.active {
-            background-color: #3b82f6;
+            background-color: #60a5fa;
             color: white;
         }
         .notification {
@@ -101,40 +142,169 @@
             background-color: #fee2e2;
             border-left: 3px solid #ef4444;
         }
+        .menu-bar {
+            background-color: #334155;
+            padding: 8px 16px;
+            border-radius: 8px;
+            margin-bottom: 16px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+        }
+        .menu-item {
+            color: #cbd5e1;
+            padding: 8px 12px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.2s;
+            margin-right: 4px;
+        }
+        .menu-item:hover {
+            background-color: #475569;
+        }
+        .menu-item.active {
+            background-color: #60a5fa;
+            color: white;
+        }
+        .dropdown {
+            position: relative;
+            display: inline-block;
+        }
+        .dropdown-content {
+            display: none;
+            position: absolute;
+            background-color: #334155;
+            min-width: 160px;
+            box-shadow: 0px 8px 16px rgba(0,0,0,0.2);
+            z-index: 1;
+            border-radius: 4px;
+            overflow: hidden;
+        }
+        .dropdown-content a {
+            color: #cbd5e1;
+            padding: 12px 16px;
+            text-decoration: none;
+            display: block;
+        }
+        .dropdown-content a:hover {
+            background-color: #475569;
+        }
+        .dropdown:hover .dropdown-content {
+            display: block;
+        }
+        .modal {
+            display: none;
+            position: fixed;
+            z-index: 1000;
+            left: 0;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0,0,0,0.5);
+        }
+        .modal-content {
+            background-color: #334155;
+            margin: 10% auto;
+            padding: 20px;
+            border-radius: 8px;
+            width: 80%;
+            max-width: 600px;
+            box-shadow: 0 4px 8px rgba(0,0,0,0.3);
+            color: #f1f5f9;
+        }
+        .close {
+            color: #94a3b8;
+            float: right;
+            font-size: 28px;
+            font-weight: bold;
+            cursor: pointer;
+        }
+        .close:hover {
+            color: #f1f5f9;
+        }
+        .boolean-select {
+            background-color: #475569;
+            color: #f1f5f9;
+            border: 1px solid #64748b;
+            border-radius: 4px;
+            padding: 2px 4px;
+        }
     </style>
 </head>
-<body class="bg-gray-100 min-h-screen p-4 md:p-8">
+<body class="bg-slate-900 min-h-screen p-4 md:p-8">
     <div class="max-w-6xl mx-auto">
         <header class="mb-8 text-center">
-            <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Visual JSON Editor</h1>
-            <p class="text-gray-600">Edit JSON with drag-and-drop and intuitive keyboard navigation</p>
+            <h1 class="text-3xl md:text-4xl font-bold text-slate-100 mb-2">Visual JSON Editor</h1>
+            <p class="text-slate-300">Edit JSON with drag-and-drop and intuitive keyboard navigation</p>
         </header>
 
-        <div class="bg-white rounded-xl shadow-lg overflow-hidden mb-8">
-            <div class="p-4 bg-gray-50 border-b flex flex-wrap items-center justify-between gap-2">
+        <!-- Menu Bar -->
+        <div class="menu-bar flex flex-wrap">
+            <div class="dropdown">
+                <div class="menu-item">File</div>
+                <div class="dropdown-content">
+                    <a href="#" id="newBtn"><i class="fas fa-plus mr-2"></i>New</a>
+                    <a href="#" id="openBtn"><i class="fas fa-folder-open mr-2"></i>Open</a>
+                    <a href="#" id="saveBtn"><i class="fas fa-save mr-2"></i>Save</a>
+                </div>
+            </div>
+            <div class="dropdown">
+                <div class="menu-item">Edit</div>
+                <div class="dropdown-content">
+                    <a href="#" id="undoBtn"><i class="fas fa-undo mr-2"></i>Undo</a>
+                    <a href="#" id="redoBtn"><i class="fas fa-redo mr-2"></i>Redo</a>
+                    <a href="#" id="copyBtnMenu"><i class="fas fa-copy mr-2"></i>Copy</a>
+                    <a href="#" id="cutBtnMenu"><i class="fas fa-cut mr-2"></i>Cut</a>
+                    <a href="#" id="pasteBtnMenu"><i class="fas fa-paste mr-2"></i>Paste</a>
+                    <a href="#" id="preferencesBtn"><i class="fas fa-cog mr-2"></i>Preferences</a>
+                </div>
+            </div>
+            <div class="dropdown">
+                <div class="menu-item">Tools</div>
+                <div class="dropdown-content">
+                    <a href="#" id="formatBtn"><i class="fas fa-indent mr-2"></i>Format</a>
+                    <a href="#" id="validateBtn"><i class="fas fa-check-circle mr-2"></i>Validate</a>
+                </div>
+            </div>
+            <div class="dropdown">
+                <div class="menu-item">View</div>
+                <div class="dropdown-content">
+                    <a href="#" id="viewModeBtn"><i class="fas fa-eye mr-2"></i>View Mode</a>
+                    <a href="#" id="editModeBtn"><i class="fas fa-edit mr-2"></i>Edit Mode</a>
+                </div>
+            </div>
+            <div class="dropdown">
+                <div class="menu-item">Help</div>
+                <div class="dropdown-content">
+                    <a href="#" id="instructionsBtn"><i class="fas fa-info-circle mr-2"></i>Instructions</a>
+                    <a href="#" id="sampleBtn"><i class="fas fa-code mr-2"></i>Sample JSON</a>
+                </div>
+            </div>
+        </div>
+
+        <div class="bg-slate-800 rounded-xl shadow-lg overflow-hidden mb-8">
+            <div class="p-4 bg-slate-700 border-b flex flex-wrap items-center justify-between gap-2">
                 <div class="flex flex-wrap gap-2">
-                    <button id="newBtn" class="btn bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg flex items-center gap-2">
+                    <button id="newBtn2" class="btn bg-primary hover:bg-secondary text-white px-4 py-2 rounded-lg flex items-center gap-2">
                         <i class="fas fa-plus"></i> New
                     </button>
-                    <button id="loadBtn" class="btn bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg flex items-center gap-2">
-                        <i class="fas fa-folder-open"></i> Load
+                    <button id="openBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-4 py-2 rounded-lg flex items-center gap-2">
+                        <i class="fas fa-folder-open"></i> Open
                     </button>
-                    <button id="saveBtn" class="btn bg-gray-200 hover:bg-gray-300 px-4 py-2 rounded-lg flex items-center gap-2">
+                    <button id="saveBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-4 py-2 rounded-lg flex items-center gap-2">
                         <i class="fas fa-save"></i> Save
                     </button>
                 </div>
                 
                 <div class="flex flex-wrap gap-2">
-                    <button id="undoBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg">
+                    <button id="undoBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-2 rounded-lg">
                         <i class="fas fa-undo"></i>
                     </button>
-                    <button id="redoBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg">
+                    <button id="redoBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-2 rounded-lg">
                         <i class="fas fa-redo"></i>
                     </button>
-                    <button id="formatBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg">
+                    <button id="formatBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-2 rounded-lg">
                         <i class="fas fa-indent"></i>
                     </button>
-                    <button id="validateBtn" class="btn bg-gray-200 hover:bg-gray-300 px-3 py-2 rounded-lg">
+                    <button id="validateBtn2" class="btn bg-slate-600 hover:bg-slate-500 px-3 py-2 rounded-lg">
                         <i class="fas fa-check-circle"></i>
                     </button>
                 </div>
@@ -159,10 +329,10 @@
             </div>
             
             <div class="p-4 flex flex-col md:flex-row gap-4">
-                <div class="w-full md:w-1/2">
-                    <div class="bg-gray-50 rounded-lg p-4 mb-4">
-                        <h2 class="text-lg font-semibold text-gray-700 mb-2">JSON Editor</h2>
-                        <div id="jsonEditor" class="json-editor bg-white border rounded-lg p-4 font-mono min-h-[400px] relative">
+                <div class="w-full">
+                    <div class="bg-slate-700 rounded-lg p-4 mb-4">
+                        <h2 class="text-lg font-semibold text-slate-200 mb-2">JSON Editor</h2>
+                        <div id="jsonEditor" class="json-editor border rounded-lg p-4 font-mono min-h-[400px] relative">
                             <!-- JSON content will be rendered here -->
                         </div>
                     </div>
@@ -183,66 +353,9 @@
                 
                 <div class="w-full md:w-1/2">
                     <div class="bg-gray-50 rounded-lg p-4 h-full">
-                        <h2 class="text-lg font-semibold text-gray-700 mb-2">Instructions</h2>
+                        <h2 class="text-lg font-semibold text-gray-700 mb-2">Preview</h2>
                         <div class="bg-white border rounded-lg p-4 h-[400px] overflow-y-auto">
-                            <ul class="space-y-3 text-gray-700">
-                                <li class="flex items-start">
-                                    <i class="fas fa-mouse-pointer text-primary mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Double-click</span> to edit any element
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-arrows-alt text-primary mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Drag and drop</span> elements to reorganize
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-keyboard text-primary mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Keyboard navigation:</span>
-                                        <ul class="ml-5 mt-1 space-y-1">
-                                            <li>• <span class="font-mono">Tab</span> / <span class="font-mono">Shift+Tab</span> to change indent level</li>
-                                            <li>• <span class="font-mono">Enter</span> to create new element at same level</li>
-                                            <li>• <span class="font-mono">Shift+Enter</span> to create child element</li>
-                                            <li>• <span class="font-mono">Arrow keys</span> to navigate between elements</li>
-                                            <li>• <span class="font-mono">Delete</span> to remove selected element</li>
-                                        </ul>
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-paste text-primary mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Paste JSON</span> to automatically parse and render
-                                    </div>
-                                </li>
-                                <li class="flex items-start">
-                                    <i class="fas fa-wrench text-primary mt-1 mr-2"></i>
-                                    <div>
-                                        <span class="font-medium">Auto-repair</span> fixes common JSON syntax errors
-                                    </div>
-                                </li>
-                            </ul>
-                            
-                            <div class="mt-6 p-4 bg-blue-50 rounded-lg border border-blue-200">
-                                <h3 class="font-semibold text-blue-800 mb-2">Try this sample JSON:</h3>
-                                <pre class="text-sm bg-white p-3 rounded overflow-x-auto">{
-  "name": "John Doe",
-  "age": 30,
-  "address": {
-    "street": "123 Main St",
-    "city": "Anytown"
-  },
-  "hobbies": [
-    "reading",
-    "swimming"
-  ]
-}</pre>
-                                <button id="loadSampleBtn" class="mt-3 btn bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
-                                    Load Sample
-                                </button>
-                            </div>
+                            <p class="text-gray-600">JSON structure will be displayed here in view mode.</p>
                         </div>
                     </div>
                 </div>
@@ -313,7 +426,8 @@
             // DOM elements
             const jsonEditor = document.getElementById('jsonEditor');
             const jsonOutput = document.getElementById('jsonOutput');
-            const loadSampleBtn = document.getElementById('loadSampleBtn');
+            const openBtn = document.getElementById('openBtn');
+            const openBtn2 = document.getElementById('openBtn2');
             const notification = document.getElementById('notification');
             const copyBtn = document.getElementById('copyBtn');
             const downloadBtn = document.getElementById('downloadBtn');
@@ -328,11 +442,38 @@
             loadJSON(sampleJSON);
             
             // Event listeners
-            loadSampleBtn.addEventListener('click', () => {
-                loadJSON(sampleJSON);
-                showNotification('Sample JSON loaded successfully!');
+            // Create hidden file input for opening files
+            const fileInput = document.createElement('input');
+            fileInput.type = 'file';
+            fileInput.accept = 'application/json,.json';
+            fileInput.style.display = 'none';
+            document.body.appendChild(fileInput);
+            
+            // Open file functionality
+            function openFile() {
+                fileInput.click();
+            }
+            
+            fileInput.addEventListener('change', (event) => {
+                const file = event.target.files[0];
+                if (file) {
+                    const reader = new FileReader();
+                    reader.onload = (e) => {
+                        try {
+                            const data = JSON.parse(e.target.result);
+                            loadJSON(data);
+                            showNotification('File loaded successfully!');
+                        } catch (error) {
+                            showNotification('Error loading file: Invalid JSON');
+                        }
+                    };
+                    reader.readAsText(file);
+                }
             });
             
+            openBtn.addEventListener('click', openFile);
+            openBtn2.addEventListener('click', openFile);
+            
             copyBtn.addEventListener('click', () => {
                 jsonOutput.select();
                 document.execCommand('copy');
@@ -369,8 +510,7 @@
             // Render a single JSON element
             function renderElement(container, data, depth, key = null, parentKey = null) {
                 const wrapper = document.createElement('div');
-                wrapper.className = 'json-item relative pl-6';
-                wrapper.style.paddingLeft = `${depth * 20 + 8}px`;
+                wrapper.className = 'json-item relative';
                 wrapper.dataset.key = key;
                 wrapper.dataset.parent = parentKey;
                 wrapper.dataset.depth = depth;
@@ -385,7 +525,8 @@
                 
                 // Create element content
                 const content = document.createElement('div');
-                content.className = 'flex items-start py-1';
+                content.className = 'json-item-content flex items-start py-1';
+                content.style.marginLeft = `${depth * 20 + 8}px`;
                 
                 // Key
                 if (key !== null && key !== 'root') {
@@ -414,12 +555,15 @@
                         
                         // Closing bracket
                         const closingWrapper = document.createElement('div');
-                        closingWrapper.className = 'json-item relative pl-6';
-                        closingWrapper.style.paddingLeft = `${depth * 20 + 8}px`;
+                        closingWrapper.className = 'json-item relative';
                         closingWrapper.dataset.key = 'closing';
                         closingWrapper.dataset.parent = key;
                         closingWrapper.dataset.depth = depth;
                         
+                        const closingContent = document.createElement('div');
+                        closingContent.className = 'json-item-content flex items-start py-1';
+                        closingContent.style.marginLeft = `${depth * 20 + 8}px`;
+                        
                         if (depth > 0) {
                             const indentLine = document.createElement('div');
                             indentLine.className = 'indent-line';
@@ -452,12 +596,15 @@
                         
                         // Closing bracket
                         const closingWrapper = document.createElement('div');
-                        closingWrapper.className = 'json-item relative pl-6';
-                        closingWrapper.style.paddingLeft = `${depth * 20 + 8}px`;
+                        closingWrapper.className = 'json-item relative';
                         closingWrapper.dataset.key = 'closing';
                         closingWrapper.dataset.parent = key;
                         closingWrapper.dataset.depth = depth;
                         
+                        const closingContent = document.createElement('div');
+                        closingContent.className = 'json-item-content flex items-start py-1';
+                        closingContent.style.marginLeft = `${depth * 20 + 8}px`;
+                        
                         if (depth > 0) {
                             const indentLine = document.createElement('div');
                             indentLine.className = 'indent-line';
@@ -708,6 +855,104 @@
             document.getElementById('undoBtn').addEventListener('click', undo);
             document.getElementById('redoBtn').addEventListener('click', redo);
             
+            // Event listeners for copy, cut, paste
+            document.getElementById('copyBtnMenu').addEventListener('click', () => {
+                if (selectedElement) {
+                    const range = document.createRange();
+                    range.selectNode(selectedElement);
+                    window.getSelection().removeAllRanges();
+                    window.getSelection().addRange(range);
+                    document.execCommand('copy');
+                    window.getSelection().removeAllRanges();
+                    showNotification('Copied to clipboard');
+                }
+            });
+            
+            document.getElementById('cutBtnMenu').addEventListener('click', () => {
+                if (selectedElement) {
+                    const range = document.createRange();
+                    range.selectNode(selectedElement);
+                    window.getSelection().removeAllRanges();
+                    window.getSelection().addRange(range);
+                    document.execCommand('cut');
+                    window.getSelection().removeAllRanges();
+                    showNotification('Cut to clipboard');
+                }
+            });
+            
+            document.getElementById('pasteBtnMenu').addEventListener('click', () => {
+                navigator.clipboard.readText().then(text => {
+                    // Try to parse as JSON and load if valid
+                    try {
+                        const data = JSON.parse(text);
+                        loadJSON(data);
+                        showNotification('JSON pasted successfully');
+                    } catch (e) {
+                        // If not valid JSON, just show notification
+                        showNotification('Clipboard content is not valid JSON');
+                    }
+                }).catch(err => {
+                    showNotification('Failed to read clipboard contents');
+                });
+            });
+            
+            // Enable pasting in JSON output pane
+            jsonOutput.addEventListener('paste', (e) => {
+                e.preventDefault();
+                navigator.clipboard.readText().then(text => {
+                    try {
+                        const data = JSON.parse(text);
+                        loadJSON(data);
+                        showNotification('JSON pasted successfully');
+                    } catch (parseError) {
+                        // If not valid JSON, paste as plain text
+                        const start = jsonOutput.selectionStart;
+                        const end = jsonOutput.selectionEnd;
+                        const currentValue = jsonOutput.value;
+                        jsonOutput.value = currentValue.substring(0, start) + text + currentValue.substring(end);
+                        showNotification('Pasted as plain text');
+                    }
+                }).catch(err => {
+                    // Fallback to clipboardData for older browsers
+                    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+                    try {
+                        const data = JSON.parse(text);
+                        loadJSON(data);
+                        showNotification('JSON pasted successfully');
+                    } catch (parseError) {
+                        const start = jsonOutput.selectionStart;
+                        const end = jsonOutput.selectionEnd;
+                        const currentValue = jsonOutput.value;
+                        jsonOutput.value = currentValue.substring(0, start) + text + currentValue.substring(end);
+                        showNotification('Pasted as plain text');
+                    }
+                });
+            });
+            
+            // Enable pasting in JSON editor pane
+            jsonEditor.addEventListener('paste', (e) => {
+                e.preventDefault();
+                navigator.clipboard.readText().then(text => {
+                    try {
+                        const data = JSON.parse(text);
+                        loadJSON(data);
+                        showNotification('JSON pasted successfully');
+                    } catch (parseError) {
+                        showNotification('Clipboard content is not valid JSON');
+                    }
+                }).catch(err => {
+                    // Fallback to clipboardData for older browsers
+                    const text = (e.originalEvent || e).clipboardData.getData('text/plain');
+                    try {
+                        const data = JSON.parse(text);
+                        loadJSON(data);
+                        showNotification('JSON pasted successfully');
+                    } catch (parseError) {
+                        showNotification('Clipboard content is not valid JSON');
+                    }
+                });
+            });
+            
             // Format JSON
             document.getElementById('formatBtn').addEventListener('click', () => {
                 updateOutput();