@kya-os/consent 0.1.13 → 0.1.14

package/dist/cjs/components/mcp-consent.js

@@ -0,0 +1,1034 @@
+"use strict";
+/**
+ * MCP Consent Composite Web Component
+ *
+ * The main entry point component that orchestrates the full consent flow.
+ * Handles all auth modes, form submission, and state management.
+ *
+ * @module components/mcp-consent
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.McpConsent = void 0;
+const lit_1 = require("lit");
+const decorators_js_1 = require("lit/decorators.js");
+const modes_types_js_1 = require("../types/modes.types.js");
+const resolve_config_js_1 = require("../resolution/resolve-config.js");
+// Import component definitions for side effects
+require("./consent-shell.js");
+require("./consent-button.js");
+require("./consent-checkbox.js");
+require("./consent-input.js");
+require("./consent-permissions.js");
+require("./consent-terms.js");
+require("./consent-oauth-button.js");
+require("./consent-otp-input.js");
+/**
+ * McpConsent - Full consent flow component
+ *
+ * @example
+ * ```html
+ * <mcp-consent
+ *   config='{"branding": {"primaryColor": "#2563eb"}}'
+ *   tool="greet"
+ *   scopes='["read:profile"]'
+ *   agent-did="did:key:z123"
+ *   session-id="sess_123"
+ *   project-id="proj_123"
+ *   server-url="https://example.com"
+ * ></mcp-consent>
+ * ```
+ *
+ * @fires mcp-consent:approve - User approved, delegation created
+ * @fires mcp-consent:deny - User clicked cancel
+ * @fires mcp-consent:error - Submission failed
+ */
+let McpConsent = class McpConsent extends lit_1.LitElement {
+    constructor() {
+        // === INPUT PROPERTIES (from config) ===
+        super(...arguments);
+        // === CONSENT DATA (hidden form fields) ===
+        /**
+         * Tool being authorized
+         */
+        this.tool = "";
+        /**
+         * Permission scopes requested
+         */
+        this.scopes = [];
+        /**
+         * Agent DID
+         */
+        this.agentDid = "";
+        /**
+         * Session ID
+         */
+        this.sessionId = "";
+        /**
+         * Project ID
+         */
+        this.projectId = "";
+        /**
+         * Server URL for form submission
+         */
+        this.serverUrl = "";
+        /**
+         * Agent name for display
+         */
+        this.agentName = "";
+        /**
+         * Auth provider identifier (e.g., 'credentials', 'google', 'github')
+         * Required for credential auth and OAuth flows to identify the provider
+         */
+        this.provider = "";
+        /**
+         * CSRF token for form security
+         * Required for credential auth flows to prevent CSRF attacks
+         */
+        this.csrfToken = "";
+        // === POST-CREDENTIAL AUTH PARAMS (for 3-screen flow) ===
+        /**
+         * Credential provider type from prior auth step
+         * Set when redirecting from credential auth → clickwrap page
+         * Used to ensure delegation is created with correct authorization type ('password')
+         */
+        this.credentialProviderType = "";
+        /**
+         * Credential provider name from prior auth step
+         * Set when redirecting from credential auth → clickwrap page
+         */
+        this.credentialProvider = "";
+        /**
+         * User DID from prior auth step
+         * Set when redirecting from credential auth → clickwrap page
+         * CRITICAL: Bypasses KV eventual consistency issues by passing userDid directly
+         */
+        this.userDid = "";
+        this.currentMode = modes_types_js_1.AUTH_MODES.CONSENT_ONLY;
+        this.loading = false;
+        this.step = "consent";
+        this.termsAccepted = false;
+        this.formData = {};
+        this.resendCooldown = 0;
+        this.selectedScopes = [];
+    }
+    // === LIFECYCLE ===
+    connectedCallback() {
+        super.connectedCallback();
+        this.resolved = (0, resolve_config_js_1.resolveConsentConfig)(this.config, this.agentName);
+        this.currentMode =
+            this.mode ?? (0, resolve_config_js_1.determineAuthMode)(this.config) ?? modes_types_js_1.AUTH_MODES.CONSENT_ONLY;
+        // Initialize selected scopes with all requested scopes
+        this.selectedScopes = [...this.scopes];
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        // Clean up interval timer to prevent memory leaks
+        if (this.resendCooldownInterval !== undefined) {
+            clearInterval(this.resendCooldownInterval);
+            this.resendCooldownInterval = undefined;
+        }
+    }
+    updated(changedProperties) {
+        if (changedProperties.has("config") || changedProperties.has("agentName")) {
+            this.resolved = (0, resolve_config_js_1.resolveConsentConfig)(this.config, this.agentName);
+        }
+        if (changedProperties.has("mode") && this.mode) {
+            this.currentMode = this.mode;
+        }
+        // Update selected scopes when scopes change
+        if (changedProperties.has("scopes")) {
+            this.selectedScopes = [...this.scopes];
+        }
+        // Update CSS variables from resolved config
+        if (this.resolved) {
+            this.style.setProperty("--consent-primary", this.resolved.branding.primaryColor);
+            this.style.setProperty("--consent-secondary", this.resolved.branding.secondaryColor);
+        }
+    }
+    // === FORM SUBMISSION ===
+    /**
+     * Get the provider_type based on the current auth mode.
+     *
+     * Uses the centralized AUTH_MODE_TO_PROVIDER_TYPE mapping from modes.types.ts
+     * to ensure type-safety and DRY principle compliance.
+     *
+     * For OAuth mode, returns the specific provider from oauthIdentity if available.
+     *
+     * @see getProviderTypeForAuthMode - The canonical mapping function
+     */
+    getProviderType() {
+        // For OAuth, prefer the specific provider name if available
+        if (this.currentMode === modes_types_js_1.AUTH_MODES.OAUTH && this.oauthIdentity?.provider) {
+            return this.oauthIdentity.provider;
+        }
+        // Use the centralized type-safe mapping
+        return (0, modes_types_js_1.getProviderTypeForAuthMode)(this.currentMode);
+    }
+    /**
+     * Handle consent approval - TRIGGERS DELEGATIONCREDENTIAL (VC) CREATION
+     *
+     * This is the critical method where the user's consent is submitted.
+     * When this succeeds, a DelegationCredential (W3C Verifiable Credential)
+     * is created on the server, authorizing the agent to act on behalf of the user.
+     *
+     * ## Flow Context
+     *
+     * This method is called when the user clicks "Approve" on the Consent Screen:
+     * - Consent Only: [Consent Screen] → handleApprove() → [Success Screen]
+     * - Auth flows: [Auth Screen] → [Consent Screen] → handleApprove() → [Success Screen]
+     *
+     * In both cases, the VC is created HERE, not during authentication.
+     * Authentication only verifies identity; consent grants the delegation.
+     *
+     * @fires mcp-consent:approve - Emitted when consent is successfully submitted
+     * @fires mcp-consent:error - Emitted if consent submission fails
+     */
+    async handleApprove(e) {
+        e?.preventDefault();
+        // Guard against duplicate submissions
+        if (this.loading) {
+            return;
+        }
+        if (!this.termsAccepted && this.resolved?.terms.required) {
+            this.error = "Please accept the terms to continue";
+            return;
+        }
+        if (this.scopes.length > 0 && this.selectedScopes.length === 0) {
+            this.error = "Please select at least one permission";
+            return;
+        }
+        this.loading = true;
+        this.error = undefined;
+        try {
+            // Build consent approval request
+            // The server creates the DelegationCredential (VC) when this request succeeds
+            const formData = new FormData();
+            formData.append("tool", this.tool);
+            formData.append("scopes", JSON.stringify(this.selectedScopes));
+            formData.append("agent_did", this.agentDid);
+            formData.append("session_id", this.sessionId);
+            formData.append("project_id", this.projectId);
+            formData.append("auth_mode", this.currentMode);
+            // Set provider_type based on auth mode to ensure correct server-side routing
+            // This is stored in delegation metadata to track what auth method was used
+            formData.append("provider_type", this.getProviderType());
+            // Include provider for credential auth and OAuth flows - REQUIRED by consent.service.ts validation
+            if (this.provider) {
+                formData.append("provider", this.provider);
+            }
+            // Include CSRF token for security - REQUIRED by consent.service.ts for credential auth
+            if (this.csrfToken) {
+                formData.append("csrf_token", this.csrfToken);
+            }
+            formData.append("termsAccepted", String(this.termsAccepted));
+            // Include credential auth params if present (3-screen flow: Auth → Clickwrap → Success)
+            // These are set when redirecting from credential auth page to clickwrap page
+            // They ensure the delegation is created with correct authorization.type ('password')
+            if (this.credentialProviderType) {
+                formData.append("credential_provider_type", this.credentialProviderType);
+            }
+            if (this.credentialProvider) {
+                formData.append("credential_provider", this.credentialProvider);
+            }
+            // CRITICAL: Pass userDid directly to bypass KV eventual consistency issues
+            // Without this, the delegation might be stored with wrong key due to stale KV read
+            if (this.userDid) {
+                formData.append("user_did", this.userDid);
+            }
+            // Add custom form data (e.g., username/password for credential auth)
+            Object.entries(this.formData).forEach(([key, value]) => {
+                formData.append(key, value);
+            });
+            // Submit consent - server creates DelegationCredential on success
+            const response = await fetch(`${this.serverUrl}/consent/approve`, {
+                method: "POST",
+                body: formData,
+            });
+            if (!response.ok) {
+                const errorData = await response.json().catch(() => ({}));
+                throw new Error(errorData.message || "Approval failed");
+            }
+            const result = await response.json();
+            // Check if server wants us to redirect (e.g., credential auth → clickwrap page)
+            // This implements the 3-screen flow: Auth → Clickwrap → Success
+            if (result.redirectUrl) {
+                // Dispatch event before redirect for any listeners that need to know
+                this.dispatchEvent(new CustomEvent("mcp-consent:approve", {
+                    detail: { success: true, redirectUrl: result.redirectUrl },
+                    bubbles: true,
+                    composed: true,
+                }));
+                // Navigate to the redirect URL (clickwrap page after credential/OAuth auth)
+                // The clickwrap page will show user info + scopes, then create the delegation
+                window.location.href = result.redirectUrl;
+                return; // Don't show success yet - the redirect page will handle it
+            }
+            // No redirect - VC/delegation created successfully, show success screen
+            this.step = "success";
+            this.dispatchEvent(new CustomEvent("mcp-consent:approve", {
+                detail: { success: true, delegationId: result.delegation_id },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        catch (e) {
+            this.error = e instanceof Error ? e.message : "Unknown error";
+            this.dispatchEvent(new CustomEvent("mcp-consent:error", {
+                detail: { error: this.error },
+                bubbles: true,
+                composed: true,
+            }));
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    handleDeny() {
+        this.dispatchEvent(new CustomEvent("mcp-consent:deny", {
+            bubbles: true,
+            composed: true,
+        }));
+        // Try to close the window/tab
+        window.close();
+    }
+    handleTermsChange(e) {
+        this.termsAccepted = e.detail.checked;
+    }
+    handleInputChange(name, value) {
+        this.formData = { ...this.formData, [name]: value };
+    }
+    handleResendOtp() {
+        if (this.resendCooldown > 0) {
+            return;
+        }
+        const cooldownSeconds = this.resolved?.otp?.resendCooldown ?? 60;
+        this.resendCooldown = cooldownSeconds;
+        // Clear any existing interval before starting a new one
+        if (this.resendCooldownInterval !== undefined) {
+            clearInterval(this.resendCooldownInterval);
+        }
+        // Start countdown timer (stored in class property for cleanup)
+        this.resendCooldownInterval = setInterval(() => {
+            this.resendCooldown--;
+            if (this.resendCooldown <= 0) {
+                clearInterval(this.resendCooldownInterval);
+                this.resendCooldownInterval = undefined;
+            }
+        }, 1000);
+        // Dispatch event for parent to handle actual resend
+        this.dispatchEvent(new CustomEvent("mcp-consent:resend-otp", {
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // === RENDER METHODS ===
+    renderAgentInfo() {
+        const agentDisplay = this.agentName || "this agent";
+        return (0, lit_1.html) `
+      <div class="agent-info">
+        <div class="agent-icon">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+          >
+            <circle cx="12" cy="12" r="10" />
+            <path d="M12 16v-4M12 8h.01" />
+          </svg>
+        </div>
+        <div class="agent-text">
+          <p>
+            <strong>${agentDisplay}</strong> is requesting permission to
+            ${this.tool
+            ? (0, lit_1.html) `use the <strong>${this.tool}</strong> tool`
+            : "access your data"}
+            on your behalf.
+          </p>
+        </div>
+      </div>
+    `;
+    }
+    handlePermissionsChange(e) {
+        this.selectedScopes = e.detail.selected;
+    }
+    renderPermissions() {
+        if (this.scopes.length === 0)
+            return lit_1.nothing;
+        return (0, lit_1.html) `
+      <p class="permissions-header">
+        ${this.resolved?.ui.permissionsHeader ??
+            "The agent is requesting the following permissions:"}
+      </p>
+      <div class="permissions">
+        <consent-permissions
+          .scopes=${this.scopes}
+          interactive
+          select-all
+          @change=${this.handlePermissionsChange}
+        ></consent-permissions>
+      </div>
+    `;
+    }
+    renderExpiration() {
+        const days = this.resolved?.expirationDays ?? 7;
+        return (0, lit_1.html) `
+      <p class="expiration">
+        ${this.resolved?.ui.expirationText ?? "This delegation will expire in"}
+        <strong>${days} ${days === 1 ? "day" : "days"}</strong>
+      </p>
+    `;
+    }
+    renderTerms() {
+        if (!this.resolved?.terms)
+            return lit_1.nothing;
+        return (0, lit_1.html) `
+      <div class="terms">
+        <consent-terms
+          name="termsAccepted"
+          text=${this.resolved.terms.text}
+          url=${this.resolved.terms.url ?? ""}
+          ?required=${this.resolved.terms.required}
+          @change=${this.handleTermsChange}
+        ></consent-terms>
+      </div>
+    `;
+    }
+    renderError() {
+        if (!this.error)
+            return lit_1.nothing;
+        return (0, lit_1.html) `<div class="error-message">${this.error}</div>`;
+    }
+    renderFooter() {
+        return (0, lit_1.html) `
+      <div slot="footer">
+        <consent-button variant="secondary" @click=${this.handleDeny}>
+          ${this.resolved?.ui.cancelButtonText ?? "Cancel"}
+        </consent-button>
+        <consent-button
+          variant="primary"
+          ?loading=${this.loading}
+          ?disabled=${this.resolved?.terms.required && !this.termsAccepted}
+          @click=${this.handleApprove}
+        >
+          ${this.resolved?.ui.submitButtonText ?? "Allow access"}
+        </consent-button>
+      </div>
+    `;
+    }
+    // === MODE-SPECIFIC RENDERS ===
+    renderConsentOnly() {
+        return (0, lit_1.html) `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? "Permission Request"}
+        company-name=${this.resolved?.branding.companyName ?? ""}
+        logo-url=${this.resolved?.branding.logoUrl ?? ""}
+        primary-color=${this.resolved?.branding.primaryColor ?? "#2563eb"}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? "#dbeafe"}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+          ${this.renderPermissions()} ${this.renderExpiration()}
+          ${this.renderTerms()}
+        </div>
+        ${this.renderFooter()}
+      </consent-shell>
+    `;
+    }
+    renderCredentials() {
+        const creds = this.resolved?.credentials;
+        return (0, lit_1.html) `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? "Sign In"}
+        company-name=${this.resolved?.branding.companyName ?? ""}
+        logo-url=${this.resolved?.branding.logoUrl ?? ""}
+        primary-color=${this.resolved?.branding.primaryColor ?? "#2563eb"}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? "#dbeafe"}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+
+          <div class="form-fields">
+            <consent-input
+              type="text"
+              name="username"
+              label=${creds?.usernameLabel ?? "Username"}
+              placeholder=${creds?.usernamePlaceholder ?? "Enter your username"}
+              autocomplete="username"
+              required
+              @input=${(e) => {
+            // Handle both CustomEvent (from consent-input) and native InputEvent
+            const customEvent = e;
+            const value = customEvent.detail?.value ??
+                e.target?.value ??
+                "";
+            this.handleInputChange("username", value);
+        }}
+            ></consent-input>
+
+            <consent-input
+              type="password"
+              name="password"
+              label=${creds?.passwordLabel ?? "Password"}
+              placeholder=${creds?.passwordPlaceholder ?? "Enter your password"}
+              autocomplete="current-password"
+              required
+              @input=${(e) => {
+            // Handle both CustomEvent (from consent-input) and native InputEvent
+            const customEvent = e;
+            const value = customEvent.detail?.value ??
+                e.target?.value ??
+                "";
+            this.handleInputChange("password", value);
+        }}
+            ></consent-input>
+          </div>
+
+          ${creds?.showForgotPassword && creds.forgotPasswordUrl
+            ? (0, lit_1.html) `
+                <p style="text-align: right; margin-bottom: 1rem;">
+                  <a
+                    href=${creds.forgotPasswordUrl}
+                    style="font-size: 0.75rem; color: var(--_primary);"
+                  >
+                    Forgot password?
+                  </a>
+                </p>
+              `
+            : lit_1.nothing}
+          ${this.renderPermissions()} ${this.renderExpiration()}
+          ${this.renderTerms()}
+        </div>
+        ${this.renderFooter()}
+      </consent-shell>
+    `;
+    }
+    renderOAuth() {
+        const oauth = this.resolved?.oauth;
+        const provider = oauth?.providerId ?? "oauth";
+        const providerName = oauth?.providerName ?? "OAuth Provider";
+        return (0, lit_1.html) `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? "Sign In"}
+        company-name=${this.resolved?.branding.companyName ?? ""}
+        logo-url=${this.resolved?.branding.logoUrl ?? ""}
+        primary-color=${this.resolved?.branding.primaryColor ?? "#2563eb"}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? "#dbeafe"}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+
+          <consent-oauth-button
+            provider=${provider}
+            provider-name=${providerName}
+            url=${`${this.serverUrl}/oauth/${encodeURIComponent(provider)}?session_id=${encodeURIComponent(this.sessionId)}`}
+            button-text=${oauth?.buttonText ?? `Continue with ${providerName}`}
+            full-width
+          ></consent-oauth-button>
+
+          ${this.renderPermissions()}
+
+          <div class="divider">or</div>
+
+          ${this.renderExpiration()} ${this.renderTerms()}
+        </div>
+        ${this.renderFooter()}
+      </consent-shell>
+    `;
+    }
+    renderMagicLink() {
+        const ml = this.resolved?.magicLink;
+        return (0, lit_1.html) `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? "Sign In"}
+        company-name=${this.resolved?.branding.companyName ?? ""}
+        logo-url=${this.resolved?.branding.logoUrl ?? ""}
+        primary-color=${this.resolved?.branding.primaryColor ?? "#2563eb"}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? "#dbeafe"}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+
+          <div class="form-fields">
+            <consent-input
+              type="email"
+              name="email"
+              label=${ml?.emailLabel ?? "Email"}
+              placeholder=${ml?.emailPlaceholder ?? "Enter your email address"}
+              autocomplete="email"
+              required
+              @input=${(e) => {
+            // Handle both CustomEvent (from consent-input) and native InputEvent
+            const customEvent = e;
+            const value = customEvent.detail?.value ??
+                e.target?.value ??
+                "";
+            this.handleInputChange("email", value);
+        }}
+            ></consent-input>
+          </div>
+
+          ${this.renderPermissions()} ${this.renderExpiration()}
+          ${this.renderTerms()}
+        </div>
+
+        <div slot="footer">
+          <consent-button variant="secondary" @click=${this.handleDeny}>
+            Cancel
+          </consent-button>
+          <consent-button
+            variant="primary"
+            ?loading=${this.loading}
+            ?disabled=${this.resolved?.terms.required && !this.termsAccepted}
+            @click=${this.handleApprove}
+          >
+            ${ml?.buttonText ?? "Send magic link"}
+          </consent-button>
+        </div>
+      </consent-shell>
+    `;
+    }
+    renderOTP() {
+        const otp = this.resolved?.otp;
+        return (0, lit_1.html) `
+      <consent-shell
+        page-title=${this.resolved?.ui.title ?? "Verify Code"}
+        company-name=${this.resolved?.branding.companyName ?? ""}
+        logo-url=${this.resolved?.branding.logoUrl ?? ""}
+        primary-color=${this.resolved?.branding.primaryColor ?? "#2563eb"}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? "#dbeafe"}
+      >
+        <div slot="content">
+          ${this.renderError()} ${this.renderAgentInfo()}
+
+          <div class="otp-section">
+            <p class="otp-instructions">
+              ${otp?.instructions ??
+            "Enter the verification code sent to your device"}
+            </p>
+            <consent-otp-input
+              length=${otp?.digits ?? 6}
+              name="otp"
+              auto-focus
+              @complete=${(e) => {
+            const customEvent = e;
+            const value = customEvent.detail?.value ?? "";
+            this.handleInputChange("otp", value);
+            this.handleApprove();
+        }}
+              @input=${(e) => {
+            const customEvent = e;
+            const value = customEvent.detail?.value ?? "";
+            this.handleInputChange("otp", value);
+        }}
+            ></consent-otp-input>
+            <div class="otp-resend">
+              Didn't receive the code?
+              <button
+                type="button"
+                ?disabled=${this.resendCooldown > 0}
+                @click=${this.handleResendOtp}
+              >
+                ${this.resendCooldown > 0
+            ? `Resend in ${this.resendCooldown}s`
+            : "Resend"}
+              </button>
+            </div>
+          </div>
+
+          ${this.renderPermissions()} ${this.renderTerms()}
+        </div>
+        ${this.renderFooter()}
+      </consent-shell>
+    `;
+    }
+    renderSuccess() {
+        const success = this.resolved?.success;
+        return (0, lit_1.html) `
+      <consent-shell
+        page-title=${success?.title ?? "Access Granted"}
+        company-name=${this.resolved?.branding.companyName ?? ""}
+        logo-url=${this.resolved?.branding.logoUrl ?? ""}
+        primary-color=${this.resolved?.branding.primaryColor ?? "#2563eb"}
+        secondary-color=${this.resolved?.branding.secondaryColor ?? "#dbeafe"}
+      >
+        <div slot="content">
+          <div class="success-view">
+            <div class="success-icon">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+              >
+                <polyline points="20 6 9 17 4 12" />
+              </svg>
+            </div>
+            <h2 class="success-title">${success?.title ?? "Access Granted"}</h2>
+            <p class="success-description">
+              ${success?.description ??
+            "You have successfully granted access. You can now close this window."}
+            </p>
+          </div>
+        </div>
+
+        <div slot="footer">
+          <consent-button
+            variant="primary"
+            full-width
+            @click=${() => window.close()}
+          >
+            ${success?.continueButtonText ?? "Close"}
+          </consent-button>
+        </div>
+      </consent-shell>
+    `;
+    }
+    // === MAIN RENDER ===
+    render() {
+        // Use previewStep if provided (for WYSIWYG editor), otherwise fall back to internal step
+        const displayStep = this.previewStep ?? this.step;
+        if (displayStep === "success") {
+            return this.renderSuccess();
+        }
+        // For "consent" previewStep or normal flow, render based on auth mode
+        switch (this.currentMode) {
+            case modes_types_js_1.AUTH_MODES.CREDENTIALS:
+                return this.renderCredentials();
+            case modes_types_js_1.AUTH_MODES.OAUTH:
+                return this.renderOAuth();
+            case modes_types_js_1.AUTH_MODES.MAGIC_LINK:
+                return this.renderMagicLink();
+            case modes_types_js_1.AUTH_MODES.OTP:
+                return this.renderOTP();
+            case modes_types_js_1.AUTH_MODES.CONSENT_ONLY:
+            default:
+                return this.renderConsentOnly();
+        }
+    }
+};
+exports.McpConsent = McpConsent;
+McpConsent.styles = (0, lit_1.css) `
+    :host {
+      display: block;
+      /* System font stack with font smoothing for crisp text */
+      font-family:
+        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
+        Arial, sans-serif;
+      -webkit-font-smoothing: antialiased;
+      -moz-osx-font-smoothing: grayscale;
+      --_primary: var(--consent-primary, #2563eb);
+      --_secondary: var(--consent-secondary, #dbeafe);
+    }
+
+    /* Agent info box */
+    .agent-info {
+      display: flex;
+      gap: 1rem;
+      padding: 1rem;
+      background: #f9fafb;
+      border-radius: 0.5rem;
+      margin-bottom: 1rem;
+    }
+
+    .agent-icon {
+      width: 40px;
+      height: 40px;
+      background: var(--_secondary);
+      border-radius: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .agent-icon svg {
+      width: 20px;
+      height: 20px;
+      color: var(--_primary);
+    }
+
+    .agent-text {
+      flex: 1;
+    }
+
+    .agent-text p {
+      margin: 0;
+      font-size: 0.875rem;
+      color: #374151;
+      line-height: 1.5;
+    }
+
+    .agent-text strong {
+      color: #111827;
+    }
+
+    /* Permissions section */
+    .permissions-header {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin-bottom: 0.5rem;
+    }
+
+    .permissions {
+      margin-bottom: 1rem;
+    }
+
+    /* Expiration */
+    .expiration {
+      font-size: 0.75rem;
+      color: #6b7280;
+      margin-top: 1rem;
+    }
+
+    .expiration strong {
+      color: #374151;
+    }
+
+    /* Terms */
+    .terms {
+      margin-top: 1.5rem;
+    }
+
+    /* Error message */
+    .error-message {
+      background: #fef2f2;
+      border: 1px solid #fecaca;
+      border-radius: 0.5rem;
+      padding: 0.75rem 1rem;
+      margin-bottom: 1rem;
+      color: #dc2626;
+      font-size: 0.875rem;
+    }
+
+    /* Form fields */
+    .form-fields {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+      margin-bottom: 1rem;
+    }
+
+    /* Divider */
+    .divider {
+      display: flex;
+      align-items: center;
+      gap: 1rem;
+      margin: 1.5rem 0;
+      color: #6b7280;
+      font-size: 0.75rem;
+    }
+
+    .divider::before,
+    .divider::after {
+      content: "";
+      flex: 1;
+      height: 1px;
+      background: #e5e7eb;
+    }
+
+    /* Success view */
+    .success-view {
+      text-align: center;
+      padding: 2rem 0;
+    }
+
+    .success-icon {
+      width: 64px;
+      height: 64px;
+      background: #d1fae5;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 1.5rem;
+    }
+
+    .success-icon svg {
+      width: 32px;
+      height: 32px;
+      color: #059669;
+    }
+
+    .success-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      color: #111827;
+      margin: 0 0 0.5rem;
+    }
+
+    .success-description {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin: 0 0 1.5rem;
+    }
+
+    /* OTP section */
+    .otp-section {
+      text-align: center;
+      margin-bottom: 1.5rem;
+    }
+
+    .otp-instructions {
+      font-size: 0.875rem;
+      color: #6b7280;
+      margin-bottom: 1rem;
+    }
+
+    .otp-resend {
+      margin-top: 1rem;
+      font-size: 0.75rem;
+    }
+
+    .otp-resend button {
+      background: none;
+      border: none;
+      color: var(--_primary);
+      cursor: pointer;
+      text-decoration: underline;
+    }
+
+    .otp-resend button:disabled {
+      color: #9ca3af;
+      cursor: not-allowed;
+    }
+  `;
+__decorate([
+    (0, decorators_js_1.property)({
+        type: Object,
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return undefined;
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return undefined;
+                }
+            },
+            toAttribute: (value) => {
+                return value ? JSON.stringify(value) : "";
+            },
+        },
+    })
+], McpConsent.prototype, "config", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], McpConsent.prototype, "mode", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String })
+], McpConsent.prototype, "tool", void 0);
+__decorate([
+    (0, decorators_js_1.property)({
+        type: Array,
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return [];
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return [];
+                }
+            },
+            toAttribute: (value) => {
+                return JSON.stringify(value);
+            },
+        },
+    })
+], McpConsent.prototype, "scopes", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "agent-did" })
+], McpConsent.prototype, "agentDid", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "session-id" })
+], McpConsent.prototype, "sessionId", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "project-id" })
+], McpConsent.prototype, "projectId", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "server-url" })
+], McpConsent.prototype, "serverUrl", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "agent-name" })
+], McpConsent.prototype, "agentName", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "provider" })
+], McpConsent.prototype, "provider", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "csrf-token" })
+], McpConsent.prototype, "csrfToken", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "preview-step" })
+], McpConsent.prototype, "previewStep", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "credential-provider-type" })
+], McpConsent.prototype, "credentialProviderType", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "credential-provider" })
+], McpConsent.prototype, "credentialProvider", void 0);
+__decorate([
+    (0, decorators_js_1.property)({ type: String, attribute: "user-did" })
+], McpConsent.prototype, "userDid", void 0);
+__decorate([
+    (0, decorators_js_1.property)({
+        type: Object,
+        attribute: "oauth-identity",
+        converter: {
+            fromAttribute: (value) => {
+                if (!value)
+                    return undefined;
+                try {
+                    return JSON.parse(value);
+                }
+                catch {
+                    return undefined;
+                }
+            },
+            toAttribute: (value) => {
+                return value ? JSON.stringify(value) : "";
+            },
+        },
+    })
+], McpConsent.prototype, "oauthIdentity", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "resolved", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "currentMode", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "loading", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "error", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "step", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "termsAccepted", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "formData", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "resendCooldown", void 0);
+__decorate([
+    (0, decorators_js_1.state)()
+], McpConsent.prototype, "selectedScopes", void 0);
+exports.McpConsent = McpConsent = __decorate([
+    (0, decorators_js_1.customElement)("mcp-consent")
+], McpConsent);
+//# sourceMappingURL=mcp-consent.js.map