@danainnovations/cortex-mcp 1.0.109 → 1.0.112

package/dist/cli.js

@@ -87,7 +87,7 @@ function getWizardHtml() {
 
     #app {
       width: 100%;
-      max-width: 900px;
+      max-width: 1100px;
       padding: 24px;
       position: relative;
       z-index: 1;
@@ -159,7 +159,7 @@ function getWizardHtml() {
       -webkit-backdrop-filter: blur(20px);
       border: 1px solid rgba(255, 255, 255, 0.08);
       border-radius: 20px;
-      padding: 40px;
+      padding: 32px;
       box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
     }
 
@@ -344,13 +344,13 @@ function getWizardHtml() {
       font-size: 12px;
       color: #6b7780;
       font-weight: 400;
-      margin-bottom: 12px;
+      margin-bottom: 8px;
     }
 
     /* \u2500\u2500 MCP List \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
     .mcp-list {
       display: grid;
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: repeat(3, 1fr);
       gap: 6px;
       margin-bottom: 8px;
     }
@@ -358,8 +358,8 @@ function getWizardHtml() {
     .mcp-item {
       display: flex;
       align-items: center;
-      gap: 10px;
-      padding: 11px 14px;
+      gap: 8px;
+      padding: 8px 10px;
       border-radius: 12px;
       border: 1px solid rgba(255, 255, 255, 0.06);
       cursor: pointer;
@@ -450,12 +450,12 @@ function getWizardHtml() {
     }
 
     .mcp-icon {
-      width: 28px;
-      height: 28px;
+      width: 22px;
+      height: 22px;
       display: flex;
       align-items: center;
       justify-content: center;
-      border-radius: 7px;
+      border-radius: 6px;
       background: rgba(255, 255, 255, 0.04);
       flex-shrink: 0;
     }
@@ -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;
@@ -735,6 +807,11 @@ function getWizardHtml() {
       background: rgba(0, 163, 225, 0.25);
     }
 
+    /* \u2500\u2500 Tablet / narrow \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
+    @media (max-width: 900px) {
+      .mcp-list { grid-template-columns: repeat(2, 1fr); }
+    }
+
     /* \u2500\u2500 Mobile \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */
     @media (max-width: 640px) {
       #app { padding: 16px; }
@@ -1255,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) {
@@ -1305,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() {
@@ -3677,30 +3831,34 @@ async function startStdioServer(options) {
       capabilities: { tools: { listChanged: false } },
       instructions: [
         "You have access to Cortex, a multi-MCP gateway for building and deploying apps.",
+        "When a user asks to build, create, or make an app, call the build_app tool to get the deployment workflow.",
         "",
         "## Vibe Coding Workflow \u2014 Building New Apps",
         "",
+        "**CRITICAL: You MUST create a branded HTML POC and get user approval BEFORE creating any infrastructure.**",
+        "",
         "When a user asks you to build a NEW app, follow this pipeline:",
         "",
         "1. FIRST call sonance_brand__design_app to get the branded starter blueprint",
-        "2. Create a branded HTML proof-of-concept file and ask the user to review it before proceeding",
-        "3. After user approves, validate requirements:",
+        "2. Create a branded HTML proof-of-concept file (via filesystem__write_file) and ask the user to review it in their browser",
+        "3. **STOP and WAIT for explicit user approval before proceeding**",
+        "4. After user approves, validate requirements:",
         "   - Does it need a database? Only create a Supabase project if the app needs persistent user data",
         "   - Does it need user auth? If yes, call supabase__setup_cortex_auth to set up Sign in with Cortex",
-        "4. Write Next.js code using Sonance Brand components (sonance_brand__get_components_by_category), not custom UI",
-        "5. Create a private GitHub repo (github__create_repository) and push code (github__push_files)",
+        "5. Write Next.js code using Sonance Brand components (sonance_brand__get_components_by_category), not custom UI",
+        "6. Create a private GitHub repo (github__create_repository) and push code (github__push_files)",
         "   - Never push .env files or secrets \u2014 include .gitignore and .env.example",
         "   - Keep code modular: components in /components, utilities in /lib, no file over 300 lines",
-        "6. Set ALL environment variables on Vercel (vercel__set_env_vars_batch) BEFORE deploying:",
+        "7. Set ALL environment variables on Vercel (vercel__set_env_vars_batch) BEFORE deploying:",
         "   - Supabase: NEXT_PUBLIC_SUPABASE_URL, NEXT_PUBLIC_SUPABASE_ANON_KEY, SUPABASE_SERVICE_ROLE_KEY",
         "   - Auth (if set up): NEXT_PUBLIC_CORTEX_URL, NEXT_PUBLIC_CORTEX_CLIENT_ID, CORTEX_CLIENT_ID, CORTEX_CLIENT_SECRET",
         "   - Extract all values from tool responses \u2014 never ask the user to provide or copy keys",
-        "7. Deploy to Vercel (vercel__deploy) and verify deployment succeeds (vercel__get_deployment)",
+        "8. Deploy to Vercel (vercel__deploy) and verify deployment succeeds (vercel__get_deployment)",
         "   - If deployment fails, check logs (vercel__get_deployment_logs), fix code, push fix, and retry",
         "   - Never tell the user the app is live without confirming READY status",
-        "8. After deployment is READY and auth is set up, register the redirect URI (supabase__add_redirect_uri)",
-        "9. Run quality checks: security_scan__scan_code_security, code_analysis__lint_directory, code_review__review_directory",
-        "10. Call sonance_brand__evaluate_design to verify brand compliance (must score Tier 3+ / >= 60)",
+        "9. After deployment is READY and auth is set up, register the redirect URI (supabase__add_redirect_uri)",
+        "10. Run quality checks: security_scan__scan_code_security, code_analysis__lint_directory, code_review__review_directory",
+        "11. Call sonance_brand__evaluate_design to verify brand compliance (must score Tier 3+ / >= 60)",
         "",
         "## Existing Projects",
         "",
@@ -3748,14 +3906,16 @@ async function startStdioServer(options) {
     "",
     "Follow this pipeline when building apps with Cortex MCP tools.",
     "",
+    "**CRITICAL: For new apps, you MUST create a branded HTML POC and get user approval BEFORE creating any infrastructure (GitHub repo, Vercel project, Supabase project). Do not skip the POC gate.**",
+    "",
     "## New App (Greenfield)",
     "",
     "### Phase 1: Design & Approve",
     "1. Call `sonance_brand__design_app` with the app description to get the branded starter blueprint (CSS, components, layout)",
     "2. Call `sonance_brand__get_css_theme` for the full CSS variables and Tailwind config",
-    "3. Create a single branded HTML proof-of-concept file and show the user",
+    "3. Create a single branded HTML proof-of-concept file (via `filesystem__write_file`) and tell the user to open it in their browser",
     "4. Ask the user: 'Does this look right? Ready to build the full app?'",
-    "5. Do NOT proceed until the user approves",
+    "5. **STOP and WAIT** \u2014 Do NOT proceed until the user explicitly approves",
     "",
     "### Phase 2: Plan Infrastructure",
     "6. Determine if the app needs a database (user accounts, persistent data \u2192 yes; static content \u2192 no)",