@taskforcehq/taskforce 0.3.306 → 0.3.308

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

@@ -9,6 +9,8 @@ describe('PlanComparisonPage', () => {
         vi.stubGlobal('fetch', vi.fn(async () => ({
             ok: true,
             json: async () => ({
+                pageTitle: 'Subscription Plans',
+                pageDescription: 'Manage your subscription and explore available features. Your current plan is highlighted below.',
                 pricingSource: {
                     environment: 'production',
                     runtimeMode: 'cloud'
@@ -62,9 +64,173 @@ describe('PlanComparisonPage', () => {
         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: () => { } }));
+        const { container } = 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();
+        expect(screen.getByRole('heading', { name: 'Founding beta' })).toBeInTheDocument();
+        expect(screen.getByText(/Taskforce is in founding beta/)).toBeInTheDocument();
+        expect(screen.getByText(/Early members get access while the product is still forming/)).toBeInTheDocument();
+        expect(screen.getByText('Prices are listed in USD. Taxes may apply.')).toBeInTheDocument();
+        expect(screen.getByText('Local install is free on every plan. Cloud limits apply only to hosted workspaces.')).toBeInTheDocument();
+        const foundingBeta = screen.getByRole('heading', { name: 'Founding beta' }).closest('section');
+        const firstPlanCard = container.querySelector('[data-testid^="plan-card-"]');
+        const planCards = container.querySelectorAll('[data-testid^="plan-card-"]');
+        const lastPlanCard = planCards[planCards.length - 1];
+        const pricingNotes = screen.getByText('Prices are listed in USD. Taxes may apply.').closest('div');
+        const cloudCapacity = screen.getByRole('heading', { name: 'Need more cloud capacity?' }).closest('section');
+        const teamWorkspacesCard = screen.getByRole('heading', { name: 'Team workspaces are coming soon.' }).closest('div');
+        if (!foundingBeta || !firstPlanCard) {
+            throw new Error('Expected founding beta copy and a plan card to render.');
+        }
+        if (!lastPlanCard || !pricingNotes) {
+            throw new Error('Expected pricing notes to render below the plan cards.');
+        }
+        if (!cloudCapacity || !teamWorkspacesCard) {
+            throw new Error('Expected cloud capacity copy to render above the team workspaces card.');
+        }
+        expect(Boolean(foundingBeta.compareDocumentPosition(firstPlanCard) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(true);
+        expect(Boolean(lastPlanCard.compareDocumentPosition(pricingNotes) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(true);
+        expect(Boolean(pricingNotes.compareDocumentPosition(cloudCapacity) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(true);
+        expect(Boolean(cloudCapacity.compareDocumentPosition(teamWorkspacesCard) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(true);
+    });
+    it('renders pricing above the plan description', async () => {
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        const teamCard = await screen.findByTestId('plan-card-team-5');
+        const monthlyPrice = within(teamCard).getByText('$20');
+        const description = within(teamCard).getByText('For small collaborative teams.');
+        expect(Boolean(monthlyPrice.compareDocumentPosition(description) & Node.DOCUMENT_POSITION_FOLLOWING)).toBe(true);
+    });
+    it('shows founding offer pricing when campaign prices are present', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                plans: [
+                    {
+                        planId: 'pro',
+                        displayName: 'Pro',
+                        description: 'For serious operators.',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'pro-v1',
+                            versionNumber: 1,
+                            seatLimit: null,
+                            metadata: {}
+                        },
+                        features: [],
+                        pricing: {
+                            month: { pricingType: 'stripe', stripePriceId: 'price_pro_month', unitAmount: 3000, currency: 'usd', interval: 'month' },
+                            year: null
+                        },
+                        campaignPricing: {
+                            month: { pricingType: 'stripe', stripePriceId: 'price_pro_campaign_month', unitAmount: 1200, currency: 'usd', interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        const proCard = await screen.findByTestId('plan-card-pro');
+        expect(within(proCard).getByText('$30')).toBeInTheDocument();
+        expect(within(proCard).getByText('Founding Offer:')).toBeInTheDocument();
+        expect(within(proCard).getByText('$12')).toBeInTheDocument();
+        expect(within(proCard).getAllByText('/ month')).toHaveLength(2);
+    });
+    it('renders and selects campaign-only pricing intervals', async () => {
+        const onSelectPlan = vi.fn();
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                plans: [
+                    {
+                        planId: 'pro',
+                        displayName: 'Pro',
+                        description: 'For serious operators.',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'pro-v1',
+                            versionNumber: 1,
+                            seatLimit: null,
+                            metadata: {}
+                        },
+                        features: [],
+                        pricing: {
+                            month: null,
+                            year: null
+                        },
+                        campaignPricing: {
+                            month: { pricingType: 'stripe', stripePriceId: 'price_pro_campaign_month', unitAmount: 1200, currency: 'usd', interval: 'month' },
+                            year: null
+                        }
+                    }
+                ]
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: onSelectPlan }));
+        const proCard = await screen.findByTestId('plan-card-pro');
+        expect(within(proCard).queryByText('$30')).not.toBeInTheDocument();
+        expect(within(proCard).getByText('Founding Offer:')).toBeInTheDocument();
+        expect(within(proCard).getByText('$12')).toBeInTheDocument();
+        fireEvent.click(within(proCard).getByRole('button', { name: 'Get Started' }));
+        expect(onSelectPlan).toHaveBeenCalledWith({
+            planId: 'pro',
+            planVersionId: 'pro-v1',
+            interval: 'month',
+            pricingType: 'stripe',
+            pricingAudience: 'campaign',
+            isCurrentPlan: false
+        });
+    });
+    it('prefers pricing payload header copy when provided', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pageTitle: 'Choose Your Taskforce Plan',
+                pageDescription: 'Compare plans and pick the right fit for your team.',
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: []
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", subtitle: "Fallback subtitle", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Choose Your Taskforce Plan' })).toBeInTheDocument();
+        expect(screen.getByText('Compare plans and pick the right fit for your team.')).toBeInTheDocument();
+    });
+    it('can keep the provided heading when pricing payload title exists', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pageTitle: 'Choose Your Taskforce Plan',
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: []
+            })
+        })));
+        render(_jsx(PlanComparisonPage, { heading: "Pricing for human-agent work.", preferPricingPageTitle: false, isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByRole('heading', { name: 'Pricing for human-agent work.' })).toBeInTheDocument();
+        expect(screen.queryByRole('heading', { name: 'Choose Your Taskforce Plan' })).not.toBeInTheDocument();
+    });
+    it('renders pricing payload description as sanitized HTML', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pageTitle: 'Choose Your Taskforce Plan',
+                pageDescription: '<p>Local install is <strong>free</strong>.</p><p><a href="https://example.com/pricing">Read more</a><a href="javascript:alert(1)">Nope</a></p><script>alert(1)</script>',
+                plans: []
+            })
+        })));
+        const { container } = render(_jsx(PlanComparisonPage, { heading: "Subscription Plans", subtitle: "Fallback subtitle", isAuthenticated: false, onBack: () => { }, backLabel: "Back", onSelectPlan: () => { } }));
+        expect(await screen.findByText(/Local install is/)).toBeInTheDocument();
+        expect(container.querySelector('strong')?.textContent).toBe('free');
+        expect(container.querySelector('script')).toBeNull();
+        expect(screen.queryByText('alert(1)')).not.toBeInTheDocument();
+        expect(container.querySelector('a[href="https://example.com/pricing"]')?.textContent).toBe('Read more');
+        expect(container.querySelector('a[href^="javascript:"]')).toBeNull();
+        expect(screen.getByText('Nope')).toBeInTheDocument();
     });
     it('falls back to provided pricing source details when the pricing response omits them', async () => {
         globalThis.__DEBUG_MODE__ = true;
@@ -124,7 +290,8 @@ describe('PlanComparisonPage', () => {
                                 access: 'enabled',
                                 label: 'AI Profiles',
                                 publicLabel: 'AI teammates',
-                                publicDescription: 'Add reusable AI teammates to your workspace.'
+                                publicDescription: 'Add reusable AI teammates to your workspace.',
+                                publicDescriptionVisible: true
                             }
                         ],
                         pricing: {
@@ -140,6 +307,47 @@ describe('PlanComparisonPage', () => {
         expect(screen.getByText('Add reusable AI teammates to your workspace.')).toBeInTheDocument();
         expect(screen.queryByText('Collaboration Ai Profiles')).not.toBeInTheDocument();
     });
+    it('hides feature descriptions when publicDescriptionVisible is false', 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.',
+                                publicDescriptionVisible: false
+                            }
+                        ],
+                        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.queryByText('Add reusable AI teammates to your workspace.')).not.toBeInTheDocument();
+    });
     it('renders inline numeric feature limits next to each feature label', async () => {
         vi.stubGlobal('fetch', vi.fn(async () => ({
             ok: true,
@@ -196,10 +404,10 @@ describe('PlanComparisonPage', () => {
         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('1 Workspace');
+        expect(featureTextNodes).toContain('4 AI Agents');
         expect(featureTextNodes).toContain('24MB Cloud Storage');
-        expect(featureTextNodes).toContain('12x Team Management');
+        expect(featureTextNodes).toContain('12 Team Management');
         expect(container.querySelector('[class*="featureLimitUnit"]')?.textContent).toBe('MB');
     });
     it('renders the storage unit suffix in a smaller accent span', async () => {
@@ -244,6 +452,48 @@ describe('PlanComparisonPage', () => {
         expect(accent?.textContent).toBe('64MB');
         expect(unit?.textContent).toBe('MB');
     });
+    it('renders storage limits above 1000 MB as rounded GB', async () => {
+        vi.stubGlobal('fetch', vi.fn(async () => ({
+            ok: true,
+            json: async () => ({
+                pricingSource: {
+                    environment: 'production',
+                    runtimeMode: 'cloud'
+                },
+                plans: [
+                    {
+                        planId: 'pro',
+                        displayName: 'Pro',
+                        status: 'active',
+                        defaultVersion: {
+                            planVersionId: 'pro-v1',
+                            versionNumber: 1,
+                            seatLimit: null,
+                            metadata: {}
+                        },
+                        features: [
+                            {
+                                featureKey: 'context.uploads',
+                                access: 'enabled',
+                                label: 'Cloud Storage',
+                                config: { storageLimitMb: 2500 }
+                            }
+                        ],
+                        pricing: {
+                            month: { pricingType: 'stripe', stripePriceId: 'price_pro_month', unitAmount: 1999, currency: 'usd', 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('3GB');
+        expect(unit?.textContent).toBe('GB');
+    });
     it('hides missing yearly pricing rows and buttons instead of rendering unavailable state', async () => {
         vi.stubGlobal('fetch', vi.fn(async () => ({
             ok: true,
@@ -278,8 +528,8 @@ describe('PlanComparisonPage', () => {
         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();
+        expect(within(operatorCard).getByRole('button', { name: 'Get Started' })).toBeInTheDocument();
+        expect(within(operatorCard).queryByRole('button', { name: 'Start 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: () => { } }));
@@ -319,7 +569,7 @@ describe('PlanComparisonPage', () => {
         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();
+        expect(screen.getByRole('button', { name: 'Start 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: () => { } }));
@@ -330,21 +580,24 @@ describe('PlanComparisonPage', () => {
         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(screen.getByRole('button', { name: 'Get Started' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Start Monthly' })).toBeDisabled();
+        expect(screen.getByRole('button', { name: 'Start Yearly' })).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(screen.getByRole('button', { name: 'Get Started' })).toBeEnabled();
+        expect(screen.getByRole('button', { name: 'Start Monthly' })).toBeEnabled();
+        expect(screen.getByRole('button', { name: 'Start Yearly' })).toBeEnabled();
         expect(enabledFreeCard).toHaveAttribute('role', 'button');
-        fireEvent.click(screen.getByRole('button', { name: 'Get Started Free' }));
+        fireEvent.click(screen.getByRole('button', { name: 'Get Started' }));
         await waitFor(() => {
             expect(onSelectPlan).toHaveBeenCalledWith({
                 planId: 'free',
                 planVersionId: 'free-v1',
                 interval: 'month',
                 pricingType: 'free',
+                pricingAudience: 'public',
                 isCurrentPlan: false
             });
         });
@@ -356,7 +609,7 @@ describe('PlanComparisonPage', () => {
         const freeHeading = screen.getByRole('heading', { name: 'Free' });
         const freeCard = freeHeading.closest('[role="button"]');
         expect(freeCard).toBeTruthy();
-        expect(within(freeCard).getByText('$0.00')).toBeInTheDocument();
+        expect(within(freeCard).getByText('$0')).toBeInTheDocument();
         expect(within(freeCard).getByText('/ month')).toBeInTheDocument();
         fireEvent.click(freeCard);
         await waitFor(() => {
@@ -365,6 +618,7 @@ describe('PlanComparisonPage', () => {
                 planVersionId: 'free-v1',
                 interval: 'month',
                 pricingType: 'free',
+                pricingAudience: 'public',
                 isCurrentPlan: false
             });
         });

package/dist/components/views/PlansPage.js

@@ -24,6 +24,9 @@ function shouldRetryCheckoutConfirmation(statusCode, errorCode) {
 function parseInterval(raw) {
     return raw === 'year' ? 'year' : 'month';
 }
+function parsePricingAudience(raw) {
+    return raw === 'campaign' ? 'campaign' : 'public';
+}
 function normalizeIntervalValue(raw) {
     const normalized = String(raw || '').trim().toLowerCase();
     if (normalized === 'year')
@@ -65,6 +68,7 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
     const queryPlanId = String(query.get('planId') || '').trim();
     const queryPlanVersionId = String(query.get('planVersionId') || '').trim();
     const queryInterval = parseInterval(query.get('interval'));
+    const queryPricingAudience = parsePricingAudience(query.get('pricingAudience'));
     const queryIntervalValue = normalizeIntervalValue(query.get('interval'));
     const querySessionId = String(query.get('session_id') || '').trim();
     const normalizedApiBaseUrl = useMemo(() => normalizeApiBaseUrl(apiBaseUrl), [apiBaseUrl]);
@@ -93,6 +97,7 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
         params.delete('planId');
         params.delete('planVersionId');
         params.delete('interval');
+        params.delete('pricingAudience');
         const nextQuery = params.toString();
         navigate(`/${nextQuery ? `?${nextQuery}` : ''}${location.hash || ''}`);
     }, [location.hash, location.search, navigate]);
@@ -161,7 +166,7 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
     const shouldAutoContinueAfterActivation = useCallback((summary, fallbackGate) => {
         return !resolveCommercialLifecyclePresentation(summary, fallbackGate).allowReturnToApp;
     }, []);
-    const startCheckout = useCallback(async (planVersionId, interval, options) => {
+    const startCheckout = useCallback(async (planVersionId, interval, pricingAudience = 'public', options) => {
         if (!planVersionId) {
             setFeedback({ type: 'error', message: 'Selected plan is missing a default plan version.' });
             return;
@@ -173,7 +178,7 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
                 method: 'POST',
                 credentials: 'include',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ planVersionId, interval })
+                body: JSON.stringify({ planVersionId, interval, pricingAudience })
             });
             const payload = await res.json().catch(() => ({}));
             if (!res.ok) {
@@ -504,13 +509,13 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
             checkoutStartRan.current = true;
             void (async () => {
                 const preCheckoutSummary = await loadAccountProfileSummary({ force: true });
-                await startCheckout(queryPlanVersionId, queryInterval, {
+                await startCheckout(queryPlanVersionId, queryInterval, queryPricingAudience, {
                     autoContinueOnActivation: shouldAutoContinueAfterActivation(preCheckoutSummary, gateState)
                 });
             })();
             return;
         }
-    }, [authSessionResolved, checkoutState, confirmCheckoutSession, gateState, isAuthenticated, loadAccountProfileSummary, queryInterval, queryPlanVersionId, querySessionId, resolveRecoveryMessage, scheduleTransientQueryClear, shouldAutoContinueAfterActivation, startCheckout]);
+    }, [authSessionResolved, checkoutState, confirmCheckoutSession, gateState, isAuthenticated, loadAccountProfileSummary, queryInterval, queryPlanVersionId, queryPricingAudience, querySessionId, resolveRecoveryMessage, scheduleTransientQueryClear, shouldAutoContinueAfterActivation, startCheckout]);
     useEffect(() => {
         if (checkoutState === 'success' || checkoutState === 'cancel' || checkoutState === 'start' || checkoutState === 'free') {
             return;
@@ -534,9 +539,10 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
                 checkout: nextCheckoutState,
                 planId: intent.planId,
                 planVersionId: intent.planVersionId,
-                interval: intent.interval
+                interval: intent.interval,
+                pricingAudience: intent.pricingAudience
             });
-            navigate(`/login?mode=register&planId=${encodeURIComponent(intent.planId)}&planVersionId=${encodeURIComponent(intent.planVersionId)}&interval=${encodeURIComponent(intent.interval)}&next=${encodeURIComponent(nextPath)}`);
+            navigate(`/login?mode=register&planId=${encodeURIComponent(intent.planId)}&planVersionId=${encodeURIComponent(intent.planVersionId)}&interval=${encodeURIComponent(intent.interval)}&pricingAudience=${encodeURIComponent(intent.pricingAudience)}&next=${encodeURIComponent(nextPath)}`);
             return;
         }
         if (intent.isCurrentPlan) {
@@ -549,10 +555,10 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
         }
         const autoContinueOnActivation = shouldAutoContinueAfterActivation(accountProfileSummary, gateState);
         if (intent.pricingType === 'free') {
-            await startCheckout(intent.planVersionId, intent.interval, { autoContinueOnActivation });
+            await startCheckout(intent.planVersionId, intent.interval, intent.pricingAudience, { autoContinueOnActivation });
             return;
         }
-        await startCheckout(intent.planVersionId, intent.interval, { autoContinueOnActivation });
+        await startCheckout(intent.planVersionId, intent.interval, intent.pricingAudience, { autoContinueOnActivation });
     }, [accountProfileSummary, gateState, isAuthenticated, navigate, openBillingPortal, shouldAutoContinueAfterActivation, startCheckout]);
     const handleBack = useCallback(() => {
         if (hasResolvedActiveEntitlement && onContinueToTaskforce) {
@@ -570,6 +576,6 @@ export function PlansPage({ isAuthenticated, authUserId, runtimeMode, authSessio
         navigate('/');
     }, [closeEmbeddedPlansScreen, embedded, handleContinueToTaskforce, hasResolvedActiveEntitlement, navigate, onContinueToTaskforce]);
     const headerActions = embedded ? null : (_jsxs(_Fragment, { children: [_jsx("button", { className: styles.navAction, onClick: handleBack, disabled: continueBusy || continueActionBusy || (isAuthenticated && !hasResolvedActiveEntitlement), children: hasResolvedActiveEntitlement ? 'Take Me to Taskforce' : 'Back' }), isAuthenticated && accountProfileSummary?.stripeCustomerId && (_jsx("button", { className: styles.navAction, onClick: () => { void openBillingPortal(); }, disabled: actionBusy, children: "Manage billing" })), !isAuthenticated && (_jsxs("button", { className: styles.navAction, onClick: () => navigate(`/login?mode=login&next=${encodeURIComponent(buildEmbeddedPlansPath())}`), children: [_jsx(User, { size: 16, style: { marginRight: '8px', verticalAlign: 'text-bottom' } }), "Sign In"] }))] }));
-    const chrome = embedded ? null : (_jsx(AppShellHeader, { projectName: projectName, currentWorkspaceId: currentWorkspaceId, runtimeMode: runtimeMode === 'cloud' ? 'cloud' : 'local', theme: currentTheme, actions: headerActions }));
-    return (_jsx(PlanComparisonPage, { chrome: chrome, heading: "Subscription Plans", subtitle: "Manage your subscription and explore available features. Your current plan is highlighted below.", isAuthenticated: isAuthenticated, authSessionResolved: authSessionResolved, currentPlanId: String(accountProfileSummary?.planId || queryPlanId || '').trim() || null, currentPlanVersionId: String(accountProfileSummary?.planVersionId || queryPlanVersionId || '').trim() || null, currentEntitlementState: String(accountProfileSummary?.entitlementState || '').trim() || null, markCurrentPlan: lifecyclePresentation.markCurrentPlan, canManageCurrentPlan: Boolean(accountProfileSummary?.stripeCustomerId), pricingEndpoint: pricingEndpoint, statusBanner: feedback, onBack: handleBack, backLabel: hasResolvedActiveEntitlement ? 'Take Me to Taskforce' : (embedded ? 'Back to Board' : 'Back to App'), backDisabled: continueBusy || continueActionBusy || (isAuthenticated && !hasResolvedActiveEntitlement), topActions: null, shellOwnsScroll: shellOwnsScroll, showPageBackButton: false, showHeaderBarWithChrome: false, currentPlanCardActionMode: "manage", fallbackPricingSource: fallbackPricingSource, onSelectPlan: handleSelectPlan }));
+    const chrome = embedded ? null : (_jsx(AppShellHeader, { projectName: projectName, currentWorkspaceId: currentWorkspaceId, runtimeMode: runtimeMode === 'cloud' ? 'cloud' : 'local', theme: currentTheme, onBrandClick: handleBack, actions: headerActions }));
+    return (_jsx(PlanComparisonPage, { chrome: chrome, heading: "Subscription Plans", subtitle: "Manage your subscription and explore available features. Your current plan is highlighted below.", variant: "site", theme: currentTheme, isAuthenticated: isAuthenticated, authSessionResolved: authSessionResolved, currentPlanId: String(accountProfileSummary?.planId || queryPlanId || '').trim() || null, currentPlanVersionId: String(accountProfileSummary?.planVersionId || queryPlanVersionId || '').trim() || null, currentEntitlementState: String(accountProfileSummary?.entitlementState || '').trim() || null, markCurrentPlan: lifecyclePresentation.markCurrentPlan, canManageCurrentPlan: Boolean(accountProfileSummary?.stripeCustomerId), pricingEndpoint: pricingEndpoint, statusBanner: feedback, onBack: handleBack, backLabel: hasResolvedActiveEntitlement ? 'Take Me to Taskforce' : (embedded ? 'Back to Board' : 'Back to App'), backDisabled: continueBusy || continueActionBusy || (isAuthenticated && !hasResolvedActiveEntitlement), topActions: null, shellOwnsScroll: shellOwnsScroll, showPageBackButton: false, showHeaderBarWithChrome: false, currentPlanCardActionMode: "manage", fallbackPricingSource: fallbackPricingSource, onSelectPlan: handleSelectPlan }));
 }

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

@@ -5,11 +5,12 @@ import { MemoryRouter } from 'react-router-dom';
 import { PlansPage } from './PlansPage';
 import { ACCOUNT_PROFILE_SUMMARY_PATH, invalidateAccountProfileSummaryCache } from '../../utils/accountProfileSummaryCache';
 vi.mock('./PlanComparisonPage', () => ({
-    PlanComparisonPage: ({ heading, pricingEndpoint, statusBanner, topActions, onSelectPlan, onBack, backLabel, backDisabled }) => (_jsxs("div", { children: [_jsx("h1", { children: heading }), pricingEndpoint ? _jsx("div", { "data-testid": "pricing-endpoint", children: pricingEndpoint }) : null, statusBanner?.message ? _jsx("div", { "data-status-type": statusBanner.type, children: statusBanner.message }) : null, topActions, onSelectPlan ? (_jsx("button", { onClick: () => onSelectPlan({
+    PlanComparisonPage: ({ heading, variant, pricingEndpoint, statusBanner, topActions, onSelectPlan, onBack, backLabel, backDisabled }) => (_jsxs("div", { children: [_jsx("h1", { children: heading }), variant ? _jsx("div", { "data-testid": "plans-variant", children: variant }) : null, pricingEndpoint ? _jsx("div", { "data-testid": "pricing-endpoint", children: pricingEndpoint }) : null, statusBanner?.message ? _jsx("div", { "data-status-type": statusBanner.type, children: statusBanner.message }) : null, topActions, onSelectPlan ? (_jsx("button", { onClick: () => onSelectPlan({
                     planId: 'free',
                     planVersionId: 'free-v1',
                     interval: 'month',
                     pricingType: 'free',
+                    pricingAudience: 'public',
                     isCurrentPlan: false
                 }), children: "Select Free Plan" })) : null, onBack ? (_jsx("button", { onClick: onBack, disabled: backDisabled, children: backLabel || 'Back' })) : null] }))
 }));
@@ -25,6 +26,7 @@ describe('PlansPage', () => {
         })));
         render(_jsx(MemoryRouter, { initialEntries: ['/?screen=plans'], children: _jsx(PlansPage, { isAuthenticated: false, runtimeMode: "local", authSessionResolved: true, apiBaseUrl: "https://performance-app.taskforcehq.ai/api", resolveCloudAuthUrl: (path) => `/api/proxy?path=${encodeURIComponent(path)}` }) }));
         expect(await screen.findByTestId('pricing-endpoint')).toHaveTextContent('/api/proxy?path=%2Fapi%2Ftaskforce%2Fpublic%2Fpricing');
+        expect(screen.getByTestId('plans-variant')).toHaveTextContent('site');
     });
     it('shows recovery messaging only after bounded retries are exhausted', async () => {
         vi.useFakeTimers();
@@ -641,7 +643,7 @@ describe('PlansPage', () => {
                 planId: 'starter',
                 planVersionId: 'starter-v1',
                 gate: 'ok',
-                trialEnd: '2026-05-01T12:00:00.000Z'
+                trialEnd: '2026-06-01T12:00:00.000Z'
             })
         });
         vi.stubGlobal('fetch', fetchMock);