Pricing packaging consistency

[AkioNuernberger]

Greptile Summary

This PR aligns pricing and packaging language across the documentation site, renaming "Yearly Commitment" to "Committed spend" and making volume discounts available on all cloud plans (not just Enterprise). It introduces a new CommittedSpendBox component, restructures the Billing/Compliance sections in the pricing table, and adds explanatory content for the self-hosted Enterprise annual agreement model.

• Cloud pricing: "Committed spend" is now a standalone optional tier available on Hobby through Enterprise, with volume discounts, procurement support, upgraded support, and AWS Marketplace/invoice billing. The feature comparison table updates payment/contract rows to reflect monthly self-serve defaults for all tiers.
• Self-hosted Enterprise: New copy consistently describes the annual flat-fee model sized on billable units, activated via a single license key covering all environments, with usage reviewed at renewal.
• UI: PricingPlans adopts CSS subgrid (grid-rows-subgrid) for vertical card alignment and the Enterprise plan in the calculator now always shows the sales sizing callout.

Confidence Score: 4/5

Safe to merge — changes are documentation and UI content with no backend or data logic; the two findings are cosmetic/maintenance concerns.

Most changes are copy updates and a modest React refactor. The content duplication in pricing-self-host.md and the hardcoded subgrid row-span values are the only items worth addressing before the next card layout change.

components/home/pricing/PricingTable.tsx (subgrid row-span hardcoding) and md-override/pricing-self-host.md (duplicate ClickHouse bullet).

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User visits /pricing] --> B{Cloud or Self-Hosted?}
    B -->|Cloud| C[PricingPlans cloud]
    B -->|Self-Hosted| D[PricingPlans selfHosted]

    C --> E[4 Tier Cards Hobby / Core / Pro / Enterprise]
    E --> F[CSS subgrid row-span-8 aligns card sections]
    E --> G[CommittedSpendBox + optional annual agreement]
    G --> H[Volume discounts, Procurement support, Upgraded support, AWS Marketplace / invoice]

    C --> I[PricingTable cloud]
    I --> J[Feature comparison table]
    J --> K[CommittedSpendBox repeated after table]

    D --> L[2 Tier Cards Open Source / Enterprise]
    L --> M[CSS subgrid row-span-6 no TrustedBy row]

    E --> N{Calculator: selectedPlan?}
    N -->|Enterprise| O[Always show Talk to Sales callout]
    N -->|Other plan + high volume| O
    N -->|Other plan + low volume| P[Hide callout]

Loading

%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
    A[User visits /pricing] --> B{Cloud or Self-Hosted?}
    B -->|Cloud| C[PricingPlans cloud]
    B -->|Self-Hosted| D[PricingPlans selfHosted]

    C --> E[4 Tier Cards Hobby / Core / Pro / Enterprise]
    E --> F[CSS subgrid row-span-8 aligns card sections]
    E --> G[CommittedSpendBox + optional annual agreement]
    G --> H[Volume discounts, Procurement support, Upgraded support, AWS Marketplace / invoice]

    C --> I[PricingTable cloud]
    I --> J[Feature comparison table]
    J --> K[CommittedSpendBox repeated after table]

    D --> L[2 Tier Cards Open Source / Enterprise]
    L --> M[CSS subgrid row-span-6 no TrustedBy row]

    E --> N{Calculator: selectedPlan?}
    N -->|Enterprise| O[Always show Talk to Sales callout]
    N -->|Other plan + high volume| O
    N -->|Other plan + low volume| P[Hide callout]

Loading

Prompt To Fix All With AI

Fix the following 2 code review issues. Work through them one at a time, proposing concise fixes.

---

### Issue 1 of 2
md-override/pricing-self-host.md:28-31
**Duplicate ClickHouse line in card description and bullet**

The sentence "Runs on your ClickHouse deployment -- we help you pick the right ClickHouse setup" appears twice: once as the section description (line 28) and again as the first feature bullet (line 31). Users reading the Enterprise card will encounter the same text back-to-back, making the list feel padded. The bullet should be replaced with a distinct, value-adding point — for example expanding on what ClickHouse setups are supported or how the selection guidance works.

### Issue 2 of 2
components/home/pricing/PricingTable.tsx:1474-1476
**Hardcoded subgrid row-span values will silently misalign on card structure changes**

The `md:row-span-8` (cloud) and `md:row-span-6` (self-hosted) values must exactly match the number of direct child elements rendered inside each `Card`. The cloud count currently is: `CardHeader` + price `CardContent` + CTA `CardContent` + callout `CardContent` + `div.border-t` + `TrustedBy` + `div.border-t` + `CardFooter` = 8. Self-hosted drops `TrustedBy` and its separator → 6. If any card section is added, removed, or made conditional without also updating these constants, the subgrid rows will silently desync across cards at the `md` breakpoint and break the visual alignment the subgrid is meant to enforce.

_{Reviews (1): Last reviewed commit: "docs: add contract to Committed spend pr..." | Re-trigger Greptile}

Greptile also left 1 inline comment on this PR.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
langfuse-docs	Ready	Preview, Comment	Jul 10, 2026 2:16am

[github-actions]

@claude review

[greptile-apps]

Hardcoded subgrid row-span values will silently misalign on card structure changes

The md:row-span-8 (cloud) and md:row-span-6 (self-hosted) values must exactly match the number of direct child elements rendered inside each Card. The cloud count currently is: CardHeader + price CardContent + CTA CardContent + callout CardContent + div.border-t + TrustedBy + div.border-t + CardFooter = 8. Self-hosted drops TrustedBy and its separator → 6. If any card section is added, removed, or made conditional without also updating these constants, the subgrid rows will silently desync across cards at the md breakpoint and break the visual alignment the subgrid is meant to enforce.

Prompt To Fix With AI

This is a comment left during a code review.
Path: components/home/pricing/PricingTable.tsx
Line: 1474-1476

Comment:
**Hardcoded subgrid row-span values will silently misalign on card structure changes**

The `md:row-span-8` (cloud) and `md:row-span-6` (self-hosted) values must exactly match the number of direct child elements rendered inside each `Card`. The cloud count currently is: `CardHeader` + price `CardContent` + CTA `CardContent` + callout `CardContent` + `div.border-t` + `TrustedBy` + `div.border-t` + `CardFooter` = 8. Self-hosted drops `TrustedBy` and its separator → 6. If any card section is added, removed, or made conditional without also updating these constants, the subgrid rows will silently desync across cards at the `md` breakpoint and break the visual alignment the subgrid is meant to enforce.

How can I resolve this? If you propose a fix, please make it concise.

[claude]

🔴 On /pricing (cloud variant), the new CommittedSpendBox is rendered twice: once at the end of PricingPlans (mt-10) and again at the end of PricingTable (mt-12). Since /pricing mounts both components (see components/home/pricing/index.tsx L111 & L114), users see the identical "Committed spend + optional" callout twice — between the plan cards and comparison table, and again between the comparison table and the calculator. Consider gating the PricingPlans render on !isPricingPage (keeps it on the home embed but not on /pricing), or drop one of the two renders.

Extended reasoning...

What the bug is

The new CommittedSpendBox callout is rendered twice on the /pricing page for the cloud variant.

In components/home/pricing/index.tsx:

• Line 111: <PricingPlans variant={variant} /> renders unconditionally.
• Line 114: <PricingTable variant={variant} isPricingPage /> renders only when isPricingPage is true (i.e. on /pricing).

Both new fragments end with the same conditional render:

• PricingPlans (end of the fragment): {variant === "cloud" && <CommittedSpendBox className="mt-10" />}
• PricingTable (PricingTable.tsx:1971, after the closing </section>): {variant === "cloud" && <CommittedSpendBox className="mt-12" />}

On the home page (isPricingPage=false), only PricingPlans is mounted, so only one box appears there — that's presumably the intended surface for the home embed. On /pricing, both mount, so users see the identical "Committed spend + optional" callout twice.

Step-by-step proof

1. User navigates to /pricing. PricingPage runs with isPricingPage=true and initialVariant="cloud", so variant = "cloud".
2. Line 111 renders <PricingPlans variant="cloud" />. Its fragment ends with variant === "cloud" && <CommittedSpendBox className="mt-10" /> → the Committed spend box is rendered immediately after the four plan cards, with mt-10 spacing.
3. Line 114 evaluates isPricingPage (true) and renders <PricingTable variant="cloud" isPricingPage />. Its fragment ends with variant === "cloud" && <CommittedSpendBox className="mt-12" /> → a second, identical Committed spend box is rendered after the feature comparison </section>, with mt-12 spacing.
4. Result on /pricing: the identical "+ optional / Committed spend / Volume discounts / Procurement support / Upgraded support / Billing via AWS Marketplace or invoice / Talk to sales" box appears twice — once between the plan cards and the comparison table, and again between the comparison table and the pricing calculator.

Why existing code doesn't prevent it

Neither call site guards on isPricingPage. PricingPlans has no way to know whether the page also renders PricingTable below it, and PricingTable doesn't check whether something above already rendered the box. The differing margins (mt-10 vs mt-12) suggest the author intended one home-page render and one /pricing-page render but forgot to gate the PricingPlans copy on !isPricingPage.

Impact

This is a visible, above-the-fold-once-scrolled duplication on the primary /pricing landing page — the same page this PR is specifically about. The duplicated CTA hurts the polish of a marketing surface, but nothing crashes or produces incorrect billing information.

How to fix

The simplest fix that preserves the intent (one box on the home embed, one box on /pricing) is to gate the PricingPlans render on !isPricingPage:

// components/home/pricing/PricingTable.tsx, inside PricingPlans
{variant === "cloud" && !isPricingPage && (
  <CommittedSpendBox className="mt-10" />
)}

This requires threading isPricingPage into PricingPlans. Alternatively, drop one of the two renders outright — keeping only the PricingTable one places the box near the calculator/CTAs and looks cleaner on /pricing, but removes it from the home page. Pick whichever placement Product prefers.

[claude]

🟡 The new Billing section description at PricingTable.tsx:1255-1258 lives on the section object (no variant scoping) and is rendered on both the cloud and self-hosted comparison tables. On /pricing-self-host, hovering the Billing section header shows text that says self-hosted is "self-serve with monthly billing via credit card" with an optional "Committed spend" agreement — all three claims contradict the same PR's framing of self-hosted Enterprise as an annual license-key agreement, and CommittedSpendBox is explicitly cloud-only. Suggested fix: move the copy into a cloud-only inline note (or wrap in a variant check when passing to FeatureDetails).

Extended reasoning...

What the bug is. In components/home/pricing/PricingTable.tsx, the new Billing section object is defined with a section-level description:

{
  name: "Billing",
  description:
    "All paid plans are self-serve with monthly billing via credit card. With the optional Committed spend agreement, you can switch to billing via AWS Marketplace or invoice.",
  features: [ ... ],
}

That description is passed unconditionally to FeatureDetails at both the desktop and mobile render sites via {section.description}. FeatureDetails renders it inside a HoverCard triggered by the info icon next to the section heading. There is no variant scoping anywhere in the render path.

Why it reaches self-hosted. The visible-sections filter is sections.filter((section) => section.features.some((feature) => variant in feature.tiers)). All four Billing features (Subscription management, Payment methods, Contract duration, Billing via AWS Marketplace or invoice) declare selfHosted tier entries — the last one is even self-hosted-only. So when PricingTable is rendered with variant === 'selfHosted' on /pricing-self-host, the Billing section is included and its description is passed to the same hover card.

Why the copy is wrong for self-hosted. The same PR redefines self-hosted Enterprise across license-key.mdx, pricing-self-host.md, billable-units.mdx, and the self-hosted tier in PricingTable.tsx itself as "an annual agreement with a flat fee sized on your billable units", activated via a license key. It is not monthly, not self-serve credit-card billing. "Committed spend" is defined by this same PR as a Langfuse Cloud construct: the PricingFAQ entry says "Committed spend is an annual agreement for Langfuse Cloud", and CommittedSpendBox is rendered only when variant === 'cloud'. So all three claims in the hover text — "self-serve", "monthly billing via credit card", and "the optional Committed spend agreement" — are cloud-specific and inaccurate on the self-hosted page.

Step-by-step proof.

1. User visits /pricing-self-host, which renders <PricingTable variant="selfHosted" />.
2. visibleSections = sections.filter(...). The Billing section has features whose tiers include selfHosted (e.g. Billing via AWS Marketplace or invoice is self-hosted-only), so Billing is included.
3. The section header row renders {section.name} <FeatureDetails description={section.description} href={section.href} />. section.description is the cloud-specific string.
4. FeatureDetails short-circuits only when both description and href are falsy; here description is truthy, so it renders the HoverCard.
5. User hovers the info icon next to "Billing" → the tooltip shows the cloud-specific copy on the self-hosted page.

Impact and fix. Impact is low: it's only visible when hovering the small info icon next to a section header, and the feature rows themselves (booleans that render as check/dash for self-hosted) are still correct. But the copy is inconsistent with the PR's own self-hosted messaging in a PR whose stated goal is packaging consistency. Fix: either omit the description on the self-hosted variant (e.g. add an optional descriptionByVariant field, or gate at the render site with variant === 'cloud' ? section.description : undefined), or move the text into a cloud-only inline note next to the existing CommittedSpendBox — which is already how Committed spend is surfaced elsewhere in this PR.

[claude]

🟡 The Self-Hosted Enterprise section in md-override/pricing-self-host.md repeats the same ClickHouse sentence twice — once at the end of the intro paragraph (L28) and again as the first bullet (L31). Drop the ClickHouse sentence from the intro line to match PricingTable.tsx, whose Enterprise tier description is just "Dedicated Langfuse deployment with enterprise capabilities and support." (the ClickHouse phrasing lives only in mainFeatures).

Extended reasoning...

What the bug is

In md-override/pricing-self-host.md, the Self-Hosted Enterprise section reads:

### Self-Hosted Enterprise (Custom pricing)

Dedicated Langfuse deployment with enterprise capabilities and support. Runs on your ClickHouse deployment -- we help you pick the right ClickHouse setup.

- All Open Source features plus management APIs, project-level RBAC, data retention policies, and audit logs
- Runs on your ClickHouse deployment -- we help you pick the right ClickHouse setup
- Activated via license key; one key covers all of your environments
...

The sentence "Runs on your ClickHouse deployment -- we help you pick the right ClickHouse setup" appears verbatim in the intro paragraph on line 28 and again as a bullet on line 31 — back-to-back.

How it manifests

The md-override file is what LLM/AI consumers of the /pricing-self-host page see (the human-rendered page comes from the React component). Readers of the markdown see the same sentence twice within four lines. The redundancy is small but visible and looks like an editing oversight.

Inconsistency with the source component

The sibling component components/home/pricing/PricingTable.tsx intentionally keeps the same tier's description short — just "Dedicated Langfuse deployment with enterprise capabilities and support." — and puts the ClickHouse phrasing only in mainFeatures. The md-override file was updated in this PR to append the ClickHouse sentence to the intro and add it as a bullet in the same diff hunk, so the two sources drifted apart. CLAUDE.md explicitly asks that md-override files be kept in sync with their component.

Step-by-step proof

1. Open md-override/pricing-self-host.md at L26–L31.
2. L28 (intro paragraph) ends with: Runs on your ClickHouse deployment -- we help you pick the right ClickHouse setup.
3. L31 (first bullet) is: - Runs on your ClickHouse deployment -- we help you pick the right ClickHouse setup.
4. Open components/home/pricing/PricingTable.tsx selfHosted Enterprise tier: description is "Dedicated Langfuse deployment with enterprise capabilities and support." and the ClickHouse line only appears as a mainFeatures entry.

Suggested fix

Drop the ClickHouse sentence from the intro line in md-override/pricing-self-host.md so it reads Dedicated Langfuse deployment with enterprise capabilities and support., matching the component. The bullet already carries the ClickHouse phrasing.

Impact

Cosmetic prose redundancy in a markdown source consumed mainly by LLM tooling; harmless but easy to fix and worth cleaning up before merge to keep the two sources aligned.