feat(enterprise): AdvancedOverflowModule — searchable/MRU overflow tab switcher (MVP)

Upgrade the free tab-overflow dropdown, in place, into a command-palette tab
switcher: a search box filtering across the group's tabs, most-recently-used
ordering, and full keyboard navigation. Same chevron trigger; only the popover
body changes. When the module is absent the free flat list renders exactly as
before.

Core seam (free, no behaviour change)
- Extract the dropdown body building in `TabsContainer.toggleDropdown` into a
  shared `createOverflowRenderContext` (row + group-header builders, plus
  window-bound popover open/close/focus) and `renderFreeOverflowList`. The
  merged overflow composition (horizontal-clip ∪ forced-overflow − excluded,
  i.e. pinned + maxRows) is untouched — only rendering moved.
- Add a single `?.`-guarded branch: when `accessor.advancedOverflowService` is
  present it builds AND opens the popover; otherwise the free helper renders.
- New core contracts in `moduleContracts.ts` (`IAdvancedOverflowHost`,
  `IAdvancedOverflowService`, render context/params, `IOverflowRow`) and the
  `advancedOverflowService` slot on `ServiceCollection`, plus the component
  getter. Keeping the popover open/close in core avoids the popout
  window-binding trap.

Module (dockview-enterprise)
- `MruTracker`: per-group panel ids ordered by last activation, component-scoped
  so recency survives a group closing; cross-group moves re-home the panel.
- `AdvancedOverflowService` self-wires MRU off group + active-panel events
  (filtered to `origin === 'user'`), and builds an `OverflowListView` per
  popover-open: focused search input (scope `group` vs `overflow`, debounced),
  MRU/clipped ordering reusing the core row builder, and a `role="listbox"`
  keyboard controller (arrows/Home/End rove, Enter activates, Esc closes +
  restores chevron focus, Tab trapped). Enter is intercepted before
  PopupService's Enter-dismissal so the row activates first.

Styling lives in core (`tabs.scss`); the module ships no CSS.

Tests: MruTracker (move-to-front / add-remove / cross-group / origin filter),
search predicate + scope, MRU ordering, keyboard nav (unit + jsdom
integration); core free-fallback seam test; cross-window e2e opening the
advanced popover inside a popped-out group. Removability is covered by the
auto-generated Modules spec.

Deferred (reserved, unwired): thumbnails and the onDidOverflow event /
persistMru serialization.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_011kNoUE25gJe1itCbKnN6oA

Author: claude

e2e/fixtures/index.html

@@ -55,6 +55,9 @@
                 // `?maxRows=N` caps the header at N rows (surplus spills to the
                 // dropdown).
                 const maxRowsParam = params.get('maxRows');
+                // `?overflow=advanced` enables the AdvancedOverflowModule
+                // (searchable / MRU overflow dropdown) so the advanced popover
+                // can be exercised; other specs are unaffected.
                 const overflow =
                     params.get('overflow') === 'wrap'
                         ? {
@@ -63,7 +66,9 @@
                                   ? { maxRows: Number(maxRowsParam) }
                                   : {}),
                           }
-                        : undefined;
+                        : params.get('overflow') === 'advanced'
+                          ? { search: true, mru: true }
+                          : undefined;
                 // `?smooth=1` turns on the smooth tab reorder animation (needed
                 // to exercise the 2-D cross-row wrap reorder path).
                 const theme =

e2e/tests/advanced-overflow.spec.ts

@@ -0,0 +1,107 @@
+import { test, expect, Page } from '@playwright/test';
+
+/**
+ * Advanced overflow (AdvancedOverflowModule): the free chevron dropdown is
+ * upgraded in place into a searchable / MRU command-palette tab switcher. Which
+ * tabs overflow is decided from measured widths, so this is real-browser only.
+ *
+ * The cross-window case is the load-bearing one: the popover must open via the
+ * group's window-bound `PopupService`, so it renders (and dismisses) inside a
+ * popped-out group's own document — never the opener's.
+ */
+test.describe('advanced overflow dropdown', () => {
+    const addOverflowingTabs = async (
+        page: Page,
+        count: number,
+        prefix: string
+    ) => {
+        await page.evaluate(
+            ({ count, prefix }) => {
+                for (let i = 0; i < count; i++) {
+                    (window as any).__dv.addPanel(`${prefix}-${i}`);
+                }
+            },
+            { count, prefix }
+        );
+    };
+
+    test('renders a searchable popover and filters rows', async ({ page }) => {
+        await page.setViewportSize({ width: 320, height: 500 });
+        await page.goto('/e2e/fixtures/index.html?overflow=advanced');
+        await page.waitForFunction(() => (window as any).__ready === true);
+        await addOverflowingTabs(page, 12, 'overflow-long-title');
+
+        const handle = page.locator('.dv-tabs-overflow-dropdown-default');
+        await expect(handle).toBeVisible();
+        await handle.click();
+
+        const popover = page.locator('.dv-tabs-overflow-advanced');
+        await expect(popover).toBeVisible();
+
+        const search = popover.locator('.dv-tabs-overflow-search');
+        await expect(search).toBeFocused();
+
+        // A discriminating substring narrows the list; a nonsense one empties it.
+        await search.fill('long-title-1');
+        await expect(popover.locator('[role="option"]')).not.toHaveCount(0);
+        await search.fill('zzz-no-match');
+        await expect(popover.locator('[role="option"]')).toHaveCount(0);
+
+        // Escape dismisses.
+        await search.press('Escape');
+        await expect(popover).toHaveCount(0);
+    });
+
+    test('arrow keys + Enter activate a hidden tab', async ({ page }) => {
+        await page.setViewportSize({ width: 320, height: 500 });
+        await page.goto('/e2e/fixtures/index.html?overflow=advanced');
+        await page.waitForFunction(() => (window as any).__ready === true);
+        await addOverflowingTabs(page, 12, 'kbd-long-title');
+
+        await page.locator('.dv-tabs-overflow-dropdown-default').click();
+        const popover = page.locator('.dv-tabs-overflow-advanced');
+        await expect(popover).toBeVisible();
+
+        const firstOption = popover.locator('[role="option"]').first();
+        const title = (await firstOption.textContent())!.trim();
+
+        const search = popover.locator('.dv-tabs-overflow-search');
+        await search.press('Enter'); // first option is active on open
+
+        await expect(page.locator('.dv-active-tab')).toHaveText(title);
+        await expect(popover).toHaveCount(0);
+    });
+
+    test('popover renders + dismisses inside a popped-out group', async ({
+        page,
+        context,
+    }) => {
+        await page.setViewportSize({ width: 400, height: 500 });
+        await page.goto('/e2e/fixtures/index.html?overflow=advanced');
+        await page.waitForFunction(() => (window as any).__ready === true);
+        await addOverflowingTabs(page, 20, 'pop-long-title');
+
+        const [popout] = await Promise.all([
+            context.waitForEvent('page'),
+            page.evaluate(() => (window as any).__dv.popoutActiveGroup()),
+        ]);
+        await (popout as Page).waitForLoadState();
+
+        // Narrow the popout so its strip overflows regardless of default size.
+        await popout.setViewportSize({ width: 360, height: 500 });
+
+        const handle = popout.locator('.dv-tabs-overflow-dropdown-default');
+        await expect(handle).toBeVisible();
+        await handle.click();
+
+        // The popover renders in the POPOUT document (window-bound), not the
+        // opener — this is the cross-window binding under test.
+        const popover = popout.locator('.dv-tabs-overflow-advanced');
+        await expect(popover).toBeVisible();
+        await expect(page.locator('.dv-tabs-overflow-advanced')).toHaveCount(0);
+
+        // And it dismisses in the popout document.
+        await popout.locator('.dv-tabs-overflow-search').press('Escape');
+        await expect(popover).toHaveCount(0);
+    });
+});

packages/dockview-core/src/__tests__/dockview/components/titlebar/advancedOverflowSeam.spec.ts

@@ -0,0 +1,116 @@
+import { fireEvent } from '@testing-library/dom';
+import { DockviewComponent } from '../../../../dockview/dockviewComponent';
+import { IContentRenderer } from '../../../../dockview/types';
+
+class TestPanel implements IContentRenderer {
+    element = document.createElement('div');
+    init(): void {
+        // noop
+    }
+    layout(): void {
+        // noop
+    }
+    dispose(): void {
+        // noop
+    }
+}
+
+// jsdom lacks scrollIntoView; the free row activation calls it on click.
+beforeAll(() => {
+    if (!Element.prototype.scrollIntoView) {
+        Element.prototype.scrollIntoView = function scrollIntoView() {
+            /* noop */
+        };
+    }
+});
+
+/**
+ * The overflow rendering seam: `TabsContainer.toggleDropdown` builds the popover
+ * body through `createOverflowRenderContext` and, when
+ * `accessor.advancedOverflowService` is present, hands it to the module;
+ * otherwise it renders the free flat list. No module is registered in core, so
+ * this proves the `?.`-guard falls through to the free helper — the byte-for-byte
+ * behaviour dockview shipped before the seam existed.
+ */
+describe('advanced overflow seam — free fallback (no module)', () => {
+    let container: HTMLElement;
+
+    const make = (): DockviewComponent => {
+        container = document.createElement('div');
+        document.body.appendChild(container);
+        const dockview = new DockviewComponent(container, {
+            createComponent: () => new TestPanel(),
+        });
+        dockview.layout(400, 300);
+        return dockview;
+    };
+
+    afterEach(() => {
+        container?.remove();
+    });
+
+    const openOverflow = (
+        dockview: DockviewComponent,
+        anyPanel: any,
+        ids: string[]
+    ): void => {
+        const overflowSet = new Set(ids);
+        anyPanel.group.model.header.setForcedOverflow((id: string) =>
+            overflowSet.has(id)
+        );
+        anyPanel.group.model.header.refreshOverflow();
+        const root = container.querySelector<HTMLElement>(
+            '.dv-tabs-overflow-dropdown-root'
+        );
+        if (root) {
+            fireEvent.click(root);
+        }
+    };
+
+    test('renders the free flat list (no advanced upgrade) with the overflow rows', () => {
+        const dockview = make();
+        expect(dockview.advancedOverflowService).toBeUndefined();
+
+        const panels = ['a', 'b', 'c'].map((id) =>
+            dockview.addPanel({ id, component: 'default', title: id })
+        );
+
+        openOverflow(dockview, panels[0], ['b', 'c']);
+
+        const body = container.querySelector('.dv-tabs-overflow-container');
+        expect(body).toBeTruthy();
+        // The module-only marker class must be absent.
+        expect(body!.classList.contains('dv-tabs-overflow-advanced')).toBe(
+            false
+        );
+        // No search input in the free path.
+        expect(body!.querySelector('.dv-tabs-overflow-search')).toBeNull();
+        // The clipped tabs render as rows.
+        expect(body!.querySelectorAll('.dv-tab').length).toBe(2);
+
+        dockview.dispose();
+    });
+
+    test('clicking a free row activates its panel and closes the popover', () => {
+        const dockview = make();
+        const panels = ['a', 'b', 'c'].map((id) =>
+            dockview.addPanel({ id, component: 'default', title: id })
+        );
+
+        openOverflow(dockview, panels[0], ['b', 'c']);
+
+        const row = Array.from(
+            container.querySelectorAll<HTMLElement>(
+                '.dv-tabs-overflow-container .dv-tab'
+            )
+        ).find((el) => el.textContent!.trim() === 'c')!;
+        fireEvent.click(row);
+
+        expect(panels[2].api.isActive).toBe(true);
+        expect(
+            container.querySelector('.dv-tabs-overflow-container')
+        ).toBeNull();
+
+        dockview.dispose();
+    });
+});

packages/dockview-core/src/dockview/components/titlebar/tabs.scss

@@ -586,3 +586,38 @@
         padding-left: 16px;
     }
 }
+
+/*
+ * Advanced overflow popover (AdvancedOverflowModule): the same container as the
+ * free list, upgraded in place with a search input, a scrollable listbox, and a
+ * keyboard-highlighted active row. Styles live in core so the module ships no
+ * CSS; they are inert unless the module renders this body.
+ */
+.dv-tabs-overflow-container.dv-tabs-overflow-advanced {
+    min-width: 220px;
+
+    .dv-tabs-overflow-search {
+        box-sizing: border-box;
+        width: 100%;
+        padding: 6px 8px;
+        border: none;
+        border-bottom: 1px solid var(--dv-tab-divider-color);
+        outline: none;
+        font-size: inherit;
+        font-family: inherit;
+        color: var(--dv-activegroup-visiblepanel-tab-color);
+        background-color: var(--dv-group-view-background-color);
+    }
+
+    .dv-tabs-overflow-list {
+        display: flex;
+        flex-direction: column;
+        outline: none;
+    }
+
+    .dv-tab.dv-tabs-overflow-option--focused {
+        outline: 1px solid var(--dv-tab-divider-color);
+        outline-offset: -1px;
+        background-color: var(--dv-icon-hover-background-color);
+    }
+}