gloomberb 0.6.1 → 0.7.1

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

@@ -1,5 +1,5 @@
 import { Box, Input, ScrollBox, Text, Textarea, useUiCapabilities } from "../../ui";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import type { RefObject } from "react";
 import { TextAttributes, type InputRenderable, type ScrollBoxRenderable, type TextareaRenderable } from "../../ui";
 import { useNativeRenderer } from "../../ui";
@@ -8,7 +8,8 @@ import { Button, NumberField, Spinner, TextField } from "../ui";
 import { NativeSelect, openNativeSelect, type NativeSelectElement } from "../ui/native-select";
 import { ToggleList } from "../toggle-list";
 import {
-  colors,
+  applyTheme,
+  clearTransientThemePreview,
   commandBarBg,
   commandBarHeadingText,
   commandBarHoverBg,
@@ -18,9 +19,10 @@ import {
   commandBarSelectedText,
   commandBarSubtleText,
   commandBarText,
+  getCurrentThemeId,
+  previewTheme,
 } from "../../theme/colors";
 import {
-  getEffectiveThemeId,
   getFocusedCollectionId,
   useAppDispatch,
   useAppSelector,
@@ -28,8 +30,9 @@ import {
   type AppState,
 } from "../../state/app-context";
 import { fuzzyFilter } from "../../utils/fuzzy-search";
-import { commands, getThemeOptions, matchPrefix, type Command } from "./command-registry";
-import { applyTheme, getCurrentThemeId } from "../../theme/colors";
+import { commands, matchPrefix, type Command } from "./command-registry";
+import { useThemeColors } from "../../theme/theme-context";
+import { ThemePicker, type ThemePickerHandle } from "./theme-picker";
 import { exportConfig, importConfig, resetAllData, saveConfig } from "../../data/config-store";
 import type { DataProvider } from "../../types/data-provider";
 import type { TickerRepository } from "../../data/ticker-repository";
@@ -71,12 +74,20 @@ import {
 import { notifyGridlockComplete } from "../../plugins/gridlock-notification";
 import { CHART_RENDERER_PREFERENCES } from "../chart/chart-types";
 import {
-  buildSections,
   getEmptyState,
   getRowPresentation,
   resolveCommandBarMode,
   truncateText,
 } from "./view-model";
+import {
+  buildListRows,
+  buildNativeListRows,
+  orderListResults,
+  type CommandBarListRow,
+  type ListScreenState,
+  type ResultItem,
+} from "./list-model";
+import { CommandBarConfirmBody } from "./confirm-body";
 import {
   createLocalTickerSearchCandidates,
   normalizeTickerInput,
@@ -156,55 +167,23 @@ interface CommandBarProps {
   onCheckForUpdates?: () => void | Promise<void>;
 }
 
-interface ResultItem {
-  id: string;
-  label: string;
-  detail: string;
-  category: string;
-  kind: "command" | "ticker" | "search" | "theme" | "plugin" | "action" | "info";
-  right?: string;
-  searchText?: string;
-  themeId?: string;
-  pluginToggle?: () => void | Promise<void>;
-  secondaryAction?: () => void | Promise<void>;
-  checked?: boolean;
-  current?: boolean;
-  disabled?: boolean;
-  action: () => void | Promise<void>;
-}
-
-type ListScreenKind = "root" | "mode" | "picker" | "pane-settings";
-
-interface ListScreenState {
-  kind: ListScreenKind;
-  title: string;
-  subtitle?: string;
-  query: string;
-  selectedIdx: number;
-  hoveredIdx: number | null;
-  results: ResultItem[];
-  searching: boolean;
-  emptyLabel: string;
-  emptyDetail: string;
-  footerLeft: string;
-  footerRight: string;
-}
-
 type WorkflowStringValues = Record<string, string>;
 
-type CommandBarListRow =
-  | { kind: "spacer"; id: string }
-  | { kind: "heading"; id: string; label: string }
-  | { kind: "item"; item: ResultItem; globalIdx: number }
-  | { kind: "message"; id: string; label: string; dim?: boolean }
-  | { kind: "spinner"; id: string; label: string }
-  | { kind: "filler"; id: string };
+const LAYOUT_MOVE_ACTIONS = [
+  { id: "layout-move-left", label: "Move Left", direction: "left", unavailableDetail: "No column to the left" },
+  { id: "layout-move-right", label: "Move Right", direction: "right", unavailableDetail: "No column to the right" },
+  { id: "layout-move-up", label: "Move Up", direction: "above", unavailableDetail: "No pane above" },
+  { id: "layout-move-down", label: "Move Down", direction: "below", unavailableDetail: "No pane below" },
+] as const;
+
+type LayoutMoveDirection = (typeof LAYOUT_MOVE_ACTIONS)[number]["direction"];
 
 const commandBarLog = debugLog.createLogger("command-bar");
 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 QUICK_LOOK_TICKER_SEARCH_OPTIONS = { includeOptionContracts: false } as const;
 
 function getDefaultConfigBackupPath(): string {
   const home = typeof process !== "undefined" ? process.env.HOME : undefined;
@@ -286,40 +265,6 @@ function estimateWorkflowBodyRows(route: CommandBarWorkflowRoute): number {
   return introRows + fieldRows + statusRows + 1;
 }
 
-function orderListResults(results: ResultItem[]): ResultItem[] {
-  return buildSections(results).flatMap((section) => section.items);
-}
-
-function buildListRows(listState: ListScreenState): CommandBarListRow[] {
-  const rows: CommandBarListRow[] = [];
-  const sections = buildSections(listState.results);
-  let globalIdx = 0;
-  sections.forEach((section, sectionIndex) => {
-    if (sectionIndex > 0) {
-      rows.push({ kind: "spacer", id: `spacer:${sectionIndex}:${section.category}` });
-    }
-    rows.push({ kind: "heading", id: `heading:${sectionIndex}:${section.category}`, label: section.category });
-    for (const item of section.items) {
-      rows.push({ kind: "item", item, globalIdx });
-      globalIdx += 1;
-    }
-  });
-  return rows;
-}
-
-function buildNativeListRows(listState: ListScreenState, rows: CommandBarListRow[]): CommandBarListRow[] {
-  if (listState.searching && rows.length === 0) {
-    return [{ kind: "spinner", id: "searching", label: "Searching…" }];
-  }
-  if (rows.length === 0) {
-    return [{ kind: "message", id: "empty", label: listState.emptyLabel }];
-  }
-  if (listState.searching) {
-    return [...rows, { kind: "spinner", id: "searching", label: "Searching…" }];
-  }
-  return rows;
-}
-
 function clampListIndex(index: number, length: number): number {
   return Math.max(0, Math.min(index, Math.max(0, length - 1)));
 }
@@ -356,6 +301,309 @@ function getVisibleMultiSelectPickerOptions(
   });
 }
 
+type CommandBarListScrollEvent = {
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  scroll?: { direction?: string; delta?: number };
+};
+
+interface CommandBarListHeaderProps {
+  kind: ListScreenState["kind"];
+  query: string;
+  queryDisplayWidth: number;
+  nativePaneChrome: boolean;
+  inputBg: string;
+  paletteBg: string;
+  paletteText: string;
+  paletteSubtleText: string;
+  cursorColor: string;
+  contentPadding: number;
+  rootGhostSuffix: string | null;
+  rootQueryLength: number;
+  rootShortcutFeedback: string | null;
+  onQueryChange: (query: string) => void;
+}
+
+const CommandBarListHeader = memo(function CommandBarListHeader({
+  kind,
+  query,
+  queryDisplayWidth,
+  nativePaneChrome,
+  inputBg,
+  paletteBg,
+  paletteText,
+  paletteSubtleText,
+  cursorColor,
+  contentPadding,
+  rootGhostSuffix,
+  rootQueryLength,
+  rootShortcutFeedback,
+  onQueryChange,
+}: CommandBarListHeaderProps) {
+  return (
+    <>
+      <Box height={1} paddingX={contentPadding}>
+        <Box
+          width={queryDisplayWidth}
+          height={1}
+          position="relative"
+          backgroundColor={nativePaneChrome ? undefined : inputBg}
+          style={nativePaneChrome ? undefined : {
+            overflow: "hidden",
+          }}
+        >
+          <Input
+            value={query}
+            onInput={onQueryChange}
+            onChange={onQueryChange}
+            placeholder={kind === "root" ? "Search" : "Filter"}
+            focused
+            width={nativePaneChrome ? "100%" : queryDisplayWidth}
+            backgroundColor={nativePaneChrome ? "transparent" : paletteBg}
+            focusedBackgroundColor={nativePaneChrome ? "transparent" : paletteBg}
+            textColor={paletteText}
+            focusedTextColor={paletteText}
+            placeholderColor={paletteSubtleText}
+            cursorColor={cursorColor}
+          />
+          {kind === "root" && rootGhostSuffix && (
+            <Box
+              position="absolute"
+              top={0}
+              left={Math.max(0, Math.min(rootQueryLength, queryDisplayWidth - 1))}
+              width={Math.max(0, queryDisplayWidth - Math.min(rootQueryLength, queryDisplayWidth - 1))}
+              height={1}
+            >
+              <Text fg={paletteSubtleText}>
+                {truncateText(
+                  rootGhostSuffix,
+                  Math.max(0, queryDisplayWidth - Math.min(rootQueryLength, queryDisplayWidth - 1)),
+                )}
+              </Text>
+            </Box>
+          )}
+        </Box>
+      </Box>
+      <Box height={1} paddingX={contentPadding}>
+        {kind === "root" && rootShortcutFeedback
+          ? (
+            <Text fg={paletteSubtleText}>
+              {truncateText(rootShortcutFeedback, queryDisplayWidth)}
+            </Text>
+          )
+          : null}
+      </Box>
+    </>
+  );
+});
+
+interface CommandBarListItemRowProps {
+  item: ResultItem;
+  globalIdx: number;
+  isSelected: boolean;
+  isHovered: boolean;
+  contentPadding: number;
+  labelWidth: number;
+  trailingWidth: number;
+  nativePaneChrome: boolean;
+  paletteBg: string;
+  paletteHoverBg: string;
+  paletteSelectedBg: string;
+  paletteSelectedText: string;
+  paletteSubtleText: string;
+  paletteText: string;
+  panelBg: string;
+  onHoverIndex: (index: number | null) => void;
+  onListScroll: (event: CommandBarListScrollEvent) => void;
+  onRowMouseDown: (event: any, item: ResultItem, globalIdx: number) => void;
+}
+
+const CommandBarListItemRow = memo(function CommandBarListItemRow({
+  item,
+  globalIdx,
+  isSelected,
+  isHovered,
+  contentPadding,
+  labelWidth,
+  trailingWidth,
+  nativePaneChrome,
+  paletteBg,
+  paletteHoverBg,
+  paletteSelectedBg,
+  paletteSelectedText,
+  paletteSubtleText,
+  paletteText,
+  panelBg,
+  onHoverIndex,
+  onListScroll,
+  onRowMouseDown,
+}: CommandBarListItemRowProps) {
+  const presentation = getRowPresentation(item, isSelected, trailingWidth > 0);
+  const label = truncateText(presentation.label, labelWidth);
+  const trailing = truncateText(presentation.trailing, trailingWidth);
+
+  return (
+    <Box
+      key={item.id}
+      flexDirection="row"
+      height={1}
+      paddingX={contentPadding}
+      backgroundColor={isSelected
+        ? paletteSelectedBg
+        : isHovered
+          ? paletteHoverBg
+          : (nativePaneChrome ? panelBg : paletteBg)}
+      onMouseMove={() => onHoverIndex(globalIdx)}
+      onMouseOut={() => onHoverIndex(null)}
+      {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}
+      onMouseDown={(event: any) => onRowMouseDown(event, item, globalIdx)}
+      data-command-bar-row-selected={nativePaneChrome && isSelected ? "true" : undefined}
+      style={nativePaneChrome ? { borderRadius: 6 } : undefined}
+    >
+      <Box width={labelWidth}>
+        <Text fg={isSelected ? paletteSelectedText : presentation.primaryMuted ? paletteSubtleText : paletteText}>
+          {label}
+        </Text>
+      </Box>
+      <Box width={trailingWidth}>
+        <Text fg={isSelected ? paletteSelectedText : paletteSubtleText}>{trailing}</Text>
+      </Box>
+    </Box>
+  );
+});
+
+interface CommandBarListBodyProps {
+  visibleListState: ListScreenState;
+  nativeListRows: CommandBarListRow[];
+  listBodyHeight: number;
+  contentPadding: number;
+  labelWidth: number;
+  nativePaneChrome: boolean;
+  nativeListScrollRef: RefObject<ScrollBoxRenderable | null>;
+  paletteBg: string;
+  paletteHeadingText: string;
+  paletteHoverBg: string;
+  paletteSelectedBg: string;
+  paletteSelectedText: string;
+  paletteSubtleText: string;
+  paletteText: string;
+  panelBg: string;
+  queryDisplayWidth: number;
+  trailingWidth: number;
+  onHoverIndex: (index: number | null) => void;
+  onListScroll: (event: CommandBarListScrollEvent) => void;
+  onRowMouseDown: (event: any, item: ResultItem, globalIdx: number) => void;
+}
+
+const CommandBarListBody = memo(function CommandBarListBody({
+  visibleListState,
+  nativeListRows,
+  listBodyHeight,
+  contentPadding,
+  labelWidth,
+  nativePaneChrome,
+  nativeListScrollRef,
+  paletteBg,
+  paletteHeadingText,
+  paletteHoverBg,
+  paletteSelectedBg,
+  paletteSelectedText,
+  paletteSubtleText,
+  paletteText,
+  panelBg,
+  queryDisplayWidth,
+  trailingWidth,
+  onHoverIndex,
+  onListScroll,
+  onRowMouseDown,
+}: CommandBarListBodyProps) {
+  const visibleRows = useMemo(() => {
+    const rows = nativeListRows;
+    if (nativePaneChrome) return rows;
+    const paddedRows = [...rows];
+    while (paddedRows.length < listBodyHeight) {
+      paddedRows.push({ kind: "filler", id: `filler:${paddedRows.length}` });
+    }
+    return paddedRows;
+  }, [
+    listBodyHeight,
+    nativeListRows,
+    nativePaneChrome,
+  ]);
+
+  const renderedRows = (
+    <>
+      {visibleRows.map((row) => {
+        if (row.kind === "filler" || row.kind === "spacer") {
+          return <Box key={row.id} height={1} />;
+        }
+        if (row.kind === "spinner") {
+          return (
+            <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}>
+              <Spinner label={row.label} />
+            </Box>
+          );
+        }
+        if (row.kind === "message") {
+          return (
+            <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}>
+              <Text fg={paletteText}>{truncateText(row.label, queryDisplayWidth)}</Text>
+            </Box>
+          );
+        }
+        if (row.kind === "heading") {
+          return (
+            <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}>
+              <Text attributes={TextAttributes.BOLD} fg={paletteHeadingText}>
+                {truncateText(row.label, queryDisplayWidth)}
+              </Text>
+            </Box>
+          );
+        }
+
+        const isSelected = row.globalIdx === visibleListState.selectedIdx;
+        const isHovered = row.globalIdx === visibleListState.hoveredIdx && !isSelected;
+        return (
+          <CommandBarListItemRow
+            key={row.item.id}
+            item={row.item}
+            globalIdx={row.globalIdx}
+            isSelected={isSelected}
+            isHovered={isHovered}
+            contentPadding={contentPadding}
+            labelWidth={labelWidth}
+            trailingWidth={trailingWidth}
+            nativePaneChrome={nativePaneChrome}
+            paletteBg={paletteBg}
+            paletteHoverBg={paletteHoverBg}
+            paletteSelectedBg={paletteSelectedBg}
+            paletteSelectedText={paletteSelectedText}
+            paletteSubtleText={paletteSubtleText}
+            paletteText={paletteText}
+            panelBg={panelBg}
+            onHoverIndex={onHoverIndex}
+            onListScroll={onListScroll}
+            onRowMouseDown={onRowMouseDown}
+          />
+        );
+      })}
+    </>
+  );
+
+  return (
+    <ScrollBox
+      ref={nativeListScrollRef}
+      flexDirection="column"
+      height={listBodyHeight}
+      scrollY
+      focusable={false}
+      {...(!nativePaneChrome ? { onMouseScroll: onListScroll } : {})}
+    >
+      {renderedRows}
+    </ScrollBox>
+  );
+});
+
 export function CommandBar({
   dataProvider,
   tickerRepository,
@@ -364,6 +612,7 @@ export function CommandBar({
   onCheckForUpdates,
 }: CommandBarProps) {
   const dispatch = useAppDispatch();
+  const themeColors = useThemeColors();
   const config = useAppSelector((state) => state.config);
   const paneState = useAppSelector((state) => state.paneState);
   const tickers = useAppSelector((state) => state.tickers);
@@ -425,6 +674,8 @@ export function CommandBar({
   const rootQueryRef = useRef(rootQuery);
   rootQueryRef.current = rootQuery;
   const rootModeInfo = resolveCommandBarMode(rootQuery, availableCommands);
+  const rootModeKindRef = useRef(rootModeInfo.kind);
+  rootModeKindRef.current = rootModeInfo.kind;
   const [rootSelectedIdx, setRootSelectedIdx] = useState(0);
   const [rootHoveredIdx, setRootHoveredIdx] = useState<number | null>(null);
   const [rootSearching, setRootSearching] = useState(false);
@@ -449,32 +700,50 @@ export function CommandBar({
   const workflowNativeSelectRefs = useRef(new Map<string, NativeSelectElement>());
   const workflowScrollRef = useRef<ScrollBoxRenderable | null>(null);
   const nativeListScrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const themePickerRef = useRef<ThemePickerHandle | null>(null);
   const visibleListStateRef = useRef<ListScreenState | null>(null);
   const processedLaunchSequenceRef = useRef<number | null>(null);
+  const currentThemePreviewRef = useRef<string | null>(null);
   const currentRoute = routeStack[routeStack.length - 1] ?? null;
   const currentRouteRef = useRef<CommandBarRoute | null>(currentRoute);
   currentRouteRef.current = currentRoute;
   const activeCollectionId = getFocusedCollectionId(state);
   const activePortfolio = state.config.portfolios.find((portfolio) => portfolio.id === activeCollectionId);
 
+  const applyThemePreview = useCallback((themeId: string | null) => {
+    const committedThemeId = stateRef.current.config.theme;
+    const preview = themeId && themeId !== committedThemeId ? themeId : null;
+    if (preview) {
+      previewTheme(preview);
+    } else {
+      clearTransientThemePreview();
+      if (getCurrentThemeId() !== committedThemeId) {
+        applyTheme(committedThemeId);
+      }
+    }
+    if (currentThemePreviewRef.current !== preview) {
+      currentThemePreviewRef.current = preview;
+      dispatch({ type: "PREVIEW_THEME", theme: preview });
+    }
+  }, [dispatch]);
+
   const clearThemePreview = useCallback((themeId: string | null | undefined) => {
-    if (!themeId) return;
-    if (getCurrentThemeId() !== themeId) {
-      applyTheme(themeId);
+    themePickerRef.current?.cancelPreview();
+    const targetThemeId = themeId ?? stateRef.current.config.theme;
+    if (!targetThemeId) return;
+    clearTransientThemePreview();
+    if (getCurrentThemeId() !== targetThemeId) {
+      applyTheme(targetThemeId);
+    }
+    if (currentThemePreviewRef.current !== null) {
+      currentThemePreviewRef.current = null;
+      dispatch({ type: "PREVIEW_THEME", theme: null });
     }
-    dispatch({ type: "PREVIEW_THEME", theme: null });
   }, [dispatch]);
 
   const restoreThemePreview = useCallback(() => {
-    const themeRoute = [...routeStack].reverse().find((route) => (
-      route.kind === "mode" && route.screen === "themes"
-    ));
-    if (themeRoute?.kind === "mode" && themeRoute.themeBaseId) {
-      clearThemePreview(themeRoute.themeBaseId);
-      return;
-    }
     clearThemePreview(rootThemeBaseIdRef.current);
-  }, [clearThemePreview, routeStack]);
+  }, [clearThemePreview]);
 
   const closeAll = useCallback((options?: { revertThemePreview?: boolean }) => {
     if (options?.revertThemePreview !== false) {
@@ -521,10 +790,6 @@ export function CommandBar({
       return;
     }
 
-    if (currentRoute.kind === "mode" && currentRoute.screen === "themes" && currentRoute.themeBaseId) {
-      clearThemePreview(currentRoute.themeBaseId);
-    }
-
     if (routeStack.length === 1 && currentRoute.restoreMain) {
       setRootQuery(currentRoute.restoreMain.query);
       setRootSelectedIdx(currentRoute.restoreMain.selectedIdx);
@@ -584,20 +849,22 @@ export function CommandBar({
     pluginRegistry.pinTicker(symbol, { floating: true, paneType: "ticker-detail" });
   }, [pluginRegistry]);
 
-  const previewThemeId = useCallback((themeId: string | undefined) => {
-    if (!themeId) return;
+  const commitTheme = useCallback((themeId: string) => {
+    themePickerRef.current?.cancelPreview();
+    clearTransientThemePreview();
     if (getCurrentThemeId() !== themeId) {
       applyTheme(themeId);
     }
-    const previewTheme = themeId === stateRef.current.config.theme ? null : themeId;
-    if (stateRef.current.themePreview !== previewTheme) {
-      dispatch({ type: "PREVIEW_THEME", theme: previewTheme });
-    }
+    currentThemePreviewRef.current = null;
+    dispatch({ type: "SET_THEME", theme: themeId });
   }, [dispatch]);
 
-  const previewThemeSelection = useCallback((listState: ListScreenState, selectedIdx: number) => {
-    previewThemeId(listState.results[selectedIdx]?.themeId);
-  }, [previewThemeId]);
+  useEffect(() => {
+    return () => {
+      themePickerRef.current?.cancelPreview();
+      clearTransientThemePreview();
+    };
+  }, []);
 
   const focusTicker = useCallback((symbol: string, options?: { forceNewPane?: boolean }) => {
     const currentState = stateRef.current;
@@ -650,7 +917,7 @@ export function CommandBar({
   }, [dispatch, persistLayoutChange, pluginRegistry]);
 
   const openModeRoute = useCallback((
-    screen: "ticker-search" | "themes" | "plugins" | "layout",
+    screen: "ticker-search" | "plugins" | "layout",
     initialQuery = "",
     payload?: Record<string, unknown>,
   ) => {
@@ -663,7 +930,6 @@ export function CommandBar({
       query: initialQuery,
       selectedIdx: 0,
       hoveredIdx: null,
-      themeBaseId: screen === "themes" ? stateRef.current.config.theme : undefined,
       payload,
     });
   }, [pushRoute]);
@@ -1220,6 +1486,306 @@ export function CommandBar({
     });
   }, [openConfirmRoute]);
 
+  const buildPluginItems = useCallback((query: string): ResultItem[] => {
+    const disabledPlugins = state.config.disabledPlugins || [];
+    const toggleable = [...pluginRegistry.allPlugins.values()].filter((plugin) => plugin.toggleable);
+    const filtered = query
+      ? toggleable.filter((plugin) => (
+        plugin.name.toLowerCase().includes(query.toLowerCase())
+        || plugin.id.includes(query.toLowerCase())
+      ))
+      : toggleable;
+    return filtered.map((plugin): ResultItem => {
+      const enabled = !disabledPlugins.includes(plugin.id);
+      const toggleAction = () => {
+        dispatch({ type: "TOGGLE_PLUGIN", pluginId: plugin.id });
+        const nextDisabled = enabled
+          ? [...disabledPlugins, plugin.id]
+          : disabledPlugins.filter((entry) => entry !== plugin.id);
+        if (enabled) {
+          for (const paneId of pluginRegistry.getPluginPaneIds(plugin.id)) {
+            pluginRegistry.hidePane(paneId);
+          }
+        }
+        void saveConfig({ ...state.config, disabledPlugins: nextDisabled });
+      };
+      return {
+        id: `plugin:${plugin.id}`,
+        label: plugin.name,
+        detail: plugin.description || "",
+        category: "Plugins",
+        kind: "plugin",
+        checked: enabled,
+        pluginToggle: toggleAction,
+        action: toggleAction,
+      };
+    });
+  }, [dispatch, pluginRegistry, state.config]);
+
+  const buildLayoutItems = useCallback((
+    query: string,
+    options?: { confirmDangerousActions?: boolean },
+  ): ResultItem[] => {
+    const currentLayout = state.config.layout;
+    const focusedPane = state.focusedPaneId ? findPaneInstance(currentLayout, state.focusedPaneId) : null;
+    const focusedPaneDef = focusedPane ? pluginRegistry.panes.get(focusedPane.paneId) : null;
+    const dockedPaneIds = getDockedPaneIds(currentLayout);
+    const layoutHistory = state.layoutHistory[state.config.activeLayoutIndex];
+    const layoutSnapshot = JSON.stringify(currentLayout);
+    const canMove = (direction: LayoutMoveDirection) => (
+      !!focusedPane && JSON.stringify(movePaneRelative(currentLayout, focusedPane.instanceId, direction)) !== layoutSnapshot
+    );
+    const layoutItems: ResultItem[] = [];
+
+    if (focusedPane && focusedPaneDef) {
+      const focusedFloating = currentLayout.floating.find((entry) => entry.instanceId === focusedPane.instanceId);
+      layoutItems.push({
+        id: "layout-toggle-mode",
+        label: focusedFloating ? "Dock Pane" : "Float Pane",
+        detail: focusedFloating ? "Return the focused window to the layout" : "Detach the focused pane into a floating window",
+        category: "Focused Pane",
+        kind: "action",
+        action: () => {
+          const { width, height } = pluginRegistry.getTermSizeFn();
+          const nextLayout = focusedFloating
+            ? dockPane(currentLayout, focusedPane.instanceId)
+            : floatPane(currentLayout, focusedPane.instanceId, width, height, focusedPaneDef);
+          persistLayoutChange(nextLayout);
+          closeAll({ revertThemePreview: false });
+        },
+      });
+
+      LAYOUT_MOVE_ACTIONS.forEach((entry) => {
+        const available = canMove(entry.direction);
+        layoutItems.push({
+          id: entry.id,
+          label: entry.label,
+          detail: available ? "Reposition the focused pane" : entry.unavailableDetail,
+          category: "Focused Pane",
+          kind: available ? "action" : "info",
+          disabled: !available,
+          action: available
+            ? () => {
+              persistLayoutChange(movePaneRelative(currentLayout, focusedPane.instanceId, entry.direction));
+              closeAll({ revertThemePreview: false });
+            }
+            : () => {},
+        });
+      });
+
+      layoutItems.push({
+        id: "layout-swap",
+        label: "Swap With…",
+        detail: dockedPaneIds.length + currentLayout.floating.length > 1
+          ? "Choose another pane to swap positions"
+          : "Need at least two panes",
+        category: "Focused Pane",
+        kind: "action",
+        disabled: dockedPaneIds.length + currentLayout.floating.length <= 1,
+        action: () => {
+          const pickerOptions = [
+            ...dockedPaneIds,
+            ...currentLayout.floating.map((entry) => entry.instanceId),
+          ]
+            .filter((paneId) => paneId !== focusedPane.instanceId)
+            .map((paneId) => {
+              const instance = findPaneInstance(currentLayout, paneId)!;
+              const isFloating = currentLayout.floating.some((entry) => entry.instanceId === paneId);
+              return {
+                id: paneId,
+                label: instance.title || pluginRegistry.panes.get(instance.paneId)?.name || instance.paneId,
+                detail: isFloating ? "Floating window" : "Docked pane",
+                description: isFloating ? "Floating window" : "Docked pane",
+              };
+            });
+          if (pickerOptions.length === 0) return;
+          openPickerRoute({
+            kind: "picker",
+            pickerId: "layout-swap",
+            title: "Swap With…",
+            query: "",
+            selectedIdx: 0,
+            hoveredIdx: null,
+            options: pickerOptions,
+            payload: { sourcePaneId: focusedPane.instanceId },
+          });
+        },
+      });
+
+      layoutItems.push({
+        id: "layout-duplicate",
+        label: "Duplicate Pane",
+        detail: "Create another instance next to the focused pane",
+        category: "Focused Pane",
+        kind: "action",
+        action: () => {
+          duplicatePane(focusedPane.instanceId);
+          closeAll({ revertThemePreview: false });
+        },
+      });
+
+      layoutItems.push({
+        id: "layout-close-pane",
+        label: "Close Pane",
+        detail: "Remove the focused pane from the layout",
+        category: "Focused Pane",
+        kind: "action",
+        action: options?.confirmDangerousActions
+          ? () => {
+            openInlineConfirm({
+              confirmId: "layout-close-pane",
+              title: "Close Pane",
+              body: [`Close "${focusedPane.title || focusedPaneDef.name || focusedPane.instanceId}"?`],
+              confirmLabel: "Close Pane",
+              cancelLabel: "Back",
+              tone: "danger",
+              onConfirm: () => {
+                persistLayoutChange(removePane(currentLayout, focusedPane.instanceId));
+              },
+            });
+          }
+          : () => {
+            persistLayoutChange(removePane(currentLayout, focusedPane.instanceId));
+            closeAll({ revertThemePreview: false });
+          },
+      });
+    } else {
+      layoutItems.push({
+        id: "layout-no-focused-pane",
+        label: "No focused pane",
+        detail: "Focus a pane to show pane-specific layout actions",
+        category: "Focused Pane",
+        kind: "info",
+        action: () => {},
+      });
+    }
+
+    layoutItems.push({
+      id: "layout-undo",
+      label: "Undo Layout Change",
+      detail: (layoutHistory?.past.length ?? 0) > 0 ? "Restore the previous layout state" : "No previous layout state",
+      category: "Current Layout",
+      kind: "action",
+      disabled: (layoutHistory?.past.length ?? 0) === 0,
+      action: () => {
+        if ((layoutHistory?.past.length ?? 0) === 0) return;
+        dispatch({ type: "UNDO_LAYOUT" });
+        closeAll({ revertThemePreview: false });
+      },
+    });
+    layoutItems.push({
+      id: "layout-redo",
+      label: "Redo Layout Change",
+      detail: (layoutHistory?.future.length ?? 0) > 0 ? "Reapply the next layout state" : "No later layout state",
+      category: "Current Layout",
+      kind: "action",
+      disabled: (layoutHistory?.future.length ?? 0) === 0,
+      action: () => {
+        if ((layoutHistory?.future.length ?? 0) === 0) return;
+        dispatch({ type: "REDO_LAYOUT" });
+        closeAll({ revertThemePreview: false });
+      },
+    });
+    layoutItems.push({
+      id: "layout-reset",
+      label: "Reset Current Layout",
+      detail: "Restore the default two-pane layout",
+      category: "Current Layout",
+      kind: "action",
+      action: options?.confirmDangerousActions
+        ? () => {
+          openInlineConfirm({
+            confirmId: "layout-reset",
+            title: "Reset Current Layout",
+            body: ["Reset the current layout to the default two-pane arrangement?"],
+            confirmLabel: "Reset Layout",
+            cancelLabel: "Back",
+            tone: "danger",
+            onConfirm: () => {
+              persistLayoutChange(cloneLayout(DEFAULT_LAYOUT));
+            },
+          });
+        }
+        : () => {
+          persistLayoutChange(cloneLayout(DEFAULT_LAYOUT));
+          closeAll({ revertThemePreview: false });
+        },
+    });
+    layoutItems.push({
+      id: "layout-gridlock",
+      label: "Gridlock All Windows",
+      detail: currentLayout.floating.length > 0
+        ? "Infer a tiled layout from the current window positions"
+        : "Retile all panes from their current arrangement",
+      category: "Current Layout",
+      kind: "action",
+      action: () => {
+        const { width, height } = pluginRegistry.getTermSizeFn();
+        persistLayoutChange(gridlockAllPanes(currentLayout, { x: 0, y: 0, width, height }));
+        notifyGridlockRevert();
+        closeAll({ revertThemePreview: false });
+      },
+    });
+    layoutItems.push({
+      id: "layout-rename",
+      label: "Rename Layout",
+      detail: "Change the current saved layout name",
+      category: "Current Layout",
+      kind: "action",
+      action: () => openBuiltInWorkflow("rename-layout"),
+    });
+    layoutItems.push({
+      id: "layout-duplicate-layout",
+      label: "Duplicate Layout",
+      detail: "Create a copy of the current layout",
+      category: "Current Layout",
+      kind: "action",
+      action: () => {
+        dispatch({ type: "DUPLICATE_LAYOUT", index: state.config.activeLayoutIndex });
+        closeAll({ revertThemePreview: false });
+      },
+    });
+    layoutItems.push({
+      id: "layout-new",
+      label: "New Layout",
+      detail: "Create a fresh saved layout",
+      category: "Current Layout",
+      kind: "action",
+      action: () => openBuiltInWorkflow("new-layout"),
+    });
+
+    state.config.layouts.forEach((savedLayout, index) => {
+      layoutItems.push({
+        id: `layout-switch:${index}`,
+        label: savedLayout.name,
+        detail: index === state.config.activeLayoutIndex ? "Current layout" : "Switch to this saved layout",
+        right: getLayoutPreview(savedLayout.layout),
+        category: "Saved Layouts",
+        kind: "action",
+        current: index === state.config.activeLayoutIndex,
+        action: () => {
+          dispatch({ type: "SWITCH_LAYOUT", index });
+          closeAll({ revertThemePreview: false });
+        },
+      });
+    });
+
+    return query
+      ? fuzzyFilter(layoutItems, query, (item) => `${item.label} ${item.detail} ${item.right || ""}`)
+      : layoutItems;
+  }, [
+    closeAll,
+    dispatch,
+    duplicatePane,
+    notifyGridlockRevert,
+    openBuiltInWorkflow,
+    openInlineConfirm,
+    openPickerRoute,
+    persistLayoutChange,
+    pluginRegistry,
+    state,
+  ]);
+
   const resolvePluginCommandConfirm = useCallback((command: CommandDef) => {
     const context = {
       config: state.config,
@@ -1987,10 +2553,15 @@ export function CommandBar({
           activeCollectionId,
           buildSharedWorkflowDeps(),
         );
-        await openPaneTemplateDirect(template, {
+        const createOptions = {
           arg: trimmedList,
           symbols,
-        });
+        };
+        if (template.canCreate && !template.canCreate(getPaneTemplateContext(), createOptions)) {
+          openPaneTemplateWorkflow(template, { arg: trimmedArg });
+          return;
+        }
+        await openPaneTemplateDirect(template, createOptions);
       } catch {
         openPaneTemplateWorkflow(template, { arg: trimmedArg });
       }
@@ -2095,20 +2666,24 @@ export function CommandBar({
     tickerSearchCacheRef.current.clear();
   }, [state.tickers]);
 
+  const createQuickLookLocalTickerCandidates = useCallback((tickers: Iterable<TickerRecord>) => (
+    createLocalTickerSearchCandidates(tickers, new Map(), QUICK_LOOK_TICKER_SEARCH_OPTIONS)
+  ), []);
+
   const localTickerSearchResultItems = useCallback((query?: string, options?: {
     category?: string;
     limit?: number;
   }): ResultItem[] => {
     const items = query
-      ? rankTickerSearchItems(createLocalTickerSearchCandidates(state.tickers.values()), query)
-      : createLocalTickerSearchCandidates(state.tickers.values());
+      ? rankTickerSearchItems(createQuickLookLocalTickerCandidates(state.tickers.values()), query)
+      : createQuickLookLocalTickerCandidates(state.tickers.values());
     return items
       .slice(0, options?.limit)
       .map((candidate) => ({
         ...mapTickerSearchCandidateToResultItem(candidate),
         category: options?.category ?? candidate.category,
       }));
-  }, [mapTickerSearchCandidateToResultItem, state.tickers]);
+  }, [createQuickLookLocalTickerCandidates, mapTickerSearchCandidateToResultItem, state.tickers]);
 
   const adaptTickerSearchRouteResult = useCallback((
     item: ResultItem,
@@ -2412,7 +2987,7 @@ export function CommandBar({
     switch (command.id) {
       case "help":
         closeAll({ revertThemePreview: false });
-        pluginRegistry.showWidget("help");
+        pluginRegistry.showPane("help");
         return;
       case "pane-settings":
         if (state.focusedPaneId) openPaneSettingsRoute(state.focusedPaneId);
@@ -2528,6 +3103,8 @@ export function CommandBar({
         const importPath = getDefaultConfigBackupPath();
         void importConfig(state.config.dataDir, importPath)
           .then((imported) => {
+            themePickerRef.current?.cancelPreview();
+            clearTransientThemePreview();
             dispatch({ type: "SET_CONFIG", config: imported });
             applyTheme(imported.theme);
             dispatch({ type: "SET_THEME", theme: imported.theme });
@@ -2559,6 +3136,10 @@ export function CommandBar({
         void onCheckForUpdates?.();
         closeAll({ revertThemePreview: false });
         return;
+      case "theme":
+        rootThemeBaseIdRef.current = stateRef.current.config.theme;
+        setRootQuery(arg ? `TH ${arg}` : "TH ");
+        return;
       case "security-description":
         void runSecurityDescriptionShortcut(arg);
         return;
@@ -2595,9 +3176,12 @@ export function CommandBar({
     quitApp,
     runSecurityDescriptionShortcut,
     executeCollectionCommand,
+    setRootQuery,
   ]);
 
   const activeMatch = matchPrefix(rootQuery, availableCommands);
+  const themePickerActive = !currentRoute && activeMatch?.command.id === "theme";
+  const themePickerFilter = themePickerActive ? activeMatch.arg : "";
   const rootSecurityDescriptionArg = activeMatch?.command.id === "security-description" && activeMatch.arg.length >= 1
     ? activeMatch.arg
     : null;
@@ -2619,13 +3203,13 @@ export function CommandBar({
       rootThemeBaseIdRef.current = state.config.theme;
     } else if (rootModeInfo.kind !== "themes" && previousMode === "themes") {
       const rootThemeBaseId = rootThemeBaseIdRef.current;
-      if (rootThemeBaseId && getEffectiveThemeId(state) !== rootThemeBaseId) {
+      if (rootThemeBaseId) {
         clearThemePreview(rootThemeBaseId);
       }
       rootThemeBaseIdRef.current = null;
     }
     previousRootModeRef.current = rootModeInfo.kind;
-  }, [clearThemePreview, currentRoute, rootModeInfo.kind, state.config.theme, state.themePreview]);
+  }, [clearThemePreview, currentRoute, rootModeInfo.kind, state.config.theme]);
 
   const tickerSearchRouteQuery = currentRoute?.kind === "mode" && currentRoute.screen === "ticker-search"
     ? currentRoute.query
@@ -2673,6 +3257,7 @@ export function CommandBar({
             brokerId: activePortfolio?.brokerId,
             brokerInstanceId: activePortfolio?.brokerInstanceId,
           },
+          ...QUICK_LOOK_TICKER_SEARCH_OPTIONS,
         });
         if (requestId !== searchRequestIdRef.current) return;
         writeTickerSearchCache(
@@ -2959,336 +3544,26 @@ export function CommandBar({
     ) {
       items.push(shortcutItem);
     } else if (match && match.command.id === "plugins") {
-      const disabledPlugins = state.config.disabledPlugins || [];
-      const toggleable = [...pluginRegistry.allPlugins.values()].filter((plugin) => plugin.toggleable);
-      const filtered = match.arg
-        ? toggleable.filter((plugin) => (
-          plugin.name.toLowerCase().includes(match.arg.toLowerCase())
-          || plugin.id.includes(match.arg.toLowerCase())
-        ))
-        : toggleable;
-      for (const plugin of filtered) {
-        const enabled = !disabledPlugins.includes(plugin.id);
-        const toggleAction = () => {
-          dispatch({ type: "TOGGLE_PLUGIN", pluginId: plugin.id });
-          const nextDisabled = enabled
-            ? [...disabledPlugins, plugin.id]
-            : disabledPlugins.filter((entry) => entry !== plugin.id);
-          if (enabled) {
-            for (const paneId of pluginRegistry.getPluginPaneIds(plugin.id)) {
-              pluginRegistry.hideWidget(paneId);
-            }
-          }
-          void saveConfig({ ...state.config, disabledPlugins: nextDisabled });
-        };
+      items.push(...buildPluginItems(match.arg));
+    } else if (match && match.command.id === "layout") {
+      items.push(...buildLayoutItems(match.arg, { confirmDangerousActions: true }));
+    } else if (match && match.command.id === "theme") {
+      initialIdx = 0;
+    } else if (match && match.command.id === "security-description") {
+      if (shortcutItem) {
+        items.push(shortcutItem);
+      }
+      if (!match.arg && !shortcutItem) {
         items.push({
-          id: `plugin:${plugin.id}`,
-          label: plugin.name,
-          detail: plugin.description || "",
-          category: "Plugins",
-          kind: "plugin",
-          checked: enabled,
-          pluginToggle: toggleAction,
-          action: toggleAction,
+          id: "search-hint",
+          label: "Type a ticker symbol",
+          detail: "Open security details after resolving a ticker",
+          category: "Search",
+          kind: "info",
+          action: () => {},
         });
-      }
-    } else if (match && match.command.id === "layout") {
-      const currentLayout = state.config.layout;
-      const focusedPane = state.focusedPaneId ? findPaneInstance(currentLayout, state.focusedPaneId) : null;
-      const focusedPaneDef = focusedPane ? pluginRegistry.panes.get(focusedPane.paneId) : null;
-      const dockedPaneIds = getDockedPaneIds(currentLayout);
-      const focusedFloating = focusedPane ? currentLayout.floating.find((entry) => entry.instanceId === focusedPane.instanceId) : null;
-      const layoutHistory = state.layoutHistory[state.config.activeLayoutIndex];
-      const layoutSnapshot = JSON.stringify(currentLayout);
-      const canMove = (direction: "left" | "right" | "above" | "below") => (
-        !!focusedPane && JSON.stringify(movePaneRelative(currentLayout, focusedPane.instanceId, direction)) !== layoutSnapshot
-      );
-      const layoutItems: ResultItem[] = [];
-
-      if (focusedPane && focusedPaneDef) {
-        layoutItems.push({
-          id: "layout-toggle-mode",
-          label: focusedFloating ? "Dock Pane" : "Float Pane",
-          detail: focusedFloating ? "Return the focused window to the layout" : "Detach the focused pane into a floating window",
-          category: "Focused Pane",
-          kind: "action",
-          action: () => {
-            const { width, height } = pluginRegistry.getTermSizeFn();
-            const nextLayout = focusedFloating
-              ? dockPane(currentLayout, focusedPane.instanceId)
-              : floatPane(currentLayout, focusedPane.instanceId, width, height, focusedPaneDef);
-            persistLayoutChange(nextLayout);
-            closeAll({ revertThemePreview: false });
-          },
-        });
-
-        const moveActions: Array<{
-          id: string;
-          label: string;
-          direction: "left" | "right" | "above" | "below";
-          available: boolean;
-          unavailableDetail: string;
-        }> = [
-          { id: "layout-move-left", label: "Move Left", direction: "left", available: canMove("left"), unavailableDetail: "No column to the left" },
-          { id: "layout-move-right", label: "Move Right", direction: "right", available: canMove("right"), unavailableDetail: "No column to the right" },
-          { id: "layout-move-up", label: "Move Up", direction: "above", available: canMove("above"), unavailableDetail: "No pane above" },
-          { id: "layout-move-down", label: "Move Down", direction: "below", available: canMove("below"), unavailableDetail: "No pane below" },
-        ];
-
-        moveActions.forEach((entry) => {
-          layoutItems.push({
-            id: entry.id,
-            label: entry.label,
-            detail: entry.available ? "Reposition the focused pane" : entry.unavailableDetail,
-            category: "Focused Pane",
-            kind: entry.available ? "action" : "info",
-            disabled: !entry.available,
-            action: entry.available
-              ? () => {
-                persistLayoutChange(movePaneRelative(currentLayout, focusedPane.instanceId, entry.direction));
-                closeAll({ revertThemePreview: false });
-              }
-              : () => {},
-          });
-        });
-
-        layoutItems.push({
-          id: "layout-swap",
-          label: "Swap With…",
-          detail: dockedPaneIds.length + currentLayout.floating.length > 1
-            ? "Choose another pane to swap positions"
-            : "Need at least two panes",
-          category: "Focused Pane",
-          kind: "action",
-          disabled: dockedPaneIds.length + currentLayout.floating.length <= 1,
-          action: () => {
-            const options = [
-              ...dockedPaneIds,
-              ...currentLayout.floating.map((entry) => entry.instanceId),
-            ]
-              .filter((paneId) => paneId !== focusedPane.instanceId)
-              .map((paneId) => {
-                const instance = findPaneInstance(currentLayout, paneId)!;
-                const isFloating = currentLayout.floating.some((entry) => entry.instanceId === paneId);
-                return {
-                  id: paneId,
-                  label: instance.title || pluginRegistry.panes.get(instance.paneId)?.name || instance.paneId,
-                  detail: isFloating ? "Floating window" : "Docked pane",
-                  description: isFloating ? "Floating window" : "Docked pane",
-                };
-              });
-            if (options.length === 0) return;
-            openPickerRoute({
-              kind: "picker",
-              pickerId: "layout-swap",
-              title: "Swap With…",
-              query: "",
-              selectedIdx: 0,
-              hoveredIdx: null,
-              options,
-              payload: { sourcePaneId: focusedPane.instanceId },
-            });
-          },
-        });
-
-        layoutItems.push({
-          id: "layout-duplicate",
-          label: "Duplicate Pane",
-          detail: "Create another instance next to the focused pane",
-          category: "Focused Pane",
-          kind: "action",
-          action: () => {
-            duplicatePane(focusedPane.instanceId);
-            closeAll({ revertThemePreview: false });
-          },
-        });
-
-        layoutItems.push({
-          id: "layout-close-pane",
-          label: "Close Pane",
-          detail: "Remove the focused pane from the layout",
-          category: "Focused Pane",
-          kind: "action",
-          action: () => {
-            openInlineConfirm({
-              confirmId: "layout-close-pane",
-              title: "Close Pane",
-              body: [`Close "${focusedPane.title || focusedPaneDef.name || focusedPane.instanceId}"?`],
-              confirmLabel: "Close Pane",
-              cancelLabel: "Back",
-              tone: "danger",
-              onConfirm: () => {
-                persistLayoutChange(removePane(currentLayout, focusedPane.instanceId));
-              },
-            });
-          },
-        });
-      } else {
-        layoutItems.push({
-          id: "layout-no-focused-pane",
-          label: "No focused pane",
-          detail: "Focus a pane to show pane-specific layout actions",
-          category: "Focused Pane",
-          kind: "info",
-          action: () => {},
-        });
-      }
-
-      layoutItems.push({
-        id: "layout-undo",
-        label: "Undo Layout Change",
-        detail: (layoutHistory?.past.length ?? 0) > 0 ? "Restore the previous layout state" : "No previous layout state",
-        category: "Current Layout",
-        kind: "action",
-        disabled: (layoutHistory?.past.length ?? 0) === 0,
-        action: () => {
-          if ((layoutHistory?.past.length ?? 0) === 0) return;
-          dispatch({ type: "UNDO_LAYOUT" });
-          closeAll({ revertThemePreview: false });
-        },
-      });
-      layoutItems.push({
-        id: "layout-redo",
-        label: "Redo Layout Change",
-        detail: (layoutHistory?.future.length ?? 0) > 0 ? "Reapply the next layout state" : "No later layout state",
-        category: "Current Layout",
-        kind: "action",
-        disabled: (layoutHistory?.future.length ?? 0) === 0,
-        action: () => {
-          if ((layoutHistory?.future.length ?? 0) === 0) return;
-          dispatch({ type: "REDO_LAYOUT" });
-          closeAll({ revertThemePreview: false });
-        },
-      });
-      layoutItems.push({
-        id: "layout-reset",
-        label: "Reset Current Layout",
-        detail: "Restore the default two-pane layout",
-        category: "Current Layout",
-        kind: "action",
-        action: () => {
-          openInlineConfirm({
-            confirmId: "layout-reset",
-            title: "Reset Current Layout",
-            body: ["Reset the current layout to the default two-pane arrangement?"],
-            confirmLabel: "Reset Layout",
-            cancelLabel: "Back",
-            tone: "danger",
-            onConfirm: () => {
-              persistLayoutChange(cloneLayout(DEFAULT_LAYOUT));
-            },
-          });
-        },
-      });
-      layoutItems.push({
-        id: "layout-gridlock",
-        label: "Gridlock All Windows",
-        detail: currentLayout.floating.length > 0
-          ? "Infer a tiled layout from the current window positions"
-          : "Retile all panes from their current arrangement",
-        category: "Current Layout",
-        kind: "action",
-        action: () => {
-          const { width, height } = pluginRegistry.getTermSizeFn();
-          persistLayoutChange(gridlockAllPanes(currentLayout, { x: 0, y: 0, width, height }));
-          notifyGridlockRevert();
-          closeAll({ revertThemePreview: false });
-        },
-      });
-      layoutItems.push({
-        id: "layout-rename",
-        label: "Rename Layout",
-        detail: "Change the current saved layout name",
-        category: "Current Layout",
-        kind: "action",
-        action: () => openBuiltInWorkflow("rename-layout"),
-      });
-      layoutItems.push({
-        id: "layout-duplicate-layout",
-        label: "Duplicate Layout",
-        detail: "Create a copy of the current layout",
-        category: "Current Layout",
-        kind: "action",
-        action: () => {
-          dispatch({ type: "DUPLICATE_LAYOUT", index: state.config.activeLayoutIndex });
-          closeAll({ revertThemePreview: false });
-        },
-      });
-      layoutItems.push({
-        id: "layout-new",
-        label: "New Layout",
-        detail: "Create a fresh saved layout",
-        category: "Current Layout",
-        kind: "action",
-        action: () => openBuiltInWorkflow("new-layout"),
-      });
-
-      state.config.layouts.forEach((savedLayout, index) => {
-        layoutItems.push({
-          id: `layout-switch:${index}`,
-          label: savedLayout.name,
-          detail: index === state.config.activeLayoutIndex ? "Current layout" : "Switch to this saved layout",
-          right: getLayoutPreview(savedLayout.layout),
-          category: "Saved Layouts",
-          kind: "action",
-          current: index === state.config.activeLayoutIndex,
-          action: () => {
-            dispatch({ type: "SWITCH_LAYOUT", index });
-            closeAll({ revertThemePreview: false });
-          },
-        });
-      });
-
-      items.push(...(match.arg
-        ? fuzzyFilter(layoutItems, match.arg, (item) => `${item.label} ${item.detail} ${item.right || ""}`)
-        : layoutItems));
-    } else if (match && match.command.id === "theme") {
-      const savedThemeId = rootThemeBaseIdRef.current ?? state.config.theme;
-      const themeOptions = getThemeOptions();
-      const filtered = match.arg
-        ? themeOptions.filter((theme) => (
-          theme.name.toLowerCase().includes(match.arg.toLowerCase())
-          || theme.id.includes(match.arg.toLowerCase())
-        ))
-        : themeOptions;
-      filtered.forEach((theme, index) => {
-        const isSaved = theme.id === savedThemeId;
-        if (isSaved) initialIdx = index;
-        items.push({
-          id: `theme:${theme.id}`,
-          label: theme.name,
-          detail: theme.description,
-          category: "Themes",
-          kind: "theme",
-          current: isSaved,
-          themeId: theme.id,
-          action: () => {
-            rootThemeBaseIdRef.current = theme.id;
-            const nextConfig = {
-              ...state.config,
-              theme: theme.id,
-            };
-            dispatch({ type: "SET_THEME", theme: theme.id });
-            void saveConfig(nextConfig);
-            closeAll({ revertThemePreview: false });
-          },
-        });
-      });
-    } else if (match && match.command.id === "security-description") {
-      if (shortcutItem) {
-        items.push(shortcutItem);
-      }
-      if (!match.arg && !shortcutItem) {
-        items.push({
-          id: "search-hint",
-          label: "Type a ticker symbol",
-          detail: "Open security details after resolving a ticker",
-          category: "Search",
-          kind: "info",
-          action: () => {},
-        });
-      } else if (match.arg) {
-        items.push(...localTickerSearchResultItems(match.arg, { limit: 6 }));
+      } else if (match.arg) {
+        items.push(...localTickerSearchResultItems(match.arg, { limit: 6 }));
       }
     } else if (match && isCollectionCommand(match.command.id)) {
       if (shortcutItem) items.push(shortcutItem);
@@ -3300,18 +3575,26 @@ export function CommandBar({
       const recentSymbols = state.recentTickers.slice(0, maxDefaultTickers);
       const recentTickers = recentSymbols
         .map((symbol) => state.tickers.get(symbol))
-        .filter((ticker): ticker is NonNullable<typeof ticker> => ticker != null);
+        .filter((ticker): ticker is NonNullable<typeof ticker> => (
+          ticker != null && createQuickLookLocalTickerCandidates([ticker]).length > 0
+        ));
       if (recentTickers.length < maxDefaultTickers) {
         const seen = new Set(recentSymbols);
         for (const ticker of state.tickers.values()) {
           if (recentTickers.length >= maxDefaultTickers) break;
+          if (createQuickLookLocalTickerCandidates([ticker]).length === 0) continue;
           if (!seen.has(ticker.metadata.ticker)) recentTickers.push(ticker);
         }
       }
-      items.push(...recentTickers.map((ticker) => ({
-        ...mapTickerSearchCandidateToResultItem(createLocalTickerSearchCandidates([ticker])[0]!),
-        category: "Tickers",
-      })));
+      items.push(...recentTickers.flatMap((ticker) => {
+        const candidate = createQuickLookLocalTickerCandidates([ticker])[0];
+        return candidate
+          ? [{
+            ...mapTickerSearchCandidateToResultItem(candidate),
+            category: "Tickers",
+          }]
+          : [];
+      }));
       items.push(...paneShortcutItems());
       for (const command of availableCommands) {
         const item = commandToItem(command);
@@ -3341,19 +3624,15 @@ export function CommandBar({
     activeTickerData,
     activeTickerSymbol,
     availableCommands,
-    closeAll,
+    buildLayoutItems,
+    buildPluginItems,
+    createQuickLookLocalTickerCandidates,
     createPluginCommandItem,
     currentRoute,
-    dispatch,
-    duplicatePane,
     executeCollectionCommand,
     localTickerSearchResultItems,
     nonShortcutPaneTemplateItems,
-    notifyGridlockRevert,
-    openBuiltInWorkflow,
-    openPickerRoute,
     paneShortcutItems,
-    persistLayoutChange,
     pluginCommandItems,
     pluginRegistry,
     rootModeInfo.kind,
@@ -3435,6 +3714,7 @@ export function CommandBar({
             brokerId: activeSearchPortfolio?.brokerId,
             brokerInstanceId: activeSearchPortfolio?.brokerInstanceId,
           },
+          ...QUICK_LOOK_TICKER_SEARCH_OPTIONS,
         });
         if (requestId !== rootSearchRequestIdRef.current) return;
         writeTickerSearchCache(
@@ -3484,6 +3764,7 @@ export function CommandBar({
     }
     return rootResultModel.items;
   }, [rootProviderResults, rootProviderResultsQuery, rootResultModel.items, rootSecurityDescriptionArg]);
+  const orderedRootResults = useMemo(() => orderListResults(rootResults), [rootResults]);
 
   const rootGhostCompletion = !currentRoute && rootShortcutIntent.kind === "inferred-complete"
     ? rootShortcutIntent.completionQuery
@@ -3689,12 +3970,15 @@ export function CommandBar({
 
     if (match.command.id === "theme") {
       return {
-        id: "theme-route",
+        id: "theme-picker",
         label: "Change Theme",
         detail: "Preview and apply themes",
         category: "Themes",
         kind: "command",
-        action: () => openModeRoute("themes", match.arg),
+        action: () => {
+          rootThemeBaseIdRef.current = stateRef.current.config.theme;
+          setRootQuery(match.arg ? `TH ${match.arg}` : "TH ");
+        },
       };
     }
 
@@ -3760,6 +4044,7 @@ export function CommandBar({
     openModeRoute,
     runDirectCommand,
     runSecurityDescriptionShortcut,
+    setRootQuery,
   ]);
 
   const routeListState = useMemo<ListScreenState | null>(() => {
@@ -3775,7 +4060,7 @@ export function CommandBar({
         query: rootQuery,
         selectedIdx: rootSelectedIdx,
         hoveredIdx: rootHoveredIdx,
-        results: orderListResults(rootResults),
+        results: orderedRootResults,
         searching: rootSearching,
         emptyLabel: emptyState.label,
         emptyDetail: emptyState.detail,
@@ -3786,81 +4071,8 @@ export function CommandBar({
 
     if (currentRoute.kind === "mode") {
       switch (currentRoute.screen) {
-        case "themes": {
-          const themeOptions = getThemeOptions();
-          const filtered = currentRoute.query
-            ? themeOptions.filter((theme) => (
-              theme.name.toLowerCase().includes(currentRoute.query.toLowerCase())
-              || theme.id.includes(currentRoute.query.toLowerCase())
-            ))
-            : themeOptions;
-          const results = filtered.map((theme) => ({
-            id: `theme:${theme.id}`,
-            label: theme.name,
-            detail: theme.description,
-            category: "Themes",
-            kind: "theme" as const,
-            current: theme.id === currentRoute.themeBaseId,
-            themeId: theme.id,
-            action: () => {
-              const nextConfig = {
-                ...state.config,
-                theme: theme.id,
-              };
-              dispatch({ type: "SET_THEME", theme: theme.id });
-              void saveConfig(nextConfig);
-              closeAll({ revertThemePreview: false });
-            },
-          }));
-          return {
-            kind: "mode",
-            title: "Change Theme",
-            subtitle: "Preview themes with the keyboard, then save.",
-            query: currentRoute.query,
-            selectedIdx: currentRoute.selectedIdx,
-            hoveredIdx: currentRoute.hoveredIdx,
-            results: orderListResults(results),
-            searching: false,
-            emptyLabel: getEmptyState("themes", currentRoute.query).label,
-            emptyDetail: getEmptyState("themes", currentRoute.query).detail,
-            footerLeft: getScreenFooterLeft(currentRoute),
-            footerRight: getScreenFooterRight(currentRoute),
-          };
-        }
         case "plugins": {
-          const disabledPlugins = state.config.disabledPlugins || [];
-          const toggleable = [...pluginRegistry.allPlugins.values()].filter((plugin) => plugin.toggleable);
-          const filtered = currentRoute.query
-            ? toggleable.filter((plugin) => (
-              plugin.name.toLowerCase().includes(currentRoute.query.toLowerCase())
-              || plugin.id.includes(currentRoute.query.toLowerCase())
-            ))
-            : toggleable;
-          const results = filtered.map((plugin) => {
-            const enabled = !disabledPlugins.includes(plugin.id);
-            const toggleAction = () => {
-              dispatch({ type: "TOGGLE_PLUGIN", pluginId: plugin.id });
-              const nextDisabled = enabled
-                ? [...disabledPlugins, plugin.id]
-                : disabledPlugins.filter((entry) => entry !== plugin.id);
-              if (enabled) {
-                for (const paneId of pluginRegistry.getPluginPaneIds(plugin.id)) {
-                  pluginRegistry.hideWidget(paneId);
-                }
-              }
-              void saveConfig({ ...state.config, disabledPlugins: nextDisabled });
-            };
-            return {
-              id: `plugin:${plugin.id}`,
-              label: plugin.name,
-              detail: plugin.description || "",
-              category: "Plugins",
-              kind: "plugin" as const,
-              checked: enabled,
-              pluginToggle: toggleAction,
-              action: toggleAction,
-            };
-          });
+          const results = buildPluginItems(currentRoute.query);
           return {
             kind: "mode",
             title: "Manage Plugins",
@@ -3877,237 +4089,7 @@ export function CommandBar({
           };
         }
         case "layout": {
-          const currentLayout = state.config.layout;
-          const focusedPane = state.focusedPaneId ? findPaneInstance(currentLayout, state.focusedPaneId) : null;
-          const focusedPaneDef = focusedPane ? pluginRegistry.panes.get(focusedPane.paneId) : null;
-          const dockedPaneIds = getDockedPaneIds(currentLayout);
-          const layoutHistory = state.layoutHistory[state.config.activeLayoutIndex];
-          const layoutSnapshot = JSON.stringify(currentLayout);
-          const canMove = (direction: "left" | "right" | "above" | "below") => (
-            !!focusedPane && JSON.stringify(movePaneRelative(currentLayout, focusedPane.instanceId, direction)) !== layoutSnapshot
-          );
-
-          const layoutItems: ResultItem[] = [];
-          if (focusedPane && focusedPaneDef) {
-            const focusedFloating = currentLayout.floating.find((entry) => entry.instanceId === focusedPane.instanceId);
-            layoutItems.push({
-              id: "layout-toggle-mode",
-              label: focusedFloating ? "Dock Pane" : "Float Pane",
-              detail: focusedFloating ? "Return the focused window to the layout" : "Detach the focused pane into a floating window",
-              category: "Focused Pane",
-              kind: "action",
-              action: () => {
-                const { width, height } = pluginRegistry.getTermSizeFn();
-                const nextLayout = focusedFloating
-                  ? dockPane(currentLayout, focusedPane.instanceId)
-                  : floatPane(currentLayout, focusedPane.instanceId, width, height, focusedPaneDef);
-                persistLayoutChange(nextLayout);
-                closeAll({ revertThemePreview: false });
-              },
-            });
-
-            const moveActions: Array<{
-              id: string;
-              label: string;
-              direction: "left" | "right" | "above" | "below";
-              available: boolean;
-              unavailableDetail: string;
-            }> = [
-              { id: "layout-move-left", label: "Move Left", direction: "left", available: canMove("left"), unavailableDetail: "No column to the left" },
-              { id: "layout-move-right", label: "Move Right", direction: "right", available: canMove("right"), unavailableDetail: "No column to the right" },
-              { id: "layout-move-up", label: "Move Up", direction: "above", available: canMove("above"), unavailableDetail: "No pane above" },
-              { id: "layout-move-down", label: "Move Down", direction: "below", available: canMove("below"), unavailableDetail: "No pane below" },
-            ];
-
-            moveActions.forEach((entry) => {
-              layoutItems.push({
-                id: entry.id,
-                label: entry.label,
-                detail: entry.available ? "Reposition the focused pane" : entry.unavailableDetail,
-                category: "Focused Pane",
-                kind: entry.available ? "action" : "info",
-                disabled: !entry.available,
-                action: entry.available
-                  ? () => {
-                    persistLayoutChange(movePaneRelative(currentLayout, focusedPane.instanceId, entry.direction));
-                    closeAll({ revertThemePreview: false });
-                  }
-                  : () => {},
-              });
-            });
-
-            layoutItems.push({
-              id: "layout-swap",
-              label: "Swap With…",
-              detail: dockedPaneIds.length + currentLayout.floating.length > 1
-                ? "Choose another pane to swap positions"
-                : "Need at least two panes",
-              category: "Focused Pane",
-              kind: "action",
-              disabled: dockedPaneIds.length + currentLayout.floating.length <= 1,
-              action: () => {
-                const options = [
-                  ...dockedPaneIds,
-                  ...currentLayout.floating.map((entry) => entry.instanceId),
-                ]
-                  .filter((paneId) => paneId !== focusedPane.instanceId)
-                  .map((paneId) => {
-                    const instance = findPaneInstance(currentLayout, paneId)!;
-                    return {
-                      id: paneId,
-                      label: instance.title || pluginRegistry.panes.get(instance.paneId)?.name || instance.paneId,
-                      detail: currentLayout.floating.some((entry) => entry.instanceId === paneId) ? "Floating window" : "Docked pane",
-                      description: currentLayout.floating.some((entry) => entry.instanceId === paneId) ? "Floating window" : "Docked pane",
-                    };
-                  });
-                if (options.length === 0) return;
-                openPickerRoute({
-                  kind: "picker",
-                  pickerId: "layout-swap",
-                  title: "Swap With…",
-                  query: "",
-                  selectedIdx: 0,
-                  hoveredIdx: null,
-                  options,
-                  payload: { sourcePaneId: focusedPane.instanceId },
-                });
-              },
-            });
-
-            layoutItems.push({
-              id: "layout-duplicate",
-              label: "Duplicate Pane",
-              detail: "Create another instance next to the focused pane",
-              category: "Focused Pane",
-              kind: "action",
-              action: () => {
-                duplicatePane(focusedPane.instanceId);
-                closeAll({ revertThemePreview: false });
-              },
-            });
-
-            layoutItems.push({
-              id: "layout-close-pane",
-              label: "Close Pane",
-              detail: "Remove the focused pane from the layout",
-              category: "Focused Pane",
-              kind: "action",
-              action: () => {
-                persistLayoutChange(removePane(currentLayout, focusedPane.instanceId));
-                closeAll({ revertThemePreview: false });
-              },
-            });
-          } else {
-            layoutItems.push({
-              id: "layout-no-focused-pane",
-              label: "No focused pane",
-              detail: "Focus a pane to show pane-specific layout actions",
-              category: "Focused Pane",
-              kind: "info",
-              action: () => {},
-            });
-          }
-
-          layoutItems.push({
-            id: "layout-undo",
-            label: "Undo Layout Change",
-            detail: (layoutHistory?.past.length ?? 0) > 0 ? "Restore the previous layout state" : "No previous layout state",
-            category: "Current Layout",
-            kind: "action",
-            disabled: (layoutHistory?.past.length ?? 0) === 0,
-            action: () => {
-              if ((layoutHistory?.past.length ?? 0) === 0) return;
-              dispatch({ type: "UNDO_LAYOUT" });
-              closeAll({ revertThemePreview: false });
-            },
-          });
-          layoutItems.push({
-            id: "layout-redo",
-            label: "Redo Layout Change",
-            detail: (layoutHistory?.future.length ?? 0) > 0 ? "Reapply the next layout state" : "No later layout state",
-            category: "Current Layout",
-            kind: "action",
-            disabled: (layoutHistory?.future.length ?? 0) === 0,
-            action: () => {
-              if ((layoutHistory?.future.length ?? 0) === 0) return;
-              dispatch({ type: "REDO_LAYOUT" });
-              closeAll({ revertThemePreview: false });
-            },
-          });
-          layoutItems.push({
-            id: "layout-reset",
-            label: "Reset Current Layout",
-            detail: "Restore the default two-pane layout",
-            category: "Current Layout",
-            kind: "action",
-            action: () => {
-              persistLayoutChange(cloneLayout(DEFAULT_LAYOUT));
-              closeAll({ revertThemePreview: false });
-            },
-          });
-          layoutItems.push({
-            id: "layout-gridlock",
-            label: "Gridlock All Windows",
-            detail: currentLayout.floating.length > 0
-              ? "Infer a tiled layout from the current window positions"
-              : "Retile all panes from their current arrangement",
-            category: "Current Layout",
-            kind: "action",
-            action: () => {
-              const { width, height } = pluginRegistry.getTermSizeFn();
-              persistLayoutChange(gridlockAllPanes(currentLayout, { x: 0, y: 0, width, height }));
-              notifyGridlockRevert();
-              closeAll({ revertThemePreview: false });
-            },
-          });
-          layoutItems.push({
-            id: "layout-rename",
-            label: "Rename Layout",
-            detail: "Change the current saved layout name",
-            category: "Current Layout",
-            kind: "action",
-            action: () => openBuiltInWorkflow("rename-layout"),
-          });
-          layoutItems.push({
-            id: "layout-duplicate-layout",
-            label: "Duplicate Layout",
-            detail: "Create a copy of the current layout",
-            category: "Current Layout",
-            kind: "action",
-            action: () => {
-              dispatch({ type: "DUPLICATE_LAYOUT", index: state.config.activeLayoutIndex });
-              closeAll({ revertThemePreview: false });
-            },
-          });
-          layoutItems.push({
-            id: "layout-new",
-            label: "New Layout",
-            detail: "Create a fresh saved layout",
-            category: "Current Layout",
-            kind: "action",
-            action: () => openBuiltInWorkflow("new-layout"),
-          });
-
-          state.config.layouts.forEach((savedLayout, index) => {
-            layoutItems.push({
-              id: `layout-switch:${index}`,
-              label: savedLayout.name,
-              detail: index === state.config.activeLayoutIndex ? "Current layout" : "Switch to this saved layout",
-              right: getLayoutPreview(savedLayout.layout),
-              category: "Saved Layouts",
-              kind: "action",
-              current: index === state.config.activeLayoutIndex,
-              action: () => {
-                dispatch({ type: "SWITCH_LAYOUT", index });
-                closeAll({ revertThemePreview: false });
-              },
-            });
-          });
-
-          const results = currentRoute.query
-            ? fuzzyFilter(layoutItems, currentRoute.query, (item) => `${item.label} ${item.detail} ${item.right || ""}`)
-            : layoutItems;
-
+          const results = buildLayoutItems(currentRoute.query);
           return {
             kind: "mode",
             title: "Layout Actions",
@@ -4218,6 +4200,8 @@ export function CommandBar({
     activeMatch,
     activeTickerData,
     activeTickerSymbol,
+    buildLayoutItems,
+    buildPluginItems,
     closeAll,
     createPaneTemplateItem,
     currentRoute,
@@ -4241,7 +4225,7 @@ export function CommandBar({
     rootHoveredIdx,
     rootModeInfo.kind,
     rootQuery,
-    rootResults,
+    orderedRootResults,
     rootSearching,
     rootSelectedIdx,
     rootShortcutIntent,
@@ -4278,8 +4262,9 @@ export function CommandBar({
   }, [currentRoute, routeListState, updateTopRoute]);
 
   const setActiveListQuery = useCallback((nextQuery: string) => {
-    if (!currentRoute) {
-      if (rootModeInfo.kind === "themes" && resolveCommandBarMode(nextQuery, availableCommands).kind !== "themes") {
+    const route = currentRouteRef.current;
+    if (!route) {
+      if (rootModeKindRef.current === "themes" && resolveCommandBarMode(nextQuery, availableCommands).kind !== "themes") {
         clearThemePreview(rootThemeBaseIdRef.current ?? stateRef.current.config.theme);
         rootThemeBaseIdRef.current = null;
       }
@@ -4287,7 +4272,7 @@ export function CommandBar({
       return;
     }
 
-    if (currentRoute.kind === "mode" || currentRoute.kind === "picker" || currentRoute.kind === "pane-settings") {
+    if (route.kind === "mode" || route.kind === "picker" || route.kind === "pane-settings") {
       updateTopRoute((route) => {
         if (route.kind === "mode" || route.kind === "picker" || route.kind === "pane-settings") {
           return { ...route, query: nextQuery, selectedIdx: 0, hoveredIdx: null };
@@ -4295,19 +4280,21 @@ export function CommandBar({
         return route;
       });
     }
-  }, [availableCommands, clearThemePreview, currentRoute, rootModeInfo.kind, setRootQuery, updateTopRoute]);
+  }, [availableCommands, clearThemePreview, setRootQuery, updateTopRoute]);
 
-  const moveListSelection = useCallback((delta: number) => {
+  const applyListSelectionDelta = useCallback((delta: number) => {
     const listState = visibleListStateRef.current;
     if (!listState || listState.results.length === 0 || delta === 0) return;
     const nextIndex = clampListIndex(listState.selectedIdx + delta, listState.results.length);
+    const selectionChanged = nextIndex !== listState.selectedIdx;
+    const hoverChanged = listState.hoveredIdx !== null;
+    if (!selectionChanged && !hoverChanged) return;
     const nextListState = { ...listState, selectedIdx: nextIndex, hoveredIdx: null };
     visibleListStateRef.current = nextListState;
-    previewThemeSelection(nextListState, nextIndex);
 
     if (!currentRouteRef.current) {
-      setRootSelectedIdx(nextIndex);
-      setRootHoveredIdx(null);
+      setRootSelectedIdx((current) => (current === nextIndex ? current : nextIndex));
+      setRootHoveredIdx((current) => (current === null ? current : null));
       return;
     }
     setRouteStack((current) => {
@@ -4317,24 +4304,34 @@ export function CommandBar({
       if (!top || (top.kind !== "mode" && top.kind !== "picker" && top.kind !== "pane-settings")) {
         return current;
       }
+      if (top.selectedIdx === nextIndex && top.hoveredIdx === null) return current;
       next[next.length - 1] = { ...top, selectedIdx: nextIndex, hoveredIdx: null };
       return next;
     });
-  }, [previewThemeSelection]);
+  }, []);
+
+  const moveListSelection = useCallback((delta: number) => {
+    applyListSelectionDelta(delta);
+  }, [applyListSelectionDelta]);
 
   const setHoveredIndex = useCallback((index: number | null) => {
-    if (!currentRoute) {
+    if (!currentRouteRef.current) {
       setRootHoveredIdx((current) => (current === index ? current : index));
       return;
     }
-    updateTopRoute((route) => {
+    setRouteStack((current) => {
+      if (current.length === 0) return current;
+      const next = [...current];
+      const route = next[next.length - 1];
+      if (!route) return current;
       if (route.kind === "mode" || route.kind === "picker" || route.kind === "pane-settings") {
-        if (route.hoveredIdx === index) return route;
-        return { ...route, hoveredIdx: index };
+        if (route.hoveredIdx === index) return current;
+        next[next.length - 1] = { ...route, hoveredIdx: index };
+        return next;
       }
-      return route;
+      return current;
     });
-  }, [currentRoute, updateTopRoute]);
+  }, []);
 
   const handleListScroll = useCallback((event: {
     stopPropagation: () => void;
@@ -4708,6 +4705,29 @@ export function CommandBar({
     disconnectBrokerInstance,
     executeCollectionCommand,
   ]);
+  const activateListSelectionRef = useRef(activateListSelection);
+  activateListSelectionRef.current = activateListSelection;
+
+  const handleListRowMouseDown = useCallback((event: any, item: ResultItem, globalIdx: number) => {
+    event.stopPropagation?.();
+    event.preventDefault?.();
+    if (!currentRouteRef.current) {
+      setRootSelectedIdx((current) => (current === globalIdx ? current : globalIdx));
+    } else {
+      setRouteStack((current) => {
+        if (current.length === 0) return current;
+        const next = [...current];
+        const route = next[next.length - 1];
+        if (!route || (route.kind !== "mode" && route.kind !== "picker" && route.kind !== "pane-settings")) {
+          return current;
+        }
+        if (route.selectedIdx === globalIdx && route.hoveredIdx === globalIdx) return current;
+        next[next.length - 1] = { ...route, selectedIdx: globalIdx, hoveredIdx: globalIdx };
+        return next;
+      });
+    }
+    activateListSelectionRef.current({ item });
+  }, []);
 
   const confirmCurrentRoute = useCallback(async () => {
     if (currentRoute?.kind !== "confirm") return;
@@ -4845,6 +4865,7 @@ export function CommandBar({
         preventDefault: () => void;
       }) => void) => void;
     };
+    if (!keyInput) return undefined;
     const handleKeyPress = (event: {
       name: string;
       sequence?: string;
@@ -5041,6 +5062,27 @@ export function CommandBar({
         return;
       }
 
+      if (themePickerActive) {
+        if (event.name === "up" || (event.ctrl && event.name === "p")) {
+          event.stopPropagation();
+          event.preventDefault();
+          themePickerRef.current?.move(-1);
+          return;
+        }
+        if (event.name === "down" || (event.ctrl && event.name === "n")) {
+          event.stopPropagation();
+          event.preventDefault();
+          themePickerRef.current?.move(1);
+          return;
+        }
+        if (event.name === "return" || event.name === "enter") {
+          event.stopPropagation();
+          event.preventDefault();
+          themePickerRef.current?.commit();
+          return;
+        }
+      }
+
       const activeListState = visibleListStateRef.current;
       if (!activeListState) return;
 
@@ -5108,13 +5150,13 @@ export function CommandBar({
     if (keyInput.onInternal) {
       keyInput.onInternal("keypress", handleKeyPress);
     } else {
-      renderer.keyInput.on("keypress", handleKeyPress);
+      keyInput.on("keypress", handleKeyPress);
     }
     return () => {
       if (keyInput.offInternal) {
         keyInput.offInternal("keypress", handleKeyPress);
       } else {
-        renderer.keyInput.off("keypress", handleKeyPress);
+        keyInput.off("keypress", handleKeyPress);
       }
     };
   }, [
@@ -5134,6 +5176,7 @@ export function CommandBar({
     renderer,
     rootModeInfo.kind,
     setActiveListQuery,
+    themePickerActive,
     updateWorkflowValue,
   ]);
 
@@ -5155,8 +5198,23 @@ export function CommandBar({
     ? routeListState
     : null;
   const showCustomMultiSelectPicker = currentRoute?.kind === "picker" && currentRoute.pickerId === "field-multi-select";
-  const listRows = visibleListState ? buildListRows(visibleListState) : [];
-  const nativeListRows = visibleListState ? buildNativeListRows(visibleListState, listRows) : [];
+  const listRows = useMemo(
+    () => (visibleListState ? buildListRows(visibleListState) : []),
+    [visibleListState?.results],
+  );
+  const nativeListRows = useMemo(
+    () => (visibleListState ? buildNativeListRows(visibleListState, listRows) : []),
+    [listRows, visibleListState?.emptyLabel, visibleListState?.searching],
+  );
+  const listRowIndexByGlobalIndex = useMemo(() => {
+    const indexByGlobalIndex = new Map<number, number>();
+    listRows.forEach((row, index) => {
+      if (row.kind === "item") {
+        indexByGlobalIndex.set(row.globalIdx, index);
+      }
+    });
+    return indexByGlobalIndex;
+  }, [listRows]);
   const workflowBodyHeight = currentRoute?.kind === "workflow"
     ? Math.min(
       Math.max(9, termHeight - (nativePaneChrome ? 7 : 9)),
@@ -5185,26 +5243,30 @@ export function CommandBar({
   const trailingWidth = Math.max(8, Math.min(12, Math.floor(resultsInnerWidth * 0.18)));
   const labelWidth = Math.max(10, resultsInnerWidth - trailingWidth);
   const queryDisplayWidth = Math.max(8, resultsInnerWidth);
-  const nativeSelectedRowIndex = nativePaneChrome && visibleListState
-    ? nativeListRows.findIndex((row) => row.kind === "item" && row.globalIdx === visibleListState.selectedIdx)
+  const selectedListRowIndex = visibleListState
+    ? listRowIndexByGlobalIndex.get(visibleListState.selectedIdx) ?? -1
     : -1;
+  const selectedScrollRowIndex = selectedListRowIndex;
   const bodySlotKey = showCustomMultiSelectPicker
     ? "picker:field-multi-select"
-    : currentRoute?.kind === "picker"
-      ? `picker:${currentRoute.pickerId}`
-      : currentRoute?.kind ?? "root";
+    : themePickerActive
+      ? "theme-picker"
+      : currentRoute?.kind === "picker"
+        ? `picker:${currentRoute.pickerId}`
+        : currentRoute?.kind ?? "root";
 
-  useEffect(() => {
-    if (!nativePaneChrome || nativeSelectedRowIndex < 0) return;
+  useLayoutEffect(() => {
     const scrollBox = nativeListScrollRef.current;
     if (!scrollBox) return;
+    if (scrollBox.verticalScrollBar) scrollBox.verticalScrollBar.visible = false;
+    if (selectedScrollRowIndex < 0) return;
     const viewportHeight = Math.max(1, scrollBox.viewport?.height ?? listBodyHeight);
-    if (nativeSelectedRowIndex < scrollBox.scrollTop) {
-      scrollBox.scrollTo(nativeSelectedRowIndex);
-    } else if (nativeSelectedRowIndex >= scrollBox.scrollTop + viewportHeight) {
-      scrollBox.scrollTo(nativeSelectedRowIndex - viewportHeight + 1);
+    if (selectedScrollRowIndex < scrollBox.scrollTop) {
+      scrollBox.scrollTo(selectedScrollRowIndex);
+    } else if (selectedScrollRowIndex >= scrollBox.scrollTop + viewportHeight) {
+      scrollBox.scrollTo(selectedScrollRowIndex - viewportHeight + 1);
     }
-  }, [listBodyHeight, nativePaneChrome, nativeSelectedRowIndex, visibleListState?.kind, visibleListState?.query]);
+  }, [listBodyHeight, selectedScrollRowIndex, visibleListState?.kind, visibleListState?.query]);
 
   useEffect(() => {
     if (!nativePaneChrome || currentRoute?.kind !== "workflow") return;
@@ -5225,140 +5287,6 @@ export function CommandBar({
     }
   }, [bodyHeight, currentRoute, nativePaneChrome]);
 
-  const renderListBody = () => {
-    if (!visibleListState) return null;
-
-    const allRows = listRows;
-    let visibleRows: CommandBarListRow[];
-    if (nativePaneChrome) {
-      visibleRows = nativeListRows;
-    } else if (visibleListState.searching && allRows.length === 0) {
-      visibleRows = [{ kind: "spinner", id: "searching", label: "Searching…" }];
-    } else if (allRows.length === 0) {
-      visibleRows = [{ kind: "message", id: "empty", label: visibleListState.emptyLabel }];
-    } else {
-      const selectedRowIdx = allRows.findIndex((row) => row.kind === "item" && row.globalIdx === visibleListState.selectedIdx);
-      const halfWindow = Math.floor(listBodyHeight / 2);
-      let windowStart = Math.max(0, Math.min(selectedRowIdx - halfWindow, allRows.length - listBodyHeight));
-      if (windowStart < 0) windowStart = 0;
-      visibleRows = allRows.slice(windowStart, windowStart + listBodyHeight);
-      if (visibleListState.searching) {
-        if (visibleRows.length >= listBodyHeight) {
-          visibleRows = visibleRows.slice(0, listBodyHeight - 1);
-        }
-        visibleRows.push({ kind: "spinner", id: "searching", label: "Searching…" });
-      }
-    }
-
-    while (!nativePaneChrome && visibleRows.length < listBodyHeight) {
-      visibleRows.push({ kind: "filler", id: `filler:${visibleRows.length}` });
-    }
-
-    const renderedRows = (
-      <>
-        {visibleRows.map((row) => {
-          if (row.kind === "filler" || row.kind === "spacer") {
-            return <Box key={row.id} height={1} />;
-          }
-          if (row.kind === "spinner") {
-            return (
-              <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: handleListScroll } : {})}>
-                <Spinner label={row.label} />
-              </Box>
-            );
-          }
-          if (row.kind === "message") {
-            return (
-              <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: handleListScroll } : {})}>
-                <Text fg={paletteText}>{truncateText(row.label, queryDisplayWidth)}</Text>
-              </Box>
-            );
-          }
-          if (row.kind === "heading") {
-            return (
-              <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: handleListScroll } : {})}>
-                <Text attributes={TextAttributes.BOLD} fg={paletteHeadingText}>
-                  {truncateText(row.label, queryDisplayWidth)}
-                </Text>
-              </Box>
-            );
-          }
-
-          const isSelected = row.globalIdx === visibleListState.selectedIdx;
-          const isHovered = row.globalIdx === visibleListState.hoveredIdx && !isSelected;
-          const presentation = getRowPresentation(row.item, isSelected, trailingWidth > 0);
-          const label = truncateText(presentation.label, labelWidth);
-          const trailing = truncateText(presentation.trailing, trailingWidth);
-          return (
-            <Box
-              key={row.item.id}
-              flexDirection="row"
-              height={1}
-              paddingX={contentPadding}
-              backgroundColor={isSelected
-                ? paletteSelectedBg
-                : isHovered
-                  ? paletteHoverBg
-                  : (nativePaneChrome ? panelBg : paletteBg)}
-              onMouseMove={() => setHoveredIndex(row.globalIdx)}
-              onMouseOut={() => setHoveredIndex(null)}
-              {...(!nativePaneChrome ? { onMouseScroll: handleListScroll } : {})}
-              onMouseDown={(event: any) => {
-                event.stopPropagation?.();
-                event.preventDefault?.();
-                if (!currentRoute) {
-                  setRootSelectedIdx(row.globalIdx);
-                } else {
-                  updateTopRoute((route) => {
-                    if (route.kind === "mode" || route.kind === "picker" || route.kind === "pane-settings") {
-                      return { ...route, selectedIdx: row.globalIdx, hoveredIdx: row.globalIdx };
-                    }
-                    return route;
-                  });
-                }
-                activateListSelection({ item: row.item });
-              }}
-              data-command-bar-row-selected={nativePaneChrome && isSelected ? "true" : undefined}
-              style={nativePaneChrome ? { borderRadius: 6 } : undefined}
-            >
-              <Box width={labelWidth}>
-                <Text fg={isSelected ? paletteSelectedText : presentation.primaryMuted ? paletteSubtleText : paletteText}>
-                  {label}
-                </Text>
-              </Box>
-              <Box width={trailingWidth}>
-                <Text fg={isSelected ? paletteSelectedText : paletteSubtleText}>{trailing}</Text>
-              </Box>
-            </Box>
-          );
-        })}
-      </>
-    );
-
-    if (nativePaneChrome) {
-      return (
-        <ScrollBox
-          ref={nativeListScrollRef}
-          flexDirection="column"
-          height={listBodyHeight}
-          scrollY
-        >
-          {renderedRows}
-        </ScrollBox>
-      );
-    }
-
-    return (
-      <Box
-        flexDirection="column"
-        height={listBodyHeight}
-        onMouseScroll={handleListScroll}
-      >
-        {renderedRows}
-      </Box>
-    );
-  };
-
   const renderWorkflowBody = () => {
     if (currentRoute?.kind !== "workflow") return null;
     const visibleFields = getVisibleWorkflowFields(currentRoute.fields, currentRoute.values);
@@ -5436,7 +5364,7 @@ export function CommandBar({
                     borderColor={active ? paletteSelectedBg : paletteBg}
                     backgroundColor={nativePaneChrome ? inputBg : fieldBg}
                     style={nativePaneChrome ? {
-                      border: `1px solid ${active ? colors.borderFocused : colors.border}`,
+                      border: `1px solid ${active ? themeColors.borderFocused : themeColors.border}`,
                       borderRadius: 6,
                       overflow: "hidden",
                     } : undefined}
@@ -5450,7 +5378,7 @@ export function CommandBar({
                         focused={!currentRoute.pending}
                         textColor={paletteText}
                         placeholderColor={paletteSubtleText}
-                        backgroundColor={nativePaneChrome ? inputBg : colors.panel}
+                        backgroundColor={nativePaneChrome ? inputBg : themeColors.panel}
                         flexGrow={1}
                         wrapText
                       />
@@ -5531,7 +5459,7 @@ export function CommandBar({
         })}
         {currentRoute.error && (
           <Box height={1}>
-            <Text fg={colors.negative}>{truncateText(currentRoute.error, queryDisplayWidth)}</Text>
+            <Text fg={themeColors.negative}>{truncateText(currentRoute.error, queryDisplayWidth)}</Text>
           </Box>
         )}
         {currentRoute.pendingLabel && currentRoute.pending && (
@@ -5574,33 +5502,14 @@ export function CommandBar({
   const renderConfirmBody = () => {
     if (currentRoute?.kind !== "confirm") return null;
     return (
-      <Box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
-        {currentRoute.body.map((line, index) => (
-          <Box key={`confirm:${index}`} height={1}>
-            <Text fg={paletteText}>{truncateText(line, queryDisplayWidth)}</Text>
-          </Box>
-        ))}
-        <Box height={1} />
-        {currentRoute.error && (
-          <Box height={1}>
-            <Text fg={colors.negative}>{truncateText(currentRoute.error, queryDisplayWidth)}</Text>
-          </Box>
-        )}
-        {currentRoute.pending && (
-          <Box height={1}>
-            <Spinner label="Working…" />
-          </Box>
-        )}
-        <Box flexGrow={1} />
-        <Box flexDirection="row" gap={1}>
-          <Button
-            label={currentRoute.confirmLabel}
-            variant={currentRoute.tone === "danger" ? "danger" : "primary"}
-            onPress={() => { void confirmCurrentRoute(); }}
-            disabled={currentRoute.pending}
-          />
-        </Box>
-      </Box>
+      <CommandBarConfirmBody
+        route={currentRoute}
+        bodyHeight={bodyHeight}
+        contentPadding={contentPadding}
+        paletteText={paletteText}
+        queryDisplayWidth={queryDisplayWidth}
+        onConfirm={() => { void confirmCurrentRoute(); }}
+      />
     );
   };
 
@@ -5691,10 +5600,9 @@ export function CommandBar({
             <Box flexGrow={1}>
               <Text fg={paletteText} attributes={TextAttributes.BOLD}>
                 {currentRoute?.kind === "mode"
-                  ? currentRoute.screen === "themes" ? "Change Theme"
-                    : currentRoute.screen === "plugins" ? "Manage Plugins"
-                      : currentRoute.screen === "layout" ? "Layout Actions"
-                        : "Security Description"
+                  ? currentRoute.screen === "plugins" ? "Manage Plugins"
+                    : currentRoute.screen === "layout" ? "Layout Actions"
+                      : "Security Description"
                   : currentRoute?.kind === "picker" ? currentRoute.title
                     : currentRoute?.kind === "pane-settings" ? "Pane Settings"
                       : currentRoute?.kind === "workflow" ? currentRoute.title
@@ -5723,61 +5631,80 @@ export function CommandBar({
           )}
           {(visibleListState || currentRoute?.kind === "picker") && visibleListState && (
             <>
-              <Box height={1} paddingX={contentPadding}>
-                <Box
-                  width={queryDisplayWidth}
-                  height={1}
-                  position="relative"
-                  backgroundColor={nativePaneChrome ? undefined : inputBg}
-                  style={nativePaneChrome ? undefined : {
-                    overflow: "hidden",
-                  }}
-                >
-                  <Input
-                    value={visibleListState.query}
-                    onInput={setActiveListQuery}
-                    onChange={setActiveListQuery}
-                    placeholder={visibleListState.kind === "root" ? "Search" : "Filter"}
-                    focused
-                    width={nativePaneChrome ? "100%" : queryDisplayWidth}
-                    backgroundColor={nativePaneChrome ? "transparent" : paletteBg}
-                    focusedBackgroundColor={nativePaneChrome ? "transparent" : paletteBg}
-                    textColor={paletteText}
-                    focusedTextColor={paletteText}
-                    placeholderColor={paletteSubtleText}
-                    cursorColor={colors.textBright}
-                  />
-                  {visibleListState.kind === "root" && rootGhostSuffix && (
-                    <Box
-                      position="absolute"
-                      top={0}
-                      left={Math.max(0, Math.min(rootQuery.length, queryDisplayWidth - 1))}
-                      width={Math.max(0, queryDisplayWidth - Math.min(rootQuery.length, queryDisplayWidth - 1))}
-                      height={1}
-                    >
-                      <Text fg={paletteSubtleText}>
-                        {truncateText(
-                          rootGhostSuffix,
-                          Math.max(0, queryDisplayWidth - Math.min(rootQuery.length, queryDisplayWidth - 1)),
-                        )}
-                      </Text>
-                    </Box>
-                  )}
-                </Box>
-              </Box>
-              <Box height={1} paddingX={contentPadding}>
-                {visibleListState.kind === "root" && rootShortcutFeedback
-                  ? (
-                    <Text fg={paletteSubtleText}>
-                      {truncateText(rootShortcutFeedback, queryDisplayWidth)}
-                    </Text>
-                  )
-                  : null}
-              </Box>
+              <CommandBarListHeader
+                kind={visibleListState.kind}
+                query={visibleListState.query}
+                queryDisplayWidth={queryDisplayWidth}
+                nativePaneChrome={nativePaneChrome}
+                inputBg={inputBg}
+                paletteBg={paletteBg}
+                paletteText={paletteText}
+                paletteSubtleText={paletteSubtleText}
+                cursorColor={themeColors.textBright}
+                contentPadding={contentPadding}
+                rootGhostSuffix={rootGhostSuffix}
+                rootQueryLength={rootQuery.length}
+                rootShortcutFeedback={rootShortcutFeedback}
+                onQueryChange={setActiveListQuery}
+              />
             </>
           )}
 
-          {visibleListState && !showCustomMultiSelectPicker && renderListBody()}
+          {themePickerActive && (
+            <ThemePicker
+              ref={themePickerRef}
+              filter={themePickerFilter}
+              committedThemeId={state.config.theme}
+              height={listBodyHeight}
+              contentPadding={contentPadding}
+              labelWidth={labelWidth}
+              trailingWidth={trailingWidth}
+              queryDisplayWidth={queryDisplayWidth}
+              nativePaneChrome={nativePaneChrome}
+              paletteBg={paletteBg}
+              paletteHoverBg={paletteHoverBg}
+              paletteSelectedBg={paletteSelectedBg}
+              paletteSelectedText={paletteSelectedText}
+              paletteSubtleText={paletteSubtleText}
+              paletteText={paletteText}
+              panelBg={panelBg}
+              onPreview={applyThemePreview}
+              onCommit={(themeId) => {
+                const nextConfig = {
+                  ...stateRef.current.config,
+                  theme: themeId,
+                };
+                commitTheme(themeId);
+                void saveConfig(nextConfig);
+                closeAll({ revertThemePreview: false });
+              }}
+            />
+          )}
+
+          {visibleListState && !themePickerActive && !showCustomMultiSelectPicker && (
+            <CommandBarListBody
+              visibleListState={visibleListState}
+              nativeListRows={nativeListRows}
+              listBodyHeight={listBodyHeight}
+              contentPadding={contentPadding}
+              labelWidth={labelWidth}
+              nativePaneChrome={nativePaneChrome}
+              nativeListScrollRef={nativeListScrollRef}
+              paletteBg={paletteBg}
+              paletteHeadingText={paletteHeadingText}
+              paletteHoverBg={paletteHoverBg}
+              paletteSelectedBg={paletteSelectedBg}
+              paletteSelectedText={paletteSelectedText}
+              paletteSubtleText={paletteSubtleText}
+              paletteText={paletteText}
+              panelBg={panelBg}
+              queryDisplayWidth={queryDisplayWidth}
+              trailingWidth={trailingWidth}
+              onHoverIndex={setHoveredIndex}
+              onListScroll={handleListScroll}
+              onRowMouseDown={handleListRowMouseDown}
+            />
+          )}
           {currentRoute?.kind === "workflow" && renderWorkflowBody()}
           {currentRoute?.kind === "confirm" && renderConfirmBody()}
           {showCustomMultiSelectPicker && renderMultiSelectBody()}