JetFormBuilder: per-action UI decorator (jet.fb.action.item filter)

JFB's action editor renders each configured action as an "action item" — a small panel showing the action's name, settings, and events. A plugin can wrap every action item with extra UI through the jet.fb.action.item wp.hooks filter. The wrapper component receives the original action item as a child and can render anything around or instead of it: a button group, a per-action toggle, an inline label override, an info badge, a quick configuration shortcut.

This skill is not about adding a new action type — that's jfb-form-action. It's about decorating actions that already exist on the form, without modifying their own editor components. A common use case (and the canonical pattern in the wild) is a button group that visually drives which custom event the action responds to: "Always / If TRUE / If FALSE" buttons that mutate the action's events array under the hood. The user sees three buttons; behind the scenes the wrapper writes [CHATGPT.TRUE], [CHATGPT.FALSE], or [DEFAULT.PROCESS] into the action's events.

The decorator pattern is purely visual sugar over real JFB state — it doesn't introduce a parallel storage system. Whatever the wrapper writes goes into the same _jf_actions post meta as the standard "Conditions → Events match" multi-select. Both UIs read and write the same array.

API stability note

The jet.fb.action.item filter, the JetFBHooks (useLoopedAction, useActionsEdit, useActions), and the JetFBComponents (ActionItemWrapper, ActionItemBody) used by this pattern have been stable across the JFB 3.x line in source observed. They are not extensively documented in the public docs but appear in production usage (e.g. chatgpt-for-jetformbuilder) and are part of the global window.JetFBHooks / window.JetFBComponents export contract. The plugin-version-tested value records last end-to-end verification.

When to use this skill

• Add a per-action toggle / button group / panel that should appear on every action, conditionally based on form state (e.g. only when a specific "trigger" action is also on the form).
• Provide a visual shortcut for a common configuration that would otherwise require the user to click into Conditions → Events match.
• Surface action-cross-cutting state (e.g. "this action will run TRUE branch of decision X") inline.
• The diff/files contain jet.fb.action.item, useLoopedAction, useActionsEdit, ActionItemWrapper, addFilter against the action editor.