feat: Add FlowFuse Expert to pricing page, refactor feature data, and add handbook feature catalog

[dimitrieh]

Description

Adds FlowFuse Expert to the pricing page under a new Empower section, making it clearly visible to customers evaluating plans. FlowFuse Expert is available on all FlowFuse Cloud tiers and on request for Self-Hosted Enterprise customers.

This PR also refactors all pricing feature data to use featureCatalog.yaml as a single source of truth, introduces a dedicated handbook page at /handbook/engineering/product/features/, and includes several visual refinements to the pricing page layout.

Changes include:

• FlowFuse Expert on pricing page — new Empower section with FlowFuse Expert, Support Mode and Insights Mode (as indented sub-features), and Node-RED MCP Servers
• Feature data refactor — featureCatalog.yaml is now the canonical source for all feature data across Cloud and Self-Hosted tiers
• Data-driven Beta badges — tag/tagPrefix fields in YAML render styled pill badges (e.g., "While in Beta") with proper spacing
• Dedicated handbook feature catalog — single horizontally-scrollable table at /handbook/engineering/product/features/ covering all sections, tiers, and solutions
• Fullscreen toggle — handbook table can be expanded to fill the viewport for easier reading of all 13 columns, with sticky close button and Escape key support
• Contact Us → On request — features available on request render "On request" text in the handbook table and a styled CTA button on the pricing page
• Sub-feature support — subfeature: true flag renders child rows with └ tree connector and visual indentation
• Note-only cells — cells with only a note (e.g., "Available during beta") render cleanly without a dash prefix or extra line break
• Toggle click target fix — Cloud/Self-Hosted toggle now responds to clicks on the full button area, not just the text labels
• Layout fix — handbook grid column changed to minmax(0, 1fr) to prevent wide tables from overflowing the page
• Dead code cleanup — removed unused .ff-feature-tag-prefix CSS rule and old pricingFeatures.yaml

Related Issue(s)

N/A

Checklist

• I have read the contribution guidelines
• I have considered the performance impact of these changes
• Suitable unit/system level tests have been added and they pass
• Documentation has been updated
• For blog PRs, an Art Request has been created (instructions)

[netlify]

✅ Deploy Preview for flowforge-website ready!

Name	Link
🔨 Latest commit	26927db
🔍 Latest deploy log	https://app.netlify.com/projects/flowforge-website/deploys/69a60ad19e049b0008f42052
😎 Deploy Preview	https://deploy-preview-4607--flowforge-website.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 92 (🟢 up 5 from production) Accessibility: 81 (no change from production) Best Practices: 100 (no change from production) SEO: 91 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[dimitrieh]

@lbeau @MichaelBDavis can you have a look here? This PR sets us up in two ways:

• Adding FlowFuse expert clearly into the pricing page (no other changes made to the pricing page)
• Refactors our data file for the pricing page to be more usable/extendable
  • With this PR there is now an added handbook page in which we can feature any feature and or subfeature regardless of showing them on the pricing page. This should be great for internal alignment.

You can review the changes directly here:

• https://deploy-preview-4607--flowforge-website.netlify.app/pricing/
• https://deploy-preview-4607--flowforge-website.netlify.app/handbook/engineering/product/features/
• New data file: https://github.com/FlowFuse/website/pull/4607/changes#diff-d83fdd0abd81bfa7b2c8fb2338f257c7cdbb71e1272ee230d7b8ade98cd5a3bc

[allthedoll]

LGTM

[dimitrieh]

@Yndira-E adding you as a reviewer as well, see https://flowfuse.slack.com/archives/C09QS57R8AD/p1772192847293829?thread_ts=1772184741.264499&cid=C09QS57R8AD

[lbeau]

I would like to limit AI capabilities to our enterprise tier. I'm comfortable with lower tiers trying out the functionality for a period of time, but eventually these capabilities should be powerful enough to draw folks into the higher tiers on the basis of that feature alone.

[dimitrieh]

@Steve-Mcl what is our current exposure of insights mode and MCP server nodes VS FlowFuse tier (FlowFuse CLoud and Selfhosted)?

Afaik it currently aligns with what has been defined as of now right? see https://deploy-preview-4607--flowforge-website.netlify.app/pricing/

[Steve-Mcl]

@Steve-Mcl what is our current exposure of insights mode and MCP server nodes VS FlowFuse tier (FlowFuse CLoud and Selfhosted)?

@dimitrieh
As was agreed/discussed at the start of the journey (starting with nr-assistant), all features are available to all FFC registered users.

[dimitrieh]

Thanks @Steve-Mcl that aligns with my assumptions

[dimitrieh]

Updated:

FlowFuse cloud:

Self hosted:

[dimitrieh]

@hardillb can you give this a final look in terms of code?

[dimitrieh]

Code review audit

Code review

No issues found above the confidence threshold (80/100). Checked for bugs, CLAUDE.md compliance, git history context, previous PR comments, and code comment adherence.

Notable observations below threshold (scored 75/100):

• ff-expert-insights and nr-mcp-servers have note: "Available during beta" with value: null for some tiers. The table cell renders empty because the template only displays note inside the info dialog, not inline. Users see a blank cell rather than "Available during beta." This may be intentional (notes only in dialog), but worth verifying.

• ff-expert-insights (Insights Mode) and ff-expert-support (Support Mode) have tags: [cloud, self-hosted] with all selfHosted tier values as null. This renders sub-feature rows with three empty cells in the self-hosted pricing table. Consider removing self-hosted from their tags if these are not available for self-hosted.

• showOnFeaturesPage field is defined for all 40+ features in featureCatalog.yaml but is not consumed by any template. The handbook features page renders all features unconditionally.

• solution-features.njk is introduced but not included by any page (commit message notes "not yet wired to pages").

These did not meet the confidence threshold for flagging as issues because they may be intentional design decisions or are pre-existing patterns.

🤖 Generated with Claude Code

_{If this code review was useful, please react with 👍. Otherwise, react with 👎.}

[dimitrieh]

Updated

FlowFuse cloud:

Selfhosted:

[ZJvandeWeg]

@dimitrieh With subitems, like in #4607 (comment), should the top level item be left aligned?

[dimitrieh]

@dimitrieh With subitems, like in #4607 (comment), should the top level item be left aligned?

@ZJvandeWeg looking into this. Side-question:

Should we re-order our offerings with the most ideal one first, meaning enterprise?

Anthropics does a similar thing with their newest model comparisons:

[dimitrieh]

PS: I also think this doesn't make a lot of sense...

This should be "Request a quote" like at the bottom of the column 🤔. Making this change as well.

[Yndira-E]

@dimitrieh

PS: I also think this doesn't make a lot of sense...

The distinction is intentional.

The hero CTA was aimed at teams who want to technically evaluate the full Enterprise setup via a trial licence.

Further down, after reviewing the feature details, “Request a quote” aligns more with organizations already considering procurement.

Happy to align them if we decide consistency is preferable.

[dimitrieh]

@Yndira-E please take my comment with a grain of salt 🙃. Good to know there was thought behind it. Do think it makes things slightly confusing especially VS the Pro tier, though I can understand the want to direct towards a trial 🤔.

My suggestion here would be to then create consistency and separate concerns. We can communicate a trial period is a possibility. Setting something up...

[Yndira-E]

@dimitrieh

Should we re-order our offerings with the most ideal one first, meaning enterprise?

Good question, I think this ties into how we want to position FlowFuse overall.

Are we aiming to lead with Enterprise from a positioning perspective, or keep the tiered progression (Starter → Pro → Enterprise)?

If we decide to lead with Enterprise, we should probably keep the order consistent across the whole page (hero cards and comparison table) to avoid cognitive switching while scanning.

[dimitrieh]

Edit: changes are moved to #4619

[Yndira-E]

Please make sure the first cell is transparent instead of white. The top left one above "Empower".

[dimitrieh]

ase make sure the first cell is transparent instead of

@Yndira-E White bg artifact is because of browser zoom. Is a non issue. Feel free to check the preview deployment

[dimitrieh]

This is ready to merge, but awaiting review by @lbeau as stated in https://flowfuse.slack.com/archives/C05GYH95NJZ/p1772455163819599?thread_ts=1772452761.313169&cid=C05GYH95NJZ

[dimitrieh]

Out of scope changes have been scoped out and moved to #4619

Merging