@taskforcehq/taskforce 0.3.305 → 0.3.306

package/dist/components/ui/EditableAvatarButton.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+interface EditableAvatarButtonProps {
+    label: string;
+    imageUrl?: string | null;
+    fallback?: React.ReactNode;
+    accentColor?: string | null;
+    size?: number;
+    width?: number;
+    height?: number;
+    radius?: number | string;
+    editBadgeSize?: number | string;
+    editIconSize?: number;
+    disabled?: boolean;
+    className?: string;
+    onClick: () => void;
+}
+export declare function EditableAvatarButton({ label, imageUrl, fallback, accentColor, size, width, height, radius, editBadgeSize, editIconSize, disabled, className, onClick, }: EditableAvatarButtonProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/ui/EditableAvatarButton.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pencil } from 'lucide-react';
+import styles from './EditableAvatarButton.module.css';
+export function EditableAvatarButton({ label, imageUrl, fallback, accentColor, size = 52, width, height, radius, editBadgeSize, editIconSize = 16, disabled = false, className = '', onClick, }) {
+    const normalizedImageUrl = String(imageUrl || '').trim();
+    const resolvedWidth = width ?? size;
+    const resolvedHeight = height ?? size;
+    const resolvedRadius = typeof radius === 'number' ? `${radius}px` : radius;
+    const resolvedEditBadgeSize = typeof editBadgeSize === 'number' ? `${editBadgeSize}px` : editBadgeSize;
+    return (_jsxs("button", { type: "button", className: `${styles.editableAvatarButton} ${className}`.trim(), "aria-label": label, title: label, onClick: onClick, disabled: disabled, style: {
+            ['--editable-avatar-size']: `${size}px`,
+            ['--editable-avatar-width']: `${resolvedWidth}px`,
+            ['--editable-avatar-height']: `${resolvedHeight}px`,
+            ...(resolvedRadius ? { ['--editable-avatar-radius']: resolvedRadius } : {}),
+            ...(resolvedEditBadgeSize ? { ['--editable-avatar-badge-size']: resolvedEditBadgeSize } : {}),
+            ...(accentColor ? { ['--editable-avatar-accent']: accentColor } : {})
+        }, children: [normalizedImageUrl ? (_jsx("img", { src: normalizedImageUrl, alt: "", className: styles.editableAvatarImage })) : (_jsx("span", { className: styles.editableAvatarFallback, children: fallback })), _jsx("span", { className: styles.editableAvatarBadge, "aria-hidden": "true", children: _jsx(Pencil, { size: editIconSize }) })] }));
+}

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

@@ -4,6 +4,7 @@ export type BillingPricingType = 'stripe' | 'free';
 export interface PublicPricingPlan {
     planId: string;
     displayName: string;
+    description?: string | null;
     status: string;
     defaultVersion: {
         planVersionId: string;
@@ -15,6 +16,10 @@ export interface PublicPricingPlan {
         featureKey: string;
         access: string;
         config?: Record<string, unknown>;
+        label?: string | null;
+        description?: string | null;
+        publicLabel?: string | null;
+        publicDescription?: string | null;
     }>;
     pricing: {
         month: {
@@ -55,6 +60,7 @@ interface PlanComparisonPageProps {
     currentPlanId?: string | null;
     currentPlanVersionId?: string | null;
     currentEntitlementState?: string | null;
+    markCurrentPlan?: boolean;
     canManageCurrentPlan?: boolean;
     pricingEndpoint?: string;
     statusBanner?: {
@@ -67,8 +73,10 @@ interface PlanComparisonPageProps {
     topActions?: React.ReactNode;
     shellOwnsScroll?: boolean;
     showPageBackButton?: boolean;
+    showHeaderBarWithChrome?: 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, canManageCurrentPlan, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled, topActions, shellOwnsScroll, showPageBackButton, fallbackPricingSource, onSelectPlan }: PlanComparisonPageProps): import("react/jsx-runtime").JSX.Element;
+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 {};

package/dist/components/views/PlanComparisonPage.js

@@ -61,7 +61,49 @@ function getPlanSortRank(plan) {
         return Math.min(...numericAmounts);
     return Number.POSITIVE_INFINITY;
 }
-export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome, footer, isAuthenticated, authSessionResolved = true, currentPlanId, currentPlanVersionId, currentEntitlementState, canManageCurrentPlan = true, pricingEndpoint, statusBanner, onBack, backLabel, backDisabled = false, topActions, shellOwnsScroll = false, showPageBackButton = true, fallbackPricingSource = null, onSelectPlan }) {
+function formatFeatureKeyFallback(featureKey) {
+    return String(featureKey || '')
+        .replace(/[_\-.]+/g, ' ')
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+function readConfiguredFeatureLimit(config, key) {
+    const rawValue = config?.[key];
+    const numericValue = Number(rawValue);
+    if (!Number.isFinite(numericValue))
+        return null;
+    const normalized = Math.max(1, Math.floor(numericValue));
+    return normalized;
+}
+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 };
+        }
+    }
+    if (feature.featureKey === 'workspace.workspaces') {
+        const maxWorkspaces = readConfiguredFeatureLimit(config, 'maxWorkspaces');
+        if (maxWorkspaces !== null) {
+            return { limitValue: String(maxWorkspaces), limitUnit: 'x', baseLabel };
+        }
+    }
+    if (feature.featureKey === 'collaboration.ai_profiles') {
+        const maxAiProfiles = readConfiguredFeatureLimit(config, 'maxAiProfiles');
+        if (maxAiProfiles !== null) {
+            return { limitValue: String(maxAiProfiles), limitUnit: 'x', baseLabel };
+        }
+    }
+    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 };
+        }
+    }
+    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 }) {
     const [plans, setPlans] = useState([]);
     const [pricingSource, setPricingSource] = useState(null);
     const [loading, setLoading] = useState(true);
@@ -114,6 +156,7 @@ 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 planSelectionEnabled = authSessionResolved;
     const contentClassName = `${styles.plansWrapper} ${shellOwnsScroll ? styles.shellOwnsScroll : 'tf-scrollbar'} ${variant === 'site' ? styles.siteVariant : ''} ${chrome ? styles.withChrome : ''}`.trim();
     const wrapPage = (content) => {
         if (shellOwnsScroll) {
@@ -121,13 +164,13 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
         }
         return (_jsxs("div", { className: taskforceStyles.standaloneWrapper, "data-theme": "dark", children: [chrome, content, footer] }));
     };
-    if (loading || !authSessionResolved) {
+    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..." })] }) }) }) }));
     }
     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 && (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: heading }), subtitle && _jsx("p", { className: styles.subtitle, children: subtitle }), 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: heading }), subtitle && _jsx("p", { className: styles.subtitle, children: subtitle }), 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;
@@ -136,17 +179,27 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
                             const hasYear = isSelectablePrice(yearPrice);
                             const planVersionId = String(plan.defaultVersion?.planVersionId || '').trim();
                             const hasActiveEntitlement = isCommercialEntitlementActive(currentEntitlementState);
-                            const isCurrent = hasActiveEntitlement && (Boolean(planVersionId
+                            const shouldMarkCurrentPlan = markCurrentPlan ?? hasActiveEntitlement;
+                            const hasKnownLinkedPlan = Boolean(planVersionId
                                 && currentPlanVersionId
-                                && currentPlanVersionId === planVersionId) || (!currentPlanVersionId
-                                && Boolean(currentPlanId && currentPlanId === plan.planId)));
+                                && 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 canSelectCard = Boolean(planVersionId) && (isCurrent ? canManageCurrentPlan : Boolean(defaultInterval));
+                            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({
@@ -173,23 +226,26 @@ export function PlanComparisonPage({ heading, subtitle, variant = 'app', chrome,
                                         event.preventDefault();
                                         handleCardSelect();
                                     }
-                                } : undefined, children: [isCurrent && _jsx("span", { className: styles.currentBadge, children: "Current Plan" }), _jsx("h3", { className: styles.planName, children: plan.displayName }), _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 }), _jsx("span", { className: styles.featureText, children: String(feature.featureKey || '').replace(/[_\-.]+/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase()) })] }, `${feature.featureKey}-${idx}`))) : (_jsx("span", { className: styles.featureText, children: "No additional features included" })) }), _jsxs("div", { className: styles.priceRows, children: [_jsxs("div", { className: styles.priceRow, children: [_jsx("span", { className: styles.priceRowAmount, children: renderPriceLabel(monthPrice) }), _jsx("span", { className: styles.priceRowInterval, children: "/ month" })] }), _jsxs("div", { className: styles.priceRow, children: [_jsx("span", { className: styles.priceRowAmount, children: renderPriceLabel(yearPrice) }), _jsx("span", { className: styles.priceRowInterval, children: "/ year" })] })] }), isCurrent ? (_jsx("button", { className: `${styles.callToAction} ${styles.currentCta}`, "data-testid": `plan-manage-${plan.planId}`, onClick: (event) => {
+                                } : 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();
                                             if (!canManageCurrentPlan)
                                                 return;
                                             void onSelectPlan({ planId: plan.planId, planVersionId, interval: defaultInterval || 'month', pricingType: defaultPrice?.pricingType || 'stripe', isCurrentPlan: true });
-                                        }, disabled: !planVersionId || !canManageCurrentPlan, children: isAuthenticated
+                                        }, disabled: !planVersionId || !canManageCurrentPlan || !planSelectionEnabled, children: isAuthenticated
                                             ? (canManageCurrentPlan ? 'Manage Plan' : 'Current Plan')
-                                            : 'Current Plan' })) : (_jsxs("div", { className: styles.ctaRow, children: [_jsx("button", { className: `${styles.callToAction} ${styles.secondaryCta}`, "data-testid": `plan-select-${plan.planId}-month`, onClick: (event) => {
+                                            : '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 || !hasMonth, children: monthPrice?.pricingType === 'free'
+                                                }, disabled: !planVersionId || !planSelectionEnabled, children: monthPrice?.pricingType === 'free'
                                                     ? (isAuthenticated ? 'Select Free' : 'Get Started Free')
-                                                    : (isAuthenticated ? 'Choose Monthly' : 'Get Started Monthly') }), _jsx("button", { className: `${styles.callToAction} ${styles.primaryCta}`, "data-testid": `plan-select-${plan.planId}-year`, onClick: (event) => {
+                                                    : (isAuthenticated ? 'Choose Monthly' : 'Get Started Monthly') })) : 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: yearPrice?.pricingType || 'stripe', isCurrentPlan: false });
-                                                }, disabled: !planVersionId || !hasYear, children: yearPrice?.pricingType === 'free'
+                                                }, disabled: !planVersionId || !planSelectionEnabled, children: yearPrice?.pricingType === 'free'
                                                     ? (isAuthenticated ? 'Select Free' : 'Get Started Free')
-                                                    : (isAuthenticated ? 'Choose Yearly' : 'Get Started Yearly') })] }))] }, plan.planId));
+                                                    : (isAuthenticated ? 'Choose Yearly' : 'Get Started Yearly') })) : null] }))] }, plan.planId));
                         }) }))] }) }) }));
 }

package/dist/components/views/PlanComparisonPage.test.js

@@ -17,6 +17,7 @@ describe('PlanComparisonPage', () => {
                     {
                         planId: 'free',
                         displayName: 'Free',
+                        description: 'Start using Taskforce at no cost.',
                         status: 'active',
                         defaultVersion: {
                             planVersionId: 'free-v1',
@@ -33,6 +34,7 @@ describe('PlanComparisonPage', () => {
                     {
                         planId: 'team-5',
                         displayName: 'Team 5',
+                        description: 'For small collaborative teams.',
                         status: 'active',
                         defaultVersion: {
                             planVersionId: 'team-5-v2',
@@ -59,6 +61,11 @@ describe('PlanComparisonPage', () => {
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
         expect(await screen.findByText('Pricing source: production (cloud)')).toBeInTheDocument();
     });
+    it('renders plan descriptions when provided by the pricing payload', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByText('Start using Taskforce at no cost.')).toBeInTheDocument();
+        expect(screen.getByText('For small collaborative teams.')).toBeInTheDocument();
+    });
     it('falls back to provided pricing source details when the pricing response omits them', async () => {
         globalThis.__DEBUG_MODE__ = true;
         vi.stubGlobal('fetch', vi.fn(async () => ({
@@ -92,6 +99,188 @@ describe('PlanComparisonPage', () => {
         await screen.findByRole('heading', { name: 'Subscription Plans' });
         expect(screen.queryByText('Pricing source: production (cloud)')).not.toBeInTheDocument();
     });
+    it('renders public feature copy when provided by the pricing payload', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'team-5',
+                        displayName: 'Team 5',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'team-5-v2',
+                            versionNumber: 2,
+                            seatLimit: 5,
+                            metadata: {}
+                        },
+                        features: [
+                            {
+                                featureKey: 'collaboration.ai_profiles',
+                                access: 'enabled',
+                                label: 'AI Profiles',
+                                publicLabel: 'AI teammates',
+                                publicDescription: 'Add reusable AI teammates to your workspace.'
+                            }
+                        ],
+                        pricing: {
+                            month: { pricingType: 'stripe', stripePriceId: 'price_team_5_month', unitAmount: 2000, currency: 'usd', interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByText('AI teammates')).toBeInTheDocument();
+        expect(screen.getByText('Add reusable AI teammates to your workspace.')).toBeInTheDocument();
+        expect(screen.queryByText('Collaboration Ai Profiles')).not.toBeInTheDocument();
+    });
+    it('renders inline numeric feature limits next to each feature label', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'free',
+                        displayName: 'Free',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'free-v1',
+                            versionNumber: 1,
+                            seatLimit: 12,
+                            metadata: {}
+                        },
+                        features: [
+                            {
+                                featureKey: 'workspace.workspaces',
+                                access: 'enabled',
+                                label: 'Workspaces',
+                                config: { maxWorkspaces: 1 }
+                            },
+                            {
+                                featureKey: 'collaboration.ai_profiles',
+                                access: 'limited',
+                                label: 'AI Profiles',
+                                publicLabel: 'AI Agents',
+                                config: { maxAiProfiles: 4 }
+                            },
+                            {
+                                featureKey: 'context.uploads',
+                                access: 'enabled',
+                                label: 'Cloud Storage',
+                                config: { storageLimitMb: 24 }
+                            },
+                            {
+                                featureKey: 'collaboration.team_management',
+                                access: 'enabled',
+                                label: 'Team Management'
+                            }
+                        ],
+                        pricing: {
+                            month: { pricingType: 'free', stripePriceId: null, unitAmount: null, currency: null, interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        const { container } = render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        const freeCard = await screen.findByTestId('plan-card-free');
+        const featureTextNodes = Array.from(freeCard.querySelectorAll('span')).map((node) => node.textContent);
+        expect(featureTextNodes).toContain('1x Workspaces');
+        expect(featureTextNodes).toContain('4x AI Agents');
+        expect(featureTextNodes).toContain('24MB Cloud Storage');
+        expect(featureTextNodes).toContain('12x Team Management');
+        expect(container.querySelector('[class*="featureLimitUnit"]')?.textContent).toBe('MB');
+    });
+    it('renders the storage unit suffix in a smaller accent span', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'free',
+                        displayName: 'Free',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'free-v1',
+                            versionNumber: 1,
+                            seatLimit: null,
+                            metadata: {}
+                        },
+                        features: [
+                            {
+                                featureKey: 'context.uploads',
+                                access: 'enabled',
+                                label: 'Cloud Storage',
+                                config: { storageLimitMb: 64 }
+                            }
+                        ],
+                        pricing: {
+                            month: { pricingType: 'free', stripePriceId: null, unitAmount: null, currency: null, interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        const { container } = render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        await screen.findByText('Cloud Storage');
+        const accent = container.querySelector('[class*="featureLimitAccent"]');
+        const unit = container.querySelector('[class*="featureLimitUnit"]');
+        expect(accent?.textContent).toBe('64MB');
+        expect(unit?.textContent).toBe('MB');
+    });
+    it('hides missing yearly pricing rows and buttons instead of rendering unavailable state', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'operator',
+                        displayName: 'Operator',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'operator-v1',
+                            versionNumber: 1,
+                            seatLimit: null,
+                            metadata: {}
+                        },
+                        features: [],
+                        pricing: {
+                            month: { pricingType: 'stripe', stripePriceId: 'price_operator_month', unitAmount: 999, currency: 'usd', interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        const operatorCard = await screen.findByTestId('plan-card-operator');
+        expect(within(operatorCard).getByText('$9.99')).toBeInTheDocument();
+        expect(within(operatorCard).getByText('/ month')).toBeInTheDocument();
+        expect(within(operatorCard).queryByText('/ year')).not.toBeInTheDocument();
+        expect(within(operatorCard).queryByText('Unavailable')).not.toBeInTheDocument();
+        expect(within(operatorCard).getByRole('button', { name: 'Choose Monthly' })).toBeInTheDocument();
+        expect(within(operatorCard).queryByRole('button', { name: 'Choose Yearly' })).not.toBeInTheDocument();
+    });
     it('does not mark a plan current when only the plan id matches but the version does not', async () => {
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: "team-5-v1", currentEntitlementState: "active", onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
         expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
@@ -102,15 +291,64 @@ describe('PlanComparisonPage', () => {
         expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
         expect(screen.getByText('Current Plan')).toBeInTheDocument();
     });
+    it('can show the current plan as a non-interactive indicator when billing is managed from page chrome', async () => {
+        const onSelectPlan = vi.fn();
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: "team-5-v2", currentEntitlementState: "active", canManageCurrentPlan: true, currentPlanCardActionMode: "indicator", onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        const currentCard = screen.getByTestId('plan-card-team-5');
+        expect(currentCard).not.toHaveAttribute('role', 'button');
+        expect(screen.queryByTestId('plan-manage-team-5')).not.toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Manage Plan' })).not.toBeInTheDocument();
+        expect(screen.getByTestId('plan-current-team-5')).toBeDisabled();
+        fireEvent.click(currentCard);
+        expect(onSelectPlan).not.toHaveBeenCalled();
+    });
+    it('can render the page header bar even when shell chrome is present', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, chrome: _jsx("div", { children: "Shell chrome" }), showHeaderBarWithChrome: true, topActions: _jsx("button", { type: "button", children: "Manage billing" }), onBack: () => { }, backLabel: "Back to App", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Back to App' })).toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Manage billing' })).toBeInTheDocument();
+    });
     it('does not mark a canceled entitlement as current through the plan-id fallback path', async () => {
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: null, currentEntitlementState: "canceled", onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
         expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
         expect(screen.queryByText('Current Plan')).not.toBeInTheDocument();
     });
+    it('does not mark a linked pending-plan-selection entitlement as the current plan', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, currentPlanId: "team-5", currentPlanVersionId: "team-5-v2", currentEntitlementState: "pending_plan_selection", canManageCurrentPlan: true, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        expect(screen.queryByRole('button', { name: 'Manage Plan' })).not.toBeInTheDocument();
+        expect(screen.queryByText('Current Plan')).not.toBeInTheDocument();
+        expect(screen.getByRole('button', { name: 'Choose Monthly' })).toBeInTheDocument();
+    });
     it('can disable the page back button while onboarding remains blocked', async () => {
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: true, onBack: () => { }, backLabel: "Back to App", backDisabled: true, onSelectPlan: () => { } }));
         expect(await screen.findByRole('button', { name: 'Back to App' })).toBeDisabled();
     });
+    it('shows pricing before auth resolves but keeps plan selection disabled until bootstrap finishes', async () => {
+        const onSelectPlan = vi.fn();
+        const view = render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, authSessionResolved: false, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
+        expect(await screen.findByRole('heading', { name: 'Subscription Plans' })).toBeInTheDocument();
+        const freeCard = screen.getByTestId('plan-card-free');
+        expect(screen.getByRole('button', { name: 'Get Started Free' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Get Started Monthly' })).toBeDisabled();
+        expect(freeCard).not.toHaveAttribute('role', 'button');
+        view.rerender(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, authSessionResolved: true, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
+        const enabledFreeCard = screen.getByTestId('plan-card-free');
+        expect(screen.getByRole('button', { name: 'Get Started Free' })).toBeEnabled();
+        expect(screen.getByRole('button', { name: 'Get Started Monthly' })).toBeEnabled();
+        expect(enabledFreeCard).toHaveAttribute('role', 'button');
+        fireEvent.click(screen.getByRole('button', { name: 'Get Started Free' }));
+        await waitFor(() => {
+            expect(onSelectPlan).toHaveBeenCalledWith({
+                planId: 'free',
+                planVersionId: 'free-v1',
+                interval: 'month',
+                pricingType: 'free',
+                isCurrentPlan: false
+            });
+        });
+    });
     it('selects the whole plan card using the default available interval', async () => {
         const onSelectPlan = vi.fn();
         render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));