/**
* 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
*/
import { LitElement, TemplateResult } from "lit";
import type { ConsentConfig } from "../types/config.types.js";
import type { AuthMode } from "../types/modes.types.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";
import "./consent-capabilities-screen.js";
import type { AgentMetadata, CapabilityGroup, ConsentTheme, CedarTemplateContext } from "../types/capabilities.types.js";
/**
* OAuth Identity from callback
* NOTE: Must match OAuthIdentitySchema in api.schemas.ts
*/
export interface OAuthIdentity {
/** OAuth provider identifier (e.g., 'google', 'microsoft') */
provider: string;
/** Subject identifier from the OAuth provider */
subject: string;
/** User email from OAuth provider */
email?: string;
/** User display name from OAuth provider */
name?: string;
}
/**
* Consent approval event detail
*/
export interface ConsentApproveDetail {
success: boolean;
/** Redirect URL for multi-step flows (e.g., credential auth → clickwrap) */
redirectUrl?: string;
/** Delegation ID when consent is approved and VC is created */
delegationId?: string;
}
/**
* Consent error event detail
*/
export interface ConsentErrorDetail {
error: string;
code?: string;
}
/**
* McpConsent - Full consent flow component
*
* @example
* ```html
*
* ```
*
* @fires mcp-consent:approve - User approved, delegation created
* @fires mcp-consent:deny - User clicked cancel
* @fires mcp-consent:error - Submission failed
*/
export declare class McpConsent extends LitElement {
/**
* Consent configuration (JSON string or object)
*/
config?: ConsentConfig;
/**
* Override auth mode (otherwise auto-detected from config)
* Maps to 'auth-mode' attribute in HTML (generated by shell.ts)
*/
mode?: AuthMode;
/**
* Tool being authorized
*/
tool: string;
/**
* Permission scopes requested
*/
scopes: string[];
/**
* Agent DID
*/
agentDid: string;
/**
* Session ID
*/
sessionId: string;
/**
* Project ID
*/
projectId: string;
/**
* Server URL for form submission
*/
serverUrl: string;
/**
* Agent name for display
*/
agentName: string;
/**
* Auth provider identifier (e.g., 'credentials', 'google', 'github')
* Required for credential auth and OAuth flows to identify the provider
*/
provider: string;
/**
* CSRF token for form security
* Required for credential auth flows to prevent CSRF attacks
*/
csrfToken: string;
/**
* Optional: Force the component to display a specific step for preview purposes.
* When set, overrides the internal step state.
* Used by the WYSIWYG editor to show consent or success screens on demand.
*
* @example
* ```html
*
* ```
*/
previewStep?: "consent" | "success";
/**
* 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')
*/
credentialProviderType: string;
/**
* Credential provider name from prior auth step
* Set when redirecting from credential auth → clickwrap page
*/
credentialProvider: string;
/**
* User DID from prior auth step
* Set when redirecting from credential auth → clickwrap page
* CRITICAL: Bypasses KV eventual consistency issues by passing userDid directly
*/
userDid: string;
/**
* User email from credential provider response
* Set when redirecting from credential auth → clickwrap page
* Used for human-readable display in AgentShield dashboard (user_identifier)
*/
credentialUserEmail: string;
/**
* Provider's internal user ID from credential provider response
* Set when redirecting from credential auth → clickwrap page
* Used for business reference (e.g., Hardware World customer ID 696395)
*/
credentialProviderUserId: string;
/**
* Pre-built OAuth authorization URL
* When provided, the OAuth button links directly to this URL instead of
* constructing /oauth/:provider which may not exist as a route.
* Example: https://github.com/login/oauth/authorize?client_id=...
*/
oauthUrl: string;
/**
* Operator-authored capability groups. When present and non-empty, the new
* humanized consent layout (``) renders
* instead of the legacy raw scope list. Falls back to legacy when absent.
*/
capabilities: CapabilityGroup[];
/**
* Resolved agent identity tile (logo, vendor, surface, verified). Optional;
* when present, surfaced through ``.
*/
agentMetadata?: AgentMetadata;
/** Org name shown in headline + revocation footer (e.g. "Hardware World"). */
orgName: string;
/** Operator-set headline verb. Defaults to `use`. */
headlineVerb: string;
/** Path the user can visit to revoke (footer notice). */
revocationPath: string;
/** Days of inactivity before auto-revocation (footer notice). Defaults to 90. */
inactivityDays: number;
/** Theme for the capabilities screen (`light` / `dark`). */
consentTheme: ConsentTheme;
/** Optional URL backing the "How does this work?" link in the footer. */
howItWorksUrl: string;
/**
* Cedar template context bound at render time so per-row "View policy"
* disclosures render the actual compiled fragment, not the operator-authored
* placeholder source.
*/
cedarContext?: CedarTemplateContext;
/**
* Authorization type from tool protection config
* Determines the provider_type sent in credential form submissions
* Values: 'password', 'oauth2', 'none', etc.
* Default: 'password' for credential flows
*
* This is dynamically set based on the tool's authorization.type in AgentShield
* to ensure the delegation's authorization type matches the tool's expectations.
*/
authorizationType: string;
/**
* OAuth provider type from prior OAuth auth step
* Set when redirecting from OAuth callback → clickwrap page
* Used to ensure delegation is created with authorization.type 'oauth' instead of 'none'
*/
oauthProviderType: string;
/**
* OAuth identity from callback
*/
oauthIdentity?: OAuthIdentity;
private resolved?;
private currentMode;
private loading;
private error?;
private step;
private termsAccepted;
private formData;
private resendCooldown;
private selectedScopes;
private closeFailed;
/**
* Interval ID for resend cooldown timer
* Stored as class property for cleanup in disconnectedCallback
*/
private resendCooldownInterval?;
static styles: import("lit").CSSResult;
connectedCallback(): void;
disconnectedCallback(): void;
protected updated(changedProperties: Map): void;
/**
* 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 credential auth, uses the authorizationType from tool protection config
* to ensure the delegation's authorization type matches the tool's expectations.
*
* For OAuth mode, returns the specific provider from oauthIdentity if available.
*
* For post-OAuth clickwrap (consent-only mode with oauthProviderType set),
* returns 'oauth' to ensure delegation is created with correct authorization type.
*
* @see getProviderTypeForAuthMode - The canonical mapping function
*/
private getProviderType;
/**
* 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
*/
private handleApprove;
private handleDeny;
private handleClose;
private handleTermsChange;
private handleInputChange;
private handleResendOtp;
private renderAgentInfo;
private handlePermissionsChange;
private renderPermissions;
private renderExpiration;
private renderTerms;
private renderError;
private renderFooter;
private renderConsentOnly;
private renderCredentials;
private renderOAuth;
private renderMagicLink;
private renderOTP;
/**
* Format the expiry date based on expirationDays from config.
* Returns a formatted date string like "Jan 7, 2026"
*/
private formatExpiryDate;
/**
* Get the display name for the agent.
* Returns agent name if available, otherwise falls back to agent DID.
*/
private getAgentDisplayName;
private renderSuccess;
render(): TemplateResult;
/**
* Render the new humanized capability layout. Selection state is owned by
* ``; on `capabilities-allow`, we hydrate the
* legacy form-data path (selectedScopes, terms accepted) and reuse the
* existing handleApprove submission logic.
*/
private renderCapabilitiesScreen;
private onCapabilitiesAllow;
}
declare global {
interface HTMLElementTagNameMap {
"mcp-consent": McpConsent;
}
}
//# sourceMappingURL=mcp-consent.d.ts.map