gloomberb 0.11.2 → 0.12.0

package/src/components/command-bar/panel/index.tsx

@@ -13,14 +13,27 @@ import {
   commandBarText,
 } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
+import { t } from "../../../i18n";
+import type { ListScreenState } from "../list/model";
 import { CommandBarPanelBody } from "./body";
+import { NATIVE_COMMAND_SURFACE, nativeCommandSurfaceBorder } from "./native-surface";
+import { publishCommandBarPrompt } from "./prompt-binding";
 import type { CommandBarPanelProps } from "./types";
 
 const COMMAND_BAR_OVERLAY_Z_INDEX = 2_147_483_646;
 const COMMAND_BAR_PANEL_Z_INDEX = 2_147_483_647;
-const NATIVE_COMMAND_BAR_PADDING_X_PX = 14;
-const NATIVE_COMMAND_BAR_PADDING_Y_PX = 14;
-const NATIVE_COMMAND_BAR_SHADOW = "0 10px 18px color-mix(in srgb, var(--gloom-bg) 34%, transparent)";
+
+/**
+ * The root screen keeps the closed prompt's own words. Opening the bar puts the
+ * caret in the same input the header was already showing, so changing the
+ * placeholder underneath it read as the control being swapped out. Nested
+ * screens are a different screen and say so.
+ */
+function resolvePromptPlaceholder(listState: ListScreenState): string {
+  if (listState.kind === "root") return t("Search or run a command");
+  if (listState.title === "Security Description") return t("Search tickers");
+  return t("Filter");
+}
 
 export function CommandBarPanel({
   bodyHeight,
@@ -29,6 +42,7 @@ export function CommandBarPanel({
   contentPadding,
   currentRoute,
   getWorkflowInputRef,
+  hasChromeRow,
   labelWidth,
   listBodyHeight,
   nativeListRows,
@@ -58,7 +72,6 @@ export function CommandBarPanel({
   panelBounds,
   queryDisplayWidth,
   rootGhostSuffix,
-  rootQueryLength,
   rootShortcutFeedback,
   selectedScrollRowIndex,
   termHeight,
@@ -95,6 +108,24 @@ export function CommandBarPanel({
     }
   }, [listBodyHeight, nativeListScrollRef, selectedScrollRowIndex, visibleListState?.kind, visibleListState?.query]);
 
+  // The header prompt is the bar's input while a list screen is showing. A
+  // workflow owns its own fields, so it publishes nothing and the prompt goes
+  // quiet rather than taking focus from them.
+  useLayoutEffect(() => {
+    if (!visibleListState) {
+      publishCommandBarPrompt(null);
+      return;
+    }
+    publishCommandBarPrompt({
+      screenKey: `${visibleListState.kind}:${visibleListState.title}`,
+      query: visibleListState.query,
+      placeholder: resolvePromptPlaceholder(visibleListState),
+      ghostSuffix: visibleListState.kind === "root" ? rootGhostSuffix : null,
+      onQueryChange,
+    });
+  }, [onQueryChange, rootGhostSuffix, visibleListState]);
+  useLayoutEffect(() => () => publishCommandBarPrompt(null), []);
+
   useLayoutEffect(() => {
     onNativeOccluderChange?.(nativeOccluderRect);
     return () => {
@@ -109,12 +140,14 @@ export function CommandBarPanel({
   ]);
 
   return (
+    // The click-away overlay starts where the sheet does: the header above it
+    // holds the bar's input, and a click there must reach it, not close the bar.
     <Box
       position="absolute"
-      top={0}
+      top={panelBounds.y}
       left={0}
       width={termWidth}
-      height={termHeight}
+      height={Math.max(0, termHeight - panelBounds.y)}
       zIndex={nativePaneChrome ? COMMAND_BAR_OVERLAY_Z_INDEX : 100}
       onMouseDown={(event: any) => {
         event.stopPropagation?.();
@@ -124,7 +157,7 @@ export function CommandBarPanel({
     >
       <Box
         position="absolute"
-        top={panelBounds.y}
+        top={0}
         left={panelBounds.x}
         width={panelBounds.width}
         height={panelBounds.height}
@@ -136,10 +169,14 @@ export function CommandBarPanel({
         }}
         data-gloom-role="command-bar-panel"
         style={nativePaneChrome ? {
-          borderRadius: 8,
-          boxShadow: NATIVE_COMMAND_BAR_SHADOW,
+          // The lower half of the control the header input opens: rounded and
+          // bordered along its three free edges, open where the input sits.
+          border: `1px solid ${nativeCommandSurfaceBorder(colors)}`,
+          borderTopWidth: 0,
+          borderRadius: `0 0 ${NATIVE_COMMAND_SURFACE.radiusPx}px ${NATIVE_COMMAND_SURFACE.radiusPx}px`,
+          boxShadow: NATIVE_COMMAND_SURFACE.shadow,
           overflow: "hidden",
-          padding: `${NATIVE_COMMAND_BAR_PADDING_Y_PX}px ${NATIVE_COMMAND_BAR_PADDING_X_PX}px`,
+          padding: `${NATIVE_COMMAND_SURFACE.paddingYPx}px ${NATIVE_COMMAND_SURFACE.paddingXPx}px`,
         } : undefined}
       >
         <CommandBarPanelBody
@@ -149,6 +186,7 @@ export function CommandBarPanel({
           contentPadding={contentPadding}
           currentRoute={currentRoute}
           getWorkflowInputRef={getWorkflowInputRef}
+          hasChromeRow={hasChromeRow}
           labelWidth={labelWidth}
           listBodyHeight={listBodyHeight}
           nativeListRows={nativeListRows}
@@ -167,7 +205,6 @@ export function CommandBarPanel({
           onMultiSelectSelect={onMultiSelectSelect}
           onMultiSelectToggle={onMultiSelectToggle}
           onNativeSelectRef={onNativeSelectRef}
-          onQueryChange={onQueryChange}
           onThemeCommit={onThemeCommit}
           onThemePreview={onThemePreview}
           onWorkflowActiveTextareaSync={onWorkflowActiveTextareaSync}
@@ -185,8 +222,6 @@ export function CommandBarPanel({
             panelBg,
           }}
           queryDisplayWidth={queryDisplayWidth}
-          rootGhostSuffix={rootGhostSuffix}
-          rootQueryLength={rootQueryLength}
           rootShortcutFeedback={rootShortcutFeedback}
           themePickerActive={themePickerActive}
           themePickerFilter={themePickerFilter}

package/src/components/command-bar/panel/layout.test.ts

@@ -0,0 +1,139 @@
+import { describe, expect, test } from "bun:test";
+import { resolveAppHeaderHeightCells, resolveHeaderPromptGeometry } from "../../layout/shell/chrome";
+import { resolveCommandBarPanelLayout } from "./layout";
+
+const BASE = {
+  cellHeightPx: 0,
+  cellWidthPx: 0,
+  currentRoute: null,
+  hasRootFeedback: false,
+  hasVisibleListState: true,
+  nativeListRowCount: 8,
+  nativePaneChrome: false,
+  showCustomMultiSelectPicker: false,
+  themePickerActive: false,
+  themePickerRowCount: 0,
+  titleBarOverlay: undefined as boolean | undefined,
+};
+
+const DESKTOP = {
+  ...BASE,
+  cellHeightPx: 18,
+  cellWidthPx: 8,
+  nativePaneChrome: true,
+  nativeWindowChrome: true,
+  titleBarOverlay: true,
+};
+
+describe("command bar sheet geometry", () => {
+  /**
+   * The sheet is the header prompt expanding downward: same left edge, same
+   * width, top edge on the header's bottom edge. Any drift between the two
+   * reads as a banner, or a floating window, hanging near the prompt.
+   *
+   * The widths are pinned because the header now spends columns on the market
+   * cluster as well as the update status, and the sheet pays for them: a
+   * change there silently narrows every result row.
+   */
+  test("shares the prompt's left edge and width on every window size", () => {
+    const expectedWidths: Record<number, number> = { 46: 40, 80: 49, 120: 63, 200: 96 };
+    for (const termWidth of [46, 80, 120, 200]) {
+      const layout = resolveCommandBarPanelLayout({ ...BASE, termHeight: 40, termWidth });
+      const prompt = resolveHeaderPromptGeometry({ termWidth });
+      expect(prompt.width).toBe(expectedWidths[termWidth]!);
+      expect(prompt.left + prompt.width + prompt.marketColumns).toBeLessThanOrEqual(termWidth);
+      expect(layout.panelBounds).toEqual({
+        x: prompt.left,
+        y: resolveAppHeaderHeightCells({}),
+        width: prompt.width,
+        height: layout.panelBounds.height,
+      });
+      expect(layout.nativeOccluderRect).toEqual({
+        x: prompt.left,
+        y: 0,
+        width: prompt.width,
+        height: layout.panelBounds.height,
+      });
+    }
+
+    // A titlebar-overlay header is 28px tall, so its height in cells is fractional.
+    const desktop = resolveCommandBarPanelLayout({ ...DESKTOP, termHeight: 40, termWidth: 200 });
+    const desktopPrompt = resolveHeaderPromptGeometry({
+      nativePaneChrome: true,
+      nativeWindowChrome: true,
+      termWidth: 200,
+      titleBarOverlay: true,
+    });
+    expect(desktop.panelBounds.x).toBe(desktopPrompt.left);
+    expect(desktop.panelBounds.width).toBe(desktopPrompt.width);
+    expect(desktop.panelBounds.y).toBeCloseTo(28 / 18, 6);
+  });
+
+  /**
+   * The selection bar is the row box, padding included, so the columns have
+   * to add back up to the sheet: nothing capped short of it, nothing past it.
+   */
+  test("fills the sheet with the results columns", () => {
+    const terminal = resolveCommandBarPanelLayout({ ...BASE, termHeight: 40, termWidth: 200 });
+    expect(terminal.queryDisplayWidth + terminal.contentPadding * 2).toBe(terminal.panelBounds.width);
+    expect(terminal.labelWidth + terminal.trailingWidth).toBe(terminal.resultsInnerWidth);
+    expect(terminal.trailingWidth).toBe(12);
+
+    const desktop = resolveCommandBarPanelLayout({ ...DESKTOP, termHeight: 40, termWidth: 200 });
+    expect(desktop.queryDisplayWidth + desktop.contentPadding * 2 + desktop.nativePanelPaddingColumns)
+      .toBe(desktop.panelBounds.width);
+  });
+
+  /**
+   * A 24-row terminal keeps its 16 rows; from there the list takes about
+   * 55% of the window, up to 26 rows, so a tall window shows more of a
+   * multi-line document list. The chrome row and its blank line come out of
+   * the same budget, so the sheet's footprint does not grow when they show.
+   */
+  test("grows with the window past 24 rows and caps at 26", () => {
+    const expected: Array<[number, number]> = [[24, 16], [40, 22], [60, 26]];
+    for (const [termHeight, bodyHeight] of expected) {
+      const plain = resolveCommandBarPanelLayout({ ...BASE, termHeight, termWidth: 120 });
+      expect(plain.bodyHeight).toBe(bodyHeight);
+      expect(plain.hasChromeRow).toBe(false);
+      expect(plain.panelBounds.height).toBe(bodyHeight + 2);
+
+      const withChrome = resolveCommandBarPanelLayout({ ...BASE, hasRootFeedback: true, termHeight, termWidth: 120 });
+      expect(withChrome.hasChromeRow).toBe(true);
+      expect(withChrome.panelBounds.height).toBe(withChrome.bodyHeight + 4);
+      expect(withChrome.panelBounds.height).toBeLessThanOrEqual(plain.panelBounds.height);
+    }
+  });
+
+  /**
+   * The theme picker keeps its own rows rather than a list state, so it has to
+   * hand the layout a count of its own. Without one it was excluded from the
+   * compact path entirely and the sheet opened at full height over a dozen
+   * themes.
+   */
+  test("sizes the desktop sheet to the theme picker's own rows", () => {
+    const picker = (themePickerRowCount: number) => resolveCommandBarPanelLayout({
+      ...DESKTOP,
+      hasVisibleListState: false,
+      termHeight: 60,
+      termWidth: 200,
+      themePickerActive: true,
+      themePickerRowCount,
+    });
+
+    expect(picker(4).bodyHeight).toBe(4);
+    expect(picker(1).bodyHeight).toBe(1);
+    // More themes than the sheet can hold falls back to the full budget and scrolls.
+    expect(picker(200).bodyHeight).toBe(picker(200).baseBodyHeight);
+  });
+
+  /** The bottom rows of a short terminal stay clear at every sheet height. */
+  test("never reaches the last terminal row", () => {
+    for (const termHeight of [18, 24, 40]) {
+      for (const hasRootFeedback of [false, true]) {
+        const layout = resolveCommandBarPanelLayout({ ...BASE, hasRootFeedback, termHeight, termWidth: 80 });
+        expect(layout.panelBounds.y + layout.panelBounds.height).toBeLessThan(termHeight - 1);
+      }
+    }
+  });
+});

package/src/components/command-bar/panel/layout.ts

@@ -1,13 +1,30 @@
 import type { LayoutBounds } from "../../../plugins/pane-manager";
-import { resolveAppHeaderHeightCells } from "../../layout/shell/chrome";
+import { resolveAppHeaderHeightCells, resolveHeaderPromptGeometry } from "../../layout/shell/chrome";
 import { estimateWorkflowBodyRows } from "../workflow/fields";
+import { NATIVE_COMMAND_SURFACE } from "./native-surface";
 import type { CommandBarRoute } from "../workflow/types";
 
+const BODY_MIN_ROWS = 9;
+const BODY_MAX_ROWS = 26;
+/** Rows a short window keeps regardless of its share, so 24-row terminals lose nothing. */
+const BODY_SHORT_WINDOW_ROWS = 16;
+/** Share of the window a tall one gives the list; multi-line document rows need the room. */
+const BODY_HEIGHT_SHARE = 0.55;
+/** Rows of the app that stay visible under the sheet on the terminal. */
+const TERMINAL_BOTTOM_CLEARANCE = 6;
+const DESKTOP_BOTTOM_CLEARANCE = 4;
+/** One padding row above the list and one below. */
+const SHEET_PADDING_ROWS = 2;
+/** The chrome row plus the blank line that separates it from the first heading. */
+const CHROME_ROWS = 2;
+
 export interface CommandBarPanelLayout {
   barWidth: number;
   baseBodyHeight: number;
   bodyHeight: number;
   contentPadding: number;
+  /** True when the sheet opens with a chrome row (back link, feedback) above the list. */
+  hasChromeRow: boolean;
   listBodyHeight: number;
   nativeOccluderRect: LayoutBounds;
   nativePanelPaddingColumns: number;
@@ -23,67 +40,84 @@ export function resolveCommandBarPanelLayout({
   cellHeightPx,
   cellWidthPx,
   currentRoute,
+  hasRootFeedback,
   hasVisibleListState,
   nativeListRowCount,
   nativePaneChrome,
+  nativeWindowChrome,
   showCustomMultiSelectPicker,
   termHeight,
   termWidth,
   themePickerActive,
+  themePickerRowCount,
   titleBarOverlay,
 }: {
   cellHeightPx: number;
   cellWidthPx: number;
   currentRoute: CommandBarRoute | null;
+  hasRootFeedback: boolean;
   hasVisibleListState: boolean;
   nativeListRowCount: number;
   nativePaneChrome: boolean;
+  nativeWindowChrome?: boolean;
   showCustomMultiSelectPicker: boolean;
   termHeight: number;
   termWidth: number;
   themePickerActive: boolean;
+  themePickerRowCount: number;
   titleBarOverlay: boolean | undefined;
 }): CommandBarPanelLayout {
-  const barWidth = nativePaneChrome
-    ? Math.max(46, Math.min(78, termWidth - 10, Math.floor(termWidth * 0.64)))
-    : Math.max(42, Math.min(72, termWidth - 8, Math.floor(termWidth * 0.68)));
-  const baseBodyHeight = Math.min(16, Math.max(9, termHeight - 9));
+  const prompt = resolveHeaderPromptGeometry({ nativePaneChrome, nativeWindowChrome, termWidth, titleBarOverlay });
+  const barWidth = prompt.width;
   const contentPadding = nativePaneChrome ? 1 : 3;
+  const nativePanelPaddingColumns = nativePaneChrome
+    ? Math.ceil((NATIVE_COMMAND_SURFACE.paddingXPx * 2) / Math.max(1, cellWidthPx))
+    : 0;
+  const nativePanelPaddingRows = nativePaneChrome
+    ? Math.ceil((NATIVE_COMMAND_SURFACE.paddingYPx * 2) / Math.max(1, cellHeightPx))
+    : 0;
+  // A nested screen shows its back link; the root shows shortcut feedback when
+  // there is any. Otherwise the list starts right under the padding row.
+  const hasChromeRow = currentRoute !== null || hasRootFeedback;
+  const paddingRows = nativePaneChrome ? nativePanelPaddingRows : SHEET_PADDING_ROWS;
+  const chromeRows = hasChromeRow ? CHROME_ROWS : 0;
+  const bottomClearance = nativePaneChrome ? DESKTOP_BOTTOM_CLEARANCE : TERMINAL_BOTTOM_CLEARANCE;
+  // Budgeted for a sheet without a chrome row; the row and its blank line are
+  // paid out of the list, so the sheet's footprint does not jump when a typed
+  // prefix brings feedback or a nested screen brings its back link.
+  const listBudget = Math.max(
+    BODY_MIN_ROWS,
+    Math.min(
+      BODY_MAX_ROWS,
+      termHeight - bottomClearance - paddingRows,
+      Math.max(BODY_SHORT_WINDOW_ROWS, Math.floor(termHeight * BODY_HEIGHT_SHARE)),
+    ),
+  );
+  const baseBodyHeight = Math.max(BODY_MIN_ROWS, listBudget - chromeRows);
   const workflowBodyHeight = currentRoute?.kind === "workflow"
     ? Math.min(
-      Math.max(9, termHeight - (nativePaneChrome ? 7 : 9)),
+      Math.max(BODY_MIN_ROWS, termHeight - bottomClearance - paddingRows - chromeRows),
       Math.max(7, estimateWorkflowBodyRows(currentRoute)),
     )
     : baseBodyHeight;
+  // The theme picker keeps its own rows rather than a list state, so it reports
+  // a count of its own; without one the sheet used to open at full height over
+  // a dozen themes.
+  const compactRowCount = themePickerActive ? themePickerRowCount : nativeListRowCount;
   const shouldUseCompactListHeight = nativePaneChrome
-    && hasVisibleListState
-    && !themePickerActive
+    && (hasVisibleListState || themePickerActive)
     && !showCustomMultiSelectPicker;
   const listBodyHeight = shouldUseCompactListHeight
-    ? Math.min(baseBodyHeight, Math.max(1, nativeListRowCount))
+    ? Math.min(baseBodyHeight, Math.max(1, compactRowCount))
     : baseBodyHeight;
   const bodyHeight = currentRoute?.kind === "workflow"
     ? workflowBodyHeight
     : shouldUseCompactListHeight
       ? listBodyHeight
       : baseBodyHeight;
-  const nativePanelPaddingColumns = nativePaneChrome
-    ? Math.ceil((14 * 2) / Math.max(1, cellWidthPx))
-    : 0;
-  const nativePanelPaddingRows = nativePaneChrome
-    ? Math.ceil((14 * 2) / Math.max(1, cellHeightPx))
-    : 0;
-  const nativeBodyChromeRows = (currentRoute?.kind === "workflow"
-    || currentRoute?.kind === "confirm"
-    || showCustomMultiSelectPicker)
-    ? 1
-    : currentRoute ? 3 : 2;
-  const barHeight = nativePaneChrome
-    ? bodyHeight + nativeBodyChromeRows + nativePanelPaddingRows
-    : bodyHeight + 7;
-  const barLeft = Math.max(4, Math.floor((termWidth - barWidth) / 2));
-  const barTop = Math.max(1, Math.floor((termHeight - barHeight) / 2));
+  const barHeight = bodyHeight + paddingRows + chromeRows;
   const appHeaderHeight = resolveAppHeaderHeightCells({ titleBarOverlay, cellHeightPx });
+  const barTop = appHeaderHeight;
   const resultsInnerWidth = Math.max(12, barWidth - nativePanelPaddingColumns - contentPadding * 2);
   const trailingWidth = Math.max(8, Math.min(12, Math.floor(resultsInnerWidth * 0.18)));
   const labelWidth = Math.max(10, resultsInnerWidth - trailingWidth);
@@ -94,16 +128,19 @@ export function resolveCommandBarPanelLayout({
     baseBodyHeight,
     bodyHeight,
     contentPadding,
+    hasChromeRow,
     listBodyHeight,
+    // Occluder coordinates are relative to the content area, which starts where
+    // the sheet does, so the sheet's own top is the content origin.
     nativeOccluderRect: {
-      x: barLeft,
-      y: barTop - appHeaderHeight,
+      x: prompt.left,
+      y: 0,
       width: barWidth,
       height: barHeight,
     },
     nativePanelPaddingColumns,
     panelBounds: {
-      x: barLeft,
+      x: prompt.left,
       y: barTop,
       width: barWidth,
       height: barHeight,

package/src/components/command-bar/panel/native-surface.ts

@@ -0,0 +1,24 @@
+import { blendHex, commandBarPanelBg, type ThemeColors } from "../../../theme/colors";
+
+/**
+ * Desktop metrics for the command surface, which is one control in two boxes:
+ * the header input on top, the sheet hanging under it. They share a radius, a
+ * shadow and a border so the pair reads as one rounded rectangle that grew
+ * downward, rather than an input with a panel parked below it. The input keeps
+ * the top corners, the sheet the bottom ones, and neither draws the edge they
+ * meet on.
+ */
+export const NATIVE_COMMAND_SURFACE = {
+  paddingXPx: 14,
+  paddingYPx: 14,
+  radiusPx: 8,
+  shadow: "0 10px 18px color-mix(in srgb, var(--gloom-bg) 34%, transparent)",
+} as const;
+
+/**
+ * Hairline around the surface. Lifted off the panel fill rather than the
+ * header, which is the one thing the two halves do not have in common.
+ */
+export function nativeCommandSurfaceBorder(palette: ThemeColors): string {
+  return blendHex(commandBarPanelBg(palette), palette.textBright, 0.16);
+}

package/src/components/command-bar/panel/prompt-binding.ts

@@ -0,0 +1,54 @@
+import { useSyncExternalStore } from "react";
+
+/**
+ * What the header prompt needs to act as the command bar's input while the bar
+ * is open. Published by the panel, read by the header.
+ *
+ * A store rather than app state or context: the header and the command bar are
+ * siblings, and the query of a nested screen (a picker, pane settings) lives in
+ * the bar's own route stack, not in app state, so `state.commandBarQuery` alone
+ * cannot drive the input.
+ */
+export interface CommandBarPromptBinding {
+  /** Changes per screen so the input remounts with a fresh buffer. */
+  screenKey: string;
+  query: string;
+  placeholder: string;
+  /** Completion drawn after the typed text on the root screen, e.g. the ticker after "QQ". */
+  ghostSuffix: string | null;
+  onQueryChange: (query: string) => void;
+}
+
+let binding: CommandBarPromptBinding | null = null;
+const listeners = new Set<() => void>();
+
+function sameBinding(a: CommandBarPromptBinding | null, b: CommandBarPromptBinding | null): boolean {
+  if (a === b) return true;
+  if (!a || !b) return false;
+  return a.screenKey === b.screenKey
+    && a.query === b.query
+    && a.placeholder === b.placeholder
+    && a.ghostSuffix === b.ghostSuffix
+    && a.onQueryChange === b.onQueryChange;
+}
+
+export function publishCommandBarPrompt(next: CommandBarPromptBinding | null): void {
+  if (sameBinding(binding, next)) return;
+  binding = next;
+  for (const listener of listeners) listener();
+}
+
+function subscribe(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getSnapshot(): CommandBarPromptBinding | null {
+  return binding;
+}
+
+export function useCommandBarPromptBinding(): CommandBarPromptBinding | null {
+  return useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
+}

package/src/components/command-bar/panel/runtime.ts

@@ -54,6 +54,7 @@ interface CommandBarPanelRuntimeOptions {
   moveWorkflowFocus: (delta: number) => void;
   nativeListScrollRef: RefObject<ScrollBoxRenderable | null>;
   nativePaneChrome: boolean;
+  nativeWindowChrome?: boolean;
   onNativeOccluderChange?: (rect: LayoutBounds | null) => void;
   openWorkflowFieldPicker: OpenWorkflowFieldPicker;
   persistConfig: (nextConfig: AppState["config"]) => void;
@@ -62,7 +63,6 @@ interface CommandBarPanelRuntimeOptions {
   resetAssist: () => boolean;
   rootGhostSuffix: string | null;
   rootModeKind: string;
-  rootQueryLength: number;
   rootShortcutFeedback: string | null;
   routeListState: ListScreenState | null;
   setActiveListQuery: (query: string) => void;
@@ -107,6 +107,7 @@ export function useCommandBarPanelRuntime({
   moveWorkflowFocus,
   nativeListScrollRef,
   nativePaneChrome,
+  nativeWindowChrome,
   onNativeOccluderChange,
   openWorkflowFieldPicker,
   persistConfig,
@@ -115,7 +116,6 @@ export function useCommandBarPanelRuntime({
   resetAssist,
   rootGhostSuffix,
   rootModeKind,
-  rootQueryLength,
   rootShortcutFeedback,
   routeListState,
   setActiveListQuery,
@@ -212,12 +212,15 @@ export function useCommandBarPanelRuntime({
     cellWidthPx,
     currentRoute,
     nativePaneChrome,
+    nativeWindowChrome,
+    rootShortcutFeedback,
     routeListState,
     setRootSelectedIdx,
     showCustomMultiSelectPicker,
     termHeight,
     termWidth,
     themePickerActive,
+    themePickerFilter,
     titleBarOverlay,
     updateTopRoute,
     visibleListStateRef,
@@ -240,6 +243,7 @@ export function useCommandBarPanelRuntime({
     contentPadding: panelLayout.contentPadding,
     currentRoute,
     getWorkflowInputRef,
+    hasChromeRow: panelLayout.hasChromeRow,
     labelWidth: panelLayout.labelWidth,
     listBodyHeight: panelLayout.listBodyHeight,
     nativeListRows,
@@ -269,7 +273,6 @@ export function useCommandBarPanelRuntime({
     panelBounds: panelLayout.panelBounds,
     queryDisplayWidth: panelLayout.queryDisplayWidth,
     rootGhostSuffix,
-    rootQueryLength,
     rootShortcutFeedback,
     selectedScrollRowIndex,
     termHeight,