npm - circuit-mcp - Versions diffs - 2.4.0 → 2.5.0 - Mend

circuit-mcp 2.4.0 → 2.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/README.md CHANGED Viewed

@@ -5,12 +5,20 @@ Connect Circuit to Cursor and Claude Code via the Model Context Protocol.
 ## Setup
+Sign in first — this opens your browser and caches a token at `~/.circuit/token.json` (30-day expiry, auto-refresh):
+```bash
+npx circuit-mcp auth
+```
 ### Claude Code
 ```bash
-claude mcp add circuit -- npx circuit-mcp
+claude mcp add --scope user circuit -- npx circuit-mcp
 ```
+`--scope user` makes Circuit available in every project, not just the directory you ran the command from.
 ### Cursor
 Add to `~/.cursor/mcp.json`:
@@ -26,7 +34,7 @@ Add to `~/.cursor/mcp.json`:
 }
 ```
-First run opens your browser to authenticate. Token is cached at `~/.circuit/token.json` (30-day expiry).
+If you add the server before signing in, it exits with a reminder to run `npx circuit-mcp auth` — sign in, then reconnect from your editor.
 ---

package/bin/circuit-mcp.js CHANGED Viewed

File without changes

package/package.json CHANGED Viewed

@@ -1,10 +1,10 @@
 {
   "name": "circuit-mcp",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "description": "Connect Circuit to Cursor and Claude Code - bring customer priorities and engineering briefs into your AI coding assistant",
   "type": "module",
   "bin": {
-    "circuit-mcp": "./bin/circuit-mcp.js"
+    "circuit-mcp": "bin/circuit-mcp.js"
   },
   "main": "./src/index.js",
   "exports": "./src/index.js",
@@ -15,7 +15,8 @@
     "README.md"
   ],
   "scripts": {
-    "start": "node bin/circuit-mcp.js"
+    "start": "node bin/circuit-mcp.js",
+    "test": "node --test"
   },
   "keywords": [
     "circuit",
@@ -36,7 +37,7 @@
   "homepage": "https://withcircuit.com",
   "repository": {
     "type": "git",
-    "url": "https://github.com/withcircuit/Circuit.git",
+    "url": "git+https://github.com/withcircuit/Circuit.git",
     "directory": "circuit-mcp"
   },
   "bugs": {

package/src/auth.js CHANGED Viewed

@@ -7,6 +7,7 @@ import os from 'os';
 import open from 'open';
 import chalk from 'chalk';
 import { showSpinner, showInfo, showPrompt } from './ui.js';
+import { getSuccessPage, getErrorPage } from './pages.js';
 const CIRCUIT_URL = process.env.CIRCUIT_APP_URL || 'https://app.withcircuit.com';
 const TOKEN_FILE = path.join(os.homedir(), '.circuit', 'token.json');
@@ -178,131 +179,3 @@ export async function authenticate() {
     server.on('error', reject);
   });
 }
-function getSuccessPage() {
-  return `<!DOCTYPE html>
-<html>
-<head>
-  <title>Circuit - Connected</title>
-  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><defs><mask id='m'><circle cx='16' cy='16' r='13' fill='white'/><circle cx='16' cy='16' r='6.9' fill='black'/></mask></defs><ellipse cx='16' cy='17.73' rx='13' ry='11.27' fill='rgba(168,102,122,0.2)'/><circle cx='16' cy='16' r='13' fill='%23A8667A' mask='url(%23m)'/></svg>">
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
-      background: #F5F3F0;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #1C1A18;
-      padding: 24px;
-    }
-    .content {
-      text-align: center;
-      max-width: 400px;
-    }
-    .icon {
-      margin-bottom: 24px;
-    }
-    .icon svg {
-      width: 48px;
-      height: 48px;
-      color: #1C1A18;
-    }
-    h1 {
-      font-size: 24px;
-      font-weight: 600;
-      color: #1C1A18;
-      margin-bottom: 12px;
-    }
-    p {
-      font-size: 14px;
-      color: rgba(28, 26, 24, 0.6);
-      line-height: 1.6;
-    }
-    .hint {
-      font-size: 12px;
-      color: rgba(28, 26, 24, 0.6);
-      margin-top: 16px;
-    }
-  </style>
-</head>
-<body>
-  <div class="content">
-    <div class="icon">
-      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
-    </div>
-    <h1>Connected.</h1>
-    <p>Your AI coding assistant is now connected to Circuit.</p>
-    <p class="hint">You can close this tab and return to your editor.</p>
-  </div>
-  <script>setTimeout(() => window.close(), 3000);</script>
-</body>
-</html>`;
-}
-function getErrorPage(error) {
-  // Sanitize error message to prevent XSS in the static HTML page
-  const safeError = String(error).replace(/[<>&"']/g, c => ({
-    '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;'
-  })[c]);
-  return `<!DOCTYPE html>
-<html>
-<head>
-  <title>Circuit - Connection Failed</title>
-  <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><defs><mask id='m'><circle cx='16' cy='16' r='13' fill='white'/><circle cx='16' cy='16' r='6.9' fill='black'/></mask></defs><ellipse cx='16' cy='17.73' rx='13' ry='11.27' fill='rgba(168,102,122,0.2)'/><circle cx='16' cy='16' r='13' fill='%23A8667A' mask='url(%23m)'/></svg>">
-  <style>
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body {
-      font-family: 'Geist', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, sans-serif;
-      background: #F5F3F0;
-      min-height: 100vh;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: #1C1A18;
-      padding: 24px;
-    }
-    .content {
-      text-align: center;
-      max-width: 400px;
-    }
-    .icon {
-      margin-bottom: 24px;
-    }
-    .icon svg {
-      width: 48px;
-      height: 48px;
-      color: #D64545;
-    }
-    h1 {
-      font-size: 24px;
-      font-weight: 600;
-      color: #1C1A18;
-      margin-bottom: 12px;
-    }
-    p {
-      font-size: 14px;
-      color: rgba(28, 26, 24, 0.6);
-      line-height: 1.6;
-    }
-    .hint {
-      font-size: 12px;
-      color: rgba(28, 26, 24, 0.6);
-      margin-top: 16px;
-    }
-  </style>
-</head>
-<body>
-  <div class="content">
-    <div class="icon">
-      <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="15" y1="9" x2="9" y2="15"/><line x1="9" y1="9" x2="15" y2="15"/></svg>
-    </div>
-    <h1>Connection Failed</h1>
-    <p>${safeError}</p>
-    <p class="hint">Please try connecting again from your AI assistant.</p>
-  </div>
-</body>
-</html>`;
-}

package/src/index.js CHANGED Viewed

@@ -92,7 +92,7 @@ function showTroubleshoot() {
   console.log(chalk.dim('  1. Check if MCP is installed:'));
   console.log(chalk.white('     claude mcp list\n'));
   console.log(chalk.dim('  2. If not listed, add it:'));
-  console.log(chalk.white('     claude mcp add circuit -- npx circuit-mcp\n'));
+  console.log(chalk.white('     claude mcp add --scope user circuit -- npx circuit-mcp\n'));
   console.log(chalk.dim('  3. Restart Claude Code\n'));
   // Issue 4: Authentication issues
@@ -169,6 +169,7 @@ async function configureCursor() {
     await fs.mkdir(path.dirname(configPath), { recursive: true });
     let config = { mcpServers: {} };
+    let wasDisabled = false;
     // Try to read existing config
     try {
@@ -177,31 +178,40 @@ async function configureCursor() {
       if (!config.mcpServers) {
         config.mcpServers = {};
       }
+      // Check if Circuit was previously disabled in Cursor
+      wasDisabled = config.mcpServers.circuit?.disabled === true;
     } catch {
       // File doesn't exist, use default
     }
-    // Add Circuit
+    // Write Circuit config — overwrites any previous disabled: true
     config.mcpServers.circuit = circuitConfig;
     // Write config
     await fs.writeFile(configPath, JSON.stringify(config, null, 2));
-    return true;
+    return { success: true, wasDisabled };
   } catch (err) {
-    return false;
+    return { success: false, wasDisabled: false };
   }
 }
 // Configure Claude Code by running the CLI command
 function configureClaudeCode() {
   try {
-    execSync('claude mcp add circuit -- npx circuit-mcp', {
+    // --scope user makes Circuit available in every Claude Code session,
+    // not just the current project directory (default scope is "local").
+    // Remove first so re-running setup always produces a clean state.
+    try {
+      execSync('claude mcp remove circuit', { stdio: 'pipe', timeout: 5000 });
+    } catch {
+      // Not present yet — fine
+    }
+    execSync('claude mcp add --scope user circuit -- npx circuit-mcp', {
       stdio: 'pipe',
       timeout: 10000
     });
     return true;
   } catch (err) {
-    // Command might fail if claude CLI not installed
     return false;
   }
 }
@@ -226,10 +236,15 @@ async function runSetup() {
   if (choice === '1' || choice === '3') {
     console.log(chalk.dim('  Setting up Cursor...\n'));
-    const success = await configureCursor();
+    const { success, wasDisabled } = await configureCursor();
     if (success) {
-      showSuccess('Added Circuit to ~/.cursor/mcp.json');
+      if (wasDisabled) {
+        showSuccess('Re-enabled Circuit in ~/.cursor/mcp.json');
+        console.log(chalk.dim('     (It was disabled — turned back on.)\n'));
+      } else {
+        showSuccess('Added Circuit to ~/.cursor/mcp.json');
+      }
       console.log(chalk.dim('     Restart Cursor to activate.\n'));
     } else {
       showError('Could not update Cursor config automatically.');
@@ -253,7 +268,7 @@ async function runSetup() {
     } else {
       showError('Could not run claude CLI automatically.');
       console.log(chalk.dim('     Run this command manually:\n'));
-      console.log(chalk.white('     claude mcp add circuit -- npx circuit-mcp\n'));
+      console.log(chalk.white('     claude mcp add --scope user circuit -- npx circuit-mcp\n'));
     }
   }
@@ -264,7 +279,7 @@ async function runSetup() {
     console.log(chalk.white('  { "mcpServers": { "circuit": { "command": "npx", "args": ["circuit-mcp"] } } }\n'));
     console.log(chalk.cyan.bold('  Claude Code'));
     console.log(chalk.dim('  Run:'));
-    console.log(chalk.white('  claude mcp add circuit -- npx circuit-mcp\n'));
+    console.log(chalk.white('  claude mcp add --scope user circuit -- npx circuit-mcp\n'));
     return;
   }
@@ -274,6 +289,8 @@ async function runSetup() {
   const authChoice = await prompt(chalk.cyan('  Sign in now? (Y/n): '));
+  let authSucceeded = false;
   if (authChoice.toLowerCase() !== 'n') {
     console.log();
     console.log(chalk.dim('  Opening browser to sign in...\n'));
@@ -281,6 +298,7 @@ async function runSetup() {
     try {
       const token = await authenticate();
       showSuccess('Signed in to Circuit');
+      authSucceeded = true;
       console.log();
     } catch (err) {
       showError('Could not sign in automatically.');
@@ -289,9 +307,17 @@ async function runSetup() {
   }
   console.log(chalk.dim('  ─────────────────────────────────────────\n'));
-  console.log(chalk.white.bold('  You\'re all set!\n'));
-  console.log(chalk.dim('  Restart your editor and start using Circuit.\n'));
-  showUsageGuide();
+  if (authSucceeded || authChoice.toLowerCase() === 'n') {
+    console.log(chalk.white.bold('  You\'re all set!\n'));
+    console.log(chalk.dim('  Restart your editor and start using Circuit.\n'));
+    showUsageGuide();
+  } else {
+    console.log(chalk.white.bold('  Almost ready!\n'));
+    console.log(chalk.dim('  Sign in to finish connecting your Circuit account:\n'));
+    console.log(chalk.white('     npx circuit-mcp auth\n'));
+    console.log(chalk.dim('  Then restart your editor.\n'));
+  }
 }
 async function runAuth() {
@@ -325,6 +351,14 @@ async function runServer() {
   let token = await getStoredToken();
   if (!token) {
+    // Headless (spawned by Claude Code / Cursor over stdio): the browser auth
+    // flow has no one to drive it, so fail fast with instructions instead of
+    // hanging the MCP handshake.
+    if (!process.stdin.isTTY) {
+      console.error('Circuit MCP: not signed in. Run `npx circuit-mcp auth` in a terminal, then reconnect the MCP server.');
+      process.exit(1);
+    }
     // First run - show banner and auth
     showBanner();
     console.log(chalk.dim('  First time setup - let\'s connect your account.\n'));

package/src/pages.js ADDED Viewed

@@ -0,0 +1,119 @@
+/**
+ * Local auth result pages, served from 127.0.0.1 after the OAuth callback.
+ *
+ * Design: docs/superpowers/specs/2026-06-11-mcp-auth-pages-design.md
+ * Mirrors the product's /welcome onboarding cinematic system. Art and Geist
+ * load from app.withcircuit.com (CORS-open); offline the page degrades to a
+ * plain #1A1310 canvas with system fonts — values are hardcoded here because
+ * circuit-tokens.css is not available to the CLI.
+ */
+const ASSET_ORIGIN = 'https://app.withcircuit.com';
+const FAVICON = `data:image/svg+xml,<svg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'><defs><mask id='m'><circle cx='16' cy='16' r='13' fill='white'/><circle cx='16' cy='16' r='6.9' fill='black'/></mask></defs><ellipse cx='16' cy='17.73' rx='13' ry='11.27' fill='rgba(168,102,122,0.2)'/><circle cx='16' cy='16' r='13' fill='%23A8667A' mask='url(%23m)'/></svg>`;
+const RING_MARK = `<svg width="26" height="26" viewBox="0 0 32 32" fill="none" aria-hidden="true"><defs><mask id="ring"><circle cx="16" cy="16" r="13" fill="white"/><circle cx="16" cy="16" r="6.9" fill="black"/></mask></defs><circle cx="16" cy="16" r="13" fill="#A8667A" mask="url(#ring)"/></svg>`;
+const COPY_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>`;
+const CHECK_ICON = `<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="20 6 9 17 4 12"/></svg>`;
+// Shared frame: backdrop layers + header + centered card.
+// All values measured from the live /welcome flow (see spec table).
+function renderPage({ title, eyebrow, eyebrowError, heading, body, pillHtml, hintHtml }) {
+  return `<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>${title}</title>
+  <link rel="icon" type="image/svg+xml" href="${FAVICON}">
+  <style>
+    @font-face { font-family: 'Geist'; src: url('${ASSET_ORIGIN}/fonts/Geist-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
+    @font-face { font-family: 'Geist Mono'; src: url('${ASSET_ORIGIN}/fonts/GeistMono-Variable.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+    body { font-family: 'Geist', -apple-system, system-ui, sans-serif; background: #1a1310; min-height: 100vh; }
+    .scene { position: relative; min-height: 100vh; overflow: hidden; }
+    .scene__bg { position: absolute; inset: 0; background-image: url('${ASSET_ORIGIN}/assets/ring-hero.png'); background-size: cover; background-position: 0% 38%; }
+    .scene__overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(14,9,7,0.72), rgba(14,9,7,0.6), rgba(14,9,7,0.55)); }
+    .scene__grain { position: absolute; inset: 0; background: radial-gradient(rgba(244,228,201,0.5) 1px, transparent 1px); background-size: 3px 3px; opacity: 0.1; mix-blend-mode: overlay; }
+    .header { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 16px; padding: 22px 28px; }
+    .header__wordmark { font-size: 17px; font-weight: 500; letter-spacing: -0.01em; color: #efe7da; }
+    .center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
+    .card { background: rgba(20,15,13,0.78); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 16px; padding: 48px; width: 620px; }
+    .eyebrow { font-family: 'Geist Mono', ui-monospace, monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #c9919e; }
+    .eyebrow--error { color: #d06a55; }
+    h1 { font-size: 42px; font-weight: 500; letter-spacing: -0.03em; line-height: 1.08; color: #efe7da; margin-top: 24px; }
+    .body { font-size: 14.5px; line-height: 1.55; color: rgba(239,231,218,0.62); margin-top: 20px; max-width: 92%; }
+    .pill { display: flex; align-items: center; gap: 12px; margin-top: 26px; background: #0e0907; border-radius: 9px; padding: 13px 16px; font-family: 'Geist Mono', ui-monospace, monospace; font-size: 13px; color: #efe7da; box-shadow: inset 0 0 0 1px rgba(239,231,218,0.12); }
+    .pill__label { color: rgba(239,231,218,0.45); }
+    .pill__copy { margin-left: auto; display: inline-flex; align-items: center; background: none; border: none; padding: 4px; cursor: pointer; color: rgba(239,231,218,0.45); transition: color 200ms cubic-bezier(0, 0, 0.2, 1); /* --duration-normal --ease-out */ }
+    .pill__copy:hover { color: #efe7da; }
+    .hint { font-size: 12.5px; color: rgba(239,231,218,0.45); margin-top: 18px; }
+    @media (max-width: 899px) { .scene__bg { background-position: 50% 38%; } .card { width: 640px; max-width: calc(100% - 48px); } h1 { font-size: 40px; } }
+    @media (max-width: 639px) { .card { padding: 28px 24px; max-width: calc(100% - 24px); } h1 { font-size: 28px; } .body { max-width: 100%; } .pill { font-size: 12px; padding: 12px 14px; } }
+  </style>
+</head>
+<body>
+  <div class="scene">
+    <div class="scene__bg"></div>
+    <div class="scene__overlay"></div>
+    <div class="scene__grain"></div>
+    <div class="header">${RING_MARK}<span class="header__wordmark">Circuit</span></div>
+    <div class="center">
+      <div class="card">
+        <p class="eyebrow${eyebrowError ? ' eyebrow--error' : ''}">${eyebrow}</p>
+        <h1>${heading}</h1>
+        <p class="body">${body}</p>
+        ${pillHtml}
+        ${hintHtml}
+      </div>
+    </div>
+  </div>
+  <script>
+    document.querySelectorAll('[data-copy]').forEach((btn) => {
+      btn.addEventListener('click', async () => {
+        try {
+          await navigator.clipboard.writeText(btn.getAttribute('data-copy'));
+          btn.innerHTML = ${JSON.stringify(CHECK_ICON)};
+          setTimeout(() => { btn.innerHTML = ${JSON.stringify(COPY_ICON)}; }, 2000);
+        } catch {}
+      });
+    });
+  </script>
+</body>
+</html>`;
+}
+export function getSuccessPage() {
+  return renderPage({
+    title: 'Circuit — Connected',
+    eyebrow: 'Circuit MCP',
+    eyebrowError: false,
+    heading: 'Connected.',
+    body: 'Circuit is in your editor now. Your customers are about to start writing your next sprint.',
+    pillHtml: `<div class="pill"><span class="pill__label">Try:</span><span>&ldquo;What should I work on?&rdquo;</span><button type="button" class="pill__copy" aria-label="Copy prompt" data-copy="What should I work on?">${COPY_ICON}</button></div>`,
+    hintHtml: `<p class="hint">You can close this tab and return to your editor.</p>`,
+  });
+}
+export function getErrorPage(error) {
+  // Sanitize before interpolation — same contract as the old page
+  const safeError = String(error).replace(/[<>&"']/g, (c) => ({
+    '<': '&lt;',
+    '>': '&gt;',
+    '&': '&amp;',
+    '"': '&quot;',
+    "'": '&#39;',
+  })[c]);
+  return renderPage({
+    title: 'Circuit — Connection Failed',
+    eyebrow: 'Connection failed',
+    eyebrowError: true,
+    heading: 'Let&rsquo;s try that again.',
+    body: 'We couldn&rsquo;t finish signing you in. Run this in your terminal:',
+    pillHtml: `<div class="pill"><span>npx circuit-mcp auth</span><button type="button" class="pill__copy" aria-label="Copy command" data-copy="npx circuit-mcp auth">${COPY_ICON}</button></div>`,
+    hintHtml: `<p class="hint">${safeError}</p>`,
+  });
+}