@yagni-app/code-staging 1.0.5-staging.1239.1 → 1.0.5-staging.1240.1

package/dist/cli.js

@@ -516,6 +516,10 @@ export const HELP_TEXT = [
     "  yagni connect claude-code  Route Claude Code through the YAGNI model proxy",
     "                           (--project scopes to this repo; --off disconnects).",
     "  yagni connect codex      Route Codex CLI through the YAGNI model proxy.",
+    "  yagni mcp <subcommand>    Manage MCP servers: add, remove, list, get,",
+    "                           add-from-claude, and more — run `yagni mcp` for",
+    "                           details. OAuth servers authenticate via the",
+    "                           /mcp panel in a session.",
     "  yagni token              Output the active environment's API token (for helpers).",
     "  yagni use <name>         Switch the active environment (sticky).",
     "                           Presets: prod, local. Others need --base-url <url>.",
@@ -537,6 +541,7 @@ export const HELP_TEXT = [
     "  /mode plan|review|auto   Hold writes for planning, or confirm each change.",
     "  /todos                   Show the agent's live task list.",
     "  /cost                    Session usage and credit headroom.",
+    "  /mcp                     Manage MCP servers; authenticate OAuth servers.",
     "",
     "The active environment is sticky; `use` switches it (prod is the default).",
     "Set YAGNI_BASE_URL to override the base URL for a single run.",

package/dist/extension/mcp/auth.js

@@ -25,6 +25,7 @@ import { runningUnderTest } from "../crashReport.js";
 import { getStoredOAuthEntry, updateStoredOAuthEntry } from "./authStore.js";
 import { deleteStoredOAuthEntry as clearStoredOAuthEntry } from "./authStore.js";
 import { logMcpEvent, redactSensitiveUrlParams } from "./log.js";
+import { renderAuthErrorPage, renderAuthStateMismatchPage, renderAuthSuccessPage, } from "./callbackPage.js";
 /** Cancellation via an AbortSignal (Ctrl-C / Esc in the /mcp panel). */
 export class AuthenticationCancelledError extends Error {
     constructor(message = "OAuth cancelled") {
@@ -424,20 +425,23 @@ function waitForCode(port, expectedState, opts = {}) {
                 // The provider-controlled values are HTML-escaped: any local process
                 // can hit the loopback with a crafted ?error=<script> payload, and the
                 // page must never reflect it (same spot Claude Code sanitizes).
-                res.end(`<h1>Authentication Error</h1><p>${escapeHtml(error)}${errorDescription ? `: ${escapeHtml(errorDescription)}` : ""}</p><p>You can close this window.</p>`);
+                res.end(renderAuthErrorPage({
+                    error: escapeHtml(error),
+                    errorDescription: errorDescription ? escapeHtml(errorDescription) : undefined,
+                }));
                 finish(undefined);
                 return;
             }
             if (state !== expectedState) {
                 onEvent?.("oauth_callback_state_mismatch", {});
                 res.writeHead(400, { "Content-Type": "text/html" });
-                res.end("<h1>Authentication Error</h1><p>Invalid state parameter. Please try again.</p>");
+                res.end(renderAuthStateMismatchPage());
                 fail(new Error("OAuth state mismatch - possible CSRF attack"));
                 return;
             }
             onEvent?.("oauth_callback_code", {});
             res.writeHead(200, { "Content-Type": "text/html" });
-            res.end("<h1>Authentication Successful</h1><p>You can close this window and return to YAGNI Code.</p>");
+            res.end(renderAuthSuccessPage());
             finish(code);
         });
         server.on("error", () => {

package/dist/extension/mcp/callbackPage.d.ts

@@ -0,0 +1,31 @@
+/**
+ * The loopback OAuth callback page — the only surface a user ever sees served
+ * from the local `127.0.0.1:<port>/callback` listener. Rendered with the same
+ * Glass & Print language as the app: tinted blue field, floating glass card,
+ * one blue accent, three type voices (Instrument Sans interface / Newsreader
+ * authored / IBM Plex Mono fact).
+ *
+ * Self-contained: no external assets, fonts, or network calls — the page must
+ * render offline and never phone home. Tokens are inlined from
+ * packages/frontend/src/styles/tokens.css so this module can't drift a runtime
+ * dependency on the frontend build; token names are kept in comments so a
+ * re-derivation stays mechanical.
+ *
+ * `escapeHtml` is applied by the caller to every provider-controlled value
+ * before interpolation (a local process can hit the loopback with a crafted
+ * ?error=<script> payload — the page never reflects raw input).
+ */
+/** The success page shown after the provider redirects back with a code. */
+export declare function renderAuthSuccessPage(): string;
+/**
+ * The error page shown when the provider bounces the flow. `error` and
+ * `errorDescription` are provider-controlled and already HTML-escaped by the
+ * caller.
+ */
+export declare function renderAuthErrorPage(opts: {
+    error?: string;
+    errorDescription?: string;
+}): string;
+/** The state-mismatch page — a hard failure, shown before the flow aborts. */
+export declare function renderAuthStateMismatchPage(): string;
+//# sourceMappingURL=callbackPage.d.ts.map

package/dist/extension/mcp/callbackPage.js

@@ -0,0 +1,222 @@
+/**
+ * The loopback OAuth callback page — the only surface a user ever sees served
+ * from the local `127.0.0.1:<port>/callback` listener. Rendered with the same
+ * Glass & Print language as the app: tinted blue field, floating glass card,
+ * one blue accent, three type voices (Instrument Sans interface / Newsreader
+ * authored / IBM Plex Mono fact).
+ *
+ * Self-contained: no external assets, fonts, or network calls — the page must
+ * render offline and never phone home. Tokens are inlined from
+ * packages/frontend/src/styles/tokens.css so this module can't drift a runtime
+ * dependency on the frontend build; token names are kept in comments so a
+ * re-derivation stays mechanical.
+ *
+ * `escapeHtml` is applied by the caller to every provider-controlled value
+ * before interpolation (a local process can hit the loopback with a crafted
+ * ?error=<script> payload — the page never reflects raw input).
+ */
+const CSS = `
+  :root {
+    /* tokens.css — field, ink, accent, materials */
+    --field-base: #f4f6fc;
+    --field-tint-blue: #dfe8ff;
+    --field-tint-violet: #e8e4ff;
+    --field-tint-cyan: #e3f0f6;
+    --ink: #23252e;
+    --ink-strong: #181a22;
+    --text-secondary: #565b72;
+    --text-quiet: #8b90a5;
+    --text-label: #7b8098;
+    --accent: #2f56d3;
+    --accent-muted: rgba(47, 86, 211, 0.12);
+    --accent-border: rgba(47, 86, 211, 0.3);
+    --error: #b4452f;
+    --error-muted: rgba(180, 69, 47, 0.07);
+    --glass-bg: rgba(255, 255, 255, 0.55);
+    --glass-border: rgba(255, 255, 255, 0.85);
+    --glass-blur: 18px;
+    --radius-pane: 16px;
+    --shadow-staged: 0 1px 2px rgba(24, 34, 64, 0.07), 0 18px 40px -30px rgba(38, 52, 110, 0.35);
+    --shadow-staged-high: 0 1px 2px rgba(24, 34, 64, 0.08), 0 28px 60px -28px rgba(38, 52, 110, 0.42);
+    --body: "Instrument Sans Variable", "Instrument Sans", system-ui, sans-serif;
+    --prose: "Newsreader", ui-serif, Georgia, serif;
+    --mono: "IBM Plex Mono", ui-monospace, monospace;
+  }
+
+  * { box-sizing: border-box; }
+
+  html, body { height: 100%; }
+
+  body {
+    margin: 0;
+    min-height: 100%;
+    display: grid;
+    place-items: center;
+    padding: 24px;
+    font-family: var(--body);
+    color: var(--ink);
+    background:
+      radial-gradient(1200px 700px at 8% -5%, var(--field-tint-blue) 0, rgba(223, 232, 255, 0) 60%),
+      radial-gradient(900px 600px at 95% 0%, var(--field-tint-violet) 0, rgba(232, 228, 255, 0) 55%),
+      radial-gradient(900px 700px at 60% 100%, var(--field-tint-cyan) 0, rgba(227, 240, 246, 0) 60%),
+      var(--field-base);
+  }
+
+  .card {
+    width: 100%;
+    max-width: 400px;
+    text-align: center;
+    padding: 40px 32px 32px;
+    background: var(--glass-bg);
+    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
+    backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
+    border: 1px solid var(--glass-border);
+    border-radius: var(--radius-pane);
+    box-shadow: var(--shadow-staged-high);
+    animation: rise 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
+  }
+
+  @keyframes rise {
+    from { opacity: 0; transform: translateY(8px); }
+    to { opacity: 1; transform: none; }
+  }
+
+  .wordmark {
+    font-family: var(--mono);
+    font-size: 10px;
+    font-weight: 600;
+    letter-spacing: 0.22em;
+    text-transform: uppercase;
+    color: var(--text-label);
+    margin: 0 0 28px;
+  }
+
+  .badge {
+    width: 52px;
+    height: 52px;
+    margin: 0 auto 20px;
+    display: grid;
+    place-items: center;
+    border-radius: 14px;
+    background: var(--accent-muted);
+    border: 1px solid var(--accent-border);
+    color: var(--accent);
+  }
+
+  .card--error .badge {
+    background: var(--error-muted);
+    border-color: rgba(180, 69, 47, 0.28);
+    color: var(--error);
+  }
+
+  h1 {
+    font-family: var(--prose);
+    font-size: 30px;
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -0.01em;
+    color: var(--ink-strong);
+    margin: 0 0 10px;
+  }
+
+  .lede {
+    font-size: 14px;
+    line-height: 1.55;
+    color: var(--text-secondary);
+    margin: 0 0 24px;
+  }
+
+  .detail {
+    font-family: var(--mono);
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--error);
+    background: var(--error-muted);
+    border: 1px solid rgba(180, 69, 47, 0.2);
+    border-radius: 8px;
+    padding: 8px 10px;
+    margin: 0 0 24px;
+    word-break: break-word;
+  }
+
+  .divider {
+    height: 1px;
+    margin: 0 0 20px;
+    background: linear-gradient(90deg, transparent, var(--accent-border), transparent);
+  }
+
+  .hint {
+    font-size: 12.5px;
+    color: var(--text-quiet);
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .card { animation: none; }
+  }
+`;
+const CHECK_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+const ERROR_ICON = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><line x1="12" y1="8" x2="12" y2="13"/><line x1="12" y1="16.5" x2="12.01" y2="16.5"/></svg>`;
+function shell(opts) {
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="color-scheme" content="light">
+<title>${opts.title} — YAGNI Code</title>
+<style>${CSS}</style>
+</head>
+<body>
+  <main class="card${opts.error ? " card--error" : ""}">
+    <p class="wordmark">YAGNI Code</p>
+    <div class="badge">${opts.error ? ERROR_ICON : CHECK_ICON}</div>
+    <h1>${opts.heading}</h1>
+    <p class="lede">${opts.lede}</p>
+    ${opts.detail ? `<p class="detail">${opts.detail}</p>` : ""}
+    <div class="divider"></div>
+    <p class="hint">${opts.hint}</p>
+  </main>
+</body>
+</html>`;
+}
+/** The success page shown after the provider redirects back with a code. */
+export function renderAuthSuccessPage() {
+    return shell({
+        title: "Connected",
+        heading: "Connected to YAGNI Code",
+        lede: "Your MCP server is authorized and ready to use.",
+        hint: "You can close this window and return to your session.",
+    });
+}
+/**
+ * The error page shown when the provider bounces the flow. `error` and
+ * `errorDescription` are provider-controlled and already HTML-escaped by the
+ * caller.
+ */
+export function renderAuthErrorPage(opts) {
+    const detail = opts.error
+        ? opts.errorDescription
+            ? `${opts.error}: ${opts.errorDescription}`
+            : opts.error
+        : undefined;
+    return shell({
+        title: "Connection failed",
+        error: true,
+        heading: "Authentication didn't complete",
+        lede: "The provider didn't finish the sign-in flow.",
+        detail,
+        hint: "You can close this window and try again from YAGNI Code.",
+    });
+}
+/** The state-mismatch page — a hard failure, shown before the flow aborts. */
+export function renderAuthStateMismatchPage() {
+    return shell({
+        title: "Connection failed",
+        error: true,
+        heading: "Authentication didn't complete",
+        lede: "The sign-in response didn't match the request, so it was rejected.",
+        hint: "You can close this window and try again from YAGNI Code.",
+    });
+}
+//# sourceMappingURL=callbackPage.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yagni-app/code-staging",
-  "version": "1.0.5-staging.1239.1",
+  "version": "1.0.5-staging.1240.1",
   "description": "YAGNI Code: a terminal coding agent that already knows your company. One YAGNI login routes the model and grounds the agent in your team's context.",
   "license": "SEE LICENSE IN LICENSE.md",
   "author": "YAGNI, Inc. <jack@yagni.app> (https://yagni.app)",
@@ -42,5 +42,5 @@
     "turndown": "^7.2.4",
     "typebox": "^1.3.15"
   },
-  "yagniSourceSha": "56fce757cff3be4c0f2ae824cd40e8b2e8da50b2"
+  "yagniSourceSha": "24a0ebcde7f7df67fd0fcd230caa85c0c897742b"
 }