@vantageos/mcp-boilerplate 0.2.3 → 0.2.4

package/.claude-plugin/plugin.json

@@ -1,7 +1,7 @@
 {
   "name": "vantage-mcp-boilerplate",
   "displayName": "VantageOS MCP Boilerplate",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Clonable MCP server template: SDK v2 on protocol 2026-07-28 (stdio + stateless Streamable HTTP), its own OAuth 2.1 authorization server (Clerk person + organisation), MCP Apps UI, FR/EN i18n and a declarative eval harness. Scaffold, extend, publish.",
   "author": {
     "name": "ElPi Corp / Laurent Perello"

package/CHANGELOG.md

@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/).
 
 ## [Unreleased]
 
+## [0.2.4] - 2026-10-11
+
+### Changed
+
+- The consent / organisation picker page uses the VantagePeers dashboard design tokens: dark by
+  default, light under `prefers-color-scheme`, one option card per organisation with its role
+  (`admin`, not `(org:admin)`), a primary Approve button. It still loads no external asset; the
+  single inline style is hashed into the page CSP.
+
+### Added
+
+- `AUTHORIZE_BRAND_NAME` (optional): a display name shown above the consent page title. None by
+  default, so a fork carries no brand it did not set.
+
 ## [0.2.3] - 2026-10-11
 
 ### Added

package/README.fr.md

@@ -194,6 +194,11 @@ fonctionne sur un serveur que vous hébergez, dans cet ordre :
    nomme l'exigence de Home URL. C'est un avertissement, jamais un refus : il signifie « une
    connexion distante ne marchera que si la Home URL pointe sur ce serveur, ou si vous passez à
    une instance de production ». Il ne contient ni clé ni secret.
+6. **La page de consentement.** Le choix d'organisation reprend le design du tableau de bord
+   VantagePeers : sombre par défaut, clair quand le système de la personne le demande, une
+   carte par organisation avec son rôle. Elle ne charge aucune ressource externe et porte donc
+   ses propres tokens. Réglez `AUTHORIZE_BRAND_NAME` pour afficher le nom de votre produit
+   au-dessus du titre ; rien n'est affiché par défaut.
 
 ### Multi-tenance
 

package/README.md

@@ -183,6 +183,10 @@ server you host, in this order:
    logs one warning at boot, in English and French, naming the Home URL requirement. It is a
    warning, never a refusal: it means "a remote sign-in will only work if the Home URL points
    at this server, or if you move to a production instance". It carries no key or secret.
+6. **The consent page.** The organisation picker uses the VantagePeers dashboard design: dark
+   by default, light when the person's system asks for it, one card per organisation with its
+   role. It loads no external asset, so it carries its own tokens. Set `AUTHORIZE_BRAND_NAME`
+   to show your product's name above the title; nothing is shown by default.
 
 ### Multi-tenancy
 

package/dist/oauth/authorizationServer.js

@@ -195,6 +195,7 @@ export function createAuthorizationServer(deps = {}) {
                 return c.html(renderOrgPicker(outcome.model, locale, {
                     // Only a URL-shaped (CIMD) client_id is bound to a domain its owner controls.
                     unverified: !isUrlShapedClientId(outcome.model.client.clientId),
+                    brandName: env[OAUTH_ENV.brandName]?.trim() || undefined,
                 }));
             }
             case "refused": {

package/dist/oauth/picker.d.ts

@@ -12,5 +12,7 @@ export declare function pickerContentSecurityPolicy(): Promise<string>;
 export interface ConsentContext {
     /** True for a Dynamic Client Registration client: it vouched for itself, nobody else did. */
     unverified: boolean;
+    /** The deployment's display name (AUTHORIZE_BRAND_NAME), shown above the title; none by default. */
+    brandName?: string;
 }
 export declare function renderOrgPicker(model: OrgPickerModel, locale: McpLocale, consent: ConsentContext): string;

package/dist/oauth/picker.js

@@ -13,9 +13,54 @@ function escapeHtml(value) {
         .replace(/"/g, """)
         .replace(/'/g, "'");
 }
-const PICKER_STYLE = "body{font-family:system-ui,sans-serif;max-width:32rem;margin:3rem auto;padding:0 1rem;line-height:1.5}" +
-    "fieldset{border:1px solid #888;padding:1rem}label{display:block;margin:.5rem 0}" +
-    "button{font:inherit;padding:.5rem 1rem;margin-right:.5rem}";
+/**
+ * The VantagePeers dashboard design tokens (vantage-peers-dashboard styles/presets/base.css at
+ * 9ca86e8a): dark first, light under `prefers-color-scheme`. Copied as values because the page
+ * loads no external asset (CSP below); a change to the dashboard preset is carried here by hand.
+ * Geist is the dashboard font; with no external fonts allowed, the system stack stands in.
+ */
+const PICKER_STYLE = [
+    ":root{color-scheme:dark light;--background:oklch(0.08 0.005 265);--foreground:oklch(0.95 0.005 265);" +
+        "--card:oklch(0.11 0.005 265);--card-hover:oklch(0.14 0.005 265);--primary:oklch(0.95 0.005 265);" +
+        "--primary-foreground:oklch(0.08 0.005 265);--secondary:oklch(0.16 0.005 265);" +
+        "--muted-foreground:oklch(0.55 0.005 265);--border:oklch(0.22 0.005 265);" +
+        "--border-hover:oklch(0.30 0.005 265);--ring:oklch(0.55 0.005 265);--warning:oklch(0.75 0.18 85);" +
+        "--radius:0.75rem}",
+    "@media (prefers-color-scheme:light){:root{--background:oklch(0.98 0.003 265);" +
+        "--foreground:oklch(0.10 0.005 265);--card:oklch(1 0 0);--card-hover:oklch(0.96 0.003 265);" +
+        "--primary:oklch(0.10 0.005 265);--primary-foreground:oklch(0.98 0.003 265);" +
+        "--secondary:oklch(0.94 0.003 265);--muted-foreground:oklch(0.45 0.005 265);" +
+        "--border:oklch(0.88 0.003 265);--border-hover:oklch(0.78 0.003 265);--ring:oklch(0.45 0.005 265);" +
+        "--warning:oklch(0.65 0.18 85)}}",
+    "*{box-sizing:border-box}",
+    "body{margin:0;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:1.5rem;" +
+        "background:var(--background);color:var(--foreground);" +
+        "font:15px/1.55 ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif}",
+    "main{width:100%;max-width:28rem;background:var(--card);border:1px solid var(--border);" +
+        "border-radius:var(--radius);padding:2rem}",
+    ".brand{margin:0 0 1.25rem;font-size:.8rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;" +
+        "color:var(--muted-foreground)}",
+    "h1{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;letter-spacing:-.01em}",
+    "p{margin:0 0 1rem}.muted{color:var(--muted-foreground);font-size:.875rem}",
+    "code{font-family:ui-monospace,'SF Mono',monospace;font-size:.8125rem;background:var(--secondary);" +
+        "padding:.1rem .35rem;border-radius:.375rem}",
+    ".alert{border:1px solid var(--warning);border-radius:.5rem;padding:.75rem;color:var(--warning);font-size:.875rem}",
+    "fieldset{border:0;margin:0 0 1.5rem;padding:0}",
+    "legend{font-size:.8rem;font-weight:600;color:var(--muted-foreground);margin-bottom:.5rem;padding:0}",
+    ".org{display:flex;align-items:center;gap:.75rem;padding:.75rem .875rem;margin-bottom:.5rem;" +
+        "border:1px solid var(--border);border-radius:.5rem;cursor:pointer}",
+    ".org:hover{border-color:var(--border-hover);background:var(--card-hover)}",
+    ".org:has(input:checked){border-color:var(--primary)}",
+    ".org input{accent-color:var(--primary);margin:0}",
+    ".name{flex:1;font-weight:500}",
+    ".role{font-size:.75rem;color:var(--muted-foreground);background:var(--secondary);" +
+        "padding:.125rem .5rem;border-radius:999px}",
+    ".actions{display:flex;gap:.5rem}",
+    "button{flex:1;font:inherit;font-weight:500;padding:.625rem 1rem;border-radius:.5rem;cursor:pointer;" +
+        "border:1px solid var(--border);background:transparent;color:var(--foreground)}",
+    "button.primary{background:var(--primary);color:var(--primary-foreground);border-color:var(--primary)}",
+    "button:hover{opacity:.9}button:focus-visible,.org:focus-within{outline:2px solid var(--ring);outline-offset:2px}",
+].join("");
 /** CSP for the picker page: no scripts, no external assets, one hashed inline style. */
 export async function pickerContentSecurityPolicy() {
     const digest = await crypto.subtle.digest("SHA-256", new TextEncoder().encode(PICKER_STYLE));
@@ -30,29 +75,31 @@ export async function pickerContentSecurityPolicy() {
 export function renderOrgPicker(model, locale, consent) {
     const destination = escapeHtml(model.redirectOrigin);
     const unverified = consent.unverified
-        ? `<p role="alert"><strong>${escapeHtml(t(locale, "oauth.pickerUnverified"))}</strong></p>\n`
+        ? `<p class="alert" role="alert"><strong>${escapeHtml(t(locale, "oauth.pickerUnverified"))}</strong></p>\n`
         : "";
     const clientName = model.client.clientName ?? model.client.clientId;
     const only = model.organizations.length === 1;
     const orgs = model.organizations
-        .map((o, i) => `<label><input type="radio" name="orgId" value="${escapeHtml(o.id)}" required${only && i === 0 ? " checked" : ""}> ${escapeHtml(o.name)} <small>(${escapeHtml(o.role)})</small></label>`)
+        .map((o, i) => `<label class="org"><input type="radio" name="orgId" value="${escapeHtml(o.id)}" required${only && i === 0 ? " checked" : ""}><span class="name">${escapeHtml(o.name)}</span><span class="role">${escapeHtml(o.role.replace(/^org:/, ""))}</span></label>`)
         .join("\n");
     const title = escapeHtml(t(locale, "oauth.pickerTitle").replace("{client}", clientName));
     const intro = escapeHtml(t(locale, "oauth.pickerIntro").replaceAll("{client}", clientName));
+    const brand = consent.brandName ? `<p class="brand">${escapeHtml(consent.brandName)}</p>\n` : "";
     return `<!doctype html>
 <html lang="${locale}">
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="referrer" content="no-referrer">
+<meta name="color-scheme" content="dark light">
 <title>${title}</title>
 <style>${PICKER_STYLE}</style>
 </head>
 <body>
 <main>
-<h1>${title}</h1>
+${brand}<h1>${title}</h1>
 <p>${intro}</p>
-<p>${escapeHtml(t(locale, "oauth.pickerDestination"))} <strong>${destination}</strong><br>
+<p class="muted">${escapeHtml(t(locale, "oauth.pickerDestination"))} <strong>${destination}</strong><br>
 ${escapeHtml(t(locale, "oauth.pickerScope"))} <code>${escapeHtml(model.scope)}</code></p>
 ${unverified}<form method="post" action="/authorize/org">
 <input type="hidden" name="state" value="${escapeHtml(model.state)}">
@@ -61,8 +108,8 @@ ${unverified}<form method="post" action="/authorize/org">
 <legend>${escapeHtml(t(locale, "oauth.pickerOrganisation"))}</legend>
 ${orgs}
 </fieldset>
-<p>
-<button type="submit" name="approved" value="true">${escapeHtml(t(locale, "oauth.approve"))}</button>
+<p class="actions">
+<button class="primary" type="submit" name="approved" value="true">${escapeHtml(t(locale, "oauth.approve"))}</button>
 <button type="submit" name="approved" value="false" formnovalidate>${escapeHtml(t(locale, "oauth.deny"))}</button>
 </p>
 </form>

package/dist/oauth/settings.d.ts

@@ -20,6 +20,8 @@ export declare const OAUTH_ENV: {
     readonly registerCorsOrigins: "MCP_REGISTER_CORS_ORIGINS";
     /** Exactly "1" lets NODE_ENV=production run on the in-memory stores (single instance only). */
     readonly allowInMemoryStores: "MCP_ALLOW_IN_MEMORY_STORES";
+    /** Optional display name shown above the consent page title (default: none). */
+    readonly brandName: "AUTHORIZE_BRAND_NAME";
 };
 /** Scope granted when a client names none: MCP access plus the OIDC subject. */
 export declare const MCP_SCOPE = "mcp:full";

package/dist/oauth/settings.js

@@ -20,6 +20,8 @@ export const OAUTH_ENV = {
     registerCorsOrigins: "MCP_REGISTER_CORS_ORIGINS",
     /** Exactly "1" lets NODE_ENV=production run on the in-memory stores (single instance only). */
     allowInMemoryStores: "MCP_ALLOW_IN_MEMORY_STORES",
+    /** Optional display name shown above the consent page title (default: none). */
+    brandName: "AUTHORIZE_BRAND_NAME",
 };
 /** Scope granted when a client names none: MCP access plus the OIDC subject. */
 export const MCP_SCOPE = "mcp:full";

package/examples/oauth.env.example

@@ -33,3 +33,5 @@ MCP_OAUTH_SIGNING_JWK=
 # MCP_MAX_BODY_BYTES=1048576
 # Browser origins allowed to call /register cross-origin (comma-separated; default none).
 # MCP_REGISTER_CORS_ORIGINS=https://inspector.example.com
+# Display name shown above the consent page title (default: none).
+# AUTHORIZE_BRAND_NAME=Acme MCP

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vantageos/mcp-boilerplate",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Clonable MCP server skeleton on the official @modelcontextprotocol/server SDK v2 (protocol 2026-07-28 + 2025 legacy, stdio + stateless Streamable HTTP), with its own OAuth 2.1 authorization server (Clerk person + organisation, cloud-identity), MCP Apps UI, tenant scoping, FR/EN i18n and a declarative eval harness.",
   "description_fr": "Squelette de serveur MCP clonable sur le SDK officiel @modelcontextprotocol/server v2 (protocole 2026-07-28 + héritage 2025, stdio + Streamable HTTP sans état), avec son propre serveur d'autorisation OAuth 2.1 (personne + organisation Clerk, cloud-identity), UI MCP Apps, scoping tenant, i18n FR/EN et un harnais d'évaluations déclaratif.",
   "type": "module",

package/plugin.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://agent-plugins.org/schemas/1.0.0/plugin.schema.json",
   "name": "vantage-mcp-boilerplate",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Clonable MCP server template: SDK v2 on protocol 2026-07-28 (stdio + stateless Streamable HTTP), its own OAuth 2.1 authorization server (Clerk person + organisation), MCP Apps UI, FR/EN i18n and a declarative eval harness. Scaffold, extend, publish.",
   "author": {
     "name": "ElPi Corp / Laurent Perello"