@kya-os/consent 0.1.8 → 0.1.11

package/dist/components/mcp-consent.js

@@ -12,19 +12,19 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     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;
 };
-import { LitElement, html, css, nothing } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { AUTH_MODES } from '../types/modes.types.js';
-import { resolveConsentConfig, determineAuthMode } from '../resolution/resolve-config.js';
+import { LitElement, html, css, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { AUTH_MODES, getProviderTypeForAuthMode, } from "../types/modes.types.js";
+import { resolveConsentConfig, determineAuthMode, } from "../resolution/resolve-config.js";
 // Import component definitions for side effects
-import './consent-shell.js';
-import './consent-button.js';
-import './consent-checkbox.js';
-import './consent-input.js';
-import './consent-permissions.js';
-import './consent-terms.js';
-import './consent-oauth-button.js';
-import './consent-otp-input.js';
+import "./consent-shell.js";
+import "./consent-button.js";
+import "./consent-checkbox.js";
+import "./consent-input.js";
+import "./consent-permissions.js";
+import "./consent-terms.js";
+import "./consent-oauth-button.js";
+import "./consent-otp-input.js";
 /**
  * McpConsent - Full consent flow component
  *
@@ -53,7 +53,7 @@ let McpConsent = class McpConsent extends LitElement {
         /**
          * Tool being authorized
          */
-        this.tool = '';
+        this.tool = "";
         /**
          * Permission scopes requested
          */
@@ -61,26 +61,48 @@ let McpConsent = class McpConsent extends LitElement {
         /**
          * Agent DID
          */
-        this.agentDid = '';
+        this.agentDid = "";
         /**
          * Session ID
          */
-        this.sessionId = '';
+        this.sessionId = "";
         /**
          * Project ID
          */
-        this.projectId = '';
+        this.projectId = "";
         /**
          * Server URL for form submission
          */
-        this.serverUrl = '';
+        this.serverUrl = "";
         /**
          * Agent name for display
          */
-        this.agentName = '';
+        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 = "";
         this.currentMode = AUTH_MODES.CONSENT_ONLY;
         this.loading = false;
-        this.step = 'consent';
+        this.step = "consent";
         this.termsAccepted = false;
         this.formData = {};
         this.resendCooldown = 0;
@@ -104,47 +126,40 @@ let McpConsent = class McpConsent extends LitElement {
         }
     }
     updated(changedProperties) {
-        if (changedProperties.has('config') || changedProperties.has('agentName')) {
+        if (changedProperties.has("config") || changedProperties.has("agentName")) {
             this.resolved = resolveConsentConfig(this.config, this.agentName);
         }
-        if (changedProperties.has('mode') && this.mode) {
+        if (changedProperties.has("mode") && this.mode) {
             this.currentMode = this.mode;
         }
         // Update selected scopes when scopes change
-        if (changedProperties.has('scopes')) {
+        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);
+            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.
      *
-     * This maps auth modes to the provider_type expected by the consent service:
-     * - consent-only → 'none'
-     * - credentials → 'credential'
-     * - oauth → 'oauth2' (or specific provider from oauthIdentity)
-     * - magic-link → 'magic_link'
-     * - otp → 'otp'
+     * 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() {
-        switch (this.currentMode) {
-            case AUTH_MODES.CREDENTIALS:
-                return 'credential';
-            case AUTH_MODES.OAUTH:
-                return this.oauthIdentity?.provider ?? 'oauth2';
-            case AUTH_MODES.MAGIC_LINK:
-                return 'magic_link';
-            case AUTH_MODES.OTP:
-                return 'otp';
-            case AUTH_MODES.CONSENT_ONLY:
-            default:
-                return 'none';
+        // For OAuth, prefer the specific provider name if available
+        if (this.currentMode === AUTH_MODES.OAUTH && this.oauthIdentity?.provider) {
+            return this.oauthIdentity.provider;
         }
+        // Use the centralized type-safe mapping
+        return getProviderTypeForAuthMode(this.currentMode);
     }
     /**
      * Handle consent approval - TRIGGERS DELEGATIONCREDENTIAL (VC) CREATION
@@ -172,11 +187,11 @@ let McpConsent = class McpConsent extends LitElement {
             return;
         }
         if (!this.termsAccepted && this.resolved?.terms.required) {
-            this.error = 'Please accept the terms to continue';
+            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';
+            this.error = "Please select at least one permission";
             return;
         }
         this.loading = true;
@@ -185,41 +200,80 @@ let McpConsent = class McpConsent extends LitElement {
             // 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);
+            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());
-            formData.append('termsAccepted', String(this.termsAccepted));
+            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);
+            }
             // Add custom form data (e.g., username/password for credential auth)
+            // DEBUG: Log form data before submission
+            console.log("[mcp-consent] handleApprove formData:", {
+                keys: Object.keys(this.formData),
+                hasUsername: "username" in this.formData,
+                hasPassword: "password" in this.formData,
+                usernameValue: this.formData["username"],
+                passwordLength: this.formData["password"]?.length ?? "null/undefined",
+            });
             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',
+                method: "POST",
                 body: formData,
             });
             if (!response.ok) {
                 const errorData = await response.json().catch(() => ({}));
-                throw new Error(errorData.message || 'Approval failed');
+                throw new Error(errorData.message || "Approval failed");
             }
             const result = await response.json();
-            // VC created successfully - show success screen
-            this.step = 'success';
-            this.dispatchEvent(new CustomEvent('mcp-consent:approve', {
-                detail: { success: true, redirectUrl: result.redirectUrl },
+            // 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', {
+            this.error = e instanceof Error ? e.message : "Unknown error";
+            this.dispatchEvent(new CustomEvent("mcp-consent:error", {
                 detail: { error: this.error },
                 bubbles: true,
                 composed: true,
@@ -230,7 +284,7 @@ let McpConsent = class McpConsent extends LitElement {
         }
     }
     handleDeny() {
-        this.dispatchEvent(new CustomEvent('mcp-consent:deny', {
+        this.dispatchEvent(new CustomEvent("mcp-consent:deny", {
             bubbles: true,
             composed: true,
         }));
@@ -241,6 +295,13 @@ let McpConsent = class McpConsent extends LitElement {
         this.termsAccepted = e.detail.checked;
     }
     handleInputChange(name, value) {
+        // DEBUG: Log what's being captured from inputs
+        console.log("[mcp-consent] handleInputChange:", {
+            name,
+            valueType: typeof value,
+            valueLength: value?.length ?? "null/undefined",
+            value: name === "password" ? "***" : value,
+        });
         this.formData = { ...this.formData, [name]: value };
     }
     handleResendOtp() {
@@ -262,14 +323,14 @@ let McpConsent = class McpConsent extends LitElement {
             }
         }, 1000);
         // Dispatch event for parent to handle actual resend
-        this.dispatchEvent(new CustomEvent('mcp-consent:resend-otp', {
+        this.dispatchEvent(new CustomEvent("mcp-consent:resend-otp", {
             bubbles: true,
             composed: true,
         }));
     }
     // === RENDER METHODS ===
     renderAgentInfo() {
-        const agentDisplay = this.agentName || 'this agent';
+        const agentDisplay = this.agentName || "this agent";
         return html `
       <div class="agent-info">
         <div class="agent-icon">
@@ -289,7 +350,7 @@ let McpConsent = class McpConsent extends LitElement {
             <strong>${agentDisplay}</strong> is requesting permission to
             ${this.tool
             ? html `use the <strong>${this.tool}</strong> tool`
-            : 'access your data'}
+            : "access your data"}
             on your behalf.
           </p>
         </div>
@@ -305,7 +366,7 @@ let McpConsent = class McpConsent extends LitElement {
         return html `
       <p class="permissions-header">
         ${this.resolved?.ui.permissionsHeader ??
-            'The agent is requesting the following permissions:'}
+            "The agent is requesting the following permissions:"}
       </p>
       <div class="permissions">
         <consent-permissions
@@ -321,8 +382,8 @@ let McpConsent = class McpConsent extends LitElement {
         const days = this.resolved?.expirationDays ?? 7;
         return html `
       <p class="expiration">
-        ${this.resolved?.ui.expirationText ?? 'This delegation will expire in'}
-        <strong>${days} ${days === 1 ? 'day' : 'days'}</strong>
+        ${this.resolved?.ui.expirationText ?? "This delegation will expire in"}
+        <strong>${days} ${days === 1 ? "day" : "days"}</strong>
       </p>
     `;
     }
@@ -334,7 +395,7 @@ let McpConsent = class McpConsent extends LitElement {
         <consent-terms
           name="termsAccepted"
           text=${this.resolved.terms.text}
-          url=${this.resolved.terms.url ?? ''}
+          url=${this.resolved.terms.url ?? ""}
           ?required=${this.resolved.terms.required}
           @change=${this.handleTermsChange}
         ></consent-terms>
@@ -350,7 +411,7 @@ let McpConsent = class McpConsent extends LitElement {
         return html `
       <div slot="footer">
         <consent-button variant="secondary" @click=${this.handleDeny}>
-          ${this.resolved?.ui.cancelButtonText ?? 'Cancel'}
+          ${this.resolved?.ui.cancelButtonText ?? "Cancel"}
         </consent-button>
         <consent-button
           variant="primary"
@@ -358,7 +419,7 @@ let McpConsent = class McpConsent extends LitElement {
           ?disabled=${this.resolved?.terms.required && !this.termsAccepted}
           @click=${this.handleApprove}
         >
-          ${this.resolved?.ui.submitButtonText ?? 'Allow access'}
+          ${this.resolved?.ui.submitButtonText ?? "Allow access"}
         </consent-button>
       </div>
     `;
@@ -367,11 +428,11 @@ let McpConsent = class McpConsent extends LitElement {
     renderConsentOnly() {
         return 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'}
+        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()}
@@ -386,11 +447,11 @@ let McpConsent = class McpConsent extends LitElement {
         const creds = this.resolved?.credentials;
         return 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'}
+        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()}
@@ -399,21 +460,35 @@ let McpConsent = class McpConsent extends LitElement {
             <consent-input
               type="text"
               name="username"
-              label=${creds?.usernameLabel ?? 'Username'}
-              placeholder=${creds?.usernamePlaceholder ?? 'Enter your username'}
+              label=${creds?.usernameLabel ?? "Username"}
+              placeholder=${creds?.usernamePlaceholder ?? "Enter your username"}
               autocomplete="username"
               required
-              @input=${(e) => this.handleInputChange('username', e.detail.value)}
+              @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'}
+              label=${creds?.passwordLabel ?? "Password"}
+              placeholder=${creds?.passwordPlaceholder ?? "Enter your password"}
               autocomplete="current-password"
               required
-              @input=${(e) => this.handleInputChange('password', e.detail.value)}
+              @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>
 
@@ -438,15 +513,15 @@ let McpConsent = class McpConsent extends LitElement {
     }
     renderOAuth() {
         const oauth = this.resolved?.oauth;
-        const provider = oauth?.providerId ?? 'oauth';
-        const providerName = oauth?.providerName ?? 'OAuth Provider';
+        const provider = oauth?.providerId ?? "oauth";
+        const providerName = oauth?.providerName ?? "OAuth Provider";
         return 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'}
+        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()}
@@ -473,11 +548,11 @@ let McpConsent = class McpConsent extends LitElement {
         const ml = this.resolved?.magicLink;
         return 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'}
+        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()}
@@ -486,11 +561,18 @@ let McpConsent = class McpConsent extends LitElement {
             <consent-input
               type="email"
               name="email"
-              label=${ml?.emailLabel ?? 'Email'}
-              placeholder=${ml?.emailPlaceholder ?? 'Enter your email address'}
+              label=${ml?.emailLabel ?? "Email"}
+              placeholder=${ml?.emailPlaceholder ?? "Enter your email address"}
               autocomplete="email"
               required
-              @input=${(e) => this.handleInputChange('email', e.detail.value)}
+              @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>
 
@@ -508,7 +590,7 @@ let McpConsent = class McpConsent extends LitElement {
             ?disabled=${this.resolved?.terms.required && !this.termsAccepted}
             @click=${this.handleApprove}
           >
-            ${ml?.buttonText ?? 'Send magic link'}
+            ${ml?.buttonText ?? "Send magic link"}
           </consent-button>
         </div>
       </consent-shell>
@@ -518,28 +600,35 @@ let McpConsent = class McpConsent extends LitElement {
         const otp = this.resolved?.otp;
         return 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'}
+        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'}
+              ${otp?.instructions ??
+            "Enter the verification code sent to your device"}
             </p>
             <consent-otp-input
               length=${otp?.digits ?? 6}
               name="otp"
               auto-focus
               @complete=${(e) => {
-            this.handleInputChange('otp', e.detail.value);
+            const customEvent = e;
+            const value = customEvent.detail?.value ?? "";
+            this.handleInputChange("otp", value);
             this.handleApprove();
         }}
-              @input=${(e) => this.handleInputChange('otp', e.detail.value)}
+              @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?
@@ -550,7 +639,7 @@ let McpConsent = class McpConsent extends LitElement {
               >
                 ${this.resendCooldown > 0
             ? `Resend in ${this.resendCooldown}s`
-            : 'Resend'}
+            : "Resend"}
               </button>
             </div>
           </div>
@@ -565,11 +654,11 @@ let McpConsent = class McpConsent extends LitElement {
         const success = this.resolved?.success;
         return 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'}
+        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">
@@ -584,10 +673,10 @@ let McpConsent = class McpConsent extends LitElement {
                 <polyline points="20 6 9 17 4 12" />
               </svg>
             </div>
-            <h2 class="success-title">${success?.title ?? 'Access Granted'}</h2>
+            <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.'}
+            "You have successfully granted access. You can now close this window."}
             </p>
           </div>
         </div>
@@ -598,7 +687,7 @@ let McpConsent = class McpConsent extends LitElement {
             full-width
             @click=${() => window.close()}
           >
-            ${success?.continueButtonText ?? 'Close'}
+            ${success?.continueButtonText ?? "Close"}
           </consent-button>
         </div>
       </consent-shell>
@@ -606,7 +695,7 @@ let McpConsent = class McpConsent extends LitElement {
     }
     // === MAIN RENDER ===
     render() {
-        if (this.step === 'success') {
+        if (this.step === "success") {
             return this.renderSuccess();
         }
         switch (this.currentMode) {
@@ -628,8 +717,9 @@ McpConsent.styles = 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;
+      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);
@@ -736,7 +826,7 @@ McpConsent.styles = css `
 
     .divider::before,
     .divider::after {
-      content: '';
+      content: "";
       flex: 1;
       height: 1px;
       background: #e5e7eb;
@@ -823,7 +913,7 @@ __decorate([
                 }
             },
             toAttribute: (value) => {
-                return value ? JSON.stringify(value) : '';
+                return value ? JSON.stringify(value) : "";
             },
         },
     })
@@ -855,24 +945,36 @@ __decorate([
     })
 ], McpConsent.prototype, "scopes", void 0);
 __decorate([
-    property({ type: String, attribute: 'agent-did' })
+    property({ type: String, attribute: "agent-did" })
 ], McpConsent.prototype, "agentDid", void 0);
 __decorate([
-    property({ type: String, attribute: 'session-id' })
+    property({ type: String, attribute: "session-id" })
 ], McpConsent.prototype, "sessionId", void 0);
 __decorate([
-    property({ type: String, attribute: 'project-id' })
+    property({ type: String, attribute: "project-id" })
 ], McpConsent.prototype, "projectId", void 0);
 __decorate([
-    property({ type: String, attribute: 'server-url' })
+    property({ type: String, attribute: "server-url" })
 ], McpConsent.prototype, "serverUrl", void 0);
 __decorate([
-    property({ type: String, attribute: 'agent-name' })
+    property({ type: String, attribute: "agent-name" })
 ], McpConsent.prototype, "agentName", void 0);
+__decorate([
+    property({ type: String, attribute: "provider" })
+], McpConsent.prototype, "provider", void 0);
+__decorate([
+    property({ type: String, attribute: "csrf-token" })
+], McpConsent.prototype, "csrfToken", void 0);
+__decorate([
+    property({ type: String, attribute: "credential-provider-type" })
+], McpConsent.prototype, "credentialProviderType", void 0);
+__decorate([
+    property({ type: String, attribute: "credential-provider" })
+], McpConsent.prototype, "credentialProvider", void 0);
 __decorate([
     property({
         type: Object,
-        attribute: 'oauth-identity',
+        attribute: "oauth-identity",
         converter: {
             fromAttribute: (value) => {
                 if (!value)
@@ -885,7 +987,7 @@ __decorate([
                 }
             },
             toAttribute: (value) => {
-                return value ? JSON.stringify(value) : '';
+                return value ? JSON.stringify(value) : "";
             },
         },
     })
@@ -918,7 +1020,7 @@ __decorate([
     state()
 ], McpConsent.prototype, "selectedScopes", void 0);
 McpConsent = __decorate([
-    customElement('mcp-consent')
+    customElement("mcp-consent")
 ], McpConsent);
 export { McpConsent };
 //# sourceMappingURL=mcp-consent.js.map