[Epic] Trigger-based popover menus in text-areas

[alexmarhaba]

Pattern: Trigger-based popover menus in text areas (mentions, slash commands, resource pickers)

Summary

Multiple teams are independently building the same interaction pattern — a popover menu triggered by a character sequence (e.g. @, /) inside a text area, anchored to the cursor position. There is no shared EUI component or documented pattern for this today.

Known implementations

• ES|QL editor — @kbn/esql-resource-browser (resource autocomplete in Monaco)
• Agent Builder — custom contenteditable div + EuiPopover anchored to trigger sequences (PR #252785)
• Workflows — trigger-from-input UI elements (details TBD)

Problem

Each team is solving the same UX problem with different approaches, leading to inconsistent behavior, duplicated effort, and no shared accessibility or interaction standards. As more surfaces adopt chat and agent UIs, this gap will grow.

Proposed scope

1. Document a pattern on the EUI site (similar to Nested Drag and Drop) covering the interaction model, visual spec, and accessibility expectations.
2. Evaluate extracting a shared utility (e.g. a Kibana shared plugin) from the existing Agent Builder implementation for non-Monaco text areas.
3. Audit existing usages across ES|QL editor, Agent Builder, and Workflows for consistency gaps.

Notes

• Monaco-based editors and standard text areas require architecturally different solutions, so a single component may not be feasible. The pattern doc should cover both paths.
• Given Elastic's agentic direction, this pattern will see increasing adoption. Slotted as a sweep topic after tables/tooltips.