gloomberb 0.4.1 → 0.5.1

package/src/components/command-bar/helpers.ts

@@ -325,7 +325,7 @@ export function getScreenFooterLeft(route: CommandBarRoute | null): string {
 }
 
 export function getScreenFooterRight(route: CommandBarRoute | null): string {
-  if (!route) return "esc close";
+  if (!route) return "esc cancel";
 
   if (route.kind === "workflow") return "esc back";
   if (route.kind === "confirm") return "backspace/esc back";

package/src/components/command-bar/root-shortcuts.ts

@@ -1,4 +1,4 @@
-import type { PaneTemplateDef } from "../../types/plugin";
+import type { CommandDef, PaneTemplateDef } from "../../types/plugin";
 import type { Command } from "./command-registry";
 import { getPaneTemplateDisplayLabel } from "./pane-template-display";
 
@@ -26,10 +26,16 @@ export interface PaneTemplateShortcutIntent extends ShortcutIntentBase {
   template: PaneTemplateDef;
 }
 
+export interface PluginCommandShortcutIntent extends ShortcutIntentBase {
+  source: "plugin-command";
+  command: CommandDef;
+}
+
 export type ShortcutIntent =
   | { kind: "none" }
   | CommandShortcutIntent
-  | PaneTemplateShortcutIntent;
+  | PaneTemplateShortcutIntent
+  | PluginCommandShortcutIntent;
 
 interface ShortcutParseCandidate {
   prefix: string;
@@ -37,8 +43,9 @@ interface ShortcutParseCandidate {
   description: string;
   argKind: RootShortcutArgKind | null;
   argPlaceholder?: string;
-  source: "command" | "pane-template";
+  source: "command" | "pane-template" | "plugin-command";
   command?: Command;
+  pluginCommand?: CommandDef;
   template?: PaneTemplateDef;
 }
 
@@ -71,6 +78,7 @@ function inferShortcutArg(argKind: RootShortcutArgKind | null, activeTicker: str
 
 function buildShortcutCandidates(
   commands: Command[],
+  pluginCommands: CommandDef[],
   paneTemplates: PaneTemplateDef[],
 ): ShortcutParseCandidate[] {
   return [
@@ -85,6 +93,17 @@ function buildShortcutCandidates(
         source: "command" as const,
         command,
       })),
+    ...pluginCommands
+      .filter((command) => command.shortcut?.trim().length)
+      .map((command) => ({
+        prefix: normalizeShortcutPrefix(command.shortcut!),
+        label: command.label,
+        description: command.description ?? "",
+        argKind: command.shortcutArg?.kind ?? (command.shortcutArg ? "text" : null),
+        argPlaceholder: command.shortcutArg?.placeholder,
+        source: "plugin-command" as const,
+        pluginCommand: command,
+      })),
     ...paneTemplates
       .filter((template) => template.shortcut?.prefix)
       .map((template) => ({
@@ -102,11 +121,13 @@ function buildShortcutCandidates(
 export function parseRootShortcutIntent({
   query,
   commands,
+  pluginCommands = [],
   paneTemplates,
   activeTicker,
 }: {
   query: string;
   commands: Command[];
+  pluginCommands?: CommandDef[];
   paneTemplates: PaneTemplateDef[];
   activeTicker: string | null;
 }): ShortcutIntent {
@@ -114,7 +135,7 @@ export function parseRootShortcutIntent({
   if (!trimmed) return { kind: "none" };
 
   const upper = trimmed.toUpperCase();
-  const match = buildShortcutCandidates(commands, paneTemplates).find((candidate) => (
+  const match = buildShortcutCandidates(commands, pluginCommands, paneTemplates).find((candidate) => (
     upper === candidate.prefix || upper.startsWith(`${candidate.prefix} `)
   ));
   if (!match) return { kind: "none" };
@@ -151,6 +172,14 @@ export function parseRootShortcutIntent({
     };
   }
 
+  if (match.source === "plugin-command" && match.pluginCommand) {
+    return {
+      ...base,
+      source: "plugin-command",
+      command: match.pluginCommand,
+    };
+  }
+
   return {
     ...base,
     source: "pane-template",

package/src/components/command-bar/view-model.test.ts

@@ -45,15 +45,15 @@ describe("command bar view model helpers", () => {
   test("returns footer hints for plugin toggles", () => {
     expect(getFooterHints("plugins", false)).toEqual({
       left: "up/down move  enter select  space toggle",
-      right: "esc close",
+      right: "esc cancel",
     });
     expect(getFooterHints("layout", false)).toEqual({
       left: "up/down move  enter select",
-      right: "esc close",
+      right: "esc cancel",
     });
     expect(getFooterHints("new-pane", false)).toEqual({
       left: "up/down move  enter select",
-      right: "esc close",
+      right: "esc cancel",
     });
   });
 

package/src/components/command-bar/view-model.ts

@@ -111,16 +111,16 @@ export function getFooterHints(mode: CommandBarMode, isNarrow: boolean): Command
   if (mode === "plugins") {
     return {
       left: isNarrow ? "space toggle" : `${moveAndSelect}  space toggle`,
-      right: "esc close",
+      right: "esc cancel",
     };
   }
   if (mode === "layout") {
-    return { left: moveAndSelect, right: "esc close" };
+    return { left: moveAndSelect, right: "esc cancel" };
   }
   if (mode === "new-pane") {
-    return { left: moveAndSelect, right: "esc close" };
+    return { left: moveAndSelect, right: "esc cancel" };
   }
-  return { left: moveAndSelect, right: "esc close" };
+  return { left: moveAndSelect, right: "esc cancel" };
 }
 
 export function getEmptyState(mode: CommandBarMode, query: string, searchQuery?: string): { label: string; detail: string } {

package/src/components/command-bar/workflow-ops.ts

@@ -152,6 +152,16 @@ export function resolvePreferredCollectionTarget(
   return options.some((option) => option.id === activeCollectionId) ? activeCollectionId : null;
 }
 
+export function resolveSoleCollectionTarget(
+  state: AppState,
+  kind: CollectionKind,
+  action: CollectionMembershipAction,
+  ticker: TickerRecord | null,
+): string | null {
+  const options = getCollectionTargetOptions(state, kind, action, ticker);
+  return options.length === 1 ? options[0]!.id : null;
+}
+
 export async function resolveTickerInput(
   rawInput: string | undefined,
   activeTicker: string | null,

package/src/components/layout/floating-pane.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { colors, floatingPaneBg } from "../../theme/colors";
 import { PaneHeader } from "./pane-header";
-import { getPaneBodyHeight } from "./pane-sizing";
+import { getPaneBodyHeight, getPaneBodyHorizontalInset } from "./pane-sizing";
 
 interface FloatingPaneWrapperProps {
   title: string;
@@ -22,6 +22,7 @@ export function FloatingPaneWrapper({
 }: FloatingPaneWrapperProps) {
   const bg = floatingPaneBg(focused);
   const bodyHeight = getPaneBodyHeight(height);
+  const bodyInset = getPaneBodyHorizontalInset(focused);
 
   return (
     <box
@@ -38,7 +39,7 @@ export function FloatingPaneWrapper({
       <PaneHeader title={title} width={width} focused={focused} floating showActions={showActions} />
 
       {/* Content */}
-      <box height={bodyHeight} overflow="hidden">
+      <box height={bodyHeight} overflow="hidden" paddingLeft={bodyInset} paddingRight={bodyInset}>
         {children}
       </box>
 

package/src/components/layout/header.tsx

@@ -7,6 +7,7 @@ import { useAppState } from "../../state/app-context";
 import { getSharedMarketDataCoordinator } from "../../market-data/coordinator";
 import { useQuoteEntry, useResolvedEntryValue } from "../../market-data/hooks";
 import { formatPercentRaw } from "../../utils/format";
+import { formatMarketPrice } from "../../utils/market-format";
 import { marketStateLabel, marketStateColor, getExtendedHoursInfo } from "../../utils/market-status";
 import { VERSION } from "../../version";
 
@@ -103,7 +104,7 @@ export function Header() {
 
   const spyColor = spyQuote ? priceColor(spyQuote.change) : colors.headerText;
   const spyText = spyQuote
-    ? `SPY ${spyQuote.price.toFixed(2)} ${formatPercentRaw(spyQuote.changePercent)}`
+    ? `SPY ${formatMarketPrice(spyQuote.price, { assetCategory: "ETF" })} ${formatPercentRaw(spyQuote.changePercent)}`
     : "SPY —";
 
   // Extended hours info

package/src/components/layout/pane-sizing.ts

@@ -1,6 +1,16 @@
 const RESERVED_PANE_CHROME_ROWS = 2;
+const FOCUSED_PANE_BODY_INSET = 1;
+const RESERVED_FOCUSED_PANE_CHROME_COLUMNS = FOCUSED_PANE_BODY_INSET * 2;
 
 export function getPaneBodyHeight(height: number): number {
   // Reserve the header row plus the bottom border/resize row.
   return Math.max(1, height - RESERVED_PANE_CHROME_ROWS);
 }
+
+export function getPaneBodyHorizontalInset(focused: boolean): number {
+  return focused ? FOCUSED_PANE_BODY_INSET : 0;
+}
+
+export function getPaneBodyWidth(width: number, focused: boolean): number {
+  return Math.max(1, width - (focused ? RESERVED_FOCUSED_PANE_CHROME_COLUMNS : 0));
+}

package/src/components/layout/pane.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
 import { paneBg } from "../../theme/colors";
 import { PaneHeader } from "./pane-header";
-import { getPaneBodyHeight } from "./pane-sizing";
+import { getPaneBodyHeight, getPaneBodyHorizontalInset } from "./pane-sizing";
 
 interface PaneWrapperProps {
   title?: string;
@@ -30,6 +30,7 @@ export function PaneWrapper({
   const bodyHeight = typeof height === "number"
     ? title ? getPaneBodyHeight(height) : height
     : undefined;
+  const bodyInset = getPaneBodyHorizontalInset(focused);
 
   return (
     <box
@@ -45,7 +46,13 @@ export function PaneWrapper({
       {title && (
         <PaneHeader title={title} width={width} focused={focused} showActions={showActions} />
       )}
-      <box height={bodyHeight} flexGrow={bodyHeight == null ? 1 : 0} overflow="hidden">
+      <box
+        height={bodyHeight}
+        flexGrow={bodyHeight == null ? 1 : 0}
+        overflow="hidden"
+        paddingLeft={bodyInset}
+        paddingRight={bodyInset}
+      >
         {children}
       </box>
     </box>

package/src/components/layout/shell.test.tsx

@@ -1,19 +1,23 @@
 import { afterEach, describe, expect, test } from "bun:test";
+import { TextAttributes } from "@opentui/core";
 import { testRender } from "@opentui/react/test-utils";
 import { DialogProvider } from "@opentui-ui/dialog/react";
 import type { ReactNode } from "react";
 import { act, useReducer } from "react";
 import { AppContext, appReducer, createInitialState } from "../../state/app-context";
+import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../market-data/coordinator";
+import { setSharedDataProviderForTests } from "../../plugins/registry";
 import { cloneLayout, createDefaultConfig } from "../../types/config";
 import type { PluginRegistry } from "../../plugins/registry";
 import { setSharedRegistryForTests } from "../../plugins/registry";
 import { portfolioListPlugin } from "../../plugins/builtin/portfolio-list";
 import type { PaneProps } from "../../types/plugin";
+import { StockChart } from "../chart/stock-chart";
 import { StatusBar } from "./status-bar";
 import { Header } from "./header";
 import { buildNativeWindowState, finalizePaneDragRelease, resolveNativeDockDividers, Shell } from "./shell";
 import type { DataProvider } from "../../types/data-provider";
-import type { Quote } from "../../types/financials";
+import type { PricePoint, Quote, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
@@ -25,10 +29,13 @@ afterEach(() => {
     testSetup = undefined;
   }
   harnessState = null;
+  setSharedMarketDataCoordinator(null);
+  setSharedDataProviderForTests(undefined);
   setSharedRegistryForTests(undefined);
 });
 
 function createShellPluginRegistry(options?: {
+  portfolioListComponent?: (props: PaneProps) => ReactNode;
   tickerDetailComponent?: (props: PaneProps) => ReactNode;
 }): PluginRegistry {
   return {
@@ -36,7 +43,7 @@ function createShellPluginRegistry(options?: {
       ["portfolio-list", {
         id: "portfolio-list",
         name: "Portfolio List",
-        component: () => <text>Portfolio Body</text>,
+        component: options?.portfolioListComponent ?? (() => <text>Portfolio Body</text>),
         defaultPosition: "left",
       }],
       ["ticker-detail", {
@@ -134,31 +141,42 @@ function makeTicker(overrides: Partial<TickerRecord["metadata"]> = {}): TickerRe
   };
 }
 
-function createHeaderDataProvider(): DataProvider {
+function makePriceHistory(
+  length: number,
+  startDate = new Date(Date.UTC(2025, 0, 1)),
+): PricePoint[] {
+  return Array.from({ length }, (_, index) => ({
+    date: new Date(startDate.getTime() + index * 24 * 3600_000),
+    open: 100 + index * 0.2,
+    high: 101 + index * 0.2,
+    low: 99 + index * 0.2,
+    close: 100.5 + index * 0.2,
+    volume: 1_000 + index * 10,
+  }));
+}
+
+function createChartShellDataProvider(historyBySymbol: Record<string, PricePoint[]>): DataProvider {
   return {
-    id: "test",
-    name: "Test",
-    async getTickerFinancials() {
-      return { annualStatements: [], quarterlyStatements: [], priceHistory: [], quote: makeQuote({ symbol: "SPY", name: "SPY" }) };
-    },
-    async getQuote() {
-      return makeQuote({ symbol: "SPY", name: "SPY" });
-    },
-    async getExchangeRate() {
-      return 1;
-    },
-    async search() {
-      return [];
-    },
-    async getNews() {
-      return [];
-    },
-    async getArticleSummary() {
-      return null;
-    },
-    async getPriceHistory() {
-      return [];
-    },
+    id: "shell-test-provider",
+    name: "Shell Test Provider",
+    getTickerFinancials: async (symbol) => ({
+      annualStatements: [],
+      quarterlyStatements: [],
+      priceHistory: historyBySymbol[symbol] ?? [],
+    }),
+    getQuote: async (symbol) => ({
+      symbol,
+      price: historyBySymbol[symbol]?.[historyBySymbol[symbol]!.length - 1]?.close ?? 0,
+      currency: "USD",
+      change: 0,
+      changePercent: 0,
+      lastUpdated: Date.now(),
+    }),
+    getExchangeRate: async () => 1,
+    search: async () => [],
+    getNews: async () => [],
+    getArticleSummary: async () => null,
+    getPriceHistory: async (symbol) => historyBySymbol[symbol] ?? [],
   };
 }
 
@@ -256,7 +274,7 @@ function BrokerShellHarness({ pluginRegistry }: { pluginRegistry: PluginRegistry
   return (
     <AppContext value={{ state, dispatch }}>
       <box flexDirection="column">
-        <Header dataProvider={createHeaderDataProvider()} />
+        <Header />
         <Shell pluginRegistry={pluginRegistry} />
         <StatusBar />
       </box>
@@ -264,6 +282,50 @@ function BrokerShellHarness({ pluginRegistry }: { pluginRegistry: PluginRegistry
   );
 }
 
+function FocusBorderProbe({ width, height }: Pick<PaneProps, "width" | "height">) {
+  return (
+    <box flexDirection="column" width={width} height={height}>
+      <box height={1} width={width}>
+        <text>Read Probe</text>
+      </box>
+      <box height={1} width={width} flexDirection="row">
+        <box flexGrow={1} />
+        <text>Right</text>
+      </box>
+    </box>
+  );
+}
+
+function ChartShellHarness({
+  pluginRegistry,
+  config,
+  ticker,
+  financials,
+  focusedPaneId,
+}: {
+  pluginRegistry: PluginRegistry;
+  config: ReturnType<typeof createDefaultConfig>;
+  ticker: TickerRecord;
+  financials: TickerFinancials;
+  focusedPaneId: string | null;
+}) {
+  const initialState = createInitialState(config);
+  initialState.focusedPaneId = focusedPaneId;
+  initialState.tickers = new Map([[ticker.metadata.ticker, ticker]]);
+  initialState.financials = new Map([[ticker.metadata.ticker, financials]]);
+
+  const [state, dispatch] = useReducer(appReducer, initialState);
+  harnessState = state;
+
+  return (
+    <AppContext value={{ state, dispatch }}>
+      <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+        <Shell pluginRegistry={pluginRegistry} />
+      </DialogProvider>
+    </AppContext>
+  );
+}
+
 describe("Header", () => {
   test("shows automatic self-update status for standalone binaries", async () => {
     testSetup = await testRender(
@@ -524,13 +586,100 @@ describe("Shell", () => {
     expect(testSetup.captureCharFrame()).toContain("Settings");
   });
 
+  test("applies a chart resolution chip on the first click even when the chart pane is unfocused", async () => {
+    const symbol = "AAPL";
+    const config = createDefaultConfig("/tmp/gloomberb-shell-chart-test");
+    config.layout = cloneLayout(config.layout);
+    config.layouts = [{ name: "Default", layout: cloneLayout(config.layout) }];
+    config.layout.instances = config.layout.instances.map((instance) => (
+      instance.instanceId === "ticker-detail:main"
+        ? {
+          ...instance,
+          binding: { kind: "fixed" as const, symbol },
+          settings: {
+            ...(instance.settings ?? {}),
+            chartResolution: "auto",
+            chartRangePreset: "5Y",
+          },
+        }
+        : instance
+    ));
+
+    const ticker = makeTicker({ ticker: symbol, name: symbol });
+    const history = makePriceHistory(260);
+    const financials: TickerFinancials = {
+      annualStatements: [],
+      quarterlyStatements: [],
+      priceHistory: history,
+    };
+
+    const provider = createChartShellDataProvider({ [symbol]: history });
+    setSharedDataProviderForTests(provider);
+    setSharedMarketDataCoordinator(new MarketDataCoordinator(provider));
+
+    const pluginRegistry = createShellPluginRegistry({
+      tickerDetailComponent: (props) => (
+        <StockChart width={props.width} height={props.height} focused={props.focused} />
+      ),
+    });
+
+    testSetup = await testRender(
+      <ChartShellHarness
+        pluginRegistry={pluginRegistry}
+        config={config}
+        ticker={ticker}
+        financials={financials}
+        focusedPaneId="portfolio-list:main"
+      />,
+      { width: 120, height: 32 },
+    );
+
+    await testSetup.renderOnce();
+    await testSetup.renderOnce();
+
+    const initialLines = testSetup.captureCharFrame().split("\n");
+    const resolutionRow = initialLines.findIndex((line) => line.includes("AUTO 1M 5M 15M"));
+    const targetResolution = "1W";
+    expect(resolutionRow).toBeGreaterThanOrEqual(0);
+    const resolutionSpansBefore = testSetup.captureSpans().lines[resolutionRow]?.spans ?? [];
+    let resolutionCol = -1;
+    let spanColumn = 0;
+    for (const span of resolutionSpansBefore) {
+      const chipOffset = span.text.indexOf(targetResolution);
+      if (chipOffset >= 0) {
+        resolutionCol = spanColumn + chipOffset + Math.floor(targetResolution.length / 2);
+        break;
+      }
+      spanColumn += span.width;
+    }
+    expect(resolutionCol).toBeGreaterThanOrEqual(0);
+    expect(testSetup.captureCharFrame()).toContain("AAPL - AUTO");
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(resolutionCol, resolutionRow);
+      await testSetup!.renderOnce();
+    });
+    await testSetup.renderOnce();
+    await testSetup.renderOnce();
+
+    expect(
+      harnessState?.config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main")?.settings?.chartResolution,
+    ).toBe("1wk");
+    const resolutionSpans = testSetup.captureSpans().lines[resolutionRow]?.spans ?? [];
+    const boldResolutionText = resolutionSpans
+      .filter((span) => (span.attributes & TextAttributes.BOLD) !== 0)
+      .map((span) => span.text)
+      .join("");
+    expect(boldResolutionText).toContain(targetResolution);
+  });
+
   test("keeps the cash drawer and gridlock tip on distinct click rows in the full app layout", async () => {
     const pluginRegistry = createBrokerPortfolioRegistry();
     const layoutUpdates: unknown[] = [];
     const toasts: string[] = [];
     pluginRegistry.getLayoutFn = () => harnessState?.config.layout ?? { dockRoot: null, instances: [], floating: [] };
     pluginRegistry.updateLayoutFn = (layout) => { layoutUpdates.push(layout); };
-    pluginRegistry.showToastFn = (message: string) => { toasts.push(message); };
+    pluginRegistry.notify = ({ body }: { body: string }) => { toasts.push(body); };
     setSharedRegistryForTests(pluginRegistry);
 
     testSetup = await testRender(
@@ -568,6 +717,84 @@ describe("Shell", () => {
     expect(toasts).toEqual(["Retiled all panes"]);
   });
 
+  test("keeps focused docked pane body text inside the focus border", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-focus-border-test");
+    const mainPane = config.layout.instances.find((instance) => instance.instanceId === "portfolio-list:main");
+    if (!mainPane) throw new Error("missing default portfolio pane");
+
+    const singlePaneLayout = {
+      dockRoot: { kind: "pane" as const, instanceId: "portfolio-list:main" },
+      instances: [{ ...mainPane }],
+      floating: [],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(singlePaneLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(singlePaneLayout) }],
+      }),
+      focusedPaneId: "portfolio-list:main",
+    };
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell pluginRegistry={createShellPluginRegistry({
+            portfolioListComponent: FocusBorderProbe,
+          })} />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 10 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("│Read Probe");
+    expect(frame).toContain("Right│");
+    expect(frame).not.toContain("│ead Probe");
+    expect(frame).not.toContain("Righ│");
+  });
+
+  test("keeps focused floating pane body text inside the focus border", async () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-floating-focus-border-test");
+    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
+    if (!detailPane) throw new Error("missing detail pane");
+
+    const floatingOnlyLayout = {
+      dockRoot: null,
+      instances: [{ ...detailPane }],
+      floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8, zIndex: 75 }],
+    };
+    const state = {
+      ...createInitialState({
+        ...config,
+        layout: cloneLayout(floatingOnlyLayout),
+        layouts: [{ name: "Default", layout: cloneLayout(floatingOnlyLayout) }],
+      }),
+      focusedPaneId: "ticker-detail:main",
+    };
+
+    testSetup = await testRender(
+      <AppContext value={{ state, dispatch: () => {} }}>
+        <DialogProvider dialogOptions={{ style: { backgroundColor: "#000000", borderColor: "#ffffff", borderStyle: "single" } }}>
+          <Shell pluginRegistry={createShellPluginRegistry({
+            tickerDetailComponent: FocusBorderProbe,
+          })} />
+        </DialogProvider>
+      </AppContext>,
+      { width: 40, height: 12 },
+    );
+
+    await testSetup.renderOnce();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("│Read Probe");
+    expect(frame).toContain("Right│");
+    expect(frame).not.toContain("│ead Probe");
+    expect(frame).not.toContain("Righ│");
+  });
+
   test("shows the gridlock tip after snapping a pane to a half screen", () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-snap-test");
     const snapLayout = cloneLayout(config.layout);
@@ -676,6 +903,33 @@ describe("Shell", () => {
     expect(updateLayout?.layout.dockRoot).toEqual({ kind: "pane", instanceId: "portfolio-list:main" });
   });
 
+  test("keeps a floating pane at the preview rect after a free drag release", () => {
+    const config = createDefaultConfig("/tmp/gloomberb-shell-drag-test");
+    const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");
+    if (!detailPane) throw new Error("missing detail pane");
+    const floatingOnlyLayout = {
+      dockRoot: null,
+      instances: [{ ...detailPane, binding: { kind: "fixed" as const, symbol: "AAPL" } }],
+      floating: [{ instanceId: "ticker-detail:main", x: 4, y: 2, width: 30, height: 8, zIndex: 75 }],
+    };
+
+    const result = finalizePaneDragRelease(
+      floatingOnlyLayout,
+      "ticker-detail:main",
+      { x: 14, y: 4, width: 30, height: 8 },
+      null,
+    );
+
+    expect(result.shouldShowGridlockTip).toBe(false);
+    expect(result.nextLayout.floating[0]).toEqual(expect.objectContaining({
+      instanceId: "ticker-detail:main",
+      x: 14,
+      y: 4,
+      width: 30,
+      height: 8,
+    }));
+  });
+
   test("keeps the last floating pane body row visible above the border", async () => {
     const config = createDefaultConfig("/tmp/gloomberb-shell-footer-test");
     const detailPane = config.layout.instances.find((instance) => instance.instanceId === "ticker-detail:main");