@xapps-platform/marketplace-ui 0.1.8 → 0.1.10

package/dist/index.js

@@ -978,6 +978,14 @@ function getDefaultWidgetId(x) {
   const pick = def || widgets[0];
   return readFirstString(asRecord(pick).id) || null;
 }
+function getDefaultWidgetName(x, locale) {
+  const rawWidgets = asRecord(x.manifest).widgets;
+  const widgets = Array.isArray(rawWidgets) ? rawWidgets : null;
+  if (!widgets || widgets.length === 0) return null;
+  const def = widgets.find((w) => asRecord(w).default === true);
+  const pick = asRecord(def || widgets[0]);
+  return resolveMarketplaceText(pick.title, locale) || readFirstString(pick.name, pick.id) || null;
+}
 function buildCatalogFilterStorageKey(input) {
   const mode = input.isEmbedded ? "embed" : "portal";
   const scope = input.singleXappMode && input.xappId ? `xapp:${input.xappId}` : "catalog";
@@ -1011,6 +1019,11 @@ function CatalogPage() {
   const canMutate = host.canMutate ? host.canMutate() : true;
   const addAppLabel = env?.copy?.addAppLabel || "Add app";
   const removeAppLabel = env?.copy?.removeAppLabel || "Remove app";
+  const openAppLabel = env?.copy?.openAppLabel || t("xapp.open_app", void 0, "Open app");
+  const installationPolicyResolved = env?.installationPolicyResolved !== false;
+  const mutationControlsReady = installationPolicyResolved || !host.subjectId || !canMutate;
+  const autoUpdateMode = mutationControlsReady && (env?.installationPolicy ?? host.installationPolicy)?.update_mode === "auto_update_compatible" && Boolean(host.subjectId);
+  const autoAvailableMode = mutationControlsReady && (env?.installationPolicy ?? host.installationPolicy)?.mode === "auto_available" && Boolean(host.subjectId);
   const loc = useLocation();
   const token = useQueryToken();
   const tokenSearch = buildTokenSearch(token, loc.search);
@@ -1075,6 +1088,14 @@ function CatalogPage() {
     setInstalledOnly(Boolean(stored?.addedOnly));
     setSelectedTag(typeof stored?.selectedTag === "string" ? stored.selectedTag : defaultTag);
   }, [defaultTag, storageKey]);
+  useEffect3(() => {
+    if (!autoAvailableMode || !installedOnly) return;
+    setInstalledOnly(false);
+    writeStoredCatalogFilters(storageKey, {
+      addedOnly: false,
+      selectedTag: selectedTag || ""
+    });
+  }, [autoAvailableMode, installedOnly, selectedTag, storageKey]);
   useEffect3(() => {
     const restrictedTags = env?.tags ?? [];
     if (selectedTag && restrictedTags.length > 0 && !restrictedTags.includes(selectedTag)) {
@@ -1192,7 +1213,7 @@ function CatalogPage() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs3("label", { className: "mx-checkbox-label", children: [
+      mutationControlsReady && !autoAvailableMode ? /* @__PURE__ */ jsxs3("label", { className: "mx-checkbox-label", children: [
         /* @__PURE__ */ jsx6(
           "input",
           {
@@ -1210,7 +1231,7 @@ function CatalogPage() {
           }
         ),
         /* @__PURE__ */ jsx6("span", { className: "mx-label mx-label-inline", children: t("common.added_only", void 0, "Added only") })
-      ] })
+      ] }) : null
     ] }) }),
     busy && items.length === 0 ? /* @__PURE__ */ jsx6("div", { className: "mx-grid", "aria-busy": "true", children: Array.from({ length: 6 }).map((_, i) => /* @__PURE__ */ jsxs3("div", { className: "mx-skeleton-card", children: [
       /* @__PURE__ */ jsx6("div", { className: "mx-skeleton-card-image" }),
@@ -1240,7 +1261,7 @@ function CatalogPage() {
       /* @__PURE__ */ jsx6("div", { className: "mx-grid", children: filtered.length === 0 && !busy ? /* @__PURE__ */ jsxs3("div", { className: "mx-empty-catalog", children: [
         /* @__PURE__ */ jsx6("div", { className: "mx-empty-catalog-icon", children: "\u2315" }),
         /* @__PURE__ */ jsx6("div", { className: "mx-empty-catalog-title", children: t("catalog.no_apps_found", void 0, "No apps found") }),
-        /* @__PURE__ */ jsx6("div", { className: "mx-empty-catalog-desc", children: installedOnly && items.length > 0 ? t(
+        /* @__PURE__ */ jsx6("div", { className: "mx-empty-catalog-desc", children: !autoAvailableMode && installedOnly && items.length > 0 ? t(
           "catalog.empty_added_only",
           void 0,
           "No apps are installed for the current subject yet. Turn off Added only to browse the full catalog."
@@ -1260,7 +1281,9 @@ function CatalogPage() {
         const image = typeof manifest.image === "string" ? manifest.image : "https://picsum.photos/seed/" + x.slug + "/560/320";
         const inst = installationsByXappId[String(x.id)];
         const installed = Boolean(inst);
+        const updateAvailable = Boolean(inst?.updateAvailable);
         const defaultWidgetId = getDefaultWidgetId(x);
+        const defaultWidgetName = getDefaultWidgetName(x, locale) || t("common.widget", void 0, "Widget");
         const xTerms = asRecord(manifest.terms);
         const requiresTerms = Boolean(
           Object.keys(xTerms).length > 0 || typeof xTerms.text === "string" && xTerms.text.trim() || typeof xTerms.url === "string" && xTerms.url.trim()
@@ -1293,7 +1316,7 @@ function CatalogPage() {
                   )
                 ] }) : /* @__PURE__ */ jsx6("div", { className: "mx-card-publisher", children: t("common.catalog_app", void 0, "Catalog app") }),
                 /* @__PURE__ */ jsxs3("div", { className: "mx-card-badges", children: [
-                  installed && /* @__PURE__ */ jsxs3("span", { className: "mx-card-installed-badge", children: [
+                  !autoAvailableMode && installed && /* @__PURE__ */ jsxs3("span", { className: "mx-card-installed-badge", children: [
                     /* @__PURE__ */ jsx6("span", { className: "mx-card-installed-badge-dot" }),
                     t("common.added", void 0, "Added")
                   ] }),
@@ -1317,7 +1340,7 @@ function CatalogPage() {
                 children: t("catalog.view_details", void 0, "View details")
               }
             ),
-            canMutate && (!installed ? /* @__PURE__ */ jsx6(
+            canMutate && mutationControlsReady && (!installed ? /* @__PURE__ */ jsx6(
               "button",
               {
                 className: "mx-btn mx-btn-primary mx-btn-sm",
@@ -1331,12 +1354,50 @@ function CatalogPage() {
                   host.requestInstall({
                     xappId: String(x.id),
                     defaultWidgetId,
+                    xappTitle: title,
+                    widgetName: defaultWidgetName,
+                    openAfterInstall: autoAvailableMode && Boolean(defaultWidgetId),
                     subjectId: host.subjectId ?? null
                   });
                 },
-                children: addAppLabel
+                children: autoAvailableMode ? openAppLabel : addAppLabel
+              }
+            ) : autoAvailableMode ? /* @__PURE__ */ jsx6(
+              "button",
+              {
+                className: "mx-btn mx-btn-primary mx-btn-sm",
+                onClick: (e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  if (!defaultWidgetId || !inst?.installationId) {
+                    navigate(detailTo);
+                    return;
+                  }
+                  if (updateAvailable && host.requestUpdate && autoUpdateMode) {
+                    host.requestUpdate({
+                      installationId: inst.installationId,
+                      xappId: String(x.id),
+                      widgetId: defaultWidgetId,
+                      xappTitle: title,
+                      widgetName: defaultWidgetName
+                    });
+                    return;
+                  }
+                  if (updateAvailable) {
+                    navigate(detailTo);
+                    return;
+                  }
+                  host.openWidget({
+                    installationId: inst.installationId,
+                    widgetId: defaultWidgetId,
+                    xappId: String(x.id),
+                    xappTitle: title,
+                    widgetName: t("common.widget", void 0, "Widget")
+                  });
+                },
+                children: openAppLabel
               }
-            ) : /* @__PURE__ */ jsx6(
+            ) : !autoAvailableMode ? /* @__PURE__ */ jsx6(
               "button",
               {
                 className: "mx-btn mx-btn-outline mx-btn-sm mx-btn-danger-text",
@@ -1354,7 +1415,7 @@ function CatalogPage() {
                 },
                 children: removeAppLabel
               }
-            ))
+            ) : null)
           ] })
         ] }, x.id);
       }) })
@@ -4242,6 +4303,365 @@ function RequestsPage() {
 import { useEffect as useEffect9, useMemo as useMemo8, useRef, useState as useState7 } from "react";
 import { Link as Link9, useLocation as useLocation7, useNavigate as useNavigate3, useParams as useParams2 } from "react-router-dom";
 
+// ../browser-host/src/xms.ts
+function readString4(value) {
+  return String(value ?? "").trim();
+}
+function readNumber(value, fallback = 0) {
+  const parsed = Number(value);
+  return Number.isFinite(parsed) ? parsed : fallback;
+}
+function readLower(value) {
+  return readString4(value).toLowerCase();
+}
+function readBoolean(value, fallback = false) {
+  return typeof value === "boolean" ? value : fallback;
+}
+function readLocalizedText(value, fallback = "") {
+  if (typeof value === "string") {
+    return readString4(value) || fallback;
+  }
+  if (!value || typeof value !== "object" || Array.isArray(value)) {
+    return fallback;
+  }
+  const record = value;
+  return readString4(record.en) || readString4(record.ro) || Object.values(record).map((item) => readString4(item)).find(Boolean) || fallback;
+}
+function formatStateLabel(value, fallback = "\u2014") {
+  const raw = readString4(value);
+  if (!raw) return fallback;
+  return raw.replace(/_/g, " ");
+}
+function listXappMonetizationPaywalls(items) {
+  return (Array.isArray(items) ? items : []).filter((item) => item && typeof item === "object" && !Array.isArray(item)).map((item) => item);
+}
+function buildPaywallPlacementCandidates(value) {
+  const raw = readLower(value);
+  if (!raw) return [];
+  const out = /* @__PURE__ */ new Set([raw]);
+  if (raw === "paywall" || raw === "default_paywall") {
+    out.add("paywall");
+    out.add("default_paywall");
+  }
+  if (raw === "feature_paywall" || raw === "feature_gate") {
+    out.add("feature_paywall");
+    out.add("feature_gate");
+  }
+  if (raw === "upgrade" || raw === "upgrade_paywall") {
+    out.add("upgrade");
+    out.add("upgrade_paywall");
+  }
+  if (raw === "retention" || raw === "retention_paywall") {
+    out.add("retention");
+    out.add("retention_paywall");
+  }
+  if (raw === "checkout" || raw === "checkout_entry") {
+    out.add("checkout");
+    out.add("checkout_entry");
+  }
+  return Array.from(out);
+}
+function selectXappMonetizationPaywall(input) {
+  const paywalls = listXappMonetizationPaywalls(input.paywalls);
+  const slug = readLower(input.slug);
+  const placement = readLower(input.placement);
+  if (slug) {
+    const matched = paywalls.find((item) => readLower(item.slug) === slug);
+    if (matched) return matched;
+  }
+  if (placement) {
+    const candidates = buildPaywallPlacementCandidates(placement);
+    const matched = paywalls.find((item) => candidates.includes(readLower(item.placement)));
+    if (matched) return matched;
+  }
+  return paywalls[0] || null;
+}
+function flattenXappMonetizationPaywallPackages(paywall) {
+  const record = paywall && typeof paywall === "object" && !Array.isArray(paywall) ? paywall : {};
+  const out = [];
+  for (const pkg of Array.isArray(record.packages) ? record.packages : []) {
+    const packageRecord = pkg && typeof pkg === "object" && !Array.isArray(pkg) ? pkg : {};
+    const price = Array.isArray(packageRecord.prices) ? packageRecord.prices[0] || null : null;
+    out.push({
+      offeringId: readString4(packageRecord.offering_id),
+      offeringSlug: readString4(packageRecord.offering_slug),
+      offeringTitle: readString4(packageRecord.offering_slug) || "Offering",
+      offeringPlacement: readString4(packageRecord.offering_placement) || null,
+      packageId: readString4(packageRecord.id),
+      packageSlug: readString4(packageRecord.slug),
+      packageTitle: readString4(packageRecord.slug) || "Package",
+      packageKind: readString4(packageRecord.package_kind) || "standard",
+      productId: readString4(packageRecord.product?.id),
+      productSlug: readString4(packageRecord.product?.slug),
+      productFamily: readString4(
+        packageRecord.product?.product_family
+      ),
+      priceId: readString4(price?.id),
+      amount: readString4(price?.amount),
+      currency: readString4(price?.currency),
+      billingPeriod: readString4(price?.billing_period) || null,
+      purchasePolicy: readProjectedPurchasePolicy(packageRecord.purchase_policy),
+      metadata: packageRecord.metadata && typeof packageRecord.metadata === "object" ? packageRecord.metadata : {}
+    });
+  }
+  return out.filter((item) => item.offeringId && item.packageId && item.priceId);
+}
+function formatPlacementLabel(value, fallback = "General placement") {
+  const raw = readString4(value);
+  if (!raw) return fallback;
+  return raw.replace(/[_-]+/g, " ");
+}
+function readPackageCredits(item) {
+  const metadata = item.metadata && typeof item.metadata === "object" && !Array.isArray(item.metadata) ? item.metadata : {};
+  const direct = readNumber(item.credits ?? metadata.credits, -1);
+  if (direct > 0) return direct;
+  const included = readNumber(metadata.included_credits, -1);
+  if (included > 0) return included;
+  return 0;
+}
+function buildMonetizationOfferingPresentation(input) {
+  const record = input && typeof input === "object" && !Array.isArray(input) ? input : {};
+  const offeringLabel = readString4(record.offeringTitle) || formatStateLabel(record.offeringSlug, "Offering");
+  const placementRaw = readLower(record.offeringPlacement);
+  const placementLabel = formatPlacementLabel(record.offeringPlacement);
+  let summary = "General offering surface for this xapp.";
+  if (placementRaw.includes("feature") && placementRaw.includes("paywall")) {
+    summary = "Feature-paywall placement for gated in-app flows.";
+  } else if (placementRaw.includes("paywall")) {
+    summary = "Default paywall placement for monetized upgrade prompts.";
+  } else if (placementRaw.includes("checkout")) {
+    summary = "Direct checkout placement for purchase-driven flows.";
+  } else if (placementRaw.includes("upgrade")) {
+    summary = "Upgrade-oriented placement for membership and package switching.";
+  }
+  return {
+    offeringLabel,
+    placementLabel,
+    summary
+  };
+}
+function buildMonetizationPaywallPresentation(input) {
+  const record = input && typeof input === "object" && !Array.isArray(input) ? input : {};
+  const paywallLabel = readLocalizedText(record.title, formatStateLabel(record.slug, "Paywall")) || "Paywall";
+  const placementLabel = formatPlacementLabel(record.placement);
+  const packages = flattenXappMonetizationPaywallPackages(record);
+  const defaultPackageRef = readString4(record.default_package_ref);
+  const defaultPackage = packages.find((item) => readString4(item.packageSlug) === defaultPackageRef) || packages[0] || null;
+  const summary = readLocalizedText(record.description) || (placementLabel === "General placement" ? "Presentation surface for monetized package selection." : `${placementLabel} surface for monetized package selection.`);
+  return {
+    paywallLabel,
+    placementLabel,
+    summary,
+    defaultPackageLabel: defaultPackage ? readString4(defaultPackage.packageTitle) : "",
+    packageCountLabel: `${packages.length} package${packages.length === 1 ? "" : "s"}`
+  };
+}
+function buildMonetizationPaywallRenderModel(input) {
+  const record = input && typeof input === "object" && !Array.isArray(input) ? input : {};
+  const presentation = buildMonetizationPaywallPresentation(record);
+  const defaultPackageRef = readString4(record.default_package_ref);
+  const packages = flattenXappMonetizationPaywallPackages(record).map((item) => {
+    const packagePresentation = buildMonetizationPackagePresentation(item);
+    return {
+      packageId: readString4(item.packageId),
+      packageSlug: readString4(item.packageSlug),
+      packageTitle: readString4(item.packageTitle) || "Package",
+      productId: readString4(item.productId),
+      productSlug: readString4(item.productSlug),
+      productFamily: readString4(item.productFamily),
+      metadata: item.metadata && typeof item.metadata === "object" && !Array.isArray(item.metadata) ? item.metadata : {},
+      description: readString4(item.description) || packagePresentation.summary,
+      fitLabel: packagePresentation.fitLabel,
+      moneyLabel: packagePresentation.moneyLabel,
+      offeringLabel: packagePresentation.offeringLabel,
+      placementLabel: packagePresentation.placementLabel,
+      signals: packagePresentation.signals,
+      isDefault: Boolean(defaultPackageRef) && readString4(item.packageSlug) === defaultPackageRef
+    };
+  });
+  const badges = [presentation.placementLabel, presentation.packageCountLabel];
+  if (presentation.defaultPackageLabel) {
+    badges.push(`default ${presentation.defaultPackageLabel}`);
+  }
+  return {
+    ...presentation,
+    badges,
+    packages
+  };
+}
+function buildMonetizationPackagePresentation(input) {
+  const item = input && typeof input === "object" && !Array.isArray(input) ? input : {};
+  const packageKind = readString4(item.packageKind);
+  const packageSlug = readLower(item.packageSlug);
+  const metadata = item.metadata && typeof item.metadata === "object" && !Array.isArray(item.metadata) ? item.metadata : {};
+  const credits = readPackageCredits(item);
+  const moneyLabel = normalizeMoneyLabel(item);
+  const offeringPresentation = buildMonetizationOfferingPresentation(item);
+  let fitLabel = "General upgrade";
+  let summary = "Useful as a general monetization upgrade for this creator scope.";
+  if (packageKind === "one_time_unlock") {
+    fitLabel = "Durable unlock";
+    summary = "Best when the feature mainly needs current access without ongoing membership.";
+  } else if (packageKind === "subscription") {
+    fitLabel = "Recurring membership";
+    summary = "Best when the feature depends on ongoing membership coverage.";
+  } else if (packageKind === "credit_pack") {
+    fitLabel = "Credit top-up";
+    summary = "Best when the feature spends credits for each advanced action.";
+  } else if (packageSlug.includes("hybrid")) {
+    fitLabel = "Hybrid upgrade";
+    summary = "Blends access coverage with bundled credits for mixed workflows.";
+  }
+  const signals = [];
+  if (readString4(metadata.badge)) {
+    signals.push(readString4(metadata.badge));
+  }
+  if (credits > 0) {
+    signals.push(`${credits} credits`);
+  }
+  if (readString4(item.billingPeriod)) {
+    signals.push(`billed ${readString4(item.billingPeriod)}`);
+  }
+  if (offeringPresentation.offeringLabel) {
+    signals.push(offeringPresentation.offeringLabel);
+  }
+  if (offeringPresentation.placementLabel && offeringPresentation.placementLabel !== "General placement") {
+    signals.push(offeringPresentation.placementLabel);
+  }
+  return {
+    fitLabel,
+    summary,
+    signals,
+    moneyLabel,
+    offeringLabel: offeringPresentation.offeringLabel,
+    placementLabel: offeringPresentation.placementLabel,
+    offeringSummary: offeringPresentation.summary
+  };
+}
+function collectPackageOwnershipCandidates(item) {
+  const metadata = item.metadata && typeof item.metadata === "object" && !Array.isArray(item.metadata) ? item.metadata : {};
+  return [
+    readLower(item.productSlug),
+    readLower(item.packageSlug),
+    readLower(metadata.tier),
+    readLower(metadata.access_tier)
+  ].filter(Boolean);
+}
+function hasActiveRecurringSubscription(currentSubscription) {
+  const record = currentSubscription && typeof currentSubscription === "object" && !Array.isArray(currentSubscription) ? currentSubscription : {};
+  const status = readLower(record.status);
+  if (!status || status === "expired") return false;
+  const expiredAt = readString4(record.expired_at);
+  if (!expiredAt) return true;
+  const expiresAtMs = Date.parse(expiredAt);
+  return Number.isNaN(expiresAtMs) || expiresAtMs > Date.now();
+}
+function hasCurrentOwnedEntitlement(entitlement) {
+  const status = readLower(entitlement.status);
+  if (status !== "active" && status !== "grace_period") return false;
+  const expiresAt = readString4(entitlement.expires_at);
+  if (!expiresAt) return true;
+  const expiresAtMs = Date.parse(expiresAt);
+  return Number.isNaN(expiresAtMs) || expiresAtMs > Date.now();
+}
+function readProjectedPurchasePolicy(value) {
+  const record = value && typeof value === "object" && !Array.isArray(value) ? value : null;
+  if (!record) return null;
+  const status = readLower(record.status);
+  const transitionKind = readLower(record.transition_kind ?? record.transitionKind);
+  if (!status || !transitionKind) return null;
+  return {
+    canPurchase: readBoolean(record.can_purchase ?? record.canPurchase, true),
+    status: status === "current_recurring_plan" || status === "owned_additive_unlock" ? status : "available",
+    transitionKind: transitionKind === "start_recurring" || transitionKind === "replace_recurring" || transitionKind === "buy_additive_unlock" || transitionKind === "buy_credit_pack" || transitionKind === "activate_hybrid" ? transitionKind : "none",
+    reason: readString4(record.reason) || null
+  };
+}
+function resolveMonetizationPackagePurchasePolicy(input) {
+  const item = input.item && typeof input.item === "object" ? input.item : {};
+  const projectedPolicy = readProjectedPurchasePolicy(item.purchasePolicy ?? item.purchase_policy);
+  if (projectedPolicy) return projectedPolicy;
+  const currentSubscription = input.currentSubscription && typeof input.currentSubscription === "object" && !Array.isArray(input.currentSubscription) ? input.currentSubscription : {};
+  const additiveEntitlements = Array.isArray(input.additiveEntitlements) ? input.additiveEntitlements : [];
+  const productFamily = readLower(item.productFamily);
+  const packageKind = readLower(item.packageKind);
+  const productId = readLower(item.productId);
+  const currentSubscriptionProductId = readLower(currentSubscription.product_id);
+  const ownershipCandidates = new Set(collectPackageOwnershipCandidates(item));
+  const ownedAdditiveUnlock = additiveEntitlements.some((entry) => {
+    const entitlement = entry && typeof entry === "object" && !Array.isArray(entry) ? entry : {};
+    if (!hasCurrentOwnedEntitlement(entitlement)) return false;
+    const entitlementProductId = readLower(entitlement.product_id);
+    if (productId && entitlementProductId && productId === entitlementProductId) return true;
+    const candidateValues = [
+      readLower(entitlement.product_slug),
+      readLower(entitlement.tier)
+    ].filter(Boolean);
+    return candidateValues.some((value) => ownershipCandidates.has(value));
+  });
+  if (hasActiveRecurringSubscription(currentSubscription) && productId && currentSubscriptionProductId && productId === currentSubscriptionProductId) {
+    return {
+      canPurchase: false,
+      status: "current_recurring_plan",
+      transitionKind: "none",
+      reason: "current_recurring_plan"
+    };
+  }
+  if ((productFamily === "one_time_unlock" || packageKind === "one_time_unlock") && ownedAdditiveUnlock) {
+    return {
+      canPurchase: false,
+      status: "owned_additive_unlock",
+      transitionKind: "none",
+      reason: "owned_additive_unlock"
+    };
+  }
+  if (productFamily === "credit_pack" || packageKind === "credit_pack") {
+    return {
+      canPurchase: true,
+      status: "available",
+      transitionKind: "buy_credit_pack",
+      reason: null
+    };
+  }
+  if (productFamily === "one_time_unlock" || packageKind === "one_time_unlock") {
+    return {
+      canPurchase: true,
+      status: "available",
+      transitionKind: "buy_additive_unlock",
+      reason: null
+    };
+  }
+  if (productFamily === "subscription_plan" || packageKind === "subscription") {
+    return {
+      canPurchase: true,
+      status: "available",
+      transitionKind: hasActiveRecurringSubscription(currentSubscription) ? "replace_recurring" : "start_recurring",
+      reason: null
+    };
+  }
+  if (productFamily === "hybrid_plan") {
+    return {
+      canPurchase: true,
+      status: "available",
+      transitionKind: "activate_hybrid",
+      reason: null
+    };
+  }
+  return {
+    canPurchase: true,
+    status: "available",
+    transitionKind: "none",
+    reason: null
+  };
+}
+function normalizeMoneyLabel(item) {
+  const amount = readString4(item.amount);
+  const currency = readString4(item.currency);
+  const billingPeriod = readString4(item.billingPeriod);
+  if (!amount && !currency) return "Price unavailable";
+  return `${amount} ${currency}${billingPeriod ? ` / ${billingPeriod}` : ""}`.trim();
+}
+
 // src/utils/monetizationAccess.ts
 function asRecord5(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return null;
@@ -4310,17 +4730,49 @@ function asRecord6(value) {
   if (!value || typeof value !== "object" || Array.isArray(value)) return null;
   return value;
 }
-function readString4(value) {
+function readString5(value) {
   return typeof value === "string" ? value.trim() : "";
 }
-function readBoolean(value, fallback) {
+function readBoolean2(value, fallback) {
   return typeof value === "boolean" ? value : fallback;
 }
-function readNumber(value) {
+function readNumber2(value) {
   return typeof value === "number" && Number.isFinite(value) ? value : null;
 }
+function buildMonetizationCheckoutReturnUrl(input) {
+  const url = new URL(input.currentHref, window.location.href);
+  url.searchParams.set("focus", "plans");
+  url.searchParams.set("xapps_monetization_intent_id", input.intentId);
+  if (input.packageSlug) {
+    url.searchParams.set("paywallPackage", input.packageSlug);
+  }
+  return url.toString();
+}
+function navigateToHostedCheckout(url) {
+  const target = String(url || "").trim();
+  if (!target) return;
+  try {
+    if (typeof window !== "undefined" && window.top && window.top !== window) {
+      window.top.location.assign(target);
+      return;
+    }
+  } catch {
+  }
+  window.location.assign(target);
+}
+function stripMonetizationCheckoutReturnParams(search) {
+  const next = new URLSearchParams(search);
+  const keysToDelete = [];
+  for (const key of next.keys()) {
+    if (key.startsWith("xapps_payment_")) keysToDelete.push(key);
+  }
+  keysToDelete.push("xapps_monetization_intent_id");
+  for (const key of keysToDelete) next.delete(key);
+  const rendered = next.toString();
+  return rendered ? `?${rendered}` : "";
+}
 function formatDateTime2(value, locale) {
-  const raw = readString4(value);
+  const raw = readString5(value);
   if (!raw) return "";
   const parsed = new Date(raw);
   if (Number.isNaN(parsed.getTime())) return raw;
@@ -4339,28 +4791,28 @@ function formatDateTime2(value, locale) {
 function normalizeUsageCreditSummary(value) {
   const summary = asRecord6(value);
   if (!summary) return null;
-  const availableCount = readNumber(summary.available_count) ?? 0;
-  const availableSessionBackedCount = readNumber(summary.available_session_backed_count) ?? 0;
-  const availableLedgerOnlyCount = readNumber(summary.available_ledger_only_count) ?? 0;
-  const reservedCount = readNumber(summary.reserved_count) ?? 0;
-  const reservedActiveCount = readNumber(summary.reserved_active_count) ?? reservedCount;
-  const reservedStaleCount = readNumber(summary.reserved_stale_count) ?? 0;
-  const consumedCount = readNumber(summary.consumed_count) ?? 0;
+  const availableCount = readNumber2(summary.available_count) ?? 0;
+  const availableSessionBackedCount = readNumber2(summary.available_session_backed_count) ?? 0;
+  const availableLedgerOnlyCount = readNumber2(summary.available_ledger_only_count) ?? 0;
+  const reservedCount = readNumber2(summary.reserved_count) ?? 0;
+  const reservedActiveCount = readNumber2(summary.reserved_active_count) ?? reservedCount;
+  const reservedStaleCount = readNumber2(summary.reserved_stale_count) ?? 0;
+  const consumedCount = readNumber2(summary.consumed_count) ?? 0;
   const byToolRaw = Array.isArray(summary.by_tool) ? summary.by_tool : [];
   const byTool = byToolRaw.map((entry) => {
     const record = asRecord6(entry);
     if (!record) return null;
-    const toolName = readString4(record.tool_name);
+    const toolName = readString5(record.tool_name);
     if (!toolName) return null;
     return {
       tool_name: toolName,
-      available_count: readNumber(record.available_count) ?? 0,
-      available_session_backed_count: readNumber(record.available_session_backed_count) ?? 0,
-      available_ledger_only_count: readNumber(record.available_ledger_only_count) ?? 0,
-      reserved_count: readNumber(record.reserved_count) ?? 0,
-      reserved_active_count: readNumber(record.reserved_active_count) ?? readNumber(record.reserved_count) ?? 0,
-      reserved_stale_count: readNumber(record.reserved_stale_count) ?? 0,
-      consumed_count: readNumber(record.consumed_count) ?? 0
+      available_count: readNumber2(record.available_count) ?? 0,
+      available_session_backed_count: readNumber2(record.available_session_backed_count) ?? 0,
+      available_ledger_only_count: readNumber2(record.available_ledger_only_count) ?? 0,
+      reserved_count: readNumber2(record.reserved_count) ?? 0,
+      reserved_active_count: readNumber2(record.reserved_active_count) ?? readNumber2(record.reserved_count) ?? 0,
+      reserved_stale_count: readNumber2(record.reserved_stale_count) ?? 0,
+      consumed_count: readNumber2(record.consumed_count) ?? 0
     };
   }).filter((entry) => Boolean(entry)).filter(
     (entry) => entry.available_count > 0 || entry.available_ledger_only_count > 0 || entry.reserved_active_count > 0 || entry.reserved_stale_count > 0
@@ -4376,14 +4828,14 @@ function normalizeUsageCreditSummary(value) {
     reserved_active_count: reservedActiveCount,
     reserved_stale_count: reservedStaleCount,
     consumed_count: consumedCount,
-    updated_at: readString4(summary.updated_at) || null,
+    updated_at: readString5(summary.updated_at) || null,
     by_tool: byTool
   };
 }
 function normalizeGuardPolicyKind(policy) {
   if (policy === "all" || policy === "any") return policy;
   const policyObj = asRecord6(policy);
-  const mode = readString4(policyObj?.mode);
+  const mode = readString5(policyObj?.mode);
   return mode === "any" ? "any" : "all";
 }
 function defaultBlockingForTrigger(trigger) {
@@ -4392,6 +4844,47 @@ function defaultBlockingForTrigger(trigger) {
 function humanizeSlug(slug) {
   return String(slug || "").trim().replace(/[_-]+/g, " ").replace(/\s+/g, " ").replace(/\b\w/g, (char) => char.toUpperCase());
 }
+function buildMonetizationHookSummaryItems(manifest) {
+  const monetization = asRecord6(manifest?.monetization);
+  const hooks = asRecord6(monetization?.hooks);
+  const afterPaymentCompleted = asRecord6(
+    hooks?.after_payment_completed ?? hooks?.afterPaymentCompleted
+  );
+  if (!afterPaymentCompleted || readBoolean2(afterPaymentCompleted.enabled, true) === false) {
+    return [];
+  }
+  const baseItems = [];
+  const defaultInvoiceRef = readString5(
+    afterPaymentCompleted.invoice_ref ?? afterPaymentCompleted.invoiceRef
+  );
+  baseItems.push({
+    slug: "xms_after_payment_completed",
+    label: defaultInvoiceRef ? `XMS payment completed \xB7 ${defaultInvoiceRef}` : "XMS payment completed",
+    trigger: "after:payment_completed",
+    headless: true,
+    blocking: false,
+    order: null,
+    policyKind: "all"
+  });
+  const byPaymentGuardRef = asRecord6(
+    afterPaymentCompleted.by_payment_guard_ref ?? afterPaymentCompleted.byPaymentGuardRef
+  );
+  for (const [paymentGuardRef, rawValue] of Object.entries(byPaymentGuardRef ?? {})) {
+    const config = asRecord6(rawValue);
+    if (!config || readBoolean2(config.enabled, true) === false) continue;
+    const invoiceRef = readString5(config.invoice_ref ?? config.invoiceRef);
+    baseItems.push({
+      slug: `xms_after_payment_completed_${paymentGuardRef}`,
+      label: invoiceRef ? `XMS payment completed \xB7 ${paymentGuardRef} \xB7 ${invoiceRef}` : `XMS payment completed \xB7 ${paymentGuardRef}`,
+      trigger: "after:payment_completed",
+      headless: true,
+      blocking: false,
+      order: null,
+      policyKind: "all"
+    });
+  }
+  return baseItems;
+}
 function humanizeTrigger(trigger, translate) {
   const normalized = String(trigger || "").trim().toLowerCase();
   if (normalized === "before:tool_run") {
@@ -4413,6 +4906,12 @@ function describeGuardChain(policyKind, translate) {
   return policyKind === "any" ? translate("xapp.policy_any", void 0, "Any one satisfies") : translate("xapp.policy_all", void 0, "All steps apply");
 }
 function XappDetailPage() {
+  return /* @__PURE__ */ jsx14(XappDetailPageContent, {});
+}
+function XappPlansPage() {
+  return /* @__PURE__ */ jsx14(XappDetailPageContent, { renderMode: "plans_only" });
+}
+function XappDetailPageContent(props) {
   const { client, host, env } = useMarketplace();
   const { locale, t } = useMarketplaceI18n();
   const { xappId } = useParams2();
@@ -4420,14 +4919,30 @@ function XappDetailPage() {
   const token = useQueryToken7();
   const action = useQueryAction();
   const queryToolName = useQueryToolName();
+  const routeQuery = useMemo8(() => new URLSearchParams(loc.search), [loc.search]);
+  const routeSource = String(routeQuery.get("from") || "").trim().toLowerCase();
+  const focusedSection = String(routeQuery.get("focus") || "").trim().toLowerCase();
+  const requestedPaywallSlug = String(routeQuery.get("paywall") || "").trim().toLowerCase();
+  const selectedPaywallPackageSlug = String(routeQuery.get("paywallPackage") || "").trim().toLowerCase();
+  const paymentReturnStatus = String(routeQuery.get("xapps_payment_status") || "").trim().toLowerCase();
+  const paymentReturnSessionId = String(routeQuery.get("xapps_payment_session_id") || "").trim();
+  const paymentReturnIntentId = String(routeQuery.get("xapps_monetization_intent_id") || "").trim();
   const tokenSearch = buildTokenSearch(token, loc.search);
   const navigate = useNavigate3();
   const autoOpenedWidgetKeyRef = useRef("");
+  const plansSectionRef = useRef(null);
   const canMutate = host.canMutate ? host.canMutate() : true;
+  const renderMode = props?.renderMode === "plans_only" ? "plans_only" : "full";
+  const plansOnlyMode = renderMode === "plans_only";
+  const widgetHostedPlansMode = plansOnlyMode && routeSource === "widget";
   const addAppLabel = env?.copy?.addAppLabel || t("xapp.add_to_workspace", void 0, "Add to workspace");
   const removeAppLabel = env?.copy?.removeAppLabel || t("xapp.remove_from_workspace", void 0, "Remove from workspace");
   const updateAppLabel = env?.copy?.updateAppLabel || t("xapp.update_app", void 0, "Update app");
   const openAppLabel = env?.copy?.openAppLabel || t("xapp.open_app", void 0, "Open app");
+  const hasSubject = Boolean(host.subjectId);
+  const installationPolicyResolved = env?.installationPolicyResolved !== false;
+  const mutationControlsReady = installationPolicyResolved || !hasSubject || !canMutate;
+  const installationPolicy = env?.installationPolicy ?? host.installationPolicy ?? null;
   const [data, setData] = useState7(null);
   const [monetization, setMonetization] = useState7(null);
   const [error, setError] = useState7(null);
@@ -4436,13 +4951,24 @@ function XappDetailPage() {
   const [termsOpen, setTermsOpen] = useState7(false);
   const [termsAccepted, setTermsAccepted] = useState7(false);
   const [termsAction, setTermsAction] = useState7("none");
+  const [termsWidgetId, setTermsWidgetId] = useState7(null);
+  const [termsWidgetName, setTermsWidgetName] = useState7(null);
   const [removeConfirmOpen, setRemoveConfirmOpen] = useState7(false);
   const [guardSummaryOpen, setGuardSummaryOpen] = useState7(false);
-  const hasSubject = Boolean(host.subjectId);
+  const [checkoutBusyPackageSlug, setCheckoutBusyPackageSlug] = useState7("");
+  const [checkoutError, setCheckoutError] = useState7(null);
+  const [checkoutNotice, setCheckoutNotice] = useState7(null);
+  const checkoutFinalizeKeyRef = useRef("");
   const installationsByXappId = hasSubject ? host.getInstallationsByXappId() : {};
-  const installation = xappId ? installationsByXappId[String(xappId)] : null;
+  const routeInstallationId = String(routeQuery.get("installationId") || "").trim();
+  const installation = xappId && installationsByXappId[String(xappId)] ? installationsByXappId[String(xappId)] : xappId && routeInstallationId ? {
+    installationId: routeInstallationId,
+    xappId: String(xappId)
+  } : null;
   const updateAvailable = Boolean(installation?.updateAvailable);
-  const widgetsEnabled = Boolean(installation) && !updateAvailable && hasSubject;
+  const autoAvailableMode = mutationControlsReady && installationPolicy?.mode === "auto_available" && Boolean(hasSubject) && canMutate;
+  const autoUpdateMode = mutationControlsReady && installationPolicy?.update_mode === "auto_update_compatible" && Boolean(hasSubject) && canMutate;
+  const widgetsEnabled = Boolean(hasSubject) && (Boolean(installation) || autoAvailableMode) && (!updateAvailable || autoUpdateMode);
   const isEmbedded = window.location.pathname.startsWith("/embed");
   const singleXappMode = env?.singleXappMode;
   async function refresh() {
@@ -4455,7 +4981,7 @@ function XappDetailPage() {
       });
       setData(asRecord6(res));
     } catch (e) {
-      setError(readString4(asRecord6(e)?.message) || String(e));
+      setError(readString5(asRecord6(e)?.message) || String(e));
     } finally {
       setBusy(false);
     }
@@ -4499,7 +5025,10 @@ function XappDetailPage() {
     let cancelled = false;
     void (async () => {
       try {
-        const next = await client.getMyXappMonetization(currentXappId);
+        const next = await client.getMyXappMonetization(currentXappId, {
+          installationId: installation?.installationId ?? null,
+          locale
+        });
         if (!cancelled) {
           setMonetization(next);
         }
@@ -4512,23 +5041,23 @@ function XappDetailPage() {
     return () => {
       cancelled = true;
     };
-  }, [client, host.subjectId, xappId]);
+  }, [client, host.subjectId, installation?.installationId, xappId]);
   const manifest = asRecord6(data?.manifest);
   const xappRecord = asRecord6(data?.xapp);
   const versionRecord = asRecord6(data?.version);
   const publisherRecord = asRecord6(xappRecord?.publisher);
-  const title = resolveMarketplaceText(manifest?.title, locale) || readString4(xappRecord?.name) || t("xapp.kicker_default", void 0, "Xapp");
-  const description = resolveMarketplaceText(manifest?.description, locale) || readString4(xappRecord?.description) || "";
-  const imageUrl = readString4(manifest?.image) || "https://picsum.photos/seed/xapps-detail/840/360";
+  const title = resolveMarketplaceText(manifest?.title, locale) || readString5(xappRecord?.name) || t("xapp.kicker_default", void 0, "Xapp");
+  const description = resolveMarketplaceText(manifest?.description, locale) || readString5(xappRecord?.description) || "";
+  const imageUrl = readString5(manifest?.image) || "https://picsum.photos/seed/xapps-detail/840/360";
   const widgets = Array.isArray(data?.widgets) ? data.widgets.filter((widget) => Boolean(asRecord6(widget))) : [];
   const defaultWidget = useMemo8(() => {
-    const def = widgets.find((w) => readBoolean(w.default, false));
+    const def = widgets.find((w) => readBoolean2(w.default, false));
     return def || widgets[0] || null;
   }, [widgets]);
   const requestedWidget = useMemo8(() => {
-    const desiredToolName = readString4(queryToolName);
+    const desiredToolName = readString5(queryToolName);
     if (!desiredToolName) return defaultWidget;
-    return widgets.find((widget) => readString4(widget.bind_tool_name) === desiredToolName) || defaultWidget;
+    return widgets.find((widget) => readString5(widget.bind_tool_name) === desiredToolName) || defaultWidget;
   }, [defaultWidget, queryToolName, widgets]);
   const backTo = {
     pathname: isEmbedded ? "/embed/catalog" : "..",
@@ -4536,55 +5065,126 @@ function XappDetailPage() {
   };
   const terms = asRecord6(manifest?.terms);
   const termsTitle = resolveMarketplaceText(terms?.title, locale) || t("xapp.terms_title", void 0, "Terms & Conditions");
-  const termsText = resolveMarketplaceText(terms?.text, locale) || readString4(terms?.text);
-  const termsUrl = readString4(terms?.url);
+  const termsText = resolveMarketplaceText(terms?.text, locale) || readString5(terms?.text);
+  const termsUrl = readString5(terms?.url);
   const hasTermsContent = Boolean(termsText || termsUrl);
   const requiresTerms = Boolean(terms || action === "install" || action === "update");
+  function requestInstallForWidget(widgetId, widgetName = null, acceptedTerms = false, openAfterInstall = false) {
+    host.requestInstall({
+      xappId: String(xappId ?? ""),
+      defaultWidgetId: widgetId,
+      xappTitle: String(title),
+      widgetName,
+      openAfterInstall,
+      subjectId: host.subjectId ?? null,
+      ...acceptedTerms ? { termsAccepted: true } : {}
+    });
+  }
+  function requestUpdateForWidget(widgetId, acceptedTerms = false) {
+    if (!installation?.installationId || !host.requestUpdate) return;
+    const activeWidget = widgetId && Array.isArray(widgets) ? widgets.find((entry) => readString5(entry.id) === widgetId) || null : null;
+    host.requestUpdate({
+      installationId: installation.installationId,
+      xappId: String(xappId ?? ""),
+      widgetId,
+      xappTitle: String(title),
+      widgetName: resolveMarketplaceText(activeWidget?.title, locale) || readString5(activeWidget?.name) || null,
+      ...acceptedTerms ? { termsAccepted: true } : {}
+    });
+  }
+  function openInstalledWidget(widgetId, widgetName, toolName) {
+    if (!installation) return;
+    if (env?.embedMode) {
+      navigate({
+        pathname: isEmbedded ? `/widget/${encodeURIComponent(installation.installationId)}/${encodeURIComponent(widgetId)}` : `/marketplace/widget/${encodeURIComponent(installation.installationId)}/${encodeURIComponent(widgetId)}`,
+        search: tokenSearch
+      });
+      return;
+    }
+    host.openWidget({
+      installationId: installation.installationId,
+      widgetId,
+      xappId: String(xappId ?? ""),
+      xappTitle: String(title),
+      widgetName,
+      toolName
+    });
+  }
+  function launchWidgetForSubject(widgetId, widgetName, toolName) {
+    if (!hasSubject || !widgetId) return;
+    if (!installation) {
+      if (requiresTerms) {
+        setTermsAccepted(false);
+        setTermsAction("install");
+        setTermsWidgetId(widgetId);
+        setTermsWidgetName(widgetName);
+        setTermsOpen(true);
+        return;
+      }
+      requestInstallForWidget(widgetId, widgetName, false, true);
+      return;
+    }
+    if (updateAvailable) {
+      if (autoUpdateMode && host.requestUpdate) {
+        if (requiresTerms) {
+          setTermsAccepted(false);
+          setTermsAction("update");
+          setTermsWidgetId(widgetId);
+          setTermsWidgetName(widgetName);
+          setTermsOpen(true);
+          return;
+        }
+        requestUpdateForWidget(widgetId);
+      }
+      return;
+    }
+    openInstalledWidget(widgetId, widgetName, toolName);
+  }
   useEffect9(() => {
     if (action === "install") {
       setTermsAccepted(false);
       setTermsAction("install");
+      setTermsWidgetId(readString5(defaultWidget?.id) || null);
+      setTermsWidgetName(resolveMarketplaceText(defaultWidget?.title, locale) || null);
       setTermsOpen(true);
       return;
     }
     if (action === "update" && installation) {
       setTermsAccepted(false);
       setTermsAction("update");
+      setTermsWidgetId(null);
+      setTermsWidgetName(null);
       setTermsOpen(true);
     }
-  }, [action, installation]);
+  }, [action, defaultWidget, installation, locale]);
   useEffect9(() => {
     if (action !== "open-widget") return;
     if (env?.embedMode) return;
-    if (!installation || !widgetsEnabled) return;
+    if (!requestedWidget || !widgetsEnabled) return;
     const widget = requestedWidget;
-    const widgetId = readString4(widget?.id);
+    const widgetId = readString5(widget?.id);
     if (!widgetId) return;
     const key = [
       String(xappId ?? ""),
-      installation.installationId,
+      installation?.installationId || "auto",
       widgetId,
-      readString4(queryToolName)
+      readString5(queryToolName)
     ].join(":");
     if (autoOpenedWidgetKeyRef.current === key) return;
     autoOpenedWidgetKeyRef.current = key;
-    host.openWidget({
-      installationId: installation.installationId,
+    launchWidgetForSubject(
       widgetId,
-      xappId: String(xappId ?? ""),
-      xappTitle: String(title),
-      widgetName: resolveMarketplaceText(widget?.title, locale) || readString4(widget?.widget_name) || readString4(widget?.name) || t("common.widget", void 0, "Widget"),
-      toolName: readString4(widget?.bind_tool_name)
-    });
+      resolveMarketplaceText(widget?.title, locale) || readString5(widget?.widget_name) || readString5(widget?.name) || t("common.widget", void 0, "Widget"),
+      readString5(widget?.bind_tool_name)
+    );
   }, [
     action,
     env?.embedMode,
-    host,
     installation,
+    launchWidgetForSubject,
     locale,
     queryToolName,
     requestedWidget,
-    title,
     widgetsEnabled,
     xappId
   ]);
@@ -4618,8 +5218,8 @@ function XappDetailPage() {
     }
     return t("activity.requests_title", void 0, "Requests");
   }
-  const publisherSlug = readString4(publisherRecord?.slug);
-  const publisherName = readString4(publisherRecord?.name) || publisherSlug;
+  const publisherSlug = readString5(publisherRecord?.slug);
+  const publisherName = readString5(publisherRecord?.name) || publisherSlug;
   const publisherTo = publisherSlug ? {
     pathname: isEmbedded ? `/publishers/${encodeURIComponent(publisherSlug)}` : `/marketplace/publishers/${encodeURIComponent(publisherSlug)}`,
     search: tokenSearch
@@ -4627,28 +5227,31 @@ function XappDetailPage() {
   const guardSummary = useMemo8(() => {
     const guardsRaw = Array.isArray(manifest?.guards) ? manifest.guards : [];
     const policyMap = asRecord6(manifest?.guards_policy) ?? {};
-    const items = guardsRaw.map((raw) => {
+    const guardItems = guardsRaw.map((raw) => {
       const guard = asRecord6(raw);
       if (!guard) return null;
-      const trigger = readString4(guard.trigger);
-      const slug = readString4(guard.slug);
+      const trigger = readString5(guard.trigger);
+      const slug = readString5(guard.slug);
       if (!trigger || !slug) return null;
       const policyKind = normalizeGuardPolicyKind(policyMap[trigger]);
       return {
         slug,
         trigger,
-        headless: readBoolean(guard.headless, true),
-        blocking: readBoolean(guard.blocking, defaultBlockingForTrigger(trigger)),
-        order: readNumber(guard.order),
+        headless: readBoolean2(guard.headless, true),
+        blocking: readBoolean2(guard.blocking, defaultBlockingForTrigger(trigger)),
+        order: readNumber2(guard.order),
         policyKind
       };
-    }).filter((item) => Boolean(item)).sort((a, b) => {
-      const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
-      const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
-      if (orderA !== orderB) return orderA - orderB;
-      if (a.trigger !== b.trigger) return a.trigger.localeCompare(b.trigger);
-      return a.slug.localeCompare(b.slug);
-    });
+    }).filter((item) => Boolean(item));
+    const items = [...guardItems, ...buildMonetizationHookSummaryItems(manifest)].sort(
+      (a, b) => {
+        const orderA = a.order ?? Number.MAX_SAFE_INTEGER;
+        const orderB = b.order ?? Number.MAX_SAFE_INTEGER;
+        if (orderA !== orderB) return orderA - orderB;
+        if (a.trigger !== b.trigger) return a.trigger.localeCompare(b.trigger);
+        return a.slug.localeCompare(b.slug);
+      }
+    );
     const byTrigger = /* @__PURE__ */ new Map();
     for (const item of items) {
       const existing = byTrigger.get(item.trigger) ?? [];
@@ -4662,15 +5265,259 @@ function XappDetailPage() {
     [data?.usage_credit_summary]
   );
   const monetizationAccessProjection = monetization?.access_projection ?? null;
+  const monetizationPaywalls = useMemo8(
+    () => listXappMonetizationPaywalls(monetization?.paywalls),
+    [monetization?.paywalls]
+  );
+  const selectedPaywall = useMemo8(
+    () => monetizationPaywalls.find(
+      (item) => readString5(asRecord6(item)?.slug).trim().toLowerCase() === requestedPaywallSlug
+    ) || selectXappMonetizationPaywall({
+      paywalls: monetizationPaywalls,
+      placement: "default_paywall"
+    }) || selectXappMonetizationPaywall({
+      paywalls: monetizationPaywalls,
+      placement: "paywall"
+    }) || monetizationPaywalls[0] || null,
+    [monetizationPaywalls, requestedPaywallSlug]
+  );
+  const selectedPaywallRenderModel = useMemo8(
+    () => selectedPaywall ? buildMonetizationPaywallRenderModel(selectedPaywall) : null,
+    [selectedPaywall]
+  );
+  const selectedPaywallPackageRecords = useMemo8(
+    () => selectedPaywall ? flattenXappMonetizationPaywallPackages(selectedPaywall) : [],
+    [selectedPaywall]
+  );
+  useEffect9(() => {
+    if (focusedSection !== "plans" || !plansSectionRef.current) return;
+    if (typeof plansSectionRef.current.scrollIntoView === "function") {
+      plansSectionRef.current.scrollIntoView({ behavior: "smooth", block: "start" });
+    }
+  }, [focusedSection]);
+  useEffect9(() => {
+    const currentXappId = String(xappId ?? "").trim();
+    if (!currentXappId || !paymentReturnIntentId || !paymentReturnStatus) return;
+    const handledKey = [
+      currentXappId,
+      paymentReturnIntentId,
+      paymentReturnSessionId,
+      paymentReturnStatus
+    ].join(":");
+    if (checkoutFinalizeKeyRef.current === handledKey) return;
+    checkoutFinalizeKeyRef.current = handledKey;
+    const clearReturnParams = () => {
+      const nextSearch = stripMonetizationCheckoutReturnParams(loc.search);
+      void navigate(
+        {
+          pathname: loc.pathname,
+          search: nextSearch
+        },
+        { replace: true }
+      );
+    };
+    if (paymentReturnStatus === "cancelled" || paymentReturnStatus === "canceled") {
+      setCheckoutError(null);
+      setCheckoutNotice(
+        t("xapp.checkout_cancelled", void 0, "Checkout was cancelled before completion.")
+      );
+      clearReturnParams();
+      return;
+    }
+    if (paymentReturnStatus === "failed") {
+      setCheckoutNotice(null);
+      setCheckoutError(
+        t("xapp.checkout_failed", void 0, "Payment failed before access could be issued.")
+      );
+      clearReturnParams();
+      return;
+    }
+    if (paymentReturnStatus !== "paid" || typeof client.finalizeMyXappPurchasePaymentSession !== "function") {
+      return;
+    }
+    let cancelled = false;
+    setCheckoutNotice(
+      t("xapp.checkout_finalizing", void 0, "Finalizing payment and refreshing access...")
+    );
+    setCheckoutError(null);
+    void (async () => {
+      try {
+        await client.finalizeMyXappPurchasePaymentSession({
+          xappId: currentXappId,
+          intentId: paymentReturnIntentId
+        });
+        if (typeof client.getMyXappMonetization === "function") {
+          const next = await client.getMyXappMonetization(currentXappId, {
+            installationId: installation?.installationId ?? null,
+            locale
+          });
+          if (!cancelled) setMonetization(next);
+        }
+        if (!cancelled) {
+          setCheckoutNotice(
+            t("xapp.checkout_finalized", void 0, "Payment completed and access was refreshed.")
+          );
+          clearReturnParams();
+        }
+      } catch (error2) {
+        if (cancelled) return;
+        const message = readString5(asRecord6(error2)?.message) || (error2 instanceof Error ? error2.message : "") || t(
+          "xapp.checkout_finalize_failed",
+          void 0,
+          "Payment returned, but access refresh did not complete yet."
+        );
+        setCheckoutNotice(null);
+        setCheckoutError(message);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [
+    client,
+    installation?.installationId,
+    locale,
+    loc.pathname,
+    loc.search,
+    navigate,
+    paymentReturnIntentId,
+    paymentReturnSessionId,
+    paymentReturnStatus,
+    t,
+    xappId
+  ]);
+  async function finalizeCurrentUserCheckoutIntent(currentXappId, intentId) {
+    if (typeof client.finalizeMyXappPurchasePaymentSession !== "function") {
+      throw new Error(
+        t(
+          "xapp.checkout_finalize_unavailable",
+          void 0,
+          "Access refresh is not available for this checkout flow."
+        )
+      );
+    }
+    setCheckoutNotice(
+      t("xapp.checkout_finalizing", void 0, "Finalizing payment and refreshing access...")
+    );
+    setCheckoutError(null);
+    await client.finalizeMyXappPurchasePaymentSession({
+      xappId: currentXappId,
+      intentId
+    });
+    if (typeof client.getMyXappMonetization === "function") {
+      const next = await client.getMyXappMonetization(currentXappId, {
+        installationId: installation?.installationId ?? null,
+        locale
+      });
+      setMonetization(next);
+    }
+    setCheckoutNotice(
+      t("xapp.checkout_finalized", void 0, "Payment completed and access was refreshed.")
+    );
+  }
+  async function startPackageCheckout(packageSlug) {
+    const normalizedSlug = packageSlug.trim().toLowerCase();
+    if (!xappId || typeof client.prepareMyXappPurchaseIntent !== "function" || typeof client.createMyXappPurchasePaymentSession !== "function" || !normalizedSlug) {
+      return;
+    }
+    const pkg = selectedPaywallPackageRecords.find(
+      (item) => readString5(item.packageSlug).trim().toLowerCase() === normalizedSlug
+    );
+    if (pkg) {
+      const purchasePolicy = getPackagePurchasePolicy(pkg);
+      if (!purchasePolicy.canPurchase) {
+        setCheckoutError(
+          purchasePolicy.status === "owned_additive_unlock" ? t(
+            "xapp.checkout_owned_unlock_blocked",
+            void 0,
+            "This add-on unlock is already owned for the current monetization scope."
+          ) : t(
+            "xapp.checkout_current_plan_blocked",
+            void 0,
+            "This plan is already active for the current monetization scope."
+          )
+        );
+        return;
+      }
+    }
+    const offeringId = readString5(pkg?.offeringId);
+    const packageId = readString5(pkg?.packageId);
+    const priceId = readString5(pkg?.priceId);
+    if (!offeringId || !packageId || !priceId) {
+      setCheckoutError(
+        t(
+          "xapp.checkout_package_missing",
+          void 0,
+          "This package is missing purchase metadata in the published paywall."
+        )
+      );
+      return;
+    }
+    setCheckoutBusyPackageSlug(normalizedSlug);
+    setCheckoutError(null);
+    setCheckoutNotice(null);
+    try {
+      const prepared = await client.prepareMyXappPurchaseIntent({
+        xappId: String(xappId),
+        offeringId,
+        packageId,
+        priceId,
+        installationId: installation?.installationId ?? null
+      });
+      const returnUrl = buildMonetizationCheckoutReturnUrl({
+        currentHref: window.location.href,
+        intentId: String(prepared.prepared_intent.purchase_intent_id || ""),
+        packageSlug: normalizedSlug
+      });
+      const payment = await client.createMyXappPurchasePaymentSession({
+        xappId: String(xappId),
+        intentId: String(prepared.prepared_intent.purchase_intent_id || ""),
+        returnUrl,
+        cancelUrl: returnUrl,
+        xappsResume: returnUrl,
+        locale
+      });
+      const paymentPageUrl = readString5(payment.payment_page_url);
+      const paymentStatus = readString5(payment.payment_session?.status).trim().toLowerCase();
+      if (!paymentPageUrl && (paymentStatus === "paid" || paymentStatus === "completed")) {
+        await finalizeCurrentUserCheckoutIntent(
+          String(xappId),
+          String(prepared.prepared_intent.purchase_intent_id || "")
+        );
+        return;
+      }
+      if (!paymentPageUrl) {
+        throw new Error(
+          t(
+            "xapp.checkout_page_missing",
+            void 0,
+            "Payment page is not available for this package."
+          )
+        );
+      }
+      navigateToHostedCheckout(paymentPageUrl);
+    } catch (error2) {
+      const message = readString5(asRecord6(error2)?.message) || (error2 instanceof Error ? error2.message : "") || t("xapp.checkout_start_failed", void 0, "Unable to start checkout for this package.");
+      setCheckoutError(message);
+    } finally {
+      setCheckoutBusyPackageSlug("");
+    }
+  }
   const hasCatalogMonetization = hasMarketplaceCatalogMonetization(manifest);
   const monetizationAccess = asRecord6(monetization?.access_projection);
   const monetizationSubscription = asRecord6(monetization?.current_subscription);
+  const additiveEntitlements = Array.isArray(monetization?.additive_entitlements) ? monetization.additive_entitlements.map((item) => asRecord6(item)).filter((item) => item ? Object.keys(item).length > 0 : false) : [];
+  const activeAdditiveEntitlements = additiveEntitlements.filter((item) => {
+    const status = readString5(item.status).trim().toLowerCase();
+    return status === "active" || status === "grace_period";
+  });
+  const additiveUnlockLabels = activeAdditiveEntitlements.map((item) => readString5(item.tier) || readString5(item.product_slug)).filter(Boolean);
   const overduePolicy = asRecord6(monetizationSubscription?.overdue_policy);
-  const currentTier = readString4(monetizationSubscription?.tier) || readString4(monetizationAccess?.tier);
-  const balanceState = readString4(monetizationAccess?.balance_state);
-  const subscriptionStatus = readString4(monetizationSubscription?.status);
+  const currentTier = readString5(monetizationSubscription?.tier) || readString5(monetizationAccess?.tier);
+  const balanceState = readString5(monetizationAccess?.balance_state);
+  const subscriptionStatus = readString5(monetizationSubscription?.status);
   const subscriptionCoverage = typeof overduePolicy?.has_current_access === "boolean" ? overduePolicy.has_current_access ? t("xapp.subscription_coverage_active", void 0, "Still covered") : t("xapp.subscription_coverage_inactive", void 0, "Not covered") : null;
-  const subscriptionReasonKey = readString4(overduePolicy?.effective_status_reason);
+  const subscriptionReasonKey = readString5(overduePolicy?.effective_status_reason);
   const subscriptionReason = subscriptionReasonKey === "grace_covered_past_due" ? t(
     "xapp.subscription_reason_grace_covered_past_due",
     void 0,
@@ -4688,17 +5535,154 @@ function XappDetailPage() {
   const expiryBoundaryAt = formatDateTime2(overduePolicy?.expiry_boundary_at, locale);
   const renewsAt = formatDateTime2(monetizationSubscription?.renews_at, locale);
   const expiresAt = formatDateTime2(monetizationSubscription?.expired_at, locale) || formatDateTime2(monetizationSubscription?.current_period_ends_at, locale);
-  const creditsRemaining = readString4(monetizationAccess?.credits_remaining);
+  const creditsRemaining = readString5(monetizationAccess?.credits_remaining);
   const accessState = resolveMarketplaceDefaultAccessState({
     projection: monetizationAccessProjection,
     hasCatalogMonetization,
     availableLabel: t("xapp.access_state_available", void 0, "available")
   });
   const hasMonetizationState = Boolean(
-    currentTier || accessState || subscriptionStatus || subscriptionCoverage || subscriptionReason || overdueSince || expiryBoundaryAt || renewsAt || expiresAt || creditsRemaining
+    currentTier || accessState || subscriptionStatus || subscriptionCoverage || subscriptionReason || overdueSince || expiryBoundaryAt || renewsAt || expiresAt || creditsRemaining || additiveUnlockLabels.length > 0
   );
-  const manifestScreenshots = Array.isArray(manifest?.screenshots) ? manifest.screenshots.map((shot) => readString4(shot)).filter(Boolean) : [];
-  const manifestTags = Array.isArray(manifest?.tags) ? manifest.tags.map((tag) => readString4(tag)).filter(Boolean) : [];
+  const manifestScreenshots = Array.isArray(manifest?.screenshots) ? manifest.screenshots.map((shot) => readString5(shot)).filter(Boolean) : [];
+  const manifestTags = Array.isArray(manifest?.tags) ? manifest.tags.map((tag) => readString5(tag)).filter(Boolean) : [];
+  function getPackagePurchasePolicy(item) {
+    return resolveMonetizationPackagePurchasePolicy({
+      item,
+      currentSubscription: monetizationSubscription,
+      additiveEntitlements: activeAdditiveEntitlements
+    });
+  }
+  const currentAccessCard = hasMonetizationState ? /* @__PURE__ */ jsxs10("div", { className: "mx-sidebar-card", children: [
+    /* @__PURE__ */ jsx14("h3", { className: "mx-section-title mx-detail-sidebar-title", children: t("xapp.current_access_title", void 0, "Current Access") }),
+    currentTier ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.current_plan_label", void 0, "Current plan") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: currentTier })
+    ] }) : null,
+    accessState ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.access_state_label", void 0, "Access state") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: accessState })
+    ] }) : null,
+    subscriptionStatus ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_status_label", void 0, "Subscription status") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: subscriptionStatus })
+    ] }) : null,
+    subscriptionCoverage ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_coverage_label", void 0, "Coverage") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: subscriptionCoverage })
+    ] }) : null,
+    subscriptionReason ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item mx-meta-item-top", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_reason_label", void 0, "Status reason") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: subscriptionReason })
+    ] }) : null,
+    overdueSince ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_overdue_since_label", void 0, "Overdue since") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: overdueSince })
+    ] }) : null,
+    expiryBoundaryAt ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_expiry_boundary_label", void 0, "Expiry boundary") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: expiryBoundaryAt })
+    ] }) : null,
+    renewsAt ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.renews_at_label", void 0, "Renews at") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: renewsAt })
+    ] }) : null,
+    expiresAt ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.expires_at_label", void 0, "Expires at") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: expiresAt })
+    ] }) : null,
+    creditsRemaining ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.credits_remaining_label", void 0, "Credits remaining") }),
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: creditsRemaining })
+    ] }) : null,
+    additiveUnlockLabels.length > 0 ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item mx-meta-item-top", children: [
+      /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.add_on_unlocks_label", void 0, "Add-on unlocks") }),
+      /* @__PURE__ */ jsx14("div", { className: "mx-meta-value mx-meta-stack-sm", children: additiveUnlockLabels.map((label) => /* @__PURE__ */ jsx14("div", { children: label }, label)) })
+    ] }) : null
+  ] }) : null;
+  const plansCard = selectedPaywallRenderModel ? /* @__PURE__ */ jsxs10("div", { className: "mx-sidebar-card", ref: plansSectionRef, children: [
+    /* @__PURE__ */ jsx14("h3", { className: "mx-section-title mx-detail-sidebar-title", children: t("xapp.plan_options_title", void 0, "Plans") }),
+    /* @__PURE__ */ jsxs10("div", { className: "mx-paywall-card-head", children: [
+      /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-title", children: selectedPaywallRenderModel.paywallLabel }),
+      selectedPaywallRenderModel.summary ? /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-summary", children: selectedPaywallRenderModel.summary }) : null
+    ] }),
+    selectedPaywallRenderModel.badges.length > 0 ? /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-badges", children: selectedPaywallRenderModel.badges.map((badge) => /* @__PURE__ */ jsx14("span", { className: "mx-paywall-card-badge", children: badge }, badge)) }) : null,
+    /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-packages", children: selectedPaywallRenderModel.packages.map((item) => {
+      const normalizedPackageSlug = item.packageSlug.trim().toLowerCase();
+      const purchasePolicy = getPackagePurchasePolicy(item);
+      const isCurrentPackage = purchasePolicy.status === "current_recurring_plan";
+      const isOwnedAdditive = purchasePolicy.status === "owned_additive_unlock";
+      const isAdditiveCompanion = purchasePolicy.transitionKind === "buy_additive_unlock" && subscriptionStatus === "active";
+      return /* @__PURE__ */ jsxs10(
+        "div",
+        {
+          className: `mx-paywall-card-package ${item.isDefault ? "is-default" : ""} ${selectedPaywallPackageSlug && normalizedPackageSlug === selectedPaywallPackageSlug ? "is-selected" : ""}`,
+          children: [
+            /* @__PURE__ */ jsxs10("div", { className: "mx-paywall-card-package-head", children: [
+              /* @__PURE__ */ jsxs10("div", { children: [
+                /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-package-title", children: item.packageTitle }),
+                item.description ? /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-package-description", children: item.description }) : null
+              ] }),
+              /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-money", children: item.moneyLabel })
+            ] }),
+            /* @__PURE__ */ jsxs10("div", { className: "mx-paywall-card-package-meta", children: [
+              /* @__PURE__ */ jsx14("span", { className: "mx-paywall-card-package-fit", children: item.fitLabel }),
+              selectedPaywallPackageSlug && normalizedPackageSlug === selectedPaywallPackageSlug ? /* @__PURE__ */ jsx14("span", { className: "mx-paywall-card-package-default", children: t("xapp.selected_label", void 0, "Selected") }) : null,
+              isOwnedAdditive ? /* @__PURE__ */ jsx14("span", { className: "mx-paywall-card-package-default", children: t("xapp.owned_unlock_label", void 0, "Owned unlock") }) : null,
+              isCurrentPackage && !isOwnedAdditive ? /* @__PURE__ */ jsx14("span", { className: "mx-paywall-card-package-default", children: t("xapp.current_plan_label", void 0, "Current plan") }) : null,
+              isAdditiveCompanion ? /* @__PURE__ */ jsx14("span", { className: "mx-paywall-card-package-default", children: t("xapp.additive_unlock_label", void 0, "Add-on with membership") }) : null,
+              item.isDefault ? /* @__PURE__ */ jsx14("span", { className: "mx-paywall-card-package-default", children: t("xapp.default_label", void 0, "Default") }) : null
+            ] }),
+            item.signals.length > 0 ? /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-signals", children: item.signals.map((signal) => /* @__PURE__ */ jsx14("span", { className: "mx-paywall-card-signal", children: signal }, signal)) }) : null,
+            isAdditiveCompanion ? /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-summary", children: t(
+              "xapp.additive_unlock_message",
+              void 0,
+              "This one-time unlock is additive. It adds access on top of the active recurring membership instead of replacing it."
+            ) }) : null,
+            typeof client.prepareMyXappPurchaseIntent === "function" && typeof client.createMyXappPurchasePaymentSession === "function" && canMutate ? /* @__PURE__ */ jsx14(
+              "button",
+              {
+                className: "mx-btn mx-btn-secondary",
+                disabled: !purchasePolicy.canPurchase || checkoutBusyPackageSlug === normalizedPackageSlug,
+                onClick: () => void startPackageCheckout(item.packageSlug),
+                children: isOwnedAdditive ? t("xapp.owned_unlock_active", void 0, "Owned unlock active") : isCurrentPackage ? t("xapp.current_plan_active", void 0, "Current plan active") : checkoutBusyPackageSlug === normalizedPackageSlug ? t("xapp.checkout_starting", void 0, "Starting checkout...") : isAdditiveCompanion ? t("xapp.additive_unlock_action", void 0, "Purchase add-on unlock") : t("xapp.checkout_action", void 0, "Continue to checkout")
+              }
+            ) : null
+          ]
+        },
+        item.packageId || item.packageSlug
+      );
+    }) }),
+    checkoutNotice ? /* @__PURE__ */ jsx14("div", { className: "mx-paywall-card-summary", children: checkoutNotice }) : null,
+    checkoutError ? /* @__PURE__ */ jsx14("div", { className: "mx-payment-lock-error", children: checkoutError }) : null
+  ] }) : null;
+  if (plansOnlyMode) {
+    return /* @__PURE__ */ jsxs10("div", { className: `mx-detail-container ${isEmbedded ? "is-embedded" : ""}`, children: [
+      error && /* @__PURE__ */ jsx14("div", { className: "mx-detail-error", children: error }),
+      busy && !data ? /* @__PURE__ */ jsx14("div", { className: "mx-sidebar-card mx-detail-empty", "aria-busy": "true", children: t("common.loading", void 0, "Loading...") }) : /* @__PURE__ */ jsxs10("div", { className: `mx-plans-route ${widgetHostedPlansMode ? "is-widget-hosted" : ""}`, children: [
+        !widgetHostedPlansMode ? /* @__PURE__ */ jsxs10("div", { className: "mx-plans-route-header", children: [
+          /* @__PURE__ */ jsx14("div", { className: "mx-plans-route-title", children: t("xapp.plan_options_title", void 0, "Plans") }),
+          /* @__PURE__ */ jsx14("div", { className: "mx-plans-route-subtitle", children: title ? t(
+            "xapp.plans_route_subtitle",
+            { title },
+            `Current access and published plans for ${title}.`
+          ) : t(
+            "xapp.plans_route_subtitle_default",
+            void 0,
+            "Current access and published plans for this app."
+          ) })
+        ] }) : null,
+        /* @__PURE__ */ jsx14("div", { className: "mx-plans-route-grid", children: /* @__PURE__ */ jsxs10("div", { className: "mx-plans-route-main", children: [
+          currentAccessCard,
+          plansCard || /* @__PURE__ */ jsx14("div", { className: "mx-sidebar-card mx-detail-empty", children: t(
+            "xapp.no_plans_available",
+            void 0,
+            "No published plans are currently available."
+          ) })
+        ] }) })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsxs10("div", { className: `mx-detail-container ${isEmbedded ? "is-embedded" : ""}`, children: [
     /* @__PURE__ */ jsxs10("div", { className: "mx-detail-topbar", children: [
       /* @__PURE__ */ jsxs10("div", { className: "mx-detail-topbar-left", children: [
@@ -4778,15 +5762,15 @@ function XappDetailPage() {
           description ? /* @__PURE__ */ jsx14("p", { className: "mx-detail-subtitle", children: description }) : null,
           /* @__PURE__ */ jsxs10("div", { className: "mx-detail-meta-row", children: [
             /* @__PURE__ */ jsx14("div", { className: "mx-card-slug", children: xappId }),
-            readString4(versionRecord?.version) && /* @__PURE__ */ jsxs10("div", { className: "mx-card-version mx-detail-version-pill", children: [
+            readString5(versionRecord?.version) && /* @__PURE__ */ jsxs10("div", { className: "mx-card-version mx-detail-version-pill", children: [
               "v",
-              readString4(versionRecord?.version)
+              readString5(versionRecord?.version)
             ] }),
             updateAvailable ? /* @__PURE__ */ jsx14("div", { className: "mx-detail-update-pill", children: t("xapp.update_available", void 0, "Update available") }) : null
           ] })
         ] }),
-        /* @__PURE__ */ jsx14("div", { className: "mx-detail-actions", children: canMutate ? /* @__PURE__ */ jsxs10(Fragment8, { children: [
-          installation && updateAvailable && host.requestUpdate ? /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx14("div", { className: "mx-detail-actions", children: canMutate && mutationControlsReady ? /* @__PURE__ */ jsxs10(Fragment8, { children: [
+          installation && updateAvailable && host.requestUpdate && installationPolicy?.update_mode !== "auto_update_compatible" ? /* @__PURE__ */ jsx14(
             "button",
             {
               className: "mx-btn mx-btn-primary",
@@ -4795,14 +5779,13 @@ function XappDetailPage() {
                 if (requiresTerms) {
                   setTermsAccepted(false);
                   setTermsAction("update");
+                  setTermsWidgetId(null);
+                  setTermsWidgetName(null);
                   setTermsOpen(true);
                   return;
                 }
                 if (!installation.installationId) return;
-                host.requestUpdate?.({
-                  installationId: installation.installationId,
-                  xappId: String(xappId ?? "")
-                });
+                requestUpdateForWidget(null);
               },
               children: updateAppLabel
             }
@@ -4816,18 +5799,23 @@ function XappDetailPage() {
                 if (requiresTerms) {
                   setTermsAccepted(false);
                   setTermsAction("install");
+                  setTermsWidgetId(readString5(defaultWidget?.id) || null);
+                  setTermsWidgetName(
+                    resolveMarketplaceText(defaultWidget?.title, locale) || null
+                  );
                   setTermsOpen(true);
                   return;
                 }
-                host.requestInstall({
-                  xappId: String(xappId ?? ""),
-                  defaultWidgetId: readString4(defaultWidget?.id) || null,
-                  subjectId: host.subjectId ?? null
-                });
+                requestInstallForWidget(
+                  readString5(defaultWidget?.id) || null,
+                  resolveMarketplaceText(defaultWidget?.title, locale) || null,
+                  false,
+                  autoAvailableMode
+                );
               },
-              children: addAppLabel
+              children: autoAvailableMode ? openAppLabel : addAppLabel
             }
-          ) : /* @__PURE__ */ jsx14(
+          ) : !autoAvailableMode ? /* @__PURE__ */ jsx14(
             "button",
             {
               className: "mx-btn mx-btn-outline",
@@ -4839,7 +5827,7 @@ function XappDetailPage() {
               },
               children: removeAppLabel
             }
-          )
+          ) : null
         ] }) : null })
       ] }),
       /* @__PURE__ */ jsxs10("div", { className: "mx-detail-grid", children: [
@@ -4850,11 +5838,19 @@ function XappDetailPage() {
           ] }),
           /* @__PURE__ */ jsxs10("section", { className: "mx-detail-section mx-detail-section-widgets", children: [
             /* @__PURE__ */ jsx14("h2", { className: "mx-section-title", children: t("xapp.available_views_title", void 0, "Available Views") }),
-            !widgetsEnabled ? /* @__PURE__ */ jsx14("div", { className: "mx-sidebar-card mx-detail-empty", children: !installation ? t(
+            !widgetsEnabled ? /* @__PURE__ */ jsx14("div", { className: "mx-sidebar-card mx-detail-empty", children: !installation ? autoAvailableMode ? t(
+              "xapp.open_to_access_views",
+              void 0,
+              "Open this app to start and install it automatically for your workspace."
+            ) : t(
               "xapp.add_to_access_views",
               void 0,
               "Add this app to your workspace to access its available views."
-            ) : updateAvailable ? t(
+            ) : updateAvailable ? autoUpdateMode ? t(
+              "xapp.update_to_access_views_auto",
+              void 0,
+              "Open a view to update the app automatically for your workspace."
+            ) : t(
               "xapp.update_to_access_views",
               void 0,
               "An update is available. Please update the app to access its available views."
@@ -4867,9 +5863,9 @@ function XappDetailPage() {
               void 0,
               "No app views are currently available."
             ) }) : /* @__PURE__ */ jsx14("div", { className: "mx-detail-widget-list", children: widgets.map((w, idx) => {
-              const name = resolveMarketplaceText(w.title, locale) || readString4(w.widget_name) || readString4(w.name) || readString4(w.id) || t("common.widget", void 0, "Widget");
+              const name = resolveMarketplaceText(w.title, locale) || readString5(w.widget_name) || readString5(w.name) || readString5(w.id) || t("common.widget", void 0, "Widget");
               const disabled = !widgetsEnabled;
-              const isDefault = readBoolean(w.default, false) || idx === 0 && !widgets.some((ww) => readBoolean(ww.default, false));
+              const isDefault = readBoolean2(w.default, false) || idx === 0 && !widgets.some((ww) => readBoolean2(ww.default, false));
               const widgetType = String(w.type || "").toLowerCase();
               return /* @__PURE__ */ jsxs10(
                 "button",
@@ -4877,24 +5873,10 @@ function XappDetailPage() {
                   disabled,
                   className: `mx-detail-widget-card ${disabled ? "is-disabled" : ""} ${isDefault ? "is-default" : ""}`,
                   onClick: () => {
-                    if (!installation || !widgetsEnabled) return;
-                    const widgetId = readString4(w.id);
+                    if (!widgetsEnabled) return;
+                    const widgetId = readString5(w.id);
                     if (!widgetId) return;
-                    if (env?.embedMode && installation) {
-                      navigate({
-                        pathname: isEmbedded ? `/widget/${encodeURIComponent(installation.installationId)}/${encodeURIComponent(widgetId)}` : `/marketplace/widget/${encodeURIComponent(installation.installationId)}/${encodeURIComponent(widgetId)}`,
-                        search: tokenSearch
-                      });
-                      return;
-                    }
-                    host.openWidget({
-                      installationId: installation.installationId,
-                      widgetId,
-                      xappId: String(xappId ?? ""),
-                      xappTitle: String(title),
-                      widgetName: name,
-                      toolName: readString4(w.bind_tool_name)
-                    });
+                    launchWidgetForSubject(widgetId, name, readString5(w.bind_tool_name));
                   },
                   children: [
                     /* @__PURE__ */ jsx14("div", { className: "mx-detail-widget-icon", children: widgetType === "read" ? /* @__PURE__ */ jsxs10(
@@ -4929,7 +5911,7 @@ function XappDetailPage() {
                     ) }),
                     /* @__PURE__ */ jsxs10("div", { className: "mx-detail-widget-body", children: [
                       /* @__PURE__ */ jsx14("div", { className: "mx-detail-widget-name", children: name }),
-                      readString4(w.bind_tool_name) && /* @__PURE__ */ jsx14("div", { className: "mx-detail-widget-tool", children: readString4(w.bind_tool_name) }),
+                      readString5(w.bind_tool_name) && /* @__PURE__ */ jsx14("div", { className: "mx-detail-widget-tool", children: readString5(w.bind_tool_name) }),
                       /* @__PURE__ */ jsxs10("div", { className: "mx-detail-widget-badges", children: [
                         isDefault && /* @__PURE__ */ jsx14("span", { className: "mx-detail-widget-badge is-primary", children: t("xapp.widget_primary", void 0, "Primary") }),
                         widgetType && /* @__PURE__ */ jsx14("span", { className: "mx-detail-widget-badge", children: widgetType })
@@ -5062,7 +6044,14 @@ function XappDetailPage() {
                     children: [
                       /* @__PURE__ */ jsxs10("div", { className: "mx-guard-row-left", children: [
                         guard.order !== null ? /* @__PURE__ */ jsx14("span", { className: "mx-guard-row-order", children: guard.order }) : /* @__PURE__ */ jsx14("span", { className: "mx-guard-row-order", children: guardIdx + 1 }),
-                        /* @__PURE__ */ jsx14("span", { className: "mx-guard-row-name", title: guard.slug, children: humanizeSlug(guard.slug) })
+                        /* @__PURE__ */ jsx14(
+                          "span",
+                          {
+                            className: "mx-guard-row-name",
+                            title: guard.label || guard.slug,
+                            children: guard.label ? guard.label : humanizeSlug(guard.slug)
+                          }
+                        )
                       ] }),
                       /* @__PURE__ */ jsxs10("div", { className: "mx-guard-row-right", children: [
                         /* @__PURE__ */ jsxs10(
@@ -5145,49 +6134,7 @@ function XappDetailPage() {
           ] })
         ] }),
         /* @__PURE__ */ jsxs10("aside", { className: "mx-detail-sidebar", children: [
-          hasMonetizationState ? /* @__PURE__ */ jsxs10("div", { className: "mx-sidebar-card", children: [
-            /* @__PURE__ */ jsx14("h3", { className: "mx-section-title mx-detail-sidebar-title", children: t("xapp.current_access_title", void 0, "Current Access") }),
-            currentTier ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.current_plan_label", void 0, "Current plan") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: currentTier })
-            ] }) : null,
-            accessState ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.access_state_label", void 0, "Access state") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: accessState })
-            ] }) : null,
-            subscriptionStatus ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_status_label", void 0, "Subscription status") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: subscriptionStatus })
-            ] }) : null,
-            subscriptionCoverage ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_coverage_label", void 0, "Coverage") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: subscriptionCoverage })
-            ] }) : null,
-            subscriptionReason ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item mx-meta-item-top", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_reason_label", void 0, "Status reason") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: subscriptionReason })
-            ] }) : null,
-            overdueSince ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_overdue_since_label", void 0, "Overdue since") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: overdueSince })
-            ] }) : null,
-            expiryBoundaryAt ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.subscription_expiry_boundary_label", void 0, "Expiry boundary") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: expiryBoundaryAt })
-            ] }) : null,
-            renewsAt ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.renews_at_label", void 0, "Renews at") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: renewsAt })
-            ] }) : null,
-            expiresAt ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.expires_at_label", void 0, "Expires at") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: expiresAt })
-            ] }) : null,
-            creditsRemaining ? /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-label", children: t("xapp.credits_remaining_label", void 0, "Credits remaining") }),
-              /* @__PURE__ */ jsx14("span", { className: "mx-meta-value", children: creditsRemaining })
-            ] }) : null
-          ] }) : null,
+          currentAccessCard,
           usageCreditSummary ? /* @__PURE__ */ jsxs10("div", { className: "mx-sidebar-card", children: [
             /* @__PURE__ */ jsx14("h3", { className: "mx-section-title mx-detail-sidebar-title", children: t("xapp.usage_credits_title", void 0, "Usage Credits") }),
             /* @__PURE__ */ jsxs10("div", { className: "mx-meta-item", children: [
@@ -5248,26 +6195,19 @@ function XappDetailPage() {
               ] }, tool.tool_name)) })
             ] }) : null
           ] }) : null,
-          installation && defaultWidget && hasSubject && /* @__PURE__ */ jsx14(
+          plansCard,
+          defaultWidget && hasSubject && (installation || autoAvailableMode) && /* @__PURE__ */ jsx14(
             "button",
             {
               className: "mx-btn mx-btn-primary mx-detail-primary-cta",
               onClick: () => {
-                if (env?.embedMode) {
-                  navigate({
-                    pathname: isEmbedded ? `/widget/${encodeURIComponent(installation.installationId)}/${encodeURIComponent(String(defaultWidget.id))}` : `/marketplace/widget/${encodeURIComponent(installation.installationId)}/${encodeURIComponent(String(defaultWidget.id))}`,
-                    search: tokenSearch
-                  });
-                  return;
-                }
-                host.openWidget({
-                  installationId: installation.installationId,
-                  widgetId: readString4(defaultWidget.id),
-                  xappId: String(xappId ?? ""),
-                  xappTitle: String(title),
-                  widgetName: resolveMarketplaceText(defaultWidget?.title, locale) || readString4(defaultWidget?.widget_name) || readString4(defaultWidget?.name) || t("common.widget", void 0, "Widget"),
-                  toolName: readString4(defaultWidget?.bind_tool_name)
-                });
+                const widgetId = readString5(defaultWidget.id);
+                if (!widgetId) return;
+                launchWidgetForSubject(
+                  widgetId,
+                  resolveMarketplaceText(defaultWidget?.title, locale) || readString5(defaultWidget?.widget_name) || readString5(defaultWidget?.name) || t("common.widget", void 0, "Widget"),
+                  readString5(defaultWidget?.bind_tool_name)
+                );
               },
               children: openAppLabel
             }
@@ -5448,21 +6388,35 @@ function XappDetailPage() {
           ] })
         ] }),
         /* @__PURE__ */ jsxs10("div", { className: "mx-detail-modal-actions", children: [
-          /* @__PURE__ */ jsx14("button", { className: "mx-btn mx-btn-outline", onClick: () => setTermsOpen(false), children: t("common.cancel", void 0, "Cancel") }),
+          /* @__PURE__ */ jsx14(
+            "button",
+            {
+              className: "mx-btn mx-btn-outline",
+              onClick: () => {
+                setTermsOpen(false);
+                setTermsAction("none");
+                setTermsWidgetId(null);
+                setTermsWidgetName(null);
+              },
+              children: t("common.cancel", void 0, "Cancel")
+            }
+          ),
           termsAction === "install" ? /* @__PURE__ */ jsx14(
             "button",
             {
               className: "mx-btn mx-btn-primary",
               disabled: !termsAccepted,
               onClick: () => {
-                host.requestInstall({
-                  xappId: String(xappId ?? ""),
-                  defaultWidgetId: readString4(defaultWidget?.id) || null,
-                  subjectId: host.subjectId ?? null,
-                  termsAccepted: true
-                });
+                requestInstallForWidget(
+                  termsWidgetId ?? readString5(defaultWidget?.id) ?? null,
+                  termsWidgetName || resolveMarketplaceText(defaultWidget?.title, locale) || null,
+                  true,
+                  autoAvailableMode
+                );
                 setTermsOpen(false);
                 setTermsAction("none");
+                setTermsWidgetId(null);
+                setTermsWidgetName(null);
               },
               children: t("xapp.accept_add_app", void 0, "Accept & Add app")
             }
@@ -5473,13 +6427,11 @@ function XappDetailPage() {
               disabled: !termsAccepted || !installation,
               onClick: () => {
                 if (!installation) return;
-                host.requestUpdate?.({
-                  installationId: installation.installationId,
-                  xappId: String(xappId ?? ""),
-                  termsAccepted: true
-                });
+                requestUpdateForWidget(termsWidgetId, true);
                 setTermsOpen(false);
                 setTermsAction("none");
+                setTermsWidgetId(null);
+                setTermsWidgetName(null);
               },
               children: t("xapp.accept_update", void 0, "Accept & Update")
             }
@@ -6741,6 +7693,7 @@ function MarketplaceApp() {
     /* @__PURE__ */ jsx18(Route, { path: "publishers", element: /* @__PURE__ */ jsx18(PublishersPage, {}) }),
     /* @__PURE__ */ jsx18(Route, { path: "publishers/:publisherSlug", element: /* @__PURE__ */ jsx18(PublisherDetailPage, {}) }),
     /* @__PURE__ */ jsx18(Route, { path: "xapps/:xappId", element: /* @__PURE__ */ jsx18(XappDetailPage, {}) }),
+    /* @__PURE__ */ jsx18(Route, { path: "xapps/:xappId/plans", element: /* @__PURE__ */ jsx18(XappPlansPage, {}) }),
     /* @__PURE__ */ jsx18(Route, { path: "requests", element: /* @__PURE__ */ jsx18(RequestsPage, {}) }),
     /* @__PURE__ */ jsx18(Route, { path: "payments", element: /* @__PURE__ */ jsx18(PaymentsPage, {}) }),
     /* @__PURE__ */ jsx18(Route, { path: "invoices", element: /* @__PURE__ */ jsx18(InvoicesPage, {}) }),
@@ -6761,6 +7714,7 @@ export {
   RequestsPage,
   WidgetView,
   XappDetailPage,
+  XappPlansPage,
   resolveMarketplaceText,
   resolvePaymentLockStateFromGuardSummary,
   useMarketplace,