[Streams] Bi-directional color coding for dissect processor

[diogolima-elastic]

To merge only after #269680

Closes https://github.com/elastic/streams-program/issues/1202

Summary

Adds bi-directional coloring for the Dissect processor, matching the existing Grok implementation. When editing a Dissect pattern, each field token in the editor is highlighted with a consistent color that also appears on the corresponding matched value in the sample preview table.

Before:

After:

What it does

• Editor highlighting: As you type a dissect pattern like %{clientip} %{method} %{status}, each %{field} token gets a distinct background color in the Monaco editor.
• Preview highlighting: The same colors appear on the matched portions of sample text in the preview table, so you can instantly see which part of the sample maps to which field.
• Color stability: Colors stay stable while typing (e.g. renaming clientip to client_ip character-by-character keeps the same color). When a field name is changed while other tokens still use the old name, the renamed token gets a fresh color to distinguish it.

How it works

Dissect patterns are structurally simpler than Grok (flat field references vs nested pattern resolution), so the color management uses a lighter architecture:

• DissectColorManager: A single class that parses field tokens, assigns colors from the shared palette, and manages keystroke stability. Color transfer only happens when a field name is fully replaced (not when duplicates of the old name still exist in the pattern).
• DissectColorContext: React context that shares the color manager's field-to-color mapping between the editor and preview table, ensuring both always agree on colors.
• DissectSample: Converts the dissect pattern into a regex with named capture groups, matches it against sample text, and highlights the matched ranges using the shared applyHighlights utility.

Refactoring

To avoid code duplication between Grok and Dissect:

• Extracted shared utilities from @kbn/grok-ui into reusable modules: color palette constants (pattern_colour_utils.ts), highlight rendering (highlight_utils.tsx), and CSS class generation. Grok was refactored to consume these.
• Renamed grok-specific helpers in processor_outcome_preview_helpers.ts to generic names (e.g. grokExpressionOverwritesSourceField -> kept + added dissectPatternOverwritesSourceField).
• Extracted useProcessorHighlightMode hook from processor_outcome_preview.tsx, consolidating the duplicated processor-detection, source-field validation, overwrite checks, and column computation logic for both Grok and Dissect into a single reusable hook. This significantly simplified the preview component.

Testing

• Unit tests for DissectColorManager (color assignment, dedup, cleanup, rename transfer, stability, cycling, duplicate field rename).
• Unit tests for dissectPatternToRegex (group mapping, indices, delimiter escaping, greedy/non-greedy quantifiers, real-world patterns).
• Manual testing with complex patterns including append modifiers (+), skip keys, and various delimiters.

[infra-vault-gh-plugin-prod]

Pinging @elastic/obs-onboarding-team (Team:obs-onboarding)

[kibanamachine]

💛 Build succeeded, but was flaky

• Buildkite Build
• Commit: 9a4f0b7
• Build duration: 68 mins

Failed CI Steps

• FTR Configs #68
• FTR Configs #121
• Scout Lane #20 - serverless-search / agent_builder

Test Failures

• [job] [logs] FTR Configs #121 / integrations When on the Trusted Apps list should be able to add a new trusted app and remove it

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
streamsApp	1951	1957	+6

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
streamsApp	2.1MB	2.1MB	+5.0KB