@kya-os/consent 0.1.38 → 0.1.41

package/dist/consent.js

@@ -2616,6 +2616,1492 @@ ConsentOTPInput = __decorateClass([
   t3("consent-otp-input")
 ], ConsentOTPInput);
 
+// src/copy/tokens.ts
+var CONSENT_COPY_TOKENS = {
+  eyebrow: {
+    /** Light theme (consent screen). */
+    permissionRequest: "PERMISSION REQUEST",
+    /** Dark theme (gateway). `{Brand}` → operator-set brand name. */
+    gatewayBrand: "{Brand} Gateway"
+  },
+  headline: {
+    /**
+     * `{Agent}` → agent display name (serif italic at render time).
+     * `{Verb}`  → operator verb, default "use".
+     * `{Org}`   → organization display name (serif italic at render time).
+     */
+    template: "{Agent} would like to {Verb} at {Org} for you."
+  },
+  subhead: {
+    /** `{Agent}` → agent display name. */
+    template: "Pick what {Agent} is allowed to do on your behalf. You stay in charge \u2014 change or cancel anytime."
+  },
+  agentTile: {
+    verifiedPill: "Verified",
+    unverifiedPill: "UNVERIFIED",
+    /** `{Vendor}` → vendor name. `{Surface}` → surface label. */
+    metaTemplate: "Made by {Vendor} \xB7 Asking from your {Surface} \xB7 {Connected}",
+    connectedJustNow: "Connected just now",
+    /** `{Minutes}` → minutes since connection. */
+    connectedMinutesAgo: "Connected {Minutes} min ago"
+  },
+  section: {
+    /** `{Agent}` → agent display name (uppercased at render time). */
+    capabilitiesHeader: "WHAT {Agent} CAN DO FOR YOU",
+    tapToToggle: "Tap to toggle",
+    /** Used in the dark gateway theme. */
+    permissionsRequested: "PERMISSIONS REQUESTED"
+  },
+  capabilityRow: {
+    higherRiskChip: "HIGHER RISK",
+    viewPolicyLink: "View policy",
+    /** Disclosure title above the raw Cedar. */
+    rawPolicyTitle: "Cedar policy",
+    /** Disclosure title above the plain-language gloss. */
+    glossTitle: "What this allows",
+    /** Used in the gloss when no resource is extractable. */
+    glossUnknownResource: "this deployment"
+  },
+  footer: {
+    /**
+     * `{RevocationPath}` → e.g. "Account → Connected Agents".
+     * `{Org}`            → organization display name.
+     */
+    revocationTemplate: "You can change or revoke any of these permissions anytime under {RevocationPath} at {Org}.",
+    /** `{Days}` → inactivity days, default 90. */
+    inactivityTemplate: "Permissions automatically expire after {Days} days of inactivity."
+  },
+  actions: {
+    /** Light theme primary. `{Agent}` → agent display name. */
+    allowAgentTemplate: "Allow {Agent}",
+    /** Dark theme primary. */
+    allowAccess: "Allow access",
+    /** Light theme secondary. */
+    notNow: "Not now",
+    /** Dark theme secondary. */
+    deny: "Deny"
+  },
+  attribution: {
+    /** Light theme. */
+    protectedBy: "Protected by Checkpoint",
+    /** Dark theme. */
+    securedBy: "Secured by Checkpoint",
+    howThisWorks: "How does this work?"
+  }
+};
+function formatToken(template, values) {
+  return template.replace(/\{(\w+)\}/g, (match, key) => {
+    const value = values[key];
+    return value === void 0 ? match : String(value);
+  });
+}
+
+// src/components/consent-agent-header.ts
+var ConsentAgentHeader = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.agentName = "";
+    this.vendor = "";
+    this.surfaceLabel = "";
+    this.verified = false;
+    this.logoUrl = "";
+    this.connectedAt = "";
+  }
+  renderConnectedFragment() {
+    if (!this.connectedAt) {
+      return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+    }
+    const ts = Date.parse(this.connectedAt);
+    if (Number.isNaN(ts)) {
+      return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+    }
+    const minutes = Math.max(0, Math.floor((Date.now() - ts) / 6e4));
+    if (minutes < 1) {
+      return CONSENT_COPY_TOKENS.agentTile.connectedJustNow;
+    }
+    return formatToken(CONSENT_COPY_TOKENS.agentTile.connectedMinutesAgo, {
+      Minutes: minutes
+    });
+  }
+  renderMeta() {
+    if (!this.vendor && !this.surfaceLabel) {
+      return this.renderConnectedFragment();
+    }
+    return formatToken(CONSENT_COPY_TOKENS.agentTile.metaTemplate, {
+      Vendor: this.vendor || "\u2014",
+      Surface: this.surfaceLabel || "this device",
+      Connected: this.renderConnectedFragment()
+    });
+  }
+  render() {
+    const initial = (this.agentName || "?").trim().charAt(0).toUpperCase();
+    const verifiedLabel = this.verified ? CONSENT_COPY_TOKENS.agentTile.verifiedPill : CONSENT_COPY_TOKENS.agentTile.unverifiedPill;
+    const verifiedClass = this.verified ? "verified" : "unverified";
+    return b2`
+      <div class="tile" part="tile">
+        <div class="logo" aria-hidden="true">
+          ${this.logoUrl ? b2`<img src="${this.logoUrl}" alt="" />` : b2`<div class="placeholder">${initial}</div>`}
+        </div>
+        <div class="body">
+          <div class="row-name">
+            <span class="name">${this.agentName || A}</span>
+            <span class="pill ${verifiedClass}" part="pill">
+              ${verifiedLabel}
+            </span>
+          </div>
+          <div class="meta">${this.renderMeta()}</div>
+        </div>
+      </div>
+    `;
+  }
+};
+ConsentAgentHeader.styles = i`
+    :host {
+      display: block;
+      width: 100%;
+    }
+
+    .tile {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 18px;
+      border-radius: 14px;
+      background: var(--cs-surface-inset, transparent);
+      border: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .logo {
+      width: 44px;
+      height: 44px;
+      border-radius: 12px;
+      flex-shrink: 0;
+      background: var(--cs-surface-card, #fff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      border: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .logo img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .logo .placeholder {
+      width: 100%;
+      height: 100%;
+      background: var(--cs-surface-accent, #0F172A);
+      color: var(--cs-surface-accent-text, #fff);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 18px;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      min-width: 0;
+    }
+
+    .row-name {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+    }
+
+    .name {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--cs-text-primary, #0F172A);
+      letter-spacing: -0.01em;
+    }
+
+    .pill {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 11px;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+    }
+
+    .pill.verified {
+      background: var(--cs-pill-verified-bg, #DCFCE7);
+      color: var(--cs-pill-verified-text, #166534);
+    }
+
+    .pill.unverified {
+      background: var(--cs-pill-unverified-bg, #F1F5F9);
+      color: var(--cs-pill-unverified-text, #475569);
+      letter-spacing: 0.08em;
+    }
+
+    .meta {
+      font-size: 12px;
+      color: var(--cs-text-tertiary, #64748B);
+      line-height: 1.5;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "agentName", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "vendor", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "surfaceLabel", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentAgentHeader.prototype, "verified", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "logoUrl", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentAgentHeader.prototype, "connectedAt", 2);
+ConsentAgentHeader = __decorateClass([
+  t3("consent-agent-header")
+], ConsentAgentHeader);
+
+// src/cedar/explain.ts
+var ACTION_SINGLE = /action\s*==\s*Action::"([^"]+)"/g;
+var ACTION_LIST = /action\s+in\s*\[([^\]]+)\]/g;
+var ACTION_STRING_IN_LIST = /Action::"([^"]+)"/g;
+var RESOURCE_IN = /resource\s+in\s+([^,)\n]+)/i;
+var RESOURCE_EQ = /resource\s*==\s*([^,)\n]+)/i;
+var CONDITION_BLOCK = /(when|unless)\s*\{([^}]+)\}/g;
+function explainCedarFragment(cedar) {
+  return {
+    actions: extractActions(cedar),
+    resource: extractResource(cedar),
+    conditions: extractConditions(cedar)
+  };
+}
+function extractActions(cedar) {
+  const actions = /* @__PURE__ */ new Set();
+  for (const match of cedar.matchAll(ACTION_SINGLE)) {
+    if (match[1]) actions.add(match[1]);
+  }
+  for (const listMatch of cedar.matchAll(ACTION_LIST)) {
+    const inner = listMatch[1];
+    if (!inner) continue;
+    for (const stringMatch of inner.matchAll(ACTION_STRING_IN_LIST)) {
+      if (stringMatch[1]) actions.add(stringMatch[1]);
+    }
+  }
+  return Array.from(actions);
+}
+function extractResource(cedar) {
+  const inMatch = RESOURCE_IN.exec(cedar);
+  if (inMatch && inMatch[1]) {
+    return inMatch[1].trim();
+  }
+  const eqMatch = RESOURCE_EQ.exec(cedar);
+  if (eqMatch && eqMatch[1]) {
+    return eqMatch[1].trim();
+  }
+  return "";
+}
+function extractConditions(cedar) {
+  const conditions = [];
+  for (const match of cedar.matchAll(CONDITION_BLOCK)) {
+    const keyword = match[1];
+    const body = match[2];
+    if (!keyword || !body) continue;
+    conditions.push(`${keyword} ${body.trim().replace(/\s+/g, " ")}`);
+  }
+  return conditions;
+}
+
+// src/components/consent-capability-card.ts
+var ConsentCapabilityCard = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.capabilityId = "";
+    this.label = "";
+    this.description = "";
+    this.icon = "neutral";
+    this.riskLevel = "low";
+    this.checked = false;
+    this.compiledCedar = "";
+    this.policyOpen = false;
+  }
+  toggleChecked() {
+    this.checked = !this.checked;
+    const detail = {
+      id: this.capabilityId,
+      checked: this.checked
+    };
+    this.dispatchEvent(
+      new CustomEvent("capability-toggle", {
+        detail,
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  /**
+   * Row-level click handler. Makes the entire row a click target for
+   * toggling the checkbox — a UX nicety that matches Plaid/Apple-style
+   * consent rows. Skips when the user clicks the per-row "View policy"
+   * button, the policy disclosure, or any link inside the description, so
+   * those interactive children retain their own behavior.
+   */
+  onRowClick(event) {
+    const target = event.target;
+    if (!target) return;
+    const path = event.composedPath?.() || [];
+    for (const node of path) {
+      if (!(node instanceof HTMLElement)) continue;
+      if (node === this) break;
+      if (node.classList?.contains("policy-toggle") || node.classList?.contains("policy-disclosure") || node.tagName === "A" || node.tagName === "BUTTON") {
+        return;
+      }
+    }
+    this.toggleChecked();
+  }
+  togglePolicy(event) {
+    event?.stopPropagation();
+    this.policyOpen = !this.policyOpen;
+  }
+  isHigherRisk() {
+    return this.riskLevel === "high" || this.riskLevel === "critical";
+  }
+  renderIcon() {
+    return iconSvgFor(this.icon);
+  }
+  renderPolicy() {
+    if (!this.policyOpen) return A;
+    if (!this.compiledCedar) return A;
+    const explanation = explainCedarFragment(this.compiledCedar);
+    const tokens = CONSENT_COPY_TOKENS.capabilityRow;
+    return b2`
+      <div class="policy-disclosure" part="policy">
+        <h4>${tokens.glossTitle}</h4>
+        <ul>
+          ${explanation.actions.length === 0 ? b2`<li>—</li>` : explanation.actions.map(
+      (action) => b2`<li><code>${action}</code></li>`
+    )}
+        </ul>
+        ${explanation.resource ? b2`<p>
+              On <code>${explanation.resource}</code>
+            </p>` : b2`<p>On ${tokens.glossUnknownResource}</p>`}
+        <h4>${tokens.rawPolicyTitle}</h4>
+        <pre><code>${this.compiledCedar}</code></pre>
+      </div>
+    `;
+  }
+  render() {
+    const tokens = CONSENT_COPY_TOKENS.capabilityRow;
+    return b2`
+      <div
+        class="row"
+        part="row"
+        role="button"
+        tabindex="0"
+        @click=${this.onRowClick}
+        @keydown=${(e8) => {
+      if (e8.key === " " || e8.key === "Enter") {
+        e8.preventDefault();
+        this.toggleChecked();
+      }
+    }}
+      >
+        <button
+          class="checkbox"
+          part="checkbox"
+          role="checkbox"
+          aria-checked="${String(this.checked)}"
+          aria-label="${this.label}"
+          @click=${(e8) => {
+      e8.stopPropagation();
+      this.toggleChecked();
+    }}
+          type="button"
+          tabindex="-1"
+        >
+          ${this.checked ? b2`<span class="check-mark">✓</span>` : A}
+        </button>
+        <div class="icon-tile" aria-hidden="true">${this.renderIcon()}</div>
+        <div class="body">
+          <div class="row-label">
+            <span><strong>${this.label}</strong> <span class="description">${this.description}</span></span>
+            ${this.isHigherRisk() ? b2`<span class="risk-chip">${tokens.higherRiskChip}</span>` : A}
+          </div>
+          <button
+            class="policy-toggle"
+            type="button"
+            @click=${this.togglePolicy}
+            aria-expanded="${String(this.policyOpen)}"
+          >
+            ${tokens.viewPolicyLink}
+          </button>
+          ${this.renderPolicy()}
+        </div>
+      </div>
+    `;
+  }
+};
+ConsentCapabilityCard.styles = i`
+    :host {
+      display: block;
+      border-bottom: 1px solid var(--cs-surface-border, rgba(15, 23, 42, 0.08));
+    }
+
+    :host(:last-of-type) {
+      border-bottom: none;
+    }
+
+    .row {
+      display: grid;
+      grid-template-columns: 22px 36px 1fr;
+      gap: 14px;
+      padding: 16px 0;
+      align-items: flex-start;
+      cursor: pointer;
+      transition: background 0.12s ease;
+      margin: 0 -10px;
+      padding-left: 10px;
+      padding-right: 10px;
+      border-radius: 8px;
+    }
+
+    .row:hover {
+      background: var(--cs-row-hover-bg, rgba(15, 23, 42, 0.025));
+    }
+
+    .checkbox {
+      width: 22px;
+      height: 22px;
+      border-radius: 6px;
+      border: 1.5px solid var(--cs-text-secondary, #334155);
+      background: transparent;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      transition: background 0.12s ease, border-color 0.12s ease;
+    }
+
+    .checkbox[aria-checked="true"] {
+      background: var(--cs-surface-accent, #0F172A);
+      border-color: var(--cs-surface-accent, #0F172A);
+    }
+
+    .checkbox:focus-visible {
+      outline: 2px solid var(--cs-focus-ring, #0F172A);
+      outline-offset: 2px;
+    }
+
+    .check-mark {
+      color: var(--cs-surface-accent-text, #fff);
+      font-size: 14px;
+      line-height: 1;
+    }
+
+    .icon-tile {
+      width: 36px;
+      height: 36px;
+      border-radius: 10px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    .icon-tile svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    .body {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .row-label {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex-wrap: wrap;
+      font-size: 14.5px;
+      color: var(--cs-text-primary, #0F172A);
+      line-height: 1.45;
+    }
+
+    .row-label strong {
+      font-weight: 600;
+    }
+
+    .description {
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    .risk-chip {
+      display: inline-flex;
+      padding: 2px 8px;
+      border-radius: 999px;
+      font-size: 10.5px;
+      font-weight: 700;
+      letter-spacing: 0.06em;
+      background: var(--cs-chip-risk-bg, #FCE7B6);
+      color: var(--cs-chip-risk-text, #7A4F00);
+    }
+
+    .policy-toggle {
+      align-self: flex-start;
+      background: none;
+      border: none;
+      padding: 0;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--cs-text-tertiary, #64748B);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+      cursor: pointer;
+    }
+
+    .policy-toggle:focus-visible {
+      outline: 2px solid var(--cs-focus-ring, #0F172A);
+      outline-offset: 2px;
+    }
+
+    .policy-disclosure {
+      margin-top: 8px;
+      border-radius: 10px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      padding: 10px 12px;
+      font-size: 12px;
+      color: var(--cs-text-secondary, #334155);
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .policy-disclosure h4 {
+      margin: 0;
+      font-size: 11px;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+      color: var(--cs-text-tertiary, #64748B);
+    }
+
+    .policy-disclosure pre {
+      margin: 0;
+      font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+      font-size: 11.5px;
+      line-height: 1.5;
+      white-space: pre-wrap;
+      word-break: break-word;
+      color: var(--cs-text-primary, #0F172A);
+    }
+
+    .policy-disclosure ul {
+      margin: 0;
+      padding-left: 18px;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "capabilityId", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "label", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "description", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "icon", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilityCard.prototype, "riskLevel", 2);
+__decorateClass([
+  n4({ type: Boolean, reflect: true })
+], ConsentCapabilityCard.prototype, "checked", 2);
+__decorateClass([
+  n4({ type: String, attribute: "compiled-cedar" })
+], ConsentCapabilityCard.prototype, "compiledCedar", 2);
+__decorateClass([
+  r5()
+], ConsentCapabilityCard.prototype, "policyOpen", 2);
+ConsentCapabilityCard = __decorateClass([
+  t3("consent-capability-card")
+], ConsentCapabilityCard);
+function iconSvgFor(icon) {
+  switch (icon) {
+    case "search":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="9" r="5.25"/><path d="m13.25 13.25 3.5 3.5"/></svg>`;
+    case "cart":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M3 3h2l1.4 9.4a1.5 1.5 0 0 0 1.5 1.3h7.6a1.5 1.5 0 0 0 1.5-1.2L18 6H6"/><circle cx="9" cy="17" r="1.2"/><circle cx="15" cy="17" r="1.2"/></svg>`;
+    case "card":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="2.5" y="4.5" width="15" height="11" rx="2"/><path d="M2.5 9h15"/><path d="M5.5 13h3"/></svg>`;
+    case "pin":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17s-5.5-5-5.5-9a5.5 5.5 0 1 1 11 0c0 4-5.5 9-5.5 9z"/><circle cx="10" cy="8" r="2"/></svg>`;
+    case "pin-new":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 17s-5.5-5-5.5-9a5.5 5.5 0 1 1 11 0c0 4-5.5 9-5.5 9z"/><path d="M10 6v4"/><path d="M8 8h4"/></svg>`;
+    case "shield":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M10 2.5 4 5v5.5C4 14 6.5 16.5 10 17.5c3.5-1 6-3.5 6-7V5z"/></svg>`;
+    case "key":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="13" r="3.25"/><path d="m9.5 11 6.5-6.5"/><path d="m13.5 7 2 2"/></svg>`;
+    case "tools":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m4 4 6 6"/><path d="m10 4 6 6"/><path d="m4 16 12-12"/></svg>`;
+    case "user":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="7" r="3"/><path d="M3 17a7 7 0 0 1 14 0"/></svg>`;
+    case "calendar":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="14" height="13" rx="2"/><path d="M3 8h14"/><path d="M7 2v4M13 2v4"/></svg>`;
+    case "lock":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="9" width="12" height="8" rx="2"/><path d="M7 9V6a3 3 0 0 1 6 0v3"/></svg>`;
+    case "eye":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="M2 10s3-6 8-6 8 6 8 6-3 6-8 6-8-6-8-6z"/><circle cx="10" cy="10" r="2.25"/></svg>`;
+    case "send":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m17 3-7 7-2 7-3-9z"/></svg>`;
+    case "package":
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><path d="m10 2 7 4v8l-7 4-7-4V6z"/><path d="m3 6 7 4 7-4"/><path d="M10 18V10"/></svg>`;
+    default:
+      return b2`<svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><circle cx="10" cy="10" r="5"/></svg>`;
+  }
+}
+
+// src/components/consent-action-bar.ts
+var ConsentActionBar = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.agentName = "";
+    this.theme = "light";
+    this.disabled = false;
+    this.loading = false;
+  }
+  emitAllow() {
+    if (this.disabled || this.loading) return;
+    this.dispatchEvent(
+      new CustomEvent("consent-allow", { bubbles: true, composed: true })
+    );
+  }
+  emitDeny() {
+    if (this.loading) return;
+    this.dispatchEvent(
+      new CustomEvent("consent-deny", { bubbles: true, composed: true })
+    );
+  }
+  render() {
+    const allowLabel = this.theme === "dark" ? CONSENT_COPY_TOKENS.actions.allowAccess : `${formatToken(CONSENT_COPY_TOKENS.actions.allowAgentTemplate, {
+      Agent: this.agentName || "this agent"
+    })} \u2192`;
+    const denyLabel = this.theme === "dark" ? CONSENT_COPY_TOKENS.actions.deny : CONSENT_COPY_TOKENS.actions.notNow;
+    return b2`
+      <button
+        class="primary"
+        type="button"
+        ?disabled=${this.disabled || this.loading}
+        @click=${this.emitAllow}
+      >
+        ${allowLabel}
+      </button>
+      <button
+        class="secondary"
+        type="button"
+        ?disabled=${this.loading}
+        @click=${this.emitDeny}
+      >
+        ${denyLabel}
+      </button>
+    `;
+  }
+};
+ConsentActionBar.styles = i`
+    :host {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      width: 100%;
+    }
+
+    button {
+      width: 100%;
+      padding: 14px 18px;
+      border-radius: 999px;
+      font-size: 15px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: opacity 0.15s ease, transform 0.05s ease;
+      border: none;
+    }
+
+    button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    button:focus-visible {
+      outline: 2px solid var(--cs-focus-ring, #0F172A);
+      outline-offset: 3px;
+    }
+
+    .primary {
+      background: var(--cs-surface-accent, #0F172A);
+      color: var(--cs-surface-accent-text, #FFFFFF);
+    }
+
+    .primary:hover:not(:disabled) {
+      opacity: 0.92;
+    }
+
+    .secondary {
+      background: transparent;
+      color: var(--cs-text-secondary, #334155);
+      padding: 10px 18px;
+      font-weight: 500;
+    }
+
+    .secondary:hover:not(:disabled) {
+      color: var(--cs-text-primary, #0F172A);
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentActionBar.prototype, "agentName", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentActionBar.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentActionBar.prototype, "disabled", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentActionBar.prototype, "loading", 2);
+ConsentActionBar = __decorateClass([
+  t3("consent-action-bar")
+], ConsentActionBar);
+
+// src/components/consent-footer.ts
+var ConsentFooter = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.theme = "light";
+    this.howItWorksUrl = "";
+  }
+  render() {
+    const attribution = this.theme === "dark" ? CONSENT_COPY_TOKENS.attribution.securedBy : CONSENT_COPY_TOKENS.attribution.protectedBy;
+    return b2`
+      <span class="left">
+        <svg
+          class="check"
+          viewBox="0 0 16 16"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="1.8"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          aria-hidden="true"
+        >
+          <path d="m3.5 8.5 3 3 6-6.5" />
+        </svg>
+        ${attribution}
+      </span>
+      ${this.howItWorksUrl ? b2`<a href="${this.howItWorksUrl}" target="_blank" rel="noopener">
+            ${CONSENT_COPY_TOKENS.attribution.howThisWorks}
+          </a>` : b2`<span>${CONSENT_COPY_TOKENS.attribution.howThisWorks}</span>`}
+    `;
+  }
+};
+ConsentFooter.styles = i`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 16px;
+      padding-top: 12px;
+      font-size: 12px;
+      color: var(--cs-text-tertiary, #64748B);
+      border-top: 1px solid var(--cs-surface-border, transparent);
+    }
+
+    .left {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .check {
+      width: 14px;
+      height: 14px;
+      color: var(--cs-text-secondary, #334155);
+    }
+
+    a {
+      color: inherit;
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    a:hover {
+      color: var(--cs-text-primary, #0F172A);
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentFooter.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentFooter.prototype, "howItWorksUrl", 2);
+ConsentFooter = __decorateClass([
+  t3("consent-footer")
+], ConsentFooter);
+
+// src/components/consent-revocation-notice.ts
+var ConsentRevocationNotice = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.revocationPath = "Account \u2192 Connected Agents";
+    this.orgName = "this site";
+    this.inactivityDays = 90;
+  }
+  render() {
+    const revoke = formatToken(CONSENT_COPY_TOKENS.footer.revocationTemplate, {
+      RevocationPath: this.revocationPath,
+      Org: this.orgName
+    });
+    const inactivity = formatToken(
+      CONSENT_COPY_TOKENS.footer.inactivityTemplate,
+      { Days: this.inactivityDays }
+    );
+    return b2`
+      <svg
+        class="icon"
+        viewBox="0 0 20 20"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.6"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+        aria-hidden="true"
+      >
+        <circle cx="10" cy="10" r="7.5" />
+        <path d="M10 6v4l2.5 1.5" />
+      </svg>
+      <div class="content">
+        <span>${revoke}</span>
+        <span>${inactivity}</span>
+      </div>
+    `;
+  }
+};
+ConsentRevocationNotice.styles = i`
+    :host {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 12px 14px;
+      border-radius: 12px;
+      background: var(--cs-surface-inset, #F1ECE2);
+      color: var(--cs-text-secondary, #334155);
+      font-size: 12.5px;
+      line-height: 1.5;
+    }
+
+    .icon {
+      width: 16px;
+      height: 16px;
+      flex-shrink: 0;
+      margin-top: 2px;
+      color: var(--cs-text-tertiary, #64748B);
+    }
+
+    .content {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    em {
+      font-style: normal;
+      color: var(--cs-text-primary, #0F172A);
+      font-weight: 500;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentRevocationNotice.prototype, "revocationPath", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentRevocationNotice.prototype, "orgName", 2);
+__decorateClass([
+  n4({ type: Number })
+], ConsentRevocationNotice.prototype, "inactivityDays", 2);
+ConsentRevocationNotice = __decorateClass([
+  t3("consent-revocation-notice")
+], ConsentRevocationNotice);
+
+// src/components/consent-connector-header.ts
+var ConsentConnectorHeader = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.clientName = "";
+    this.clientDid = "";
+    this.clientLogoUrl = "";
+    this.serverName = "";
+    this.serverDomain = "";
+    this.serverLogoUrl = "";
+    this.logoDevToken = "";
+    this.clientImageOk = true;
+    this.serverImageOk = true;
+  }
+  /**
+   * Derive a logo URL for an agent DID via KTA hosting convention.
+   * `did:web:knowthat.ai:agents:claude` → `https://knowthat.ai/img/agents/claude.png`
+   */
+  ktaLogoFromDid(did) {
+    if (!did) return void 0;
+    const match = did.match(/^did:web:knowthat\.ai:agents:([a-z0-9-]+)$/i);
+    if (!match) return void 0;
+    return `https://knowthat.ai/img/agents/${match[1]}.png`;
+  }
+  /**
+   * Derive a brand logo URL via logo.dev given a domain. Returns undefined
+   * when no token is configured or the domain is unparseable.
+   */
+  logoDevLogo(domain) {
+    if (!domain || !this.logoDevToken) return void 0;
+    const cleaned = domain.replace(/^https?:\/\//, "").replace(/\/.*$/, "");
+    if (!cleaned) return void 0;
+    return `https://img.logo.dev/${cleaned}?token=${encodeURIComponent(
+      this.logoDevToken
+    )}&size=120&format=png`;
+  }
+  resolveClientLogo() {
+    if (this.clientLogoUrl) return this.clientLogoUrl;
+    return this.ktaLogoFromDid(this.clientDid);
+  }
+  resolveServerLogo() {
+    if (this.serverLogoUrl) return this.serverLogoUrl;
+    return this.logoDevLogo(this.serverDomain);
+  }
+  monogram(name) {
+    return (name || "?").trim().charAt(0).toUpperCase();
+  }
+  render() {
+    const clientLogo = this.resolveClientLogo();
+    const serverLogo = this.resolveServerLogo();
+    return b2`
+      <div class="tile client" aria-hidden="true">
+        ${clientLogo && this.clientImageOk ? b2`<img
+              src="${clientLogo}"
+              alt=""
+              @error=${() => this.clientImageOk = false}
+            />` : b2`<span class="monogram">${this.monogram(this.clientName)}</span>`}
+      </div>
+      <div class="bridge" aria-hidden="true">
+        <span class="dots"><span></span><span></span><span></span></span>
+        <span class="shield" title="Protected by Checkpoint">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round">
+            <path d="M12 3l8 3v5c0 4.5-3.5 8.5-8 10-4.5-1.5-8-5.5-8-10V6l8-3z" />
+            <path d="m9 12 2 2 4-4" />
+          </svg>
+        </span>
+        <span class="dots"><span></span><span></span><span></span></span>
+      </div>
+      <div class="tile server" aria-hidden="true">
+        ${serverLogo && this.serverImageOk ? b2`<img
+              src="${serverLogo}"
+              alt=""
+              @error=${() => this.serverImageOk = false}
+            />` : b2`<span class="monogram">${this.monogram(this.serverName)}</span>`}
+      </div>
+      <span style="position:absolute;left:-9999px">${this.clientName || ""} connecting to ${this.serverName || ""} via Checkpoint</span>
+    `;
+  }
+};
+ConsentConnectorHeader.styles = i`
+    :host {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 18px;
+      padding: 22px 0 4px;
+    }
+
+    .tile {
+      width: 56px;
+      height: 56px;
+      border-radius: 14px;
+      overflow: hidden;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      background: var(--cs-surface-card, #fff);
+      border: 1px solid var(--cs-surface-border, rgba(15, 23, 42, 0.08));
+    }
+
+    .tile.client {
+      background: var(--cs-surface-accent, #0F172A);
+      border-color: transparent;
+    }
+
+    .tile img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .tile .monogram {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 22px;
+    }
+
+    .tile.client .monogram {
+      color: var(--cs-surface-accent-text, #fff);
+    }
+
+    .tile.server .monogram {
+      color: var(--cs-text-primary, #0F172A);
+    }
+
+    .bridge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    .dots {
+      display: inline-flex;
+      gap: 4px;
+    }
+
+    .dots span {
+      width: 4px;
+      height: 4px;
+      border-radius: 50%;
+      background: var(--cs-text-tertiary, #94A3B8);
+      opacity: 0.55;
+    }
+
+    .shield {
+      width: 30px;
+      height: 30px;
+      border-radius: 50%;
+      background: rgba(34, 197, 94, 0.14);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      color: #15803D;
+      flex-shrink: 0;
+    }
+
+    .shield svg {
+      width: 16px;
+      height: 16px;
+    }
+  `;
+__decorateClass([
+  n4({ type: String })
+], ConsentConnectorHeader.prototype, "clientName", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentConnectorHeader.prototype, "clientDid", 2);
+__decorateClass([
+  n4({ type: String, attribute: "client-logo-url" })
+], ConsentConnectorHeader.prototype, "clientLogoUrl", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentConnectorHeader.prototype, "serverName", 2);
+__decorateClass([
+  n4({ type: String, attribute: "server-domain" })
+], ConsentConnectorHeader.prototype, "serverDomain", 2);
+__decorateClass([
+  n4({ type: String, attribute: "server-logo-url" })
+], ConsentConnectorHeader.prototype, "serverLogoUrl", 2);
+__decorateClass([
+  n4({ type: String, attribute: "logo-dev-token" })
+], ConsentConnectorHeader.prototype, "logoDevToken", 2);
+__decorateClass([
+  r5()
+], ConsentConnectorHeader.prototype, "clientImageOk", 2);
+__decorateClass([
+  r5()
+], ConsentConnectorHeader.prototype, "serverImageOk", 2);
+ConsentConnectorHeader = __decorateClass([
+  t3("consent-connector-header")
+], ConsentConnectorHeader);
+
+// src/styles/theme.ts
+var FIXED_RISK_CHIP_BG = "#FCE7B6";
+var FIXED_RISK_CHIP_TEXT = "#7A4F00";
+var lightTheme = {
+  surfaceBg: "#F4F1EA",
+  surfaceCard: "#FFFFFF",
+  surfaceBorder: "rgba(15, 23, 42, 0.10)",
+  surfaceInset: "#F1ECE2",
+  textPrimary: "#0F172A",
+  textSecondary: "#334155",
+  textTertiary: "#64748B",
+  surfaceAccent: "#0F172A",
+  surfaceAccentText: "#FFFFFF",
+  pillVerifiedBg: "#DCFCE7",
+  pillVerifiedText: "#166534",
+  pillUnverifiedBg: "#F1F5F9",
+  pillUnverifiedText: "#475569",
+  chipRiskBg: FIXED_RISK_CHIP_BG,
+  chipRiskText: FIXED_RISK_CHIP_TEXT,
+  focusRing: "rgba(15, 23, 42, 0.35)",
+  cardShadow: "0 30px 80px -40px rgba(15, 23, 42, 0.40)"
+};
+var darkTheme = {
+  surfaceBg: "#0B0808",
+  surfaceCard: "rgba(20, 20, 22, 0.92)",
+  surfaceBorder: "rgba(255, 255, 255, 0.08)",
+  surfaceInset: "rgba(255, 255, 255, 0.04)",
+  textPrimary: "#F8FAFC",
+  textSecondary: "#CBD5E1",
+  textTertiary: "#94A3B8",
+  surfaceAccent: "#F8FAFC",
+  surfaceAccentText: "#0F172A",
+  pillVerifiedBg: "rgba(34, 197, 94, 0.16)",
+  pillVerifiedText: "#86EFAC",
+  pillUnverifiedBg: "rgba(148, 163, 184, 0.18)",
+  pillUnverifiedText: "#CBD5E1",
+  chipRiskBg: FIXED_RISK_CHIP_BG,
+  chipRiskText: FIXED_RISK_CHIP_TEXT,
+  focusRing: "rgba(248, 250, 252, 0.55)",
+  cardShadow: "0 40px 90px -40px rgba(0, 0, 0, 0.85)"
+};
+function getConsentTheme(theme) {
+  return theme === "dark" ? darkTheme : lightTheme;
+}
+function themeToCssVariables(tokens) {
+  const declarations = [];
+  for (const [key, value] of Object.entries(tokens)) {
+    declarations.push(`  --cs-${camelToKebab(key)}: ${value};`);
+  }
+  return declarations.join("\n");
+}
+function camelToKebab(value) {
+  return value.replace(/[A-Z]/g, (c4) => `-${c4.toLowerCase()}`);
+}
+
+// src/cedar/compile.ts
+var PLACEHOLDER_PATTERN = /\{\{\s*(agent_did|user_did|org|deployment)\s*\}\}/g;
+function compileSingleCapability(capability, context) {
+  const compiled = capability.cedar.replace(PLACEHOLDER_PATTERN, (_2, key) => {
+    const value = context[key];
+    if (typeof value !== "string" || value.length === 0) {
+      throw new Error(
+        `Cedar template context missing required value for placeholder \`${key}\``
+      );
+    }
+    return value;
+  });
+  if (compiled.trim().length === 0) {
+    throw new Error(
+      `Cedar fragment for capability \`${capability.id}\` is empty after compilation`
+    );
+  }
+  return compiled;
+}
+
+// src/components/consent-capabilities-screen.ts
+var ConsentCapabilitiesScreen = class extends i4 {
+  constructor() {
+    super(...arguments);
+    this.capabilities = [];
+    this.orgName = "";
+    this.headlineVerb = "use";
+    this.revocationPath = "Account \u2192 Connected Agents";
+    this.inactivityDays = 90;
+    this.theme = "light";
+    this.howItWorksUrl = "";
+    this.loading = false;
+    this.serverDomain = "";
+    this.logoDevToken = "";
+    this.selected = /* @__PURE__ */ new Set();
+    this.onCapabilityToggle = (event) => {
+      const detail = event.detail;
+      const next = new Set(this.selected);
+      if (detail.checked) next.add(detail.id);
+      else next.delete(detail.id);
+      this.selected = next;
+    };
+    this.onAllow = () => {
+      if (this.loading) return;
+      const selectedIds = Array.from(this.selected);
+      const selectedScopes = this.capabilities.filter((c4) => this.selected.has(c4.id)).flatMap((c4) => c4.scopes);
+      const detail = {
+        selectedCapabilityIds: selectedIds,
+        selectedScopes
+      };
+      this.dispatchEvent(
+        new CustomEvent("capabilities-allow", {
+          detail,
+          bubbles: true,
+          composed: true
+        })
+      );
+    };
+    this.onDeny = () => {
+      this.dispatchEvent(
+        new CustomEvent("capabilities-deny", { bubbles: true, composed: true })
+      );
+    };
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.seedDefaults();
+  }
+  willUpdate(changed) {
+    if (changed.has("capabilities")) {
+      this.seedDefaults();
+    }
+  }
+  seedDefaults() {
+    const next = /* @__PURE__ */ new Set();
+    for (const capability of this.capabilities) {
+      if (capability.defaultOn) next.add(capability.id);
+    }
+    this.selected = next;
+  }
+  hostStyle() {
+    return `:host { ${themeToCssVariables(getConsentTheme(this.theme))} }`;
+  }
+  compileCapabilityCedar(capability) {
+    if (!this.cedarContext) {
+      return capability.cedar;
+    }
+    try {
+      return compileSingleCapability(capability, this.cedarContext);
+    } catch {
+      return capability.cedar;
+    }
+  }
+  renderHeadline() {
+    const agentName = this.agentMetadata?.name || "this agent";
+    const tokens = CONSENT_COPY_TOKENS;
+    const raw = formatToken(tokens.headline.template, {
+      Agent: "@@AGENT@@",
+      Verb: this.headlineVerb || "use",
+      Org: "@@ORG@@"
+    });
+    const escaped = escapeHtml(raw);
+    const withSerifEntities = escaped.replace("@@AGENT@@", `<em>${nbspEscape(agentName)}</em>`).replace("@@ORG@@", `<em>${nbspEscape(this.orgName || "this site")}</em>`);
+    return b2`<h1
+      class="headline"
+      .innerHTML=${withSerifEntities}
+    ></h1>`;
+  }
+  render() {
+    const tokens = CONSENT_COPY_TOKENS;
+    const agentName = this.agentMetadata?.name || "this agent";
+    const subhead = formatToken(tokens.subhead.template, { Agent: agentName });
+    const sectionHeader = formatToken(tokens.section.capabilitiesHeader, {
+      Agent: agentName.toUpperCase()
+    });
+    return b2`
+      <style>
+        ${this.hostStyle()}
+      </style>
+      <consent-connector-header
+        clientName="${this.agentMetadata?.name || ""}"
+        clientDid="${this.agentMetadata?.did || ""}"
+        client-logo-url="${this.agentMetadata?.logoUrl || ""}"
+        serverName="${this.orgName || ""}"
+        server-domain="${this.serverDomain}"
+        logo-dev-token="${this.logoDevToken}"
+      ></consent-connector-header>
+      <div class="card" part="card">
+        <span class="eyebrow">${tokens.eyebrow.permissionRequest}</span>
+        ${this.renderHeadline()}
+        <p class="subhead">${subhead}</p>
+        ${this.agentMetadata ? b2`<consent-agent-header
+              agentName="${this.agentMetadata.name}"
+              vendor="${this.agentMetadata.vendor || ""}"
+              surfaceLabel="${this.agentMetadata.surfaceLabel || ""}"
+              ?verified=${this.agentMetadata.verified}
+              logoUrl="${this.agentMetadata.logoUrl || ""}"
+              connectedAt="${this.agentMetadata.connectedAt || ""}"
+            ></consent-agent-header>` : A}
+        <div>
+          <div class="section-header">
+            <span>${sectionHeader}</span>
+            <span class="hint">${tokens.section.tapToToggle}</span>
+          </div>
+          <div class="rows" @capability-toggle=${this.onCapabilityToggle}>
+            ${this.capabilities.map(
+      (capability) => b2`
+                <consent-capability-card
+                  capabilityId="${capability.id}"
+                  label="${capability.label}"
+                  description="${capability.description}"
+                  icon="${capability.icon}"
+                  riskLevel="${capability.riskLevel}"
+                  ?checked=${this.selected.has(capability.id)}
+                  compiled-cedar="${this.compileCapabilityCedar(capability)}"
+                ></consent-capability-card>
+              `
+    )}
+          </div>
+        </div>
+        <consent-revocation-notice
+          revocationPath="${this.revocationPath}"
+          orgName="${this.orgName || "this site"}"
+          inactivityDays=${this.inactivityDays}
+        ></consent-revocation-notice>
+        <consent-action-bar
+          agentName="${agentName}"
+          theme="${this.theme}"
+          ?loading=${this.loading}
+          ?disabled=${this.selected.size === 0}
+          @consent-allow=${this.onAllow}
+          @consent-deny=${this.onDeny}
+        ></consent-action-bar>
+        <consent-footer
+          theme="${this.theme}"
+          howItWorksUrl="${this.howItWorksUrl}"
+        ></consent-footer>
+      </div>
+    `;
+  }
+};
+ConsentCapabilitiesScreen.styles = i`
+    :host {
+      display: block;
+      box-sizing: border-box;
+      width: 100%;
+      max-width: 560px;
+      margin: 0 auto;
+    }
+
+    .card {
+      background: var(--cs-surface-card);
+      border: 1px solid var(--cs-surface-border);
+      border-radius: 22px;
+      box-shadow: var(--cs-card-shadow);
+      padding: 28px 28px 22px;
+      display: flex;
+      flex-direction: column;
+      gap: 22px;
+      color: var(--cs-text-primary);
+    }
+
+    .eyebrow {
+      font-size: 11px;
+      letter-spacing: 0.16em;
+      font-weight: 600;
+      color: var(--cs-text-tertiary);
+      text-transform: uppercase;
+    }
+
+    .headline {
+      font-family: "Times New Roman", Georgia, serif;
+      font-size: 30px;
+      line-height: 1.18;
+      letter-spacing: -0.01em;
+      color: var(--cs-text-primary);
+      margin: 0;
+    }
+
+    .headline em {
+      font-style: italic;
+    }
+
+    .subhead {
+      font-size: 14.5px;
+      color: var(--cs-text-secondary);
+      line-height: 1.55;
+      margin: 0;
+    }
+
+    .section-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 11px;
+      letter-spacing: 0.14em;
+      font-weight: 600;
+      color: var(--cs-text-tertiary);
+      text-transform: uppercase;
+    }
+
+    .section-header .hint {
+      letter-spacing: 0;
+      font-weight: 400;
+      text-transform: none;
+      font-size: 12px;
+    }
+
+    .rows {
+      display: flex;
+      flex-direction: column;
+    }
+  `;
+__decorateClass([
+  n4({ type: Array })
+], ConsentCapabilitiesScreen.prototype, "capabilities", 2);
+__decorateClass([
+  n4({ type: Object })
+], ConsentCapabilitiesScreen.prototype, "agentMetadata", 2);
+__decorateClass([
+  n4({ type: Object })
+], ConsentCapabilitiesScreen.prototype, "cedarContext", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilitiesScreen.prototype, "orgName", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilitiesScreen.prototype, "headlineVerb", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilitiesScreen.prototype, "revocationPath", 2);
+__decorateClass([
+  n4({ type: Number })
+], ConsentCapabilitiesScreen.prototype, "inactivityDays", 2);
+__decorateClass([
+  n4({ type: String })
+], ConsentCapabilitiesScreen.prototype, "theme", 2);
+__decorateClass([
+  n4({ type: String, attribute: "how-it-works-url" })
+], ConsentCapabilitiesScreen.prototype, "howItWorksUrl", 2);
+__decorateClass([
+  n4({ type: Boolean })
+], ConsentCapabilitiesScreen.prototype, "loading", 2);
+__decorateClass([
+  n4({ type: String, attribute: "server-domain" })
+], ConsentCapabilitiesScreen.prototype, "serverDomain", 2);
+__decorateClass([
+  n4({ type: String, attribute: "logo-dev-token" })
+], ConsentCapabilitiesScreen.prototype, "logoDevToken", 2);
+__decorateClass([
+  r5()
+], ConsentCapabilitiesScreen.prototype, "selected", 2);
+ConsentCapabilitiesScreen = __decorateClass([
+  t3("consent-capabilities-screen")
+], ConsentCapabilitiesScreen);
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function nbspEscape(value) {
+  return escapeHtml(value).replace(/\s+/g, "\xA0");
+}
+
 // src/types/modes.types.ts
 var AUTH_MODES = {
   /** Simple consent with no authentication - Consent → Success (2 screens) */
@@ -2950,6 +4436,13 @@ var McpConsent = class extends i4 {
     this.credentialUserEmail = "";
     this.credentialProviderUserId = "";
     this.oauthUrl = "";
+    this.capabilities = [];
+    this.orgName = "";
+    this.headlineVerb = "use";
+    this.revocationPath = "Account \u2192 Connected Agents";
+    this.inactivityDays = 90;
+    this.consentTheme = "light";
+    this.howItWorksUrl = "";
     this.authorizationType = "password";
     this.oauthProviderType = "";
     this.currentMode = AUTH_MODES.CONSENT_ONLY;
@@ -2959,6 +4452,17 @@ var McpConsent = class extends i4 {
     this.formData = {};
     this.resendCooldown = 0;
     this.selectedScopes = [];
+    this.closeFailed = false;
+    this.onCapabilitiesAllow = (event) => {
+      const detail = event.detail;
+      if (detail.selectedCapabilityIds.length === 0) {
+        this.handleDeny();
+        return;
+      }
+      this.selectedScopes = [...this.scopes];
+      this.termsAccepted = true;
+      void this.handleApprove();
+    };
   }
   // === LIFECYCLE ===
   connectedCallback() {
@@ -3153,6 +4657,12 @@ var McpConsent = class extends i4 {
     );
     window.close();
   }
+  handleClose() {
+    window.close();
+    setTimeout(() => {
+      this.closeFailed = true;
+    }, 300);
+  }
   handleTermsChange(e8) {
     this.termsAccepted = e8.detail.checked;
   }
@@ -3568,13 +5078,15 @@ var McpConsent = class extends i4 {
 
         <!-- Footer with Continue Button -->
         <div class="success-footer">
-          <consent-button
-            variant="primary"
-            full-width
-            @click=${() => window.close()}
-          >
-            ${success?.continueButtonText ?? "Continue"}
-          </consent-button>
+          ${this.closeFailed ? b2`<p class="close-message">You can safely close this tab.</p>` : b2`
+                <consent-button
+                  variant="primary"
+                  full-width
+                  @click=${this.handleClose}
+                >
+                  ${success?.continueButtonText ?? "Continue"}
+                </consent-button>
+              `}
         </div>
       </div>
     `;
@@ -3585,6 +5097,9 @@ var McpConsent = class extends i4 {
     if (displayStep === "success") {
       return this.renderSuccess();
     }
+    if (this.capabilities.length > 0 && this.currentMode === AUTH_MODES.CONSENT_ONLY) {
+      return this.renderCapabilitiesScreen();
+    }
     switch (this.currentMode) {
       case AUTH_MODES.CREDENTIALS:
         return this.renderCredentials();
@@ -3599,6 +5114,39 @@ var McpConsent = class extends i4 {
         return this.renderConsentOnly();
     }
   }
+  /**
+   * Render the new humanized capability layout. Selection state is owned by
+   * `<consent-capabilities-screen>`; on `capabilities-allow`, we hydrate the
+   * legacy form-data path (selectedScopes, terms accepted) and reuse the
+   * existing handleApprove submission logic.
+   */
+  renderCapabilitiesScreen() {
+    const flatCapabilities = this.capabilities.flatMap(
+      (group) => group.capabilities
+    );
+    return b2`
+      ${this.error ? b2`<div role="alert" style="
+            color: var(--cs-text-danger, #b91c1c);
+            margin: 0 auto 12px;
+            max-width: 560px;
+            font-size: 13px;
+          ">${this.error}</div>` : A}
+      <consent-capabilities-screen
+        .capabilities=${flatCapabilities}
+        .agentMetadata=${this.agentMetadata}
+        .cedarContext=${this.cedarContext}
+        orgName="${this.orgName}"
+        headlineVerb="${this.headlineVerb}"
+        revocationPath="${this.revocationPath}"
+        inactivityDays=${this.inactivityDays}
+        theme="${this.consentTheme}"
+        how-it-works-url="${this.howItWorksUrl}"
+        ?loading=${this.loading}
+        @capabilities-allow=${this.onCapabilitiesAllow}
+        @capabilities-deny=${this.handleDeny}
+      ></consent-capabilities-screen>
+    `;
+  }
 };
 McpConsent.styles = i`
     :host {
@@ -3920,6 +5468,14 @@ McpConsent.styles = i`
       margin-top: 1.5rem;
     }
 
+    .close-message {
+      text-align: center;
+      color: #6b7280;
+      font-size: 0.875rem;
+      margin: 0;
+      padding: 0.75rem 0;
+    }
+
     /* OTP section */
     .otp-section {
       text-align: center;
@@ -4034,6 +5590,75 @@ __decorateClass([
 __decorateClass([
   n4({ type: String, attribute: "oauth-url" })
 ], McpConsent.prototype, "oauthUrl", 2);
+__decorateClass([
+  n4({
+    type: Array,
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return [];
+        try {
+          const parsed = JSON.parse(value);
+          return Array.isArray(parsed) ? parsed : [];
+        } catch {
+          return [];
+        }
+      },
+      toAttribute: (value) => JSON.stringify(value)
+    }
+  })
+], McpConsent.prototype, "capabilities", 2);
+__decorateClass([
+  n4({
+    type: Object,
+    attribute: "agent-metadata",
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return void 0;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return void 0;
+        }
+      },
+      toAttribute: (value) => value ? JSON.stringify(value) : ""
+    }
+  })
+], McpConsent.prototype, "agentMetadata", 2);
+__decorateClass([
+  n4({ type: String, attribute: "org-name" })
+], McpConsent.prototype, "orgName", 2);
+__decorateClass([
+  n4({ type: String, attribute: "headline-verb" })
+], McpConsent.prototype, "headlineVerb", 2);
+__decorateClass([
+  n4({ type: String, attribute: "revocation-path" })
+], McpConsent.prototype, "revocationPath", 2);
+__decorateClass([
+  n4({ type: Number, attribute: "inactivity-days" })
+], McpConsent.prototype, "inactivityDays", 2);
+__decorateClass([
+  n4({ type: String, attribute: "consent-theme" })
+], McpConsent.prototype, "consentTheme", 2);
+__decorateClass([
+  n4({ type: String, attribute: "how-it-works-url" })
+], McpConsent.prototype, "howItWorksUrl", 2);
+__decorateClass([
+  n4({
+    type: Object,
+    attribute: "cedar-context",
+    converter: {
+      fromAttribute: (value) => {
+        if (!value) return void 0;
+        try {
+          return JSON.parse(value);
+        } catch {
+          return void 0;
+        }
+      },
+      toAttribute: (value) => value ? JSON.stringify(value) : ""
+    }
+  })
+], McpConsent.prototype, "cedarContext", 2);
 __decorateClass([
   n4({ type: String, attribute: "authorization-type" })
 ], McpConsent.prototype, "authorizationType", 2);
@@ -4086,16 +5711,26 @@ __decorateClass([
 __decorateClass([
   r5()
 ], McpConsent.prototype, "selectedScopes", 2);
+__decorateClass([
+  r5()
+], McpConsent.prototype, "closeFailed", 2);
 McpConsent = __decorateClass([
   t3("mcp-consent")
 ], McpConsent);
 export {
+  ConsentActionBar,
+  ConsentAgentHeader,
   ConsentButton,
+  ConsentCapabilitiesScreen,
+  ConsentCapabilityCard,
   ConsentCheckbox,
+  ConsentConnectorHeader,
+  ConsentFooter,
   ConsentInput,
   ConsentOAuthButton,
   ConsentOTPInput,
   ConsentPermissions,
+  ConsentRevocationNotice,
   ConsentShell,
   ConsentTerms,
   McpConsent