Task 3 – Multi-Tab Flag, Theming, Split View, and Rollout

[astandrik]

Scope

• Introduce a configuration/feature flag that enables/disables multi-tab mode (per installation or environment). When the flag is off, the UI behaves exactly as today (single tab, no tab bar).
• When the flag is on, render the new tab bar and behaviors from Task 2, but keep external APIs intact.
• Validate and, if necessary, adjust the existing SplitPane integration in QueryEditor.tsx so the results panel behaves correctly with multiple tabs (shared vs per-tab collapsed state, resize behavior, min/max heights).
• Ensure all new components (tab bar, status indicators, context menus) render correctly in both light and dark modes using existing theme tokens; do not introduce the new color theme yet.
• Extend unit and Playwright tests to cover both flag states: single-tab legacy mode and multi-tab mode, including split-pane resize and basic run-success-error flows.

Key files

• src/containers/Tenant/Query/QueryEditor/QueryEditor.tsx and .scss for layout/theming fixes.
• Any shared theme or layout utilities used by Tenant Query pages.
• tests/suites/tenant/queryEditor/* for new E2E tests and page-object methods.

Risks/constraints

• Theme regressions in other parts of the tenant query UI if shared styles are modified instead of scoped.
• Flaky E2E tests around async query execution and split-pane drags.
• Incorrect flag wiring could accidentally ship multi-tab to installations that are not ready.

Acceptance criteria

• With the flag disabled, behavior is indistinguishable from the current single-tab editor (no new tab UI visible).
• With the flag enabled, the full multi-tab experience from Tasks 1 and 2 is available, including split view and indicators, in both light and dark themes.
• All relevant unit and E2E tests are green and stable across multiple runs in both modes.
• No regressions in other Tenant Query screens (history, saved queries, diagnostics).