@taskforcehq/taskforce 0.3.307 → 0.3.308

package/dist/components/views/PlanComparisonPage.d.ts

@@ -1,6 +1,15 @@
 import React from 'react';
+import type { TaskforceTheme } from '../../utils/theme';
 export type BillingInterval = 'month' | 'year';
 export type BillingPricingType = 'stripe' | 'free';
+export type BillingPricingAudience = 'public' | 'campaign';
+type PublicPricingValue = {
+    pricingType: BillingPricingType;
+    stripePriceId: string | null;
+    unitAmount: number | null;
+    currency: string | null;
+    interval: string;
+} | null;
 export interface PublicPricingPlan {
     planId: string;
     displayName: string;
@@ -20,22 +29,15 @@ export interface PublicPricingPlan {
         description?: string | null;
         publicLabel?: string | null;
         publicDescription?: string | null;
+        publicDescriptionVisible?: boolean | null;
     }>;
     pricing: {
-        month: {
-            pricingType: BillingPricingType;
-            stripePriceId: string | null;
-            unitAmount: number | null;
-            currency: string | null;
-            interval: string;
-        } | null;
-        year: {
-            pricingType: BillingPricingType;
-            stripePriceId: string | null;
-            unitAmount: number | null;
-            currency: string | null;
-            interval: string;
-        } | null;
+        month: PublicPricingValue;
+        year: PublicPricingValue;
+    };
+    campaignPricing?: {
+        month: PublicPricingValue;
+        year: PublicPricingValue;
     };
 }
 interface PricingSourceDetails {
@@ -47,12 +49,14 @@ export interface PlanSelectionIntent {
     planVersionId: string;
     interval: BillingInterval;
     pricingType: BillingPricingType;
+    pricingAudience: BillingPricingAudience;
     isCurrentPlan: boolean;
 }
 interface PlanComparisonPageProps {
     heading: string;
     subtitle?: string;
     variant?: 'app' | 'site';
+    theme?: TaskforceTheme;
     chrome?: React.ReactNode;
     footer?: React.ReactNode;
     isAuthenticated: boolean;
@@ -74,9 +78,10 @@ interface PlanComparisonPageProps {
     shellOwnsScroll?: boolean;
     showPageBackButton?: boolean;
     showHeaderBarWithChrome?: boolean;
+    preferPricingPageTitle?: boolean;
     currentPlanCardActionMode?: 'manage' | 'indicator' | 'hidden';
     fallbackPricingSource?: PricingSourceDetails | null;
     onSelectPlan: (intent: PlanSelectionIntent) => void | Promise<void>;
 }
-export declare function PlanComparisonPage({ heading, subtitle, variant, chrome, footer, isAuthenticated, authSessionResolved, currentPlanId, currentPlanVersionId, currentEntitlementState, markCurrentPlan, canManageCurrentPlan, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled, topActions, shellOwnsScroll, showPageBackButton, showHeaderBarWithChrome, currentPlanCardActionMode, fallbackPricingSource, onSelectPlan }: PlanComparisonPageProps): import("react/jsx-runtime").JSX.Element;
+export declare function PlanComparisonPage({ heading, subtitle, variant, theme, chrome, footer, isAuthenticated, authSessionResolved, currentPlanId, currentPlanVersionId, currentEntitlementState, markCurrentPlan, canManageCurrentPlan, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled, topActions, shellOwnsScroll, showPageBackButton, showHeaderBarWithChrome, preferPricingPageTitle, currentPlanCardActionMode, fallbackPricingSource, onSelectPlan }: PlanComparisonPageProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/views/PlanComparisonPage.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useEffect, useMemo, useState } from 'react';
 import { CheckCircle2, Loader2 } from 'lucide-react';
 import taskforceStyles from '../../Taskforce.module.css';
@@ -19,6 +19,60 @@ function formatPricingSource(pricingSource) {
         return `${environment} (${runtimeMode})`;
     return environment || runtimeMode || null;
 }
+const ALLOWED_PRICING_DESCRIPTION_TAGS = new Set(['a', 'b', 'br', 'em', 'i', 'li', 'ol', 'p', 'strong', 'u', 'ul']);
+function escapeHtmlText(raw) {
+    return raw
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#39;');
+}
+function sanitizePricingDescriptionHtml(raw) {
+    const value = String(raw || '').trim();
+    if (!value)
+        return '';
+    if (typeof document === 'undefined')
+        return escapeHtmlText(value);
+    const template = document.createElement('template');
+    template.innerHTML = value;
+    const output = document.createElement('div');
+    const cleanNode = (node) => {
+        if (node.nodeType === Node.TEXT_NODE) {
+            return document.createTextNode(node.textContent || '');
+        }
+        if (node.nodeType !== Node.ELEMENT_NODE)
+            return null;
+        const element = node;
+        const tagName = element.tagName.toLowerCase();
+        if (tagName === 'script' || tagName === 'style')
+            return null;
+        const children = Array.from(element.childNodes).map(cleanNode).filter((child) => Boolean(child));
+        if (!ALLOWED_PRICING_DESCRIPTION_TAGS.has(tagName)) {
+            const fragment = document.createDocumentFragment();
+            for (const child of children)
+                fragment.appendChild(child);
+            return fragment;
+        }
+        const next = document.createElement(tagName);
+        if (tagName === 'a') {
+            const href = String(element.getAttribute('href') || '').trim();
+            if (/^(https?:|mailto:|\/|#)/i.test(href)) {
+                next.setAttribute('href', href);
+                next.setAttribute('rel', 'noopener noreferrer');
+            }
+        }
+        for (const child of children)
+            next.appendChild(child);
+        return next;
+    };
+    for (const child of Array.from(template.content.childNodes)) {
+        const cleaned = cleanNode(child);
+        if (cleaned)
+            output.appendChild(cleaned);
+    }
+    return output.innerHTML;
+}
 function formatCurrency(amount, currency) {
     if (amount == null || !currency)
         return 'Contact Sales';
@@ -34,7 +88,7 @@ function formatCurrency(amount, currency) {
     }
 }
 function renderFreePriceAmount() {
-    return '$0.00';
+    return '$0';
 }
 function isSelectablePrice(price) {
     if (!price)
@@ -50,6 +104,25 @@ function renderPriceLabel(price) {
         return renderFreePriceAmount();
     return formatCurrency(price.unitAmount, price.currency);
 }
+function getSelectedPricing(regularPrice, campaignPrice) {
+    return isSelectablePrice(campaignPrice)
+        ? { price: campaignPrice, pricingAudience: 'campaign' }
+        : { price: regularPrice, pricingAudience: 'public' };
+}
+function renderPriceRows(monthPrice, yearPrice, campaignMonthPrice, campaignYearPrice) {
+    const hasMonth = isSelectablePrice(monthPrice) || isSelectablePrice(campaignMonthPrice);
+    const hasYear = isSelectablePrice(yearPrice) || isSelectablePrice(campaignYearPrice);
+    if (!hasMonth && !hasYear)
+        return null;
+    const renderRow = (price, campaignPrice, interval) => {
+        if (!isSelectablePrice(price) && !isSelectablePrice(campaignPrice))
+            return null;
+        const hasCampaignPrice = isSelectablePrice(campaignPrice);
+        const intervalLabel = interval === 'year' ? 'year' : 'month';
+        return (_jsxs("div", { className: `${styles.priceRow} ${hasCampaignPrice ? styles.priceRowWithCampaign : ''}`, children: [isSelectablePrice(price) ? (_jsxs("div", { className: styles.regularPriceLine, children: [_jsx("span", { className: `${styles.priceRowAmount} ${hasCampaignPrice ? styles.regularPriceDiscounted : ''}`, children: renderPriceLabel(price) }), _jsxs("span", { className: styles.priceRowInterval, children: ["/ ", intervalLabel] })] })) : null, hasCampaignPrice ? (_jsxs("div", { className: styles.campaignPriceLine, children: [_jsx("span", { className: styles.campaignPriceLabel, children: "Founding Offer:" }), _jsx("span", { className: styles.campaignPriceAmount, children: renderPriceLabel(campaignPrice) }), _jsxs("span", { className: styles.campaignPriceInterval, children: ["/ ", intervalLabel] })] })) : null] }, interval));
+    };
+    return (_jsxs("div", { className: styles.priceRows, children: [renderRow(monthPrice, campaignMonthPrice, 'month'), renderRow(yearPrice, campaignYearPrice, 'year')] }));
+}
 function getPlanSortRank(plan) {
     const prices = [plan.pricing.month, plan.pricing.year].filter(Boolean);
     if (prices.some((price) => price.pricingType === 'free'))
@@ -74,36 +147,69 @@ function readConfiguredFeatureLimit(config, key) {
     const normalized = Math.max(1, Math.floor(numericValue));
     return normalized;
 }
+function formatLimitedFeatureLabel(baseLabel, limitValue) {
+    if (limitValue !== 1)
+        return baseLabel;
+    return baseLabel
+        .replace(/\b([A-Za-z]+)ies\b$/, '$1y')
+        .replace(/\b([A-Za-z]+[^s\s])s\b$/, '$1');
+}
+function formatStorageLimit(storageLimitMb) {
+    if (storageLimitMb <= 1000)
+        return { value: String(storageLimitMb), unit: 'MB' };
+    return {
+        value: String(Math.round(storageLimitMb / 1000)),
+        unit: 'GB'
+    };
+}
 function getFeatureDisplayParts(feature, seatLimit) {
     const baseLabel = String(feature.publicLabel || feature.label || '').trim() || formatFeatureKeyFallback(feature.featureKey);
     const config = feature.config && typeof feature.config === 'object' ? feature.config : {};
     if (feature.featureKey === 'context.uploads') {
         const storageLimitMb = readConfiguredFeatureLimit(config, 'storageLimitMb');
         if (storageLimitMb !== null) {
-            return { limitValue: String(storageLimitMb), limitUnit: 'MB', baseLabel };
+            const storageLimit = formatStorageLimit(storageLimitMb);
+            return {
+                limitValue: storageLimit.value,
+                limitUnit: storageLimit.unit,
+                baseLabel: formatLimitedFeatureLabel(baseLabel, storageLimitMb)
+            };
         }
     }
     if (feature.featureKey === 'workspace.workspaces') {
         const maxWorkspaces = readConfiguredFeatureLimit(config, 'maxWorkspaces');
         if (maxWorkspaces !== null) {
-            return { limitValue: String(maxWorkspaces), limitUnit: 'x', baseLabel };
+            return {
+                limitValue: String(maxWorkspaces),
+                limitUnit: null,
+                baseLabel: formatLimitedFeatureLabel(baseLabel, maxWorkspaces)
+            };
         }
     }
     if (feature.featureKey === 'collaboration.ai_profiles') {
         const maxAiProfiles = readConfiguredFeatureLimit(config, 'maxAiProfiles');
         if (maxAiProfiles !== null) {
-            return { limitValue: String(maxAiProfiles), limitUnit: 'x', baseLabel };
+            return {
+                limitValue: String(maxAiProfiles),
+                limitUnit: null,
+                baseLabel: formatLimitedFeatureLabel(baseLabel, maxAiProfiles)
+            };
         }
     }
     if (feature.featureKey === 'collaboration.team_management') {
         const normalizedSeatLimit = Number(seatLimit);
         if (Number.isFinite(normalizedSeatLimit) && normalizedSeatLimit > 0) {
-            return { limitValue: String(Math.floor(normalizedSeatLimit)), limitUnit: 'x', baseLabel };
+            const seatLimitValue = Math.floor(normalizedSeatLimit);
+            return {
+                limitValue: String(seatLimitValue),
+                limitUnit: null,
+                baseLabel: formatLimitedFeatureLabel(baseLabel, seatLimitValue)
+            };
         }
     }
     return { limitValue: null, limitUnit: null, baseLabel };
 }
-export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome, footer, isAuthenticated, authSessionResolved = true, currentPlanId, currentPlanVersionId, currentEntitlementState, markCurrentPlan, canManageCurrentPlan = true, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled = false, topActions, shellOwnsScroll = false, showPageBackButton = true, showHeaderBarWithChrome = false, currentPlanCardActionMode = 'manage', fallbackPricingSource = null, onSelectPlan }) {
+export function PlanComparisonPage({ heading, subtitle, variant = 'app', theme = 'dark', chrome, footer, isAuthenticated, authSessionResolved = true, currentPlanId, currentPlanVersionId, currentEntitlementState, markCurrentPlan, canManageCurrentPlan = true, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled = false, topActions, shellOwnsScroll = false, showPageBackButton = true, showHeaderBarWithChrome = false, preferPricingPageTitle = true, currentPlanCardActionMode = 'manage', fallbackPricingSource = null, onSelectPlan }) {
     const [plans, setPlans] = useState([]);
     const [pricingSource, setPricingSource] = useState(null);
     const [pricingPageCopy, setPricingPageCopy] = useState({ pageTitle: null, pageDescription: null });
@@ -162,15 +268,16 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
         return String(a.displayName || a.planId).localeCompare(String(b.displayName || b.planId));
     }), [plans]);
     const pricingSourceLabel = useMemo(() => formatPricingSource(pricingSource || fallbackPricingSource), [fallbackPricingSource, pricingSource]);
-    const resolvedHeading = String(pricingPageCopy.pageTitle || heading).trim() || heading;
+    const resolvedHeading = String((preferPricingPageTitle ? pricingPageCopy.pageTitle : null) || heading).trim() || heading;
     const resolvedSubtitle = String(pricingPageCopy.pageDescription || subtitle || '').trim();
+    const resolvedSubtitleHtml = useMemo(() => sanitizePricingDescriptionHtml(resolvedSubtitle), [resolvedSubtitle]);
     const planSelectionEnabled = authSessionResolved;
     const contentClassName = `${styles.plansWrapper} ${shellOwnsScroll ? styles.shellOwnsScroll : 'tf-scrollbar'} ${variant === 'site' ? styles.siteVariant : ''} ${chrome ? styles.withChrome : ''}`.trim();
     const wrapPage = (content) => {
         if (shellOwnsScroll) {
             return (_jsxs(_Fragment, { children: [chrome, content, footer] }));
         }
-        return (_jsxs("div", { className: taskforceStyles.standaloneWrapper, "data-theme": "dark", children: [chrome, content, footer] }));
+        return (_jsxs("div", { className: taskforceStyles.standaloneWrapper, "data-theme": theme, children: [chrome, content, footer] }));
     };
     if (loading) {
         return wrapPage(_jsx(_Fragment, { children: _jsx("div", { className: contentClassName, children: _jsx("div", { className: styles.contentFrame, children: _jsxs("div", { className: styles.loader, children: [_jsx(Loader2, { size: 48, className: styles.spinner }), _jsx("p", { children: "Loading plans..." })] }) }) }) }));
@@ -178,82 +285,106 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
     if (error) {
         return wrapPage(_jsx(_Fragment, { children: _jsx("div", { className: contentClassName, children: _jsx("div", { className: styles.contentFrame, children: _jsxs("div", { className: styles.emptyState, children: [_jsx("h2", { children: "Connecting to plan pricing..." }), _jsx("p", { children: error }), _jsx("button", { className: styles.backBtn, onClick: () => setRetryNonce((value) => value + 1), children: "Retry" })] }) }) }) }));
     }
-    return wrapPage(_jsx(_Fragment, { children: _jsx("div", { className: contentClassName, children: _jsxs("div", { className: styles.contentFrame, children: [_jsxs("div", { className: styles.header, children: [(!chrome || showHeaderBarWithChrome) && (showPageBackButton || topActions) && (_jsxs("div", { className: styles.headerBar, children: [_jsx("div", { children: showPageBackButton ? (_jsx("button", { className: styles.backBtn, onClick: onBack, disabled: backDisabled, children: backLabel })) : null }), _jsx("div", { className: styles.headerActions, children: topActions })] })), _jsx("h1", { className: styles.title, children: resolvedHeading }), resolvedSubtitle && _jsx("p", { className: styles.subtitle, children: resolvedSubtitle }), isDebugModeEnabled() && pricingSourceLabel ? (_jsxs("p", { className: styles.debugMeta, children: ["Pricing source: ", pricingSourceLabel] })) : null, statusBanner && (_jsx("div", { className: `${styles.statusBanner} ${statusBanner.type === 'success'
+    return wrapPage(_jsx(_Fragment, { children: _jsx("div", { className: contentClassName, children: _jsxs("div", { className: styles.contentFrame, children: [_jsxs("div", { className: styles.header, children: [(!chrome || showHeaderBarWithChrome) && (showPageBackButton || topActions) && (_jsxs("div", { className: styles.headerBar, children: [_jsx("div", { children: showPageBackButton ? (_jsx("button", { className: styles.backBtn, onClick: onBack, disabled: backDisabled, children: backLabel })) : null }), _jsx("div", { className: styles.headerActions, children: topActions })] })), _jsx("h1", { className: styles.title, children: resolvedHeading }), resolvedSubtitleHtml && (_jsx("div", { className: styles.subtitle, dangerouslySetInnerHTML: { __html: resolvedSubtitleHtml } })), isDebugModeEnabled() && pricingSourceLabel ? (_jsxs("p", { className: styles.debugMeta, children: ["Pricing source: ", pricingSourceLabel] })) : null, statusBanner && (_jsx("div", { className: `${styles.statusBanner} ${statusBanner.type === 'success'
                                     ? styles.successBanner
-                                    : (statusBanner.type === 'info' ? styles.infoBanner : styles.errorBanner)}`, children: statusBanner.message }))] }), sortedPlans.length === 0 ? (_jsxs("div", { className: `${styles.emptyState} ${styles.marketingEmptyState}`, children: [_jsx("span", { className: styles.emptyBadge, children: "Coming Soon" }), _jsx("h2", { children: "Paid plans are getting their final polish." }), _jsx("p", { children: "Taskforce pricing is on the way with flexible options for solo operators, teams, and larger rollouts. Check back soon for launch tiers, feature bundles, and early access details." }), _jsxs("div", { className: styles.emptyHighlights, "aria-label": "Upcoming pricing highlights", children: [_jsx("span", { children: "Launch-ready tiers" }), _jsx("span", { children: "Team billing controls" }), _jsx("span", { children: "Feature-based packaging" })] })] })) : (_jsx("div", { className: styles.grid, children: sortedPlans.map((plan) => {
-                            const monthPrice = plan.pricing.month;
-                            const yearPrice = plan.pricing.year;
-                            const hasMonth = isSelectablePrice(monthPrice);
-                            const hasYear = isSelectablePrice(yearPrice);
-                            const planVersionId = String(plan.defaultVersion?.planVersionId || '').trim();
-                            const hasActiveEntitlement = isCommercialEntitlementActive(currentEntitlementState);
-                            const shouldMarkCurrentPlan = markCurrentPlan ?? hasActiveEntitlement;
-                            const hasKnownLinkedPlan = Boolean(planVersionId
-                                && currentPlanVersionId
-                                && currentPlanVersionId === planVersionId) || Boolean(!currentPlanVersionId
-                                && Boolean(currentPlanId && currentPlanId === plan.planId));
-                            const isCurrent = shouldMarkCurrentPlan && hasKnownLinkedPlan && currentEntitlementState !== 'canceled';
-                            const defaultInterval = hasMonth ? 'month' : (hasYear ? 'year' : null);
-                            const defaultPrice = defaultInterval === 'year' ? yearPrice : monthPrice;
-                            const currentPlanShowsManageAction = currentPlanCardActionMode === 'manage';
-                            const currentPlanShowsIndicator = currentPlanCardActionMode === 'indicator';
-                            const canSelectCard = planSelectionEnabled
-                                && Boolean(planVersionId)
-                                && (isCurrent
-                                    ? (currentPlanShowsManageAction && canManageCurrentPlan)
-                                    : Boolean(defaultInterval));
-                            const handleCardSelect = () => {
-                                if (!planVersionId)
-                                    return;
-                                if (isCurrent) {
-                                    if (!currentPlanShowsManageAction)
-                                        return;
-                                    if (!canManageCurrentPlan)
-                                        return;
-                                    void onSelectPlan({
-                                        planId: plan.planId,
-                                        planVersionId,
-                                        interval: defaultInterval || 'month',
-                                        pricingType: defaultPrice?.pricingType || 'stripe',
-                                        isCurrentPlan: true
-                                    });
-                                    return;
-                                }
-                                if (!defaultInterval)
-                                    return;
-                                void onSelectPlan({
-                                    planId: plan.planId,
-                                    planVersionId,
-                                    interval: defaultInterval,
-                                    pricingType: defaultPrice?.pricingType || 'stripe',
-                                    isCurrentPlan: false
-                                });
-                            };
-                            return (_jsxs("div", { className: `${styles.planCard} ${isCurrent ? styles.activePlanCard : ''} ${canSelectCard ? styles.clickablePlanCard : ''}`, "data-testid": `plan-card-${plan.planId}`, role: canSelectCard ? 'button' : undefined, tabIndex: canSelectCard ? 0 : undefined, onClick: canSelectCard ? handleCardSelect : undefined, onKeyDown: canSelectCard ? (event) => {
-                                    if (event.key === 'Enter' || event.key === ' ') {
-                                        event.preventDefault();
-                                        handleCardSelect();
-                                    }
-                                } : undefined, children: [isCurrent && _jsx("span", { className: styles.currentBadge, children: "Current Plan" }), _jsx("h3", { className: styles.planName, children: plan.displayName }), String(plan.description || '').trim() && (_jsx("p", { className: styles.planDescription, children: String(plan.description || '').trim() })), _jsx("div", { className: styles.featuresList, children: Array.isArray(plan.features) && plan.features.length > 0 ? plan.features.map((feature, idx) => (_jsxs("div", { className: styles.featureItem, children: [_jsx(CheckCircle2, { className: styles.featureIcon }), _jsxs("div", { className: styles.featureTextBlock, children: [(() => {
-                                                            const { limitValue, limitUnit, baseLabel } = getFeatureDisplayParts(feature, plan.defaultVersion?.seatLimit);
-                                                            return (_jsxs("span", { className: styles.featureText, children: [limitValue && (_jsxs("span", { className: styles.featureLimitAccent, children: [_jsx("span", { children: limitValue }), limitUnit ? (_jsx("span", { className: limitUnit === 'MB' ? styles.featureLimitUnit : undefined, children: limitUnit })) : null] })), _jsx("span", { children: limitValue ? ` ${baseLabel}` : baseLabel })] }));
-                                                        })(), String(feature.publicDescription || feature.description || '').trim() && (_jsx("span", { className: styles.featureDescription, children: String(feature.publicDescription || feature.description || '').trim() }))] })] }, `${feature.featureKey}-${idx}`))) : (_jsx("span", { className: styles.featureText, children: "No additional features included" })) }), (hasMonth || hasYear) ? (_jsxs("div", { className: styles.priceRows, children: [hasMonth ? (_jsxs("div", { className: styles.priceRow, children: [_jsx("span", { className: styles.priceRowAmount, children: renderPriceLabel(monthPrice) }), _jsx("span", { className: styles.priceRowInterval, children: "/ month" })] })) : null, hasYear ? (_jsxs("div", { className: styles.priceRow, children: [_jsx("span", { className: styles.priceRowAmount, children: renderPriceLabel(yearPrice) }), _jsx("span", { className: styles.priceRowInterval, children: "/ year" })] })) : null] })) : null, isCurrent ? (currentPlanShowsManageAction ? (_jsx("button", { className: `${styles.callToAction} ${styles.currentCta}`, "data-testid": `plan-manage-${plan.planId}`, onClick: (event) => {
-                                            event.stopPropagation();
+                                    : (statusBanner.type === 'info' ? styles.infoBanner : styles.errorBanner)}`, children: statusBanner.message }))] }), _jsxs("section", { className: styles.foundingBeta, "aria-labelledby": "founding-beta-heading", children: [_jsx("h2", { id: "founding-beta-heading", children: "Founding beta" }), _jsx("p", { children: "Taskforce is in founding beta. You may run into rough edges while we improve cloud workspaces and agent workflows. Early members get access while the product is still forming, plus a direct role in shaping what comes next." })] }), sortedPlans.length === 0 ? (_jsxs("div", { className: `${styles.emptyState} ${styles.marketingEmptyState}`, children: [_jsx("span", { className: styles.emptyBadge, children: "Coming Soon" }), _jsx("h2", { children: "Paid plans are getting their final polish." }), _jsx("p", { children: "Taskforce pricing is on the way with flexible options for solo operators, teams, and larger rollouts. Check back soon for launch tiers, feature bundles, and early access details." }), _jsxs("div", { className: styles.emptyHighlights, "aria-label": "Upcoming pricing highlights", children: [_jsx("span", { children: "Launch-ready tiers" }), _jsx("span", { children: "Team billing controls" }), _jsx("span", { children: "Feature-based packaging" })] })] })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.grid, children: sortedPlans.map((plan) => {
+                                    const monthPrice = plan.pricing.month;
+                                    const yearPrice = plan.pricing.year;
+                                    const campaignMonthPrice = plan.campaignPricing?.month || null;
+                                    const campaignYearPrice = plan.campaignPricing?.year || null;
+                                    const selectedMonthPricing = getSelectedPricing(monthPrice, campaignMonthPrice);
+                                    const selectedYearPricing = getSelectedPricing(yearPrice, campaignYearPrice);
+                                    const hasMonth = isSelectablePrice(selectedMonthPricing.price);
+                                    const hasYear = isSelectablePrice(selectedYearPricing.price);
+                                    const hasMultipleBillingOptions = hasMonth && hasYear;
+                                    const planVersionId = String(plan.defaultVersion?.planVersionId || '').trim();
+                                    const hasActiveEntitlement = isCommercialEntitlementActive(currentEntitlementState);
+                                    const shouldMarkCurrentPlan = markCurrentPlan ?? hasActiveEntitlement;
+                                    const hasKnownLinkedPlan = Boolean(planVersionId
+                                        && currentPlanVersionId
+                                        && currentPlanVersionId === planVersionId) || Boolean(!currentPlanVersionId
+                                        && Boolean(currentPlanId && currentPlanId === plan.planId));
+                                    const isCurrent = shouldMarkCurrentPlan && hasKnownLinkedPlan && currentEntitlementState !== 'canceled';
+                                    const defaultInterval = hasMonth ? 'month' : (hasYear ? 'year' : null);
+                                    const defaultPricing = defaultInterval === 'year' ? selectedYearPricing : selectedMonthPricing;
+                                    const currentPlanShowsManageAction = currentPlanCardActionMode === 'manage';
+                                    const currentPlanShowsIndicator = currentPlanCardActionMode === 'indicator';
+                                    const canSelectCard = planSelectionEnabled
+                                        && Boolean(planVersionId)
+                                        && (isCurrent
+                                            ? (currentPlanShowsManageAction && canManageCurrentPlan)
+                                            : Boolean(defaultInterval));
+                                    const handleCardSelect = () => {
+                                        if (!planVersionId)
+                                            return;
+                                        if (isCurrent) {
+                                            if (!currentPlanShowsManageAction)
+                                                return;
                                             if (!canManageCurrentPlan)
                                                 return;
-                                            void onSelectPlan({ planId: plan.planId, planVersionId, interval: defaultInterval || 'month', pricingType: defaultPrice?.pricingType || 'stripe', isCurrentPlan: true });
-                                        }, disabled: !planVersionId || !canManageCurrentPlan || !planSelectionEnabled, children: isAuthenticated
-                                            ? (canManageCurrentPlan ? 'Manage Plan' : 'Current Plan')
-                                            : 'Current Plan' })) : (currentPlanShowsIndicator ? (_jsx("button", { className: `${styles.callToAction} ${styles.currentCta}`, "data-testid": `plan-current-${plan.planId}`, disabled: true, children: "Current Plan" })) : null)) : (_jsxs("div", { className: styles.ctaRow, children: [hasMonth ? (_jsx("button", { className: `${styles.callToAction} ${styles.secondaryCta}`, "data-testid": `plan-select-${plan.planId}-month`, onClick: (event) => {
-                                                    event.stopPropagation();
-                                                    void onSelectPlan({ planId: plan.planId, planVersionId, interval: 'month', pricingType: monthPrice?.pricingType || 'stripe', isCurrentPlan: false });
-                                                }, disabled: !planVersionId || !planSelectionEnabled, children: monthPrice?.pricingType === 'free'
-                                                    ? (isAuthenticated ? 'Select Free' : 'Get Started Free')
-                                                    : (isAuthenticated ? 'Choose Monthly' : 'Get Started Monthly') })) : null, hasYear ? (_jsx("button", { className: `${styles.callToAction} ${styles.primaryCta}`, "data-testid": `plan-select-${plan.planId}-year`, onClick: (event) => {
+                                            void onSelectPlan({
+                                                planId: plan.planId,
+                                                planVersionId,
+                                                interval: defaultInterval || 'month',
+                                                pricingType: defaultPricing.price?.pricingType || 'stripe',
+                                                pricingAudience: defaultPricing.pricingAudience,
+                                                isCurrentPlan: true
+                                            });
+                                            return;
+                                        }
+                                        if (!defaultInterval)
+                                            return;
+                                        void onSelectPlan({
+                                            planId: plan.planId,
+                                            planVersionId,
+                                            interval: defaultInterval,
+                                            pricingType: defaultPricing.price?.pricingType || 'stripe',
+                                            pricingAudience: defaultPricing.pricingAudience,
+                                            isCurrentPlan: false
+                                        });
+                                    };
+                                    return (_jsxs("div", { className: `${styles.planCard} ${isCurrent ? styles.activePlanCard : ''} ${canSelectCard ? styles.clickablePlanCard : ''}`, "data-testid": `plan-card-${plan.planId}`, role: canSelectCard ? 'button' : undefined, tabIndex: canSelectCard ? 0 : undefined, onClick: canSelectCard ? handleCardSelect : undefined, onKeyDown: canSelectCard ? (event) => {
+                                            if (event.key === 'Enter' || event.key === ' ') {
+                                                event.preventDefault();
+                                                handleCardSelect();
+                                            }
+                                        } : undefined, children: [isCurrent && _jsx("span", { className: styles.currentBadge, children: "Current Plan" }), _jsx("h3", { className: styles.planName, children: plan.displayName }), renderPriceRows(monthPrice, yearPrice, campaignMonthPrice, campaignYearPrice), String(plan.description || '').trim() && (_jsx("p", { className: styles.planDescription, children: String(plan.description || '').trim() })), _jsx("div", { className: styles.featuresList, children: Array.isArray(plan.features) && plan.features.length > 0 ? plan.features.map((feature, idx) => (_jsxs("div", { className: styles.featureItem, children: [_jsx(CheckCircle2, { className: styles.featureIcon }), _jsxs("div", { className: styles.featureTextBlock, children: [(() => {
+                                                                    const { limitValue, limitUnit, baseLabel } = getFeatureDisplayParts(feature, plan.defaultVersion?.seatLimit);
+                                                                    return (_jsxs("span", { className: styles.featureText, children: [limitValue && (_jsxs("span", { className: styles.featureLimitAccent, children: [_jsx("span", { children: limitValue }), limitUnit ? (_jsx("span", { className: styles.featureLimitUnit, children: limitUnit })) : null] })), _jsx("span", { children: limitValue ? ` ${baseLabel}` : baseLabel })] }));
+                                                                })(), feature.publicDescriptionVisible !== false && String(feature.publicDescription || feature.description || '').trim() && (_jsx("span", { className: styles.featureDescription, children: String(feature.publicDescription || feature.description || '').trim() }))] })] }, `${feature.featureKey}-${idx}`))) : (_jsx("span", { className: styles.featureText, children: "No additional features included" })) }), isCurrent ? (currentPlanShowsManageAction ? (_jsx("button", { className: `${styles.callToAction} ${styles.currentCta}`, "data-testid": `plan-manage-${plan.planId}`, onClick: (event) => {
                                                     event.stopPropagation();
-                                                    void onSelectPlan({ planId: plan.planId, planVersionId, interval: 'year', pricingType: yearPrice?.pricingType || 'stripe', isCurrentPlan: false });
-                                                }, disabled: !planVersionId || !planSelectionEnabled, children: yearPrice?.pricingType === 'free'
-                                                    ? (isAuthenticated ? 'Select Free' : 'Get Started Free')
-                                                    : (isAuthenticated ? 'Choose Yearly' : 'Get Started Yearly') })) : null] }))] }, plan.planId));
-                        }) }))] }) }) }));
+                                                    if (!canManageCurrentPlan)
+                                                        return;
+                                                    void onSelectPlan({
+                                                        planId: plan.planId,
+                                                        planVersionId,
+                                                        interval: defaultInterval || 'month',
+                                                        pricingType: defaultPricing.price?.pricingType || 'stripe',
+                                                        pricingAudience: defaultPricing.pricingAudience,
+                                                        isCurrentPlan: true
+                                                    });
+                                                }, disabled: !planVersionId || !canManageCurrentPlan || !planSelectionEnabled, children: isAuthenticated
+                                                    ? (canManageCurrentPlan ? 'Manage Plan' : 'Current Plan')
+                                                    : 'Current Plan' })) : (currentPlanShowsIndicator ? (_jsx("button", { className: `${styles.callToAction} ${styles.currentCta}`, "data-testid": `plan-current-${plan.planId}`, disabled: true, children: "Current Plan" })) : null)) : (_jsxs("div", { className: styles.ctaRow, children: [hasMonth ? (_jsx("button", { className: `${styles.callToAction} ${styles.secondaryCta}`, "data-testid": `plan-select-${plan.planId}-month`, onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            void onSelectPlan({
+                                                                planId: plan.planId,
+                                                                planVersionId,
+                                                                interval: 'month',
+                                                                pricingType: selectedMonthPricing.price?.pricingType || 'stripe',
+                                                                pricingAudience: selectedMonthPricing.pricingAudience,
+                                                                isCurrentPlan: false
+                                                            });
+                                                        }, disabled: !planVersionId || !planSelectionEnabled, children: hasMultipleBillingOptions ? 'Start Monthly' : 'Get Started' })) : null, hasYear ? (_jsx("button", { className: `${styles.callToAction} ${styles.primaryCta}`, "data-testid": `plan-select-${plan.planId}-year`, onClick: (event) => {
+                                                            event.stopPropagation();
+                                                            void onSelectPlan({
+                                                                planId: plan.planId,
+                                                                planVersionId,
+                                                                interval: 'year',
+                                                                pricingType: selectedYearPricing.price?.pricingType || 'stripe',
+                                                                pricingAudience: selectedYearPricing.pricingAudience,
+                                                                isCurrentPlan: false
+                                                            });
+                                                        }, disabled: !planVersionId || !planSelectionEnabled, children: hasMultipleBillingOptions ? 'Start Yearly' : 'Get Started' })) : null] }))] }, plan.planId));
+                                }) }), _jsxs("div", { className: styles.pricingNotes, children: [_jsx("p", { children: "Prices are listed in USD. Taxes may apply." }), _jsx("p", { children: "Local install is free on every plan. Cloud limits apply only to hosted workspaces." })] }), _jsxs("section", { className: `${styles.foundingBeta} ${styles.cloudCapacityNote}`, "aria-labelledby": "cloud-capacity-heading", children: [_jsx("h2", { id: "cloud-capacity-heading", children: "Need more cloud capacity?" }), _jsx("p", { children: "Pro users can request expanded limits for cloud workspaces, AI agents, and storage." })] }), _jsxs("div", { className: `${styles.planCard} ${styles.planNoticeCard} ${styles.teamComingSoonCard}`, children: [_jsx("h2", { className: styles.planName, children: "Team workspaces are coming soon." }), _jsx("p", { className: styles.planDescription, children: "Shared workspaces, collaborators, team agent rosters, admin controls, and larger cloud limits are in development." })] })] }))] }) }) }));
 }