@danainnovations/cortex-mcp 1.0.111 → 1.0.112

package/dist/cli.js

@@ -512,11 +512,18 @@ function getWizardHtml() {
       gap: 8px;
       margin-bottom: 8px;
     }
+    .client-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 6px;
+      margin-bottom: 8px;
+    }
+    @media (max-width: 640px) { .client-grid { grid-template-columns: 1fr; } }
     .client-item {
       display: flex;
       align-items: center;
-      gap: 12px;
-      padding: 14px 16px;
+      gap: 10px;
+      padding: 10px 14px;
       border-radius: 12px;
       border: 1px solid rgba(255, 255, 255, 0.06);
       cursor: pointer;
@@ -539,16 +546,16 @@ function getWizardHtml() {
     .client-item.already-configured .client-status { color: #4CAF50; }
 
     .client-icon {
-      width: 28px;
-      height: 28px;
+      width: 24px;
+      height: 24px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 7px;
+      border-radius: 6px;
       background: rgba(255, 255, 255, 0.04);
       flex-shrink: 0;
     }
-    .client-icon svg { width: 16px; height: 16px; fill: #8f999f; }
+    .client-icon svg { width: 14px; height: 14px; fill: #8f999f; }
     .client-item.checked .client-icon svg { fill: #00A3E1; }
 
     .client-name { font-size: 13px; font-weight: 500; color: #fff; }
@@ -561,6 +568,71 @@ function getWizardHtml() {
       letter-spacing: 0.05em;
     }
 
+    /* \u2500\u2500 Manual Client Cards \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    .manual-client-card {
+      border: 1px solid rgba(255, 255, 255, 0.08);
+      border-radius: 12px;
+      padding: 16px;
+      margin-bottom: 8px;
+      background: rgba(255, 255, 255, 0.02);
+    }
+    .manual-client-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 12px;
+    }
+    .manual-client-header .client-name { font-size: 14px; }
+    .manual-client-badge {
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: #00A3E1;
+      background: rgba(0, 163, 225, 0.1);
+      padding: 2px 8px;
+      border-radius: 4px;
+      margin-left: auto;
+    }
+    .manual-client-steps {
+      margin: 0;
+      padding-left: 18px;
+      font-size: 13px;
+      line-height: 1.8;
+      color: #b0b8c0;
+    }
+    .manual-client-steps li { margin-bottom: 2px; }
+    .manual-client-steps strong { color: #fff; font-weight: 500; }
+    .manual-client-steps a { color: #00A3E1; text-decoration: none; }
+    .manual-client-steps a:hover { text-decoration: underline; }
+    .manual-url-box {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: rgba(0, 163, 225, 0.06);
+      border: 1px solid rgba(0, 163, 225, 0.15);
+      border-radius: 8px;
+      padding: 8px 12px;
+      margin-top: 10px;
+    }
+    .manual-url-box code {
+      flex: 1;
+      font-size: 12px;
+      color: #b0b8c0;
+      word-break: break-all;
+    }
+    .manual-url-box .copy-btn {
+      background: rgba(0, 163, 225, 0.15);
+      border: 1px solid rgba(0, 163, 225, 0.3);
+      color: #00A3E1;
+      padding: 4px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 11px;
+      font-weight: 500;
+      white-space: nowrap;
+    }
+
     /* \u2500\u2500 Connection List \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
     .conn-list {
       display: flex;
@@ -1260,46 +1332,115 @@ function getWizardHtml() {
       document.getElementById('btn-configure').textContent = 'Configure';
 
       // Pre-select already-configured clients (exclude manual/additional ones)
-      var nonAutoTypes = ['perplexity', 'stdio', 'claude-ai'];
+      var manualTypes = ['perplexity', 'stdio', 'claude-ai', 'claude-cowork'];
       state.selectedClients = state.configuredClients.filter(function(c) {
-        return nonAutoTypes.indexOf(c) === -1;
+        return manualTypes.indexOf(c) === -1;
       });
 
-      // Split into auto-configured, web/mobile/cowork, and manual-setup clients
-      var autoClients = state.detectedClients.filter(function(c) {
-        return c.type !== 'perplexity' && c.type !== 'stdio' && c.type !== 'claude-ai';
+      // Split clients into groups by setup method
+      var autoClientTypes = ['claude-desktop', 'claude-code', 'cursor', 'vscode', 'antigravity', 'codex'];
+      var manualClientTypes = ['claude-cowork', 'claude-ai'];
+      var additionalTypes = ['perplexity', 'stdio'];
+
+      var autoDetected = state.detectedClients.filter(function(c) {
+        return autoClientTypes.indexOf(c.type) !== -1 && c.detected;
       });
-      var webClients = state.detectedClients.filter(function(c) {
-        return c.type === 'claude-ai';
+      var autoNotFound = state.detectedClients.filter(function(c) {
+        return autoClientTypes.indexOf(c.type) !== -1 && !c.detected;
       });
       var manualClients = state.detectedClients.filter(function(c) {
-        return c.type === 'perplexity' || c.type === 'stdio';
+        return manualClientTypes.indexOf(c.type) !== -1;
+      });
+      var additionalClients = state.detectedClients.filter(function(c) {
+        return additionalTypes.indexOf(c.type) !== -1;
       });
 
-      var html = autoClients.map(renderClientItem).join('');
+      var mcpUrl = (state.serverUrl || 'https://cortex-bice.vercel.app') + '/mcp/cortex';
+      var html = '';
 
-      if (webClients.length > 0) {
-        html += '<div class="client-section-divider">' +
-          '<div class="client-section-title">Web & Mobile</div>' +
-          '<div class="client-section-subtitle">Use Cortex tools on claude.ai and the Claude mobile app</div>' +
+      // \u2500\u2500 Section 1: Auto-configured (2-column grid) \u2500\u2500
+      if (autoDetected.length > 0) {
+        html += '<div class="client-section-divider" style="margin-top:0;padding-top:0;border:none;">' +
+          '<div class="client-section-title">Auto-configured</div>' +
+          '<div class="client-section-subtitle">Select the apps you use \\u2014 we\\u2019ll configure them automatically</div>' +
         '</div>';
-        html += webClients.map(renderClientItem).join('');
+        html += '<div class="client-grid">';
+        html += autoDetected.map(renderClientItem).join('');
+        html += '</div>';
+      }
+
+      // Show not-found auto clients dimmed
+      if (autoNotFound.length > 0) {
+        html += '<div class="client-grid" style="margin-top:4px;">';
+        html += autoNotFound.map(renderClientItem).join('');
+        html += '</div>';
       }
 
+      // \u2500\u2500 Section 2: Manual setup with inline instructions \u2500\u2500
       if (manualClients.length > 0) {
+        html += '<div class="client-section-divider">' +
+          '<div class="client-section-title">Connect manually</div>' +
+          '<div class="client-section-subtitle">These need one extra step in the app</div>' +
+        '</div>';
+
+        manualClients.forEach(function(client) {
+          var icon = CLIENT_ICONS[client.type] || '';
+          if (client.type === 'claude-cowork') {
+            html += '<div class="manual-client-card" data-client="claude-cowork">' +
+              '<div class="manual-client-header">' +
+                (icon ? '<div class="client-icon">' + icon + '</div>' : '') +
+                '<span class="client-name">Claude CoWork</span>' +
+                '<span class="manual-client-badge">1 step</span>' +
+              '</div>' +
+              '<ol class="manual-client-steps">' +
+                '<li>Open <strong>Claude Desktop</strong> \\u2192 <strong>Settings</strong> \\u2192 <strong>Connectors</strong></li>' +
+                '<li>Find <strong>Cortex MCP Enterprise</strong> at the bottom</li>' +
+                '<li>Click <strong>Connect</strong> \\u2192 sign in via Okta when prompted</li>' +
+              '</ol>' +
+              '<div class="manual-url-box">' +
+                '<code>' + escapeHtml(mcpUrl) + '</code>' +
+                '<button class="copy-btn" onclick="copySnippet(this)">Copy</button>' +
+              '</div>' +
+            '</div>';
+          }
+          if (client.type === 'claude-ai') {
+            html += '<div class="manual-client-card" data-client="claude-ai">' +
+              '<div class="manual-client-header">' +
+                (icon ? '<div class="client-icon">' + icon + '</div>' : '') +
+                '<span class="client-name">Claude.ai & Mobile</span>' +
+                '<span class="manual-client-badge">1 step</span>' +
+              '</div>' +
+              '<ol class="manual-client-steps">' +
+                '<li>Open <a href="https://claude.ai/settings/integrations" target="_blank">claude.ai/settings/integrations</a></li>' +
+                '<li>Click <strong>Add custom integration</strong></li>' +
+                '<li>Paste the URL below and click <strong>Add</strong></li>' +
+              '</ol>' +
+              '<div class="manual-url-box">' +
+                '<code>' + escapeHtml(mcpUrl) + '</code>' +
+                '<button class="copy-btn" onclick="copySnippet(this)">Copy</button>' +
+              '</div>' +
+            '</div>';
+          }
+        });
+      }
+
+      // \u2500\u2500 Section 3: Additional clients (collapsed) \u2500\u2500
+      if (additionalClients.length > 0) {
         html += '<div class="client-section-divider">' +
           '<div class="client-section-title">Additional Clients</div>' +
-          '<div class="client-section-subtitle">These require a few extra manual steps after setup</div>' +
+          '<div class="client-section-subtitle">Perplexity, OpenClaw, and other stdio clients</div>' +
         '</div>';
-        html += manualClients.map(renderClientItem).join('');
+        html += '<div class="client-grid">';
+        html += additionalClients.map(renderClientItem).join('');
+        html += '</div>';
       }
 
       el.innerHTML = html;
 
-      var manualTypes = ['perplexity', 'stdio', 'claude-ai'];
+      // Attach click handlers to auto-configured items
       el.querySelectorAll('.client-item:not(.disabled):not(.already-configured)').forEach(function(item) {
-        // Auto-select detected clients, but NOT manual/additional/web ones
-        if (manualTypes.indexOf(item.dataset.client) === -1) {
+        // Auto-select detected auto clients
+        if (manualTypes.indexOf(item.dataset.client) === -1 && !item.classList.contains('disabled')) {
           item.classList.add('checked');
         }
         item.addEventListener('click', function(e) {
@@ -1310,9 +1451,17 @@ function getWizardHtml() {
         });
       });
 
-      // Sync selectedClients with all checked items (auto-selected + previously configured)
-      state.selectedClients = Array.from(el.querySelectorAll('.client-item.checked'))
+      // Include manual clients in selectedClients so they get configured too
+      manualClients.forEach(function(c) {
+        if (state.selectedClients.indexOf(c.type) === -1) {
+          state.selectedClients.push(c.type);
+        }
+      });
+
+      // Sync selectedClients with all checked items
+      var checkedAuto = Array.from(el.querySelectorAll('.client-item.checked'))
         .map(function(i) { return i.dataset.client; });
+      state.selectedClients = checkedAuto.concat(manualClients.map(function(c) { return c.type; }));
     }
 
     async function configureClients() {