gloomberb 0.7.2 → 0.7.4

package/src/plugins/builtin/world-indices/index.tsx

@@ -183,31 +183,70 @@ function WorldIndicesPane({ focused, width, height }: PaneProps) {
     fetchGenRef.current += 1;
     const gen = fetchGenRef.current;
 
-    for (const entry of WORLD_INDICES) {
-      setQuotes((prev) => {
-        const next = new Map(prev);
+    setQuotes((prev) => {
+      const next = new Map(prev);
+      for (const entry of WORLD_INDICES) {
         const existing = next.get(entry.symbol);
         next.set(entry.symbol, { quote: existing?.quote ?? null, loading: true, error: null });
+      }
+      return next;
+    });
+
+    const loadQuotes = async (): Promise<QuoteMap> => {
+      const next = new Map<string, IndexQuoteState>();
+      if (dataProvider.getQuotesBatch) {
+        const results = await dataProvider.getQuotesBatch(
+          WORLD_INDICES.map((entry) => ({ symbol: entry.symbol, exchange: "" })),
+        );
+        const bySymbol = new Map(results.map((result) => [result.target.symbol, result]));
+        for (const entry of WORLD_INDICES) {
+          const result = bySymbol.get(entry.symbol);
+          next.set(entry.symbol, {
+            quote: result?.quote ?? null,
+            loading: false,
+            error: result?.error
+              ? result.error instanceof Error ? result.error.message : String(result.error)
+              : null,
+          });
+        }
         return next;
-      });
+      }
 
-      dataProvider.getQuote(entry.symbol, "").then((quote) => {
-        if (fetchGenRef.current !== gen) return;
-        setQuotes((prev) => {
-          const next = new Map(prev);
+      await Promise.all(WORLD_INDICES.map(async (entry) => {
+        try {
+          const quote = await dataProvider.getQuote(entry.symbol, "");
           next.set(entry.symbol, { quote, loading: false, error: null });
-          return next;
-        });
-      }).catch((err: unknown) => {
-        if (fetchGenRef.current !== gen) return;
-        const msg = err instanceof Error ? err.message : String(err);
-        setQuotes((prev) => {
-          const next = new Map(prev);
-          next.set(entry.symbol, { quote: null, loading: false, error: msg });
-          return next;
-        });
+        } catch (err: unknown) {
+          next.set(entry.symbol, {
+            quote: null,
+            loading: false,
+            error: err instanceof Error ? err.message : String(err),
+          });
+        }
+      }));
+      return next;
+    };
+
+    loadQuotes().then((nextQuotes) => {
+      if (fetchGenRef.current !== gen) return;
+      setQuotes((prev) => {
+        const next = new Map(prev);
+        for (const [symbol, state] of nextQuotes) {
+          next.set(symbol, state);
+        }
+        return next;
       });
-    }
+    }).catch((err: unknown) => {
+      if (fetchGenRef.current !== gen) return;
+      const message = err instanceof Error ? err.message : String(err);
+      setQuotes((prev) => {
+        const next = new Map(prev);
+        for (const entry of WORLD_INDICES) {
+          next.set(entry.symbol, { quote: null, loading: false, error: message });
+        }
+        return next;
+      });
+    });
   }, [dataProvider]);
 
   useEffect(() => {

package/src/plugins/ibkr/trading-pane.tsx

@@ -16,6 +16,7 @@ import { colors, priceColor } from "../../theme/colors";
 import type { PaneProps } from "../../types/plugin";
 import type { Quote } from "../../types/financials";
 import { formatCurrency, padTo } from "../../utils/format";
+import { isPlainKey } from "../../utils/keyboard";
 import { formatMarketPrice, formatMarketQuantity } from "../../utils/market-format";
 import { getBrokerInstance } from "../../utils/broker-instances";
 import { usePluginPaneActions } from "../plugin-runtime";
@@ -295,13 +296,13 @@ export function TradingPane({ focused, width, height }: PaneProps) {
     if (!focused) return;
     event.stopPropagation?.();
 
-    if (event.name === "j" || event.name === "down") {
+    if (isPlainKey(event, "j", "down")) {
       const nextIndex = Math.min(tradeState.selectedOpenOrderIndex + 1, Math.max(0, gatewaySnapshot.openOrders.length - 1));
       updateTradingPaneState({ selectedOpenOrderIndex: nextIndex });
       return;
     }
 
-    if (event.name === "k" || event.name === "up") {
+    if (isPlainKey(event, "k", "up")) {
       const nextIndex = Math.max(0, tradeState.selectedOpenOrderIndex - 1);
       updateTradingPaneState({ selectedOpenOrderIndex: nextIndex });
       return;

package/src/plugins/plugin-runtime.tsx

@@ -20,7 +20,7 @@ import {
 import type { BrokerAdapter } from "../types/broker";
 import type { PluginCapability } from "../capabilities";
 import type { DataProvider } from "../types/data-provider";
-import type { AppNotificationRequest, BrokerInstanceUpdateOptions } from "../types/plugin";
+import type { AppNotificationRequest, BrokerInstanceUpdateOptions, PinTickerOptions } from "../types/plugin";
 
 export interface PluginRuntimeAccess {
   getMarketData(): DataProvider | null;
@@ -30,7 +30,7 @@ export interface PluginRuntimeAccess {
   updateBrokerInstance(instanceId: string, values: Record<string, unknown>, options?: BrokerInstanceUpdateOptions): Promise<void>;
   syncBrokerInstance(instanceId: string): Promise<void>;
   removeBrokerInstance(instanceId: string): Promise<void>;
-  pinTicker(symbol: string, options?: { floating?: boolean; paneType?: string }): void;
+  pinTicker(symbol: string, options?: PinTickerOptions): void;
   navigateTicker(symbol: string, options?: { sourcePaneId?: string | null }): void;
   selectTicker(symbol: string, paneId?: string): void;
   switchTab(tabId: string, paneId?: string): void;

package/src/plugins/prediction-markets/settings.ts

@@ -154,6 +154,10 @@ export function buildPredictionMarketsPaneSettingsDef(
 
   return {
     title: "Prediction Markets Settings",
+    values: {
+      ...settings,
+      columnIds: [...settings.columnIds],
+    },
     fields,
   };
 }

package/src/plugins/registry.test.ts

@@ -222,6 +222,61 @@ describe("PluginRegistry detail tabs", () => {
 });
 
 describe("PluginRegistry pane settings", () => {
+  test("resolves effective pane setting values from settings definitions", async () => {
+    const registry = createRegistry();
+    const config = createDefaultConfig("/tmp/gloomberb-pane-settings-test");
+    config.layout = {
+      dockRoot: { kind: "pane", instanceId: "test-pane:main" },
+      instances: [{
+        instanceId: "test-pane:main",
+        paneId: "test-pane",
+        binding: { kind: "none" },
+        settings: {},
+      }],
+      floating: [],
+    };
+    registry.getConfigFn = () => config;
+    registry.getLayoutFn = () => config.layout;
+
+    await registry.register(plugin("tables", (ctx) => {
+      ctx.registerPane({
+        id: "test-pane",
+        name: "Test Pane",
+        defaultPosition: "right",
+        component: () => null,
+        settings: {
+          values: {
+            columnIds: ["ticker", "price"],
+            collectionScope: "all",
+          },
+          fields: [
+            {
+              key: "columnIds",
+              label: "Columns",
+              type: "ordered-multi-select",
+              options: [
+                { value: "ticker", label: "Ticker" },
+                { value: "price", label: "Price" },
+              ],
+            },
+            {
+              key: "collectionScope",
+              label: "Collections",
+              type: "select",
+              options: [{ value: "all", label: "All" }],
+            },
+          ],
+        },
+      });
+    }));
+
+    const descriptor = registry.resolvePaneSettings("test-pane:main");
+
+    expect(descriptor?.context.settings.columnIds).toEqual(["ticker", "price"]);
+    expect(descriptor?.context.settings.collectionScope).toBe("all");
+    expect(descriptor?.rawSettings.columnIds).toBeUndefined();
+  });
+
   test("resolves plugin-scoped pane setting values from plugin config", async () => {
     const registry = createRegistry();
     const config = createDefaultConfig("/tmp/gloomberb-pane-settings-test");

package/src/plugins/registry.ts

@@ -26,6 +26,7 @@ import type {
   PaneSettingsDef,
   PaneTemplateCreateOptions,
   PaneTemplateDef,
+  PinTickerOptions,
   PluginPaneSettingsState,
   PluginResumeState,
   TickerAction,
@@ -140,7 +141,7 @@ export class PluginRegistry implements PluginRuntimeAccess {
   createPaneFromTemplateAsyncFn: ((templateId: string, options?: PaneTemplateCreateOptions) => Promise<void>) = async () => {};
   hidePaneFn: ((paneId: string) => void) = () => {};
   focusPaneFn: ((paneId: string) => void) = () => {};
-  pinTickerFn: ((symbol: string, options?: { floating?: boolean; paneType?: string }) => void) = () => {};
+  pinTickerFn: ((symbol: string, options?: PinTickerOptions) => void) = () => {};
   navigateTickerFn: ((symbol: string, options?: { sourcePaneId?: string | null }) => void) = () => {};
   getMarketData = () => this.marketData;
   getCapability = (capabilityId: string) => this.capabilities.get(capabilityId)?.capability ?? null;
@@ -151,7 +152,7 @@ export class PluginRegistry implements PluginRuntimeAccess {
   );
   syncBrokerInstance = (instanceId: string) => this.syncBrokerInstanceFn(instanceId);
   removeBrokerInstance = (instanceId: string) => this.removeBrokerInstanceFn(instanceId);
-  pinTicker = (symbol: string, options?: { floating?: boolean; paneType?: string }) => {
+  pinTicker = (symbol: string, options?: PinTickerOptions) => {
     this.pinTickerFn(symbol, options);
   };
   navigateTicker = (symbol: string, options?: { sourcePaneId?: string | null }) => {
@@ -444,6 +445,7 @@ export class PluginRegistry implements PluginRuntimeAccess {
     pane: PaneInstanceConfig;
     paneDef: PaneDef;
     settingsDef: PaneSettingsDef;
+    rawSettings: Record<string, unknown>;
     context: PaneSettingsContext;
   } | null {
     const targetPaneId = this.resolvePaneTarget(paneId);
@@ -483,8 +485,12 @@ export class PluginRegistry implements PluginRuntimeAccess {
       : paneDef.settings;
     if (!settingsDef) return null;
 
+    const rawSettings = { ...paneSettings };
+    const resolvedSettings = {
+      ...paneSettings,
+      ...(settingsDef.values ?? {}),
+    };
     if (pluginId) {
-      const resolvedSettings = { ...paneSettings };
       for (const field of settingsDef.fields) {
         if (field.storage !== "plugin") continue;
         const configValue = this.getConfigState(pluginId, field.key);
@@ -494,8 +500,8 @@ export class PluginRegistry implements PluginRuntimeAccess {
           resolvedSettings[field.key] = configValue;
         }
       }
-      context.settings = resolvedSettings;
     }
+    context.settings = resolvedSettings;
 
     return {
       paneId: targetPaneId,
@@ -503,6 +509,7 @@ export class PluginRegistry implements PluginRuntimeAccess {
       pane,
       paneDef,
       settingsDef,
+      rawSettings,
       context,
     };
   }

package/src/plugins/ticker-navigation.test.ts

@@ -1,7 +1,8 @@
 import { describe, expect, test } from "bun:test";
 import { createPaneInstance, type LayoutConfig, type PaneInstanceConfig } from "../types/config";
 import {
-  resolveTickerNavigationDetailPane,
+  findFixedTickerPaneForSymbol,
+  resolveTickerNavigationReplacementPane,
   shouldFocusTickerNavigationTarget,
 } from "./ticker-navigation";
 
@@ -20,8 +21,8 @@ function createLayout(instances: PaneInstanceConfig[]): LayoutConfig {
   };
 }
 
-describe("resolveTickerNavigationDetailPane", () => {
-  test("prefers the detail pane following the pane that opened ticker navigation", () => {
+describe("resolveTickerNavigationReplacementPane", () => {
+  test("only replaces the ticker detail pane that opened ticker navigation", () => {
     const layout = createLayout([
       createPaneInstance("portfolio-list", {
         instanceId: "portfolio-list:main",
@@ -42,8 +43,37 @@ describe("resolveTickerNavigationDetailPane", () => {
     ]);
 
     expect(
-      resolveTickerNavigationDetailPane(layout, "comparison-chart:main")?.instanceId,
-    ).toBe("ticker-detail:compare");
+      resolveTickerNavigationReplacementPane(layout, "comparison-chart:main")?.instanceId,
+    ).toBeUndefined();
+    expect(
+      resolveTickerNavigationReplacementPane(layout, "ticker-detail:portfolio")?.instanceId,
+    ).toBe("ticker-detail:portfolio");
+  });
+});
+
+describe("findFixedTickerPaneForSymbol", () => {
+  test("finds only a visible fixed pane for the requested symbol", () => {
+    const layout = createLayout([
+      createPaneInstance("portfolio-list", {
+        instanceId: "portfolio-list:main",
+        binding: { kind: "none" },
+      }),
+      createPaneInstance("ticker-detail", {
+        instanceId: "ticker-detail:follow",
+        binding: { kind: "follow", sourceInstanceId: "portfolio-list:main" },
+      }),
+      createPaneInstance("ticker-detail", {
+        instanceId: "ticker-detail:aapl",
+        binding: { kind: "fixed", symbol: "AAPL" },
+      }),
+      createPaneInstance("ticker-detail", {
+        instanceId: "ticker-detail:msft",
+        binding: { kind: "fixed", symbol: "MSFT" },
+      }),
+    ]);
+
+    expect(findFixedTickerPaneForSymbol(layout, "ticker-detail", "AAPL")?.instanceId).toBe("ticker-detail:aapl");
+    expect(findFixedTickerPaneForSymbol(layout, "ticker-detail", "NVDA")).toBeNull();
   });
 });
 

package/src/plugins/ticker-navigation.ts

@@ -1,33 +1,27 @@
 import { findPaneInstance, type LayoutConfig, type PaneInstanceConfig } from "../types/config";
 import { isPaneInLayout } from "./pane-manager";
 
-export function resolveTickerNavigationDetailPane(
+export function resolveTickerNavigationReplacementPane(
   layout: LayoutConfig,
   sourcePaneId: string | null,
 ): PaneInstanceConfig | null {
   const sourceInstance = sourcePaneId ? findPaneInstance(layout, sourcePaneId) : null;
+  return sourceInstance?.paneId === "ticker-detail" && isPaneInLayout(layout, sourceInstance.instanceId)
+    ? sourceInstance
+    : null;
+}
 
-  return (
-    sourceInstance?.paneId === "ticker-detail" && isPaneInLayout(layout, sourceInstance.instanceId)
-      ? sourceInstance
-      : null
-  )
-    ?? layout.instances.find((instance) =>
-      instance.paneId === "ticker-detail"
-      && instance.binding?.kind === "follow"
-      && instance.binding.sourceInstanceId === sourcePaneId
-      && isPaneInLayout(layout, instance.instanceId)
-    )
-    ?? layout.instances.find((instance) =>
-      instance.paneId === "ticker-detail"
-      && instance.binding?.kind === "follow"
-      && isPaneInLayout(layout, instance.instanceId)
-    )
-    ?? layout.instances.find((instance) =>
-      instance.paneId === "ticker-detail"
-      && isPaneInLayout(layout, instance.instanceId)
-    )
-    ?? null;
+export function findFixedTickerPaneForSymbol(
+  layout: LayoutConfig,
+  paneId: string,
+  symbol: string,
+): PaneInstanceConfig | null {
+  return layout.instances.find((instance) =>
+    instance.paneId === paneId
+    && instance.binding?.kind === "fixed"
+    && instance.binding.symbol === symbol
+    && isPaneInLayout(layout, instance.instanceId)
+  ) ?? null;
 }
 
 export function shouldFocusTickerNavigationTarget({

package/src/renderers/electrobun/bun/application-menu-click.test.ts

@@ -21,6 +21,15 @@ describe("applicationMenuCommand", () => {
     })).toBeNull();
   });
 
+  test("parses the native devtools command", () => {
+    expect(applicationMenuCommand({
+      data: {
+        action: ELECTROBUN_APPLICATION_MENU_ACTION,
+        data: { type: "open-devtools" },
+      },
+    })).toEqual({ type: "open-devtools" });
+  });
+
   test("ignores unknown command types", () => {
     expect(applicationMenuCommand({
       data: {

package/src/renderers/electrobun/bun/application-menu-click.ts

@@ -1,5 +1,7 @@
-import type { DesktopApplicationMenuCommand } from "../../../types/desktop-menu";
-import { ELECTROBUN_APPLICATION_MENU_ACTION } from "./application-menu";
+import {
+  ELECTROBUN_APPLICATION_MENU_ACTION,
+  type ElectrobunApplicationMenuCommand,
+} from "./application-menu";
 
 function record(value: unknown): Record<string, unknown> | null {
   return value && typeof value === "object" && !Array.isArray(value)
@@ -19,7 +21,7 @@ function applicationMenuClickPayload(event: unknown): Record<string, unknown> |
   return typeof eventRecord.action === "string" ? eventRecord : null;
 }
 
-function normalizeApplicationMenuCommand(value: unknown): DesktopApplicationMenuCommand | null {
+function normalizeApplicationMenuCommand(value: unknown): ElectrobunApplicationMenuCommand | null {
   const command = record(value);
   if (!command || typeof command.type !== "string") return null;
 
@@ -42,13 +44,14 @@ function normalizeApplicationMenuCommand(value: unknown): DesktopApplicationMenu
     case "layout-undo":
     case "layout-redo":
     case "layout-gridlock":
+    case "open-devtools":
       return { type: command.type };
     default:
       return null;
   }
 }
 
-export function applicationMenuCommand(event: unknown): DesktopApplicationMenuCommand | null {
+export function applicationMenuCommand(event: unknown): ElectrobunApplicationMenuCommand | null {
   const payload = applicationMenuClickPayload(event);
   if (payload?.action !== ELECTROBUN_APPLICATION_MENU_ACTION) return null;
   return normalizeApplicationMenuCommand(payload.data);

package/src/renderers/electrobun/bun/application-menu.ts

@@ -4,9 +4,13 @@ import type { DesktopApplicationMenuCommand } from "../../../types/desktop-menu"
 export const ELECTROBUN_APPLICATION_MENU_ACTION = "gloom.application-menu.select";
 export const GITHUB_ISSUE_URL = "https://github.com/vincelwt/gloomberb/issues/new/choose";
 
+export type ElectrobunApplicationMenuCommand =
+  | DesktopApplicationMenuCommand
+  | { type: "open-devtools" };
+
 function commandItem(
   label: string,
-  command: DesktopApplicationMenuCommand,
+  command: ElectrobunApplicationMenuCommand,
   options: { accelerator?: string } = {},
 ): ApplicationMenuItemConfig {
   return {
@@ -72,6 +76,7 @@ export function buildApplicationMenu(): ApplicationMenuItemConfig[] {
       label: "View",
       submenu: [
         openCommandBar("Open Command Bar", "", { accelerator: "CmdOrCtrl+K" }),
+        commandItem("Open Developer Tools", { type: "open-devtools" }),
         { type: "divider" },
         commandItem("Toggle Status Bar", { type: "toggle-status-bar" }),
         { type: "divider" },

package/src/renderers/electrobun/bun/desktop-workspace.ts

@@ -1,13 +1,15 @@
 import type { AppSessionSnapshot } from "../../../core/state/session-persistence";
-import type { PaneRuntimeState } from "../../../core/state/app-state";
+import { clonePaneStateMap, syncConfigActiveLayoutState, type PaneRuntimeState } from "../../../core/state/app-state";
 import { cloneLayout, type AppConfig } from "../../../types/config";
 import type { DesktopSharedStateSnapshot } from "../../../types/desktop-window";
 import { detachPaneToFrame, dockPane, insertAtRootEdge, removePane } from "../../../plugins/pane-manager";
 
-function clonePaneStateMap(state: Record<string, PaneRuntimeState>): Record<string, PaneRuntimeState> {
-  return Object.fromEntries(
-    Object.entries(state).map(([paneId, paneState]) => [paneId, { ...paneState }]),
-  );
+function cloneSavedLayouts(config: AppConfig): AppConfig["layouts"] {
+  return config.layouts.map((entry) => ({
+    ...entry,
+    layout: cloneLayout(entry.layout),
+    paneState: entry.paneState ? clonePaneStateMap(entry.paneState) : entry.paneState,
+  }));
 }
 
 function filterPaneState(
@@ -20,17 +22,6 @@ function filterPaneState(
   );
 }
 
-function syncActiveLayout(config: AppConfig): AppConfig {
-  return {
-    ...config,
-    layouts: config.layouts.map((entry, index) => (
-      index === config.activeLayoutIndex
-        ? { ...entry, layout: cloneLayout(config.layout) }
-        : entry
-    )),
-  };
-}
-
 export interface DesktopWorkspace {
   getSnapshot(): DesktopSharedStateSnapshot;
   syncMainState(snapshot: DesktopSharedStateSnapshot): DesktopSharedStateSnapshot;
@@ -55,22 +46,37 @@ export function createDesktopWorkspace(
   config: AppConfig,
   sessionSnapshot: AppSessionSnapshot | null,
 ): DesktopWorkspace {
+  const savedPaneState = config.layouts[config.activeLayoutIndex]?.paneState ?? {};
+  const initialPaneState = filterPaneState(config.layout, clonePaneStateMap({
+    ...(sessionSnapshot?.paneState ?? {}),
+    ...savedPaneState,
+  }));
+  const initialFocusedPaneId = config.layouts[config.activeLayoutIndex]?.focusedPaneId
+    ?? sessionSnapshot?.focusedPaneId
+    ?? null;
+  const initialActivePanel = config.layouts[config.activeLayoutIndex]?.activePanel
+    ?? (sessionSnapshot?.activePanel === "right" ? "right" : "left");
   let sharedState: DesktopSharedStateSnapshot = {
-    config: syncActiveLayout(config),
-    paneState: filterPaneState(config.layout, clonePaneStateMap(sessionSnapshot?.paneState ?? {})),
-    focusedPaneId: sessionSnapshot?.focusedPaneId ?? null,
-    activePanel: sessionSnapshot?.activePanel === "right" ? "right" : "left",
+    config: syncConfigActiveLayoutState(config, initialPaneState, initialFocusedPaneId, initialActivePanel),
+    paneState: initialPaneState,
+    focusedPaneId: initialFocusedPaneId,
+    activePanel: initialActivePanel,
     statusBarVisible: sessionSnapshot?.statusBarVisible !== false,
   };
 
   const updateConfig = (nextConfig: AppConfig, options?: { layoutChanged?: boolean }) => {
-    const syncedConfig = syncActiveLayout(nextConfig);
+    const syncedConfig = syncConfigActiveLayoutState(
+      nextConfig,
+      sharedState.paneState,
+      sharedState.focusedPaneId,
+      sharedState.activePanel,
+    );
     sharedState = {
       ...sharedState,
       config: {
         ...syncedConfig,
         layout: cloneLayout(syncedConfig.layout),
-        layouts: syncedConfig.layouts.map((entry) => ({ ...entry, layout: cloneLayout(entry.layout) })),
+        layouts: cloneSavedLayouts(syncedConfig),
       },
       paneState: filterPaneState(syncedConfig.layout, sharedState.paneState),
       layoutChanged: options?.layoutChanged,
@@ -82,7 +88,7 @@ export function createDesktopWorkspace(
     config: {
       ...sharedState.config,
       layout: cloneLayout(sharedState.config.layout),
-      layouts: sharedState.config.layouts.map((entry) => ({ ...entry, layout: cloneLayout(entry.layout) })),
+      layouts: cloneSavedLayouts(sharedState.config),
     },
     paneState: clonePaneStateMap(sharedState.paneState),
     focusedPaneId: sharedState.focusedPaneId,
@@ -94,12 +100,17 @@ export function createDesktopWorkspace(
   return {
     getSnapshot,
     syncMainState(snapshot) {
-      const syncedConfig = syncActiveLayout(snapshot.config);
+      const syncedConfig = syncConfigActiveLayoutState(
+        snapshot.config,
+        snapshot.paneState,
+        snapshot.focusedPaneId,
+        snapshot.activePanel,
+      );
       sharedState = {
         config: {
           ...syncedConfig,
           layout: cloneLayout(syncedConfig.layout),
-          layouts: syncedConfig.layouts.map((entry) => ({ ...entry, layout: cloneLayout(entry.layout) })),
+          layouts: cloneSavedLayouts(syncedConfig),
         },
         paneState: filterPaneState(syncedConfig.layout, clonePaneStateMap(snapshot.paneState)),
         focusedPaneId: snapshot.focusedPaneId,
@@ -113,12 +124,19 @@ export function createDesktopWorkspace(
       return updateConfig(config, options);
     },
     replaceDetachedPaneState(paneId, paneState) {
+      const nextPaneState = filterPaneState(sharedState.config.layout, {
+        ...sharedState.paneState,
+        [paneId]: { ...paneState },
+      });
       sharedState = {
         ...sharedState,
-        paneState: filterPaneState(sharedState.config.layout, {
-          ...sharedState.paneState,
-          [paneId]: { ...paneState },
-        }),
+        config: syncConfigActiveLayoutState(
+          sharedState.config,
+          nextPaneState,
+          sharedState.focusedPaneId,
+          sharedState.activePanel,
+        ),
+        paneState: nextPaneState,
       };
       return getSnapshot();
     },