@frontmcp/sdk 0.6.0 → 0.6.2

package/src/auth/ui/templates.js

@@ -1,426 +0,0 @@
-"use strict";
-/**
- * Template Builders for OAuth UI
- *
- * Server-side HTML rendering with Tailwind CSS for OAuth authorization flows.
- * No build step required - pure runtime rendering with Tailwind CSS CDN.
- *
- * Features:
- * - OAuth consent page with multiple apps
- * - Incremental authorization page for single app
- * - Federated login page for multi-provider selection
- * - All pages use Tailwind CSS from CDN (no build required)
- * - Google Fonts (Inter) for modern typography
- *
- * Uses base-layout.ts for consistent HTML shell with CDN resources.
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.escapeHtml = void 0;
-exports.buildConsentPage = buildConsentPage;
-exports.buildIncrementalAuthPage = buildIncrementalAuthPage;
-exports.buildFederatedLoginPage = buildFederatedLoginPage;
-exports.buildToolConsentPage = buildToolConsentPage;
-exports.buildLoginPage = buildLoginPage;
-exports.buildErrorPage = buildErrorPage;
-exports.renderToHtml = renderToHtml;
-const base_layout_1 = require("./base-layout");
-// ============================================
-// Utility Functions
-// ============================================
-/**
- * Escape HTML special characters
- * Re-exported from base-layout for convenience
- */
-exports.escapeHtml = base_layout_1.escapeHtml;
-// ============================================
-// Template Builders
-// ============================================
-/**
- * Build OAuth consent page with Tailwind
- * Shows all apps at once with Authorize/Skip buttons
- */
-function buildConsentPage(params) {
-    const { apps, clientName, pendingAuthId, csrfToken, callbackPath } = params;
-    const appCards = apps.map((app) => buildAppCardHtml(app, pendingAuthId, csrfToken, callbackPath)).join('\n');
-    const content = `
-    <h1 class="text-3xl font-bold text-gray-900 mb-4">Authorize ${(0, exports.escapeHtml)(clientName)}</h1>
-    <p class="text-gray-600 mb-8">
-      Select which apps you want to authorize. You can skip apps and authorize them later when needed.
-    </p>
-
-    <div class="space-y-4" id="app-list">
-      ${appCards}
-    </div>
-
-    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
-      Skipped apps can be authorized later when you try to use their tools (progressive authorization).
-    </div>`;
-    return (0, base_layout_1.wideLayout)(content, { title: `Authorize ${clientName}` });
-}
-/**
- * Build single app authorization card HTML
- */
-function buildAppCardHtml(app, pendingAuthId, csrfToken, callbackPath) {
-    const icon = app.iconUrl
-        ? `<img src="${(0, exports.escapeHtml)(app.iconUrl)}" alt="${(0, exports.escapeHtml)(app.appName)}" class="w-12 h-12 rounded-lg object-cover">`
-        : `<div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg">${(0, exports.escapeHtml)(app.appName.charAt(0).toUpperCase())}</div>`;
-    const description = app.description ? `<p class="text-sm text-gray-500">${(0, exports.escapeHtml)(app.description)}</p>` : '';
-    const scopes = app.requiredScopes?.length
-        ? `<div class="mb-4">
-        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Permissions</p>
-        <div class="flex flex-wrap gap-2">
-          ${app.requiredScopes
-            .map((scope) => `<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">${(0, exports.escapeHtml)(scope)}</span>`)
-            .join('')}
-        </div>
-      </div>`
-        : '';
-    return `<div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow" data-app-id="${(0, exports.escapeHtml)(app.appId)}">
-    <div class="flex items-center gap-4 mb-4">
-      ${icon}
-      <div class="flex-1">
-        <h3 class="font-semibold text-gray-900">${(0, exports.escapeHtml)(app.appName)}</h3>
-        ${description}
-      </div>
-    </div>
-
-    ${scopes}
-
-    <form method="POST" action="${(0, exports.escapeHtml)(callbackPath)}" class="flex gap-3 pt-4 border-t border-gray-100">
-      <input type="hidden" name="csrf" value="${(0, exports.escapeHtml)(csrfToken)}">
-      <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(pendingAuthId)}">
-      <input type="hidden" name="app" value="${(0, exports.escapeHtml)(app.appId)}">
-      <button type="submit" name="action" value="authorize"
-        class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors">
-        Authorize
-      </button>
-      <button type="submit" name="action" value="skip"
-        class="px-4 py-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium rounded-lg transition-colors">
-        Skip
-      </button>
-    </form>
-  </div>`;
-}
-/**
- * Build incremental auth page (single app) with Tailwind
- * Used when a tool requires authorization for a skipped app
- */
-function buildIncrementalAuthPage(params) {
-    const { app, toolId, sessionHint, callbackPath } = params;
-    const description = app.description ? `<p class="text-gray-500 mt-2">${(0, exports.escapeHtml)(app.description)}</p>` : '';
-    const content = `
-    <!-- Warning icon -->
-    <div class="flex justify-center mb-6">
-      <div class="w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center">
-        <svg class="w-8 h-8 text-amber-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
-        </svg>
-      </div>
-    </div>
-
-    <h1 class="text-2xl font-bold text-gray-900 text-center mb-2">Authorization Required</h1>
-    <p class="text-gray-600 text-center mb-8">
-      To use "<span class="font-mono text-sm bg-gray-100 px-1 rounded">${(0, exports.escapeHtml)(toolId)}</span>", you need to authorize ${(0, exports.escapeHtml)(app.appName)}.
-    </p>
-
-    <!-- App card -->
-    <div class="bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6">
-      <div class="flex items-center gap-4 mb-4">
-        <div class="w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg">
-          ${(0, exports.escapeHtml)(app.appName.charAt(0).toUpperCase())}
-        </div>
-        <div class="flex-1">
-          <h3 class="font-semibold text-gray-900">${(0, exports.escapeHtml)(app.appName)}</h3>
-          ${description}
-        </div>
-      </div>
-
-      <form method="GET" action="${(0, exports.escapeHtml)(callbackPath)}" class="flex gap-3 pt-4 border-t border-gray-100">
-        <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(sessionHint)}">
-        <input type="hidden" name="app_id" value="${(0, exports.escapeHtml)(app.appId)}">
-        <input type="hidden" name="incremental" value="true">
-        <button type="button" onclick="window.close()"
-          class="flex-1 px-4 py-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium rounded-lg transition-colors">
-          Cancel
-        </button>
-        <button type="submit"
-          class="flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors">
-          Authorize
-        </button>
-      </form>
-    </div>
-
-    <div class="p-4 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800 text-center">
-      This is an incremental authorization. Your existing session will be expanded to include ${(0, exports.escapeHtml)(app.appName)}.
-    </div>`;
-    return (0, base_layout_1.centeredCardLayout)(content, { title: `Authorize ${app.appName}` });
-}
-/**
- * Build federated login page for multi-provider selection
- */
-function buildFederatedLoginPage(params) {
-    const { providers, clientName, pendingAuthId, csrfToken, callbackPath } = params;
-    const providerCards = providers
-        .map((provider) => {
-        const isPrimaryBadge = provider.isPrimary
-            ? `<span class="px-2 py-0.5 text-xs font-medium bg-blue-600 text-white rounded-full">Primary</span>`
-            : '';
-        const providerUrl = provider.providerUrl
-            ? `<p class="text-xs text-gray-400 font-mono truncate">${(0, exports.escapeHtml)(provider.providerUrl)}</p>`
-            : '';
-        const appIds = provider.appIds.length > 0
-            ? `<p class="text-xs text-gray-500 mt-1">Apps: ${provider.appIds.map((id) => (0, exports.escapeHtml)(id)).join(', ')}</p>`
-            : '';
-        return `<label class="flex items-start gap-4 p-4 bg-white border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 transition-colors has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50">
-      <input type="checkbox" name="providers" value="${(0, exports.escapeHtml)(provider.providerId)}"
-        class="mt-1 w-5 h-5 rounded border-gray-300" ${provider.isPrimary ? 'checked' : ''}>
-      <div class="flex-1">
-        <div class="flex items-center gap-2 mb-1">
-          <span class="font-semibold text-gray-900">${(0, exports.escapeHtml)(provider.providerName)}</span>
-          ${isPrimaryBadge}
-        </div>
-        <p class="text-sm text-gray-500">Mode: ${(0, exports.escapeHtml)(provider.mode)}</p>
-        ${providerUrl}
-        ${appIds}
-      </div>
-    </label>`;
-    })
-        .join('\n');
-    const content = `
-    <h1 class="text-3xl font-bold text-gray-900 mb-4">Select Authorization Providers</h1>
-    <p class="text-gray-600 mb-8">
-      ${(0, exports.escapeHtml)(clientName)} uses multiple authentication providers. Select which ones you want to authorize.
-    </p>
-
-    <form method="GET" action="${(0, exports.escapeHtml)(callbackPath)}" id="federated-form">
-      <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(pendingAuthId)}">
-      <input type="hidden" name="federated" value="true">
-
-      <!-- Select all toggle -->
-      <label class="flex items-center gap-3 mb-6 cursor-pointer">
-        <input type="checkbox" id="select-all" class="w-5 h-5 rounded border-gray-300"
-          onchange="document.querySelectorAll('input[name=providers]').forEach(cb => cb.checked = this.checked)">
-        <span class="text-gray-700">Select all providers</span>
-      </label>
-
-      <!-- Provider cards -->
-      <div class="space-y-4 mb-8">
-        ${providerCards}
-      </div>
-
-      <!-- Email input -->
-      <div class="mb-6">
-        <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
-        <input type="email" id="email" name="email" required placeholder="you@example.com"
-          class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-      </div>
-
-      <!-- Buttons -->
-      <div class="flex gap-4">
-        <button type="button"
-          class="flex-1 px-6 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 font-medium rounded-lg transition-colors"
-          onclick="document.querySelectorAll('input[name=providers]').forEach(cb => cb.checked = false); document.getElementById('federated-form').submit();">
-          Skip All
-        </button>
-        <button type="submit"
-          class="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
-          Continue
-        </button>
-      </div>
-    </form>
-
-    <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800">
-      Skipped providers can be authorized later when you try to use their tools (progressive authorization).
-    </div>`;
-    return (0, base_layout_1.wideLayout)(content, { title: 'Select Providers' });
-}
-/**
- * Build consent page for tool selection
- */
-function buildToolConsentPage(params) {
-    const { tools, clientName, pendingAuthId, csrfToken, callbackPath, userName, userEmail } = params;
-    // Group tools by app
-    const toolsByApp = {};
-    for (const tool of tools) {
-        if (!toolsByApp[tool.appId]) {
-            toolsByApp[tool.appId] = { appName: tool.appName, tools: [] };
-        }
-        toolsByApp[tool.appId].tools.push(tool);
-    }
-    const userInfo = userName || userEmail
-        ? `<div class="p-3 bg-gray-50 rounded-lg mb-6 text-sm">
-        <span class="text-gray-500">Signed in as: </span>
-        <span class="font-medium text-gray-900">${(0, exports.escapeHtml)(userName || userEmail || '')}</span>
-      </div>`
-        : '';
-    const appGroups = Object.entries(toolsByApp)
-        .map(([appId, { appName, tools: appTools }]) => {
-        const toolItems = appTools
-            .map((tool) => {
-            const desc = tool.description
-                ? `<p class="text-sm text-gray-500 mt-0.5">${(0, exports.escapeHtml)(tool.description)}</p>`
-                : '';
-            return `<label class="flex items-start gap-3 p-3 bg-white rounded-lg cursor-pointer hover:bg-gray-50">
-        <input type="checkbox" name="tools" value="${(0, exports.escapeHtml)(tool.toolId)}" class="mt-0.5 w-5 h-5 rounded border-gray-300" checked>
-        <div>
-          <span class="font-medium text-gray-900">${(0, exports.escapeHtml)(tool.toolName)}</span>
-          ${desc}
-        </div>
-      </label>`;
-        })
-            .join('\n');
-        return `<div class="bg-gray-50 rounded-xl overflow-hidden">
-      <div class="flex items-center justify-between px-4 py-3 bg-gray-100">
-        <div class="flex items-center gap-3">
-          <div class="w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm">
-            ${(0, exports.escapeHtml)(appName.charAt(0).toUpperCase())}
-          </div>
-          <span class="font-semibold text-gray-900">${(0, exports.escapeHtml)(appName)}</span>
-        </div>
-        <button type="button" class="text-sm text-blue-600 hover:text-blue-800"
-          onclick="const container = this.closest('.bg-gray-50').querySelector('[data-app]'); const cbs = container.querySelectorAll('input[name=tools]'); const allChecked = [...cbs].every(cb => cb.checked); cbs.forEach(cb => cb.checked = !allChecked); updateCount();">
-          Toggle All
-        </button>
-      </div>
-      <div class="p-4 space-y-2" data-app="${(0, exports.escapeHtml)(appId)}">
-        ${toolItems}
-      </div>
-    </div>`;
-    })
-        .join('\n');
-    const updateCountScript = `
-  <script>
-    function updateCount() {
-      const all = document.querySelectorAll('input[name="tools"]');
-      const checked = document.querySelectorAll('input[name="tools"]:checked');
-      document.getElementById('selection-count').textContent = checked.length + ' of ' + all.length + ' selected';
-      document.getElementById('select-all').checked = all.length > 0 && all.length === checked.length;
-    }
-    document.querySelectorAll('input[name="tools"]').forEach(cb => cb.addEventListener('change', updateCount));
-  </script>`;
-    const content = `
-    <h1 class="text-3xl font-bold text-gray-900 mb-4">Select Tools to Enable</h1>
-    <p class="text-gray-600 mb-6">
-      Choose which tools ${(0, exports.escapeHtml)(clientName)} can access. You can change this later.
-    </p>
-
-    ${userInfo}
-
-    <form method="POST" action="${(0, exports.escapeHtml)(callbackPath)}" id="consent-form">
-      <input type="hidden" name="csrf" value="${(0, exports.escapeHtml)(csrfToken)}">
-      <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(pendingAuthId)}">
-
-      <!-- Select all toggle -->
-      <div class="flex items-center justify-between mb-6">
-        <label class="flex items-center gap-3 cursor-pointer">
-          <input type="checkbox" id="select-all" class="w-5 h-5 rounded border-gray-300" checked
-            onchange="document.querySelectorAll('input[name=tools]').forEach(cb => cb.checked = this.checked); updateCount();">
-          <span class="text-gray-700">Select all tools</span>
-        </label>
-        <span id="selection-count" class="text-sm text-gray-500">${tools.length} of ${tools.length} selected</span>
-      </div>
-
-      <!-- Tool groups by app -->
-      <div class="space-y-6 mb-8">
-        ${appGroups}
-      </div>
-
-      <!-- Buttons -->
-      <div class="flex gap-4">
-        <button type="button" onclick="history.back()"
-          class="flex-1 px-6 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 font-medium rounded-lg transition-colors">
-          Cancel
-        </button>
-        <button type="submit"
-          class="flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
-          Confirm Selection
-        </button>
-      </div>
-    </form>
-    ${updateCountScript}`;
-    return (0, base_layout_1.extraWideLayout)(content, { title: 'Select Tools' });
-}
-/**
- * Build simple login page
- */
-function buildLoginPage(params) {
-    const { clientName, scope, pendingAuthId, callbackPath } = params;
-    const scopesHtml = scope
-        ? `<div class="p-4 bg-gray-50 rounded-lg mb-6">
-        <p class="text-xs font-medium text-gray-500 uppercase tracking-wide mb-2">Requested permissions</p>
-        <p class="text-gray-700">${scope
-            .split(' ')
-            .map((s) => (0, exports.escapeHtml)(s))
-            .join(', ') || 'Default access'}</p>
-      </div>`
-        : '';
-    const content = `
-    <div class="bg-white rounded-2xl shadow-xl p-8">
-      <h1 class="text-3xl font-bold text-gray-900 mb-2 text-center">Sign In</h1>
-      <p class="text-gray-600 mb-8 text-center">Authorize access to ${(0, exports.escapeHtml)(clientName)}</p>
-
-      ${scopesHtml}
-
-      <form method="GET" action="${(0, exports.escapeHtml)(callbackPath)}">
-        <input type="hidden" name="pending_auth_id" value="${(0, exports.escapeHtml)(pendingAuthId)}">
-
-        <!-- Email -->
-        <div class="mb-4">
-          <label for="email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
-          <input type="email" id="email" name="email" required placeholder="you@example.com"
-            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-        </div>
-
-        <!-- Name (optional) -->
-        <div class="mb-6">
-          <label for="name" class="block text-sm font-medium text-gray-700 mb-2">Name (optional)</label>
-          <input type="text" id="name" name="name" placeholder="Your name"
-            class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
-        </div>
-
-        <!-- Submit -->
-        <button type="submit"
-          class="w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors">
-          Authorize
-        </button>
-      </form>
-
-      <p class="text-center text-sm text-gray-500 mt-6">Client: ${(0, exports.escapeHtml)(clientName)}</p>
-    </div>`;
-    return (0, base_layout_1.centeredCardLayout)(content, { title: 'Sign In' });
-}
-/**
- * Build error page
- */
-function buildErrorPage(params) {
-    const { error, description } = params;
-    const content = `
-    <div class="bg-white rounded-2xl shadow-xl p-8 text-center">
-      <!-- Error icon -->
-      <div class="flex justify-center mb-6">
-        <div class="w-16 h-16 rounded-full bg-red-100 flex items-center justify-center">
-          <svg class="w-8 h-8 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
-          </svg>
-        </div>
-      </div>
-
-      <h1 class="text-2xl font-bold text-gray-900 mb-4">Authorization Error</h1>
-      <p class="mb-4">
-        <code class="px-2 py-1 bg-gray-100 rounded text-red-600 font-mono text-sm">${(0, exports.escapeHtml)(error)}</code>
-      </p>
-      <p class="text-gray-600">${(0, exports.escapeHtml)(description)}</p>
-    </div>`;
-    return (0, base_layout_1.centeredCardLayout)(content, { title: 'Error' });
-}
-// ============================================
-// Legacy Compatibility - renderToHtml wrapper
-// ============================================
-/**
- * Simple wrapper for compatibility - just returns the HTML string
- * (Templates are already complete HTML documents)
- */
-function renderToHtml(html, _options) {
-    return html;
-}
-//# sourceMappingURL=templates.js.map

package/src/auth/ui/templates.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"templates.js","sourceRoot":"","sources":["../../../../src/auth/ui/templates.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Template Builders for OAuth UI\n *\n * Server-side HTML rendering with Tailwind CSS for OAuth authorization flows.\n * No build step required - pure runtime rendering with Tailwind CSS CDN.\n *\n * Features:\n * - OAuth consent page with multiple apps\n * - Incremental authorization page for single app\n * - Federated login page for multi-provider selection\n * - All pages use Tailwind CSS from CDN (no build required)\n * - Google Fonts (Inter) for modern typography\n *\n * Uses base-layout.ts for consistent HTML shell with CDN resources.\n */\n\nimport {\n  baseLayout,\n  wideLayout,\n  extraWideLayout,\n  centeredCardLayout,\n  escapeHtml as baseEscapeHtml,\n} from './base-layout';\n\n// ============================================\n// Types\n// ============================================\n\n/**\n * App information for authorization cards\n */\nexport interface AppAuthCard {\n  /** App identifier */\n  appId: string;\n  /** Display name */\n  appName: string;\n  /** App description */\n  description?: string;\n  /** Icon URL (optional, will use initials fallback) */\n  iconUrl?: string;\n  /** Scopes required by this app */\n  requiredScopes?: string[];\n}\n\n/**\n * Provider information for federated login\n */\nexport interface ProviderCard {\n  /** Provider identifier */\n  providerId: string;\n  /** Display name */\n  providerName: string;\n  /** Provider URL (for remote providers) */\n  providerUrl?: string;\n  /** Auth mode */\n  mode: string;\n  /** App IDs associated with this provider */\n  appIds: string[];\n  /** Whether this is the parent/primary provider */\n  isPrimary?: boolean;\n}\n\n/**\n * Tool information for consent page\n */\nexport interface ToolCard {\n  /** Tool identifier */\n  toolId: string;\n  /** Display name */\n  toolName: string;\n  /** Tool description */\n  description?: string;\n  /** Parent app ID */\n  appId: string;\n  /** Parent app name */\n  appName: string;\n}\n\n// ============================================\n// Utility Functions\n// ============================================\n\n/**\n * Escape HTML special characters\n * Re-exported from base-layout for convenience\n */\nexport const escapeHtml = baseEscapeHtml;\n\n// ============================================\n// Template Builders\n// ============================================\n\n/**\n * Build OAuth consent page with Tailwind\n * Shows all apps at once with Authorize/Skip buttons\n */\nexport function buildConsentPage(params: {\n  apps: AppAuthCard[];\n  clientName: string;\n  pendingAuthId: string;\n  csrfToken: string;\n  callbackPath: string;\n}): string {\n  const { apps, clientName, pendingAuthId, csrfToken, callbackPath } = params;\n\n  const appCards = apps.map((app) => buildAppCardHtml(app, pendingAuthId, csrfToken, callbackPath)).join('\\n');\n\n  const content = `\n    <h1 class=\"text-3xl font-bold text-gray-900 mb-4\">Authorize ${escapeHtml(clientName)}</h1>\n    <p class=\"text-gray-600 mb-8\">\n      Select which apps you want to authorize. You can skip apps and authorize them later when needed.\n    </p>\n\n    <div class=\"space-y-4\" id=\"app-list\">\n      ${appCards}\n    </div>\n\n    <div class=\"mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800\">\n      Skipped apps can be authorized later when you try to use their tools (progressive authorization).\n    </div>`;\n\n  return wideLayout(content, { title: `Authorize ${clientName}` });\n}\n\n/**\n * Build single app authorization card HTML\n */\nfunction buildAppCardHtml(app: AppAuthCard, pendingAuthId: string, csrfToken: string, callbackPath: string): string {\n  const icon = app.iconUrl\n    ? `<img src=\"${escapeHtml(app.iconUrl)}\" alt=\"${escapeHtml(\n        app.appName,\n      )}\" class=\"w-12 h-12 rounded-lg object-cover\">`\n    : `<div class=\"w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg\">${escapeHtml(\n        app.appName.charAt(0).toUpperCase(),\n      )}</div>`;\n\n  const description = app.description ? `<p class=\"text-sm text-gray-500\">${escapeHtml(app.description)}</p>` : '';\n\n  const scopes = app.requiredScopes?.length\n    ? `<div class=\"mb-4\">\n        <p class=\"text-xs font-medium text-gray-500 uppercase tracking-wide mb-2\">Permissions</p>\n        <div class=\"flex flex-wrap gap-2\">\n          ${app.requiredScopes\n            .map(\n              (scope) =>\n                `<span class=\"inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800\">${escapeHtml(\n                  scope,\n                )}</span>`,\n            )\n            .join('')}\n        </div>\n      </div>`\n    : '';\n\n  return `<div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 hover:shadow-md transition-shadow\" data-app-id=\"${escapeHtml(\n    app.appId,\n  )}\">\n    <div class=\"flex items-center gap-4 mb-4\">\n      ${icon}\n      <div class=\"flex-1\">\n        <h3 class=\"font-semibold text-gray-900\">${escapeHtml(app.appName)}</h3>\n        ${description}\n      </div>\n    </div>\n\n    ${scopes}\n\n    <form method=\"POST\" action=\"${escapeHtml(callbackPath)}\" class=\"flex gap-3 pt-4 border-t border-gray-100\">\n      <input type=\"hidden\" name=\"csrf\" value=\"${escapeHtml(csrfToken)}\">\n      <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(pendingAuthId)}\">\n      <input type=\"hidden\" name=\"app\" value=\"${escapeHtml(app.appId)}\">\n      <button type=\"submit\" name=\"action\" value=\"authorize\"\n        class=\"flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors\">\n        Authorize\n      </button>\n      <button type=\"submit\" name=\"action\" value=\"skip\"\n        class=\"px-4 py-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium rounded-lg transition-colors\">\n        Skip\n      </button>\n    </form>\n  </div>`;\n}\n\n/**\n * Build incremental auth page (single app) with Tailwind\n * Used when a tool requires authorization for a skipped app\n */\nexport function buildIncrementalAuthPage(params: {\n  app: AppAuthCard;\n  toolId: string;\n  sessionHint: string;\n  callbackPath: string;\n}): string {\n  const { app, toolId, sessionHint, callbackPath } = params;\n\n  const description = app.description ? `<p class=\"text-gray-500 mt-2\">${escapeHtml(app.description)}</p>` : '';\n\n  const content = `\n    <!-- Warning icon -->\n    <div class=\"flex justify-center mb-6\">\n      <div class=\"w-16 h-16 rounded-full bg-amber-100 flex items-center justify-center\">\n        <svg class=\"w-8 h-8 text-amber-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n          <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z\"/>\n        </svg>\n      </div>\n    </div>\n\n    <h1 class=\"text-2xl font-bold text-gray-900 text-center mb-2\">Authorization Required</h1>\n    <p class=\"text-gray-600 text-center mb-8\">\n      To use \"<span class=\"font-mono text-sm bg-gray-100 px-1 rounded\">${escapeHtml(\n        toolId,\n      )}</span>\", you need to authorize ${escapeHtml(app.appName)}.\n    </p>\n\n    <!-- App card -->\n    <div class=\"bg-white rounded-xl shadow-sm border border-gray-200 p-6 mb-6\">\n      <div class=\"flex items-center gap-4 mb-4\">\n        <div class=\"w-12 h-12 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg\">\n          ${escapeHtml(app.appName.charAt(0).toUpperCase())}\n        </div>\n        <div class=\"flex-1\">\n          <h3 class=\"font-semibold text-gray-900\">${escapeHtml(app.appName)}</h3>\n          ${description}\n        </div>\n      </div>\n\n      <form method=\"GET\" action=\"${escapeHtml(callbackPath)}\" class=\"flex gap-3 pt-4 border-t border-gray-100\">\n        <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(sessionHint)}\">\n        <input type=\"hidden\" name=\"app_id\" value=\"${escapeHtml(app.appId)}\">\n        <input type=\"hidden\" name=\"incremental\" value=\"true\">\n        <button type=\"button\" onclick=\"window.close()\"\n          class=\"flex-1 px-4 py-2.5 text-gray-600 hover:text-gray-900 hover:bg-gray-100 font-medium rounded-lg transition-colors\">\n          Cancel\n        </button>\n        <button type=\"submit\"\n          class=\"flex-1 bg-blue-600 hover:bg-blue-700 text-white font-medium py-2.5 px-4 rounded-lg transition-colors\">\n          Authorize\n        </button>\n      </form>\n    </div>\n\n    <div class=\"p-4 bg-amber-50 border border-amber-200 rounded-lg text-sm text-amber-800 text-center\">\n      This is an incremental authorization. Your existing session will be expanded to include ${escapeHtml(\n        app.appName,\n      )}.\n    </div>`;\n\n  return centeredCardLayout(content, { title: `Authorize ${app.appName}` });\n}\n\n/**\n * Build federated login page for multi-provider selection\n */\nexport function buildFederatedLoginPage(params: {\n  providers: ProviderCard[];\n  clientName: string;\n  pendingAuthId: string;\n  csrfToken: string;\n  callbackPath: string;\n}): string {\n  const { providers, clientName, pendingAuthId, csrfToken, callbackPath } = params;\n\n  const providerCards = providers\n    .map((provider) => {\n      const isPrimaryBadge = provider.isPrimary\n        ? `<span class=\"px-2 py-0.5 text-xs font-medium bg-blue-600 text-white rounded-full\">Primary</span>`\n        : '';\n\n      const providerUrl = provider.providerUrl\n        ? `<p class=\"text-xs text-gray-400 font-mono truncate\">${escapeHtml(provider.providerUrl)}</p>`\n        : '';\n\n      const appIds =\n        provider.appIds.length > 0\n          ? `<p class=\"text-xs text-gray-500 mt-1\">Apps: ${provider.appIds.map((id) => escapeHtml(id)).join(', ')}</p>`\n          : '';\n\n      return `<label class=\"flex items-start gap-4 p-4 bg-white border-2 border-gray-200 rounded-xl cursor-pointer hover:border-blue-300 transition-colors has-[:checked]:border-blue-500 has-[:checked]:bg-blue-50\">\n      <input type=\"checkbox\" name=\"providers\" value=\"${escapeHtml(provider.providerId)}\"\n        class=\"mt-1 w-5 h-5 rounded border-gray-300\" ${provider.isPrimary ? 'checked' : ''}>\n      <div class=\"flex-1\">\n        <div class=\"flex items-center gap-2 mb-1\">\n          <span class=\"font-semibold text-gray-900\">${escapeHtml(provider.providerName)}</span>\n          ${isPrimaryBadge}\n        </div>\n        <p class=\"text-sm text-gray-500\">Mode: ${escapeHtml(provider.mode)}</p>\n        ${providerUrl}\n        ${appIds}\n      </div>\n    </label>`;\n    })\n    .join('\\n');\n\n  const content = `\n    <h1 class=\"text-3xl font-bold text-gray-900 mb-4\">Select Authorization Providers</h1>\n    <p class=\"text-gray-600 mb-8\">\n      ${escapeHtml(clientName)} uses multiple authentication providers. Select which ones you want to authorize.\n    </p>\n\n    <form method=\"GET\" action=\"${escapeHtml(callbackPath)}\" id=\"federated-form\">\n      <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(pendingAuthId)}\">\n      <input type=\"hidden\" name=\"federated\" value=\"true\">\n\n      <!-- Select all toggle -->\n      <label class=\"flex items-center gap-3 mb-6 cursor-pointer\">\n        <input type=\"checkbox\" id=\"select-all\" class=\"w-5 h-5 rounded border-gray-300\"\n          onchange=\"document.querySelectorAll('input[name=providers]').forEach(cb => cb.checked = this.checked)\">\n        <span class=\"text-gray-700\">Select all providers</span>\n      </label>\n\n      <!-- Provider cards -->\n      <div class=\"space-y-4 mb-8\">\n        ${providerCards}\n      </div>\n\n      <!-- Email input -->\n      <div class=\"mb-6\">\n        <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">Email</label>\n        <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"you@example.com\"\n          class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n      </div>\n\n      <!-- Buttons -->\n      <div class=\"flex gap-4\">\n        <button type=\"button\"\n          class=\"flex-1 px-6 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 font-medium rounded-lg transition-colors\"\n          onclick=\"document.querySelectorAll('input[name=providers]').forEach(cb => cb.checked = false); document.getElementById('federated-form').submit();\">\n          Skip All\n        </button>\n        <button type=\"submit\"\n          class=\"flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors\">\n          Continue\n        </button>\n      </div>\n    </form>\n\n    <div class=\"mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg text-sm text-blue-800\">\n      Skipped providers can be authorized later when you try to use their tools (progressive authorization).\n    </div>`;\n\n  return wideLayout(content, { title: 'Select Providers' });\n}\n\n/**\n * Build consent page for tool selection\n */\nexport function buildToolConsentPage(params: {\n  tools: ToolCard[];\n  clientName: string;\n  pendingAuthId: string;\n  csrfToken: string;\n  callbackPath: string;\n  userName?: string;\n  userEmail?: string;\n}): string {\n  const { tools, clientName, pendingAuthId, csrfToken, callbackPath, userName, userEmail } = params;\n\n  // Group tools by app\n  const toolsByApp: Record<string, { appName: string; tools: ToolCard[] }> = {};\n  for (const tool of tools) {\n    if (!toolsByApp[tool.appId]) {\n      toolsByApp[tool.appId] = { appName: tool.appName, tools: [] };\n    }\n    toolsByApp[tool.appId].tools.push(tool);\n  }\n\n  const userInfo =\n    userName || userEmail\n      ? `<div class=\"p-3 bg-gray-50 rounded-lg mb-6 text-sm\">\n        <span class=\"text-gray-500\">Signed in as: </span>\n        <span class=\"font-medium text-gray-900\">${escapeHtml(userName || userEmail || '')}</span>\n      </div>`\n      : '';\n\n  const appGroups = Object.entries(toolsByApp)\n    .map(([appId, { appName, tools: appTools }]) => {\n      const toolItems = appTools\n        .map((tool) => {\n          const desc = tool.description\n            ? `<p class=\"text-sm text-gray-500 mt-0.5\">${escapeHtml(tool.description)}</p>`\n            : '';\n          return `<label class=\"flex items-start gap-3 p-3 bg-white rounded-lg cursor-pointer hover:bg-gray-50\">\n        <input type=\"checkbox\" name=\"tools\" value=\"${escapeHtml(\n          tool.toolId,\n        )}\" class=\"mt-0.5 w-5 h-5 rounded border-gray-300\" checked>\n        <div>\n          <span class=\"font-medium text-gray-900\">${escapeHtml(tool.toolName)}</span>\n          ${desc}\n        </div>\n      </label>`;\n        })\n        .join('\\n');\n\n      return `<div class=\"bg-gray-50 rounded-xl overflow-hidden\">\n      <div class=\"flex items-center justify-between px-4 py-3 bg-gray-100\">\n        <div class=\"flex items-center gap-3\">\n          <div class=\"w-8 h-8 rounded-lg bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold text-sm\">\n            ${escapeHtml(appName.charAt(0).toUpperCase())}\n          </div>\n          <span class=\"font-semibold text-gray-900\">${escapeHtml(appName)}</span>\n        </div>\n        <button type=\"button\" class=\"text-sm text-blue-600 hover:text-blue-800\"\n          onclick=\"const container = this.closest('.bg-gray-50').querySelector('[data-app]'); const cbs = container.querySelectorAll('input[name=tools]'); const allChecked = [...cbs].every(cb => cb.checked); cbs.forEach(cb => cb.checked = !allChecked); updateCount();\">\n          Toggle All\n        </button>\n      </div>\n      <div class=\"p-4 space-y-2\" data-app=\"${escapeHtml(appId)}\">\n        ${toolItems}\n      </div>\n    </div>`;\n    })\n    .join('\\n');\n\n  const updateCountScript = `\n  <script>\n    function updateCount() {\n      const all = document.querySelectorAll('input[name=\"tools\"]');\n      const checked = document.querySelectorAll('input[name=\"tools\"]:checked');\n      document.getElementById('selection-count').textContent = checked.length + ' of ' + all.length + ' selected';\n      document.getElementById('select-all').checked = all.length > 0 && all.length === checked.length;\n    }\n    document.querySelectorAll('input[name=\"tools\"]').forEach(cb => cb.addEventListener('change', updateCount));\n  </script>`;\n\n  const content = `\n    <h1 class=\"text-3xl font-bold text-gray-900 mb-4\">Select Tools to Enable</h1>\n    <p class=\"text-gray-600 mb-6\">\n      Choose which tools ${escapeHtml(clientName)} can access. You can change this later.\n    </p>\n\n    ${userInfo}\n\n    <form method=\"POST\" action=\"${escapeHtml(callbackPath)}\" id=\"consent-form\">\n      <input type=\"hidden\" name=\"csrf\" value=\"${escapeHtml(csrfToken)}\">\n      <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(pendingAuthId)}\">\n\n      <!-- Select all toggle -->\n      <div class=\"flex items-center justify-between mb-6\">\n        <label class=\"flex items-center gap-3 cursor-pointer\">\n          <input type=\"checkbox\" id=\"select-all\" class=\"w-5 h-5 rounded border-gray-300\" checked\n            onchange=\"document.querySelectorAll('input[name=tools]').forEach(cb => cb.checked = this.checked); updateCount();\">\n          <span class=\"text-gray-700\">Select all tools</span>\n        </label>\n        <span id=\"selection-count\" class=\"text-sm text-gray-500\">${tools.length} of ${tools.length} selected</span>\n      </div>\n\n      <!-- Tool groups by app -->\n      <div class=\"space-y-6 mb-8\">\n        ${appGroups}\n      </div>\n\n      <!-- Buttons -->\n      <div class=\"flex gap-4\">\n        <button type=\"button\" onclick=\"history.back()\"\n          class=\"flex-1 px-6 py-3 text-gray-700 bg-gray-100 hover:bg-gray-200 font-medium rounded-lg transition-colors\">\n          Cancel\n        </button>\n        <button type=\"submit\"\n          class=\"flex-1 px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors\">\n          Confirm Selection\n        </button>\n      </div>\n    </form>\n    ${updateCountScript}`;\n\n  return extraWideLayout(content, { title: 'Select Tools' });\n}\n\n/**\n * Build simple login page\n */\nexport function buildLoginPage(params: {\n  clientName: string;\n  scope: string;\n  pendingAuthId: string;\n  callbackPath: string;\n}): string {\n  const { clientName, scope, pendingAuthId, callbackPath } = params;\n\n  const scopesHtml = scope\n    ? `<div class=\"p-4 bg-gray-50 rounded-lg mb-6\">\n        <p class=\"text-xs font-medium text-gray-500 uppercase tracking-wide mb-2\">Requested permissions</p>\n        <p class=\"text-gray-700\">${\n          scope\n            .split(' ')\n            .map((s) => escapeHtml(s))\n            .join(', ') || 'Default access'\n        }</p>\n      </div>`\n    : '';\n\n  const content = `\n    <div class=\"bg-white rounded-2xl shadow-xl p-8\">\n      <h1 class=\"text-3xl font-bold text-gray-900 mb-2 text-center\">Sign In</h1>\n      <p class=\"text-gray-600 mb-8 text-center\">Authorize access to ${escapeHtml(clientName)}</p>\n\n      ${scopesHtml}\n\n      <form method=\"GET\" action=\"${escapeHtml(callbackPath)}\">\n        <input type=\"hidden\" name=\"pending_auth_id\" value=\"${escapeHtml(pendingAuthId)}\">\n\n        <!-- Email -->\n        <div class=\"mb-4\">\n          <label for=\"email\" class=\"block text-sm font-medium text-gray-700 mb-2\">Email</label>\n          <input type=\"email\" id=\"email\" name=\"email\" required placeholder=\"you@example.com\"\n            class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n        </div>\n\n        <!-- Name (optional) -->\n        <div class=\"mb-6\">\n          <label for=\"name\" class=\"block text-sm font-medium text-gray-700 mb-2\">Name (optional)</label>\n          <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Your name\"\n            class=\"w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500\">\n        </div>\n\n        <!-- Submit -->\n        <button type=\"submit\"\n          class=\"w-full px-6 py-3 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors\">\n          Authorize\n        </button>\n      </form>\n\n      <p class=\"text-center text-sm text-gray-500 mt-6\">Client: ${escapeHtml(clientName)}</p>\n    </div>`;\n\n  return centeredCardLayout(content, { title: 'Sign In' });\n}\n\n/**\n * Build error page\n */\nexport function buildErrorPage(params: { error: string; description: string }): string {\n  const { error, description } = params;\n\n  const content = `\n    <div class=\"bg-white rounded-2xl shadow-xl p-8 text-center\">\n      <!-- Error icon -->\n      <div class=\"flex justify-center mb-6\">\n        <div class=\"w-16 h-16 rounded-full bg-red-100 flex items-center justify-center\">\n          <svg class=\"w-8 h-8 text-red-600\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n            <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M6 18L18 6M6 6l12 12\"/>\n          </svg>\n        </div>\n      </div>\n\n      <h1 class=\"text-2xl font-bold text-gray-900 mb-4\">Authorization Error</h1>\n      <p class=\"mb-4\">\n        <code class=\"px-2 py-1 bg-gray-100 rounded text-red-600 font-mono text-sm\">${escapeHtml(error)}</code>\n      </p>\n      <p class=\"text-gray-600\">${escapeHtml(description)}</p>\n    </div>`;\n\n  return centeredCardLayout(content, { title: 'Error' });\n}\n\n// ============================================\n// Legacy Compatibility - renderToHtml wrapper\n// ============================================\n\n/**\n * Simple wrapper for compatibility - just returns the HTML string\n * (Templates are already complete HTML documents)\n */\nexport function renderToHtml(html: string, _options?: { title?: string }): string {\n  return html;\n}\n"]}