gloomberb 0.5.0 → 0.6.0

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

@@ -1,29 +1,41 @@
+import { Box, Input, ScrollBox, Text, Textarea, useUiCapabilities } from "../../ui";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { RefObject } from "react";
-import { TextAttributes, type InputRenderable, type TextareaRenderable } from "@opentui/core";
-import { useRenderer, useTerminalDimensions } from "@opentui/react";
-import { Spinner } from "../spinner";
-import { Button, NumberField, TextField } from "../ui";
+import { TextAttributes, type InputRenderable, type ScrollBoxRenderable, type TextareaRenderable } from "../../ui";
+import { useNativeRenderer } from "../../ui";
+import { useViewport } from "../../react/input";
+import { Button, NumberField, Spinner, TextField } from "../ui";
+import { NativeSelect, openNativeSelect, type NativeSelectElement } from "../ui/native-select";
 import { ToggleList } from "../toggle-list";
 import {
   colors,
   commandBarBg,
   commandBarHeadingText,
   commandBarHoverBg,
+  commandBarInputBg,
+  commandBarPanelBg,
   commandBarSelectedBg,
   commandBarSelectedText,
   commandBarSubtleText,
   commandBarText,
 } from "../../theme/colors";
-import { getFocusedCollectionId, useAppState, useFocusedTicker } from "../../state/app-context";
+import {
+  getEffectiveThemeId,
+  getFocusedCollectionId,
+  useAppDispatch,
+  useAppSelector,
+  useFocusedTicker,
+  type AppState,
+} from "../../state/app-context";
 import { fuzzyFilter } from "../../utils/fuzzy-search";
 import { commands, getThemeOptions, matchPrefix, type Command } from "./command-registry";
-import { applyTheme } from "../../theme/colors";
+import { applyTheme, getCurrentThemeId } from "../../theme/colors";
 import { exportConfig, importConfig, resetAllData, saveConfig } from "../../data/config-store";
 import type { DataProvider } from "../../types/data-provider";
 import type { TickerRepository } from "../../data/ticker-repository";
 import type { PluginRegistry } from "../../plugins/registry";
 import type { TickerRecord } from "../../types/ticker";
+import type { Quote } from "../../types/financials";
 import type {
   CommandDef,
   PaneSettingField,
@@ -39,8 +51,10 @@ import {
   resolveFollowBindingInstance,
   type LayoutConfig,
 } from "../../types/config";
-import { resolveBrokerConfigFields, type BrokerConfigField } from "../../types/broker";
-import { buildIbkrConfigFromValues } from "../../plugins/ibkr/config";
+import {
+  buildBrokerProfileConfig,
+  validateBrokerProfileValues,
+} from "../../brokers/profile-form";
 import {
   addPaneFloating,
   addPaneToLayout,
@@ -178,7 +192,24 @@ interface ListScreenState {
 
 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 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;
+
+function getDefaultConfigBackupPath(): string {
+  const home = typeof process !== "undefined" ? process.env.HOME : undefined;
+  return `${home || "~"}/gloomberb-config-backup.json`;
+}
 
 function getInputRef(
   store: Record<string, RefObject<InputRenderable | TextareaRenderable | null>>,
@@ -190,10 +221,109 @@ function getInputRef(
   return store[fieldId]!;
 }
 
+function normalizeWorkflowCopy(value?: string): string {
+  return (value ?? "").replace(/\s+/g, " ").trim().toLowerCase();
+}
+
+function getWorkflowFieldDescription(field: CommandBarWorkflowField, active: boolean): string | null {
+  const description = field.description?.trim();
+  if (!description) return null;
+  if (normalizeWorkflowCopy(description) === normalizeWorkflowCopy(field.placeholder)) return null;
+  return field.type === "textarea" && active ? `${description} Ctrl+S submits.` : description;
+}
+
+function isSetAlertWorkflow(route: CommandBarRoute | null): route is CommandBarWorkflowRoute {
+  return route?.kind === "workflow"
+    && route.payload.kind === "plugin-command"
+    && route.payload.actionId === "set-alert";
+}
+
+function normalizeAlertWorkflowSymbol(value: CommandBarFieldValue | undefined): string {
+  return coerceFieldString(value).trim().toUpperCase();
+}
+
+function formatAlertWorkflowPrice(value: number): string {
+  return Number.isFinite(value) ? String(value) : "";
+}
+
+function formatAlertWorkflowQuote(quote: Quote): string {
+  const price = formatAlertWorkflowPrice(quote.price);
+  const exchange = quote.fullExchangeName || quote.exchangeName || quote.listingExchangeName || "";
+  const name = quote.name || quote.symbol;
+  const source = quote.dataSource === "delayed" ? "delayed" : quote.dataSource || "";
+  return [quote.symbol, name, exchange, price, source].filter(Boolean).join("  ");
+}
+
+function summarizeAlertWorkflowQuoteError(symbol: string, error: unknown): string {
+  if (error instanceof Error && error.message.trim()) return error.message;
+  return `No quote found for "${symbol}".`;
+}
+
+function updateAlertWorkflowFieldDescriptions(
+  fields: CommandBarWorkflowField[],
+  descriptions: Partial<Record<"symbol" | "price", string | undefined>>,
+): CommandBarWorkflowField[] {
+  return fields.map((field) => {
+    if (field.id !== "symbol" && field.id !== "price") return field;
+    const description = descriptions[field.id];
+    return field.description === description ? field : { ...field, description };
+  });
+}
+
+function estimateWorkflowBodyRows(route: CommandBarWorkflowRoute): number {
+  const visibleFields = getVisibleWorkflowFields(route.fields, route.values);
+  const introRows = (route.subtitle ? 1 : 0)
+    + (route.description?.length ?? 0)
+    + (route.subtitle || (route.description?.length ?? 0) > 0 ? 1 : 0);
+  const fieldRows = visibleFields.reduce((total, field, index) => {
+    const active = field.id === route.activeFieldId;
+    const controlRows = field.type === "textarea" ? 6 : 1;
+    const descriptionRows = getWorkflowFieldDescription(field, active) ? 1 : 0;
+    const gapRows = index === visibleFields.length - 1 ? 0 : 1;
+    return total + 1 + controlRows + descriptionRows + gapRows;
+  }, 0);
+  const statusRows = (route.error ? 1 : 0) + (route.pending && route.pendingLabel ? 1 : 0);
+  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)));
+}
+
 function getVisibleMultiSelectPickerOptions(
   route: Extract<CommandBarRoute, { kind: "picker" }>,
 ): CommandBarPickerOption[] {
@@ -233,16 +363,68 @@ export function CommandBar({
   quitApp,
   onCheckForUpdates,
 }: CommandBarProps) {
-  const { state, dispatch } = useAppState();
+  const dispatch = useAppDispatch();
+  const config = useAppSelector((state) => state.config);
+  const paneState = useAppSelector((state) => state.paneState);
+  const tickers = useAppSelector((state) => state.tickers);
+  const financials = useAppSelector((state) => state.financials);
+  const focusedPaneId = useAppSelector((state) => state.focusedPaneId);
+  const layoutHistory = useAppSelector((state) => state.layoutHistory);
+  const recentTickers = useAppSelector((state) => state.recentTickers);
+  const commandBarOpen = useAppSelector((state) => state.commandBarOpen);
+  const commandBarQuery = useAppSelector((state) => state.commandBarQuery);
+  const commandBarLaunchRequest = useAppSelector((state) => state.commandBarLaunchRequest);
+  const updateAvailable = useAppSelector((state) => state.updateAvailable);
+  const updateProgress = useAppSelector((state) => state.updateProgress);
+  const updateCheckInProgress = useAppSelector((state) => state.updateCheckInProgress);
+  const updateNotice = useAppSelector((state) => state.updateNotice);
+  const state = useMemo(() => ({
+    config,
+    paneState,
+    tickers,
+    financials,
+    focusedPaneId,
+    layoutHistory,
+    recentTickers,
+    commandBarOpen,
+    commandBarQuery,
+    commandBarLaunchRequest,
+    updateAvailable,
+    updateProgress,
+    updateCheckInProgress,
+    updateNotice,
+  }) as AppState, [
+    commandBarLaunchRequest,
+    commandBarOpen,
+    commandBarQuery,
+    config,
+    financials,
+    focusedPaneId,
+    layoutHistory,
+    paneState,
+    recentTickers,
+    tickers,
+    updateAvailable,
+    updateCheckInProgress,
+    updateNotice,
+    updateProgress,
+  ]);
   const stateRef = useRef(state);
   stateRef.current = state;
   const { symbol: activeTickerSymbol, ticker: activeTickerData, financials: activeFinancials } = useFocusedTicker();
-  const renderer = useRenderer();
-  const { width: termWidth, height: termHeight } = useTerminalDimensions();
+  const renderer = useNativeRenderer();
+  const { width: termWidth, height: termHeight } = useViewport();
+  const { nativePaneChrome, cellWidthPx = 8, cellHeightPx = 18 } = useUiCapabilities();
+  const availableCommands = useMemo(
+    () => nativePaneChrome
+      ? commands.filter((command) => command.id !== "cycle-chart-renderer")
+      : commands,
+    [nativePaneChrome],
+  );
   const [rootQuery, setRootQueryValue] = useState(state.commandBarQuery);
   const rootQueryRef = useRef(rootQuery);
   rootQueryRef.current = rootQuery;
-  const rootModeInfo = resolveCommandBarMode(rootQuery);
+  const rootModeInfo = resolveCommandBarMode(rootQuery, availableCommands);
   const [rootSelectedIdx, setRootSelectedIdx] = useState(0);
   const [rootHoveredIdx, setRootHoveredIdx] = useState<number | null>(null);
   const [rootSearching, setRootSearching] = useState(false);
@@ -257,12 +439,16 @@ export function CommandBar({
   const rootSearchRequestIdRef = useRef(0);
   const rootLastSearchedQueryRef = useRef<string | null>(null);
   const tickerSearchCacheRef = useRef<Map<string, TickerSearchCandidate[]>>(new Map());
+  const alertWorkflowQuoteRequestRef = useRef(0);
   const skipTickerSearchDebounceRef = useRef(false);
   const lastMainBrowseRef = useRef<CommandBarMainSnapshot>({ query: "", selectedIdx: 0 });
   const previousRootSelectionContextRef = useRef<{ query: string; mode: string } | null>(null);
   const previousRootModeRef = useRef(rootModeInfo.kind);
   const rootThemeBaseIdRef = useRef<string | null>(null);
   const workflowInputRefs = useRef<Record<string, RefObject<InputRenderable | TextareaRenderable | null>>>({});
+  const workflowNativeSelectRefs = useRef(new Map<string, NativeSelectElement>());
+  const workflowScrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const nativeListScrollRef = useRef<ScrollBoxRenderable | null>(null);
   const visibleListStateRef = useRef<ListScreenState | null>(null);
   const processedLaunchSequenceRef = useRef<number | null>(null);
   const currentRoute = routeStack[routeStack.length - 1] ?? null;
@@ -271,21 +457,24 @@ export function CommandBar({
   const activeCollectionId = getFocusedCollectionId(state);
   const activePortfolio = state.config.portfolios.find((portfolio) => portfolio.id === activeCollectionId);
 
+  const clearThemePreview = useCallback((themeId: string | null | undefined) => {
+    if (!themeId) return;
+    if (getCurrentThemeId() !== themeId) {
+      applyTheme(themeId);
+    }
+    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) {
-      applyTheme(themeRoute.themeBaseId);
-      dispatch({ type: "SET_THEME", theme: themeRoute.themeBaseId });
+      clearThemePreview(themeRoute.themeBaseId);
       return;
     }
-    const rootThemeBaseId = rootThemeBaseIdRef.current;
-    if (rootThemeBaseId && stateRef.current.config.theme !== rootThemeBaseId) {
-      applyTheme(rootThemeBaseId);
-      dispatch({ type: "SET_THEME", theme: rootThemeBaseId });
-    }
-  }, [dispatch, routeStack]);
+    clearThemePreview(rootThemeBaseIdRef.current);
+  }, [clearThemePreview, routeStack]);
 
   const closeAll = useCallback((options?: { revertThemePreview?: boolean }) => {
     if (options?.revertThemePreview !== false) {
@@ -318,7 +507,10 @@ export function CommandBar({
     setRouteStack((current) => {
       if (current.length === 0) return current;
       const next = [...current];
-      next[next.length - 1] = updater(next[next.length - 1]!);
+      const top = next[next.length - 1]!;
+      const updated = updater(top);
+      if (updated === top) return current;
+      next[next.length - 1] = updated;
       return next;
     });
   }, []);
@@ -330,8 +522,7 @@ export function CommandBar({
     }
 
     if (currentRoute.kind === "mode" && currentRoute.screen === "themes" && currentRoute.themeBaseId) {
-      applyTheme(currentRoute.themeBaseId);
-      dispatch({ type: "SET_THEME", theme: currentRoute.themeBaseId });
+      clearThemePreview(currentRoute.themeBaseId);
     }
 
     if (routeStack.length === 1 && currentRoute.restoreMain) {
@@ -341,7 +532,7 @@ export function CommandBar({
     }
 
     setRouteStack((current) => current.slice(0, -1));
-  }, [closeAll, currentRoute, dispatch, routeStack.length, setRootQuery]);
+  }, [clearThemePreview, closeAll, currentRoute, routeStack.length, setRootQuery]);
 
   const dismissCommandBar = useCallback(() => {
     if (currentRoute) {
@@ -390,9 +581,24 @@ export function CommandBar({
   }, [dispatch]);
 
   const openFixedTickerPane = useCallback((symbol: string) => {
-    pluginRegistry.pinTickerFn(symbol, { floating: true, paneType: "ticker-detail" });
+    pluginRegistry.pinTicker(symbol, { floating: true, paneType: "ticker-detail" });
   }, [pluginRegistry]);
 
+  const previewThemeId = useCallback((themeId: string | undefined) => {
+    if (!themeId) return;
+    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 });
+    }
+  }, [dispatch]);
+
+  const previewThemeSelection = useCallback((listState: ListScreenState, selectedIdx: number) => {
+    previewThemeId(listState.results[selectedIdx]?.themeId);
+  }, [previewThemeId]);
+
   const focusTicker = useCallback((symbol: string, options?: { forceNewPane?: boolean }) => {
     const currentState = stateRef.current;
     const focusedPane = currentState.focusedPaneId
@@ -444,7 +650,7 @@ export function CommandBar({
   }, [dispatch, persistLayoutChange, pluginRegistry]);
 
   const openModeRoute = useCallback((
-    screen: "ticker-search" | "themes" | "plugins" | "layout" | "new-pane",
+    screen: "ticker-search" | "themes" | "plugins" | "layout",
     initialQuery = "",
     payload?: Record<string, unknown>,
   ) => {
@@ -470,6 +676,14 @@ export function CommandBar({
     inputRef.current?.focus?.();
   }, []);
 
+  const setWorkflowNativeSelectRef = useCallback((fieldId: string, element: NativeSelectElement | null) => {
+    if (element) {
+      workflowNativeSelectRefs.current.set(fieldId, element);
+    } else {
+      workflowNativeSelectRefs.current.delete(fieldId);
+    }
+  }, []);
+
   const openWorkflowRoute = useCallback((route: CommandBarWorkflowRoute) => {
     pushRoute({
       ...route,
@@ -659,17 +873,10 @@ export function CommandBar({
       throw new Error(`Unknown broker "${brokerId}".`);
     }
 
-    const requiredFields = resolveBrokerConfigFields(adapter, values).filter((field) => field.required);
-    for (const field of requiredFields) {
-      const nextValue = String(values[field.key] ?? "").trim();
-      if (!nextValue) {
-        throw new Error(`${field.label} is required.`);
-      }
-    }
+    const validationError = validateBrokerProfileValues(adapter, values);
+    if (validationError) throw new Error(validationError);
 
-    const brokerValues = brokerId === "ibkr"
-      ? buildIbkrConfigFromValues(values)
-      : values;
+    const brokerValues = buildBrokerProfileConfig(adapter, values);
     const instance = await pluginRegistry.createBrokerInstanceFn(
       brokerId,
       adapter.name.trim(),
@@ -1242,7 +1449,7 @@ export function CommandBar({
     pluginRegistry,
   ]);
 
-  const runTickerSearchShortcut = useCallback(async (query?: string) => {
+  const runSecurityDescriptionShortcut = useCallback(async (query?: string) => {
     const trimmed = query?.trim() || "";
     if (!trimmed) {
       const inferred = normalizeTickerInput(activeTickerSymbol, query);
@@ -1647,9 +1854,18 @@ export function CommandBar({
     if (launch.kind === "plugin-command") {
       const command = pluginRegistry.commands.get(launch.commandId);
       if (!command?.wizard || command.wizard.length === 0) return;
-      openPluginCommandWorkflow(command);
+      let values: Record<string, string> | undefined;
+      try {
+        values = command.shortcutArg?.parse?.("", {
+          activeTicker: activeTickerSymbol,
+        });
+      } catch {
+        values = undefined;
+      }
+      openPluginCommandWorkflow(command, values ? { values } : undefined);
     }
   }, [
+    activeTickerSymbol,
     openPluginCommandWorkflow,
     pluginRegistry,
     state.commandBarLaunchRequest,
@@ -1959,9 +2175,9 @@ export function CommandBar({
       if (pluginId && disabledPlugins.has(pluginId)) return false;
       const prefix = template.shortcut?.prefix?.toUpperCase();
       if (!prefix) return false;
-      if (upper !== prefix && !upper.startsWith(`${prefix} `)) return false;
       const arg = trimmed.slice(prefix.length).trim();
       const argKind = template.shortcut?.argKind ?? template.shortcut?.argPlaceholder;
+      if (upper !== prefix && (!argKind || !upper.startsWith(`${prefix} `))) return false;
       if (!template.canCreate) return true;
       try {
         const canCreate = template.canCreate(context, arg ? { arg } : undefined);
@@ -1994,11 +2210,11 @@ export function CommandBar({
 
   const rootShortcutIntent = useMemo(() => parseRootShortcutIntent({
     query: rootQuery,
-    commands,
+    commands: availableCommands,
     pluginCommands: getAvailablePluginCommands(),
     paneTemplates: getAvailablePaneShortcutTemplates(rootQuery),
     activeTicker: activeTickerSymbol,
-  }), [activeTickerSymbol, getAvailablePaneShortcutTemplates, getAvailablePluginCommands, rootQuery]);
+  }), [activeTickerSymbol, availableCommands, getAvailablePaneShortcutTemplates, getAvailablePluginCommands, rootQuery]);
 
   const createPaneTemplateItem = useCallback((
     template: PaneTemplateDef,
@@ -2035,7 +2251,7 @@ export function CommandBar({
       id: `pane-template:${template.id}:${arg || ""}`,
       label: displayLabel,
       detail: shortcutLabel ? `${template.description} · ${shortcutLabel}` : template.description,
-      category: options?.category ?? (pluginName ? `${pluginName} Panes` : "New Panes"),
+      category: options?.category ?? (pluginName ? `${pluginName} Panes` : "Panes"),
       kind: "action",
       right: options?.showShortcut ? template.shortcut?.prefix : undefined,
       searchText: `${displayLabel} ${template.label} ${template.paneId} ${template.keywords?.join(" ") || ""} ${shortcutLabel || ""} ${pluginName || ""}`,
@@ -2043,13 +2259,6 @@ export function CommandBar({
     };
   }, [openPaneTemplateDirect, openPaneTemplateWorkflow, pluginRegistry, runPaneTemplateShortcut, shouldOpenTemplateConfig]);
 
-  const paneTemplateItems = useCallback((filterQuery?: string): ResultItem[] => {
-    const items = getAvailablePaneTemplates().map((template) => createPaneTemplateItem(template));
-    return filterQuery
-      ? fuzzyFilter(items, filterQuery, (item) => `${item.label} ${item.detail} ${item.searchText || ""} ${item.right || ""}`)
-      : items;
-  }, [createPaneTemplateItem, getAvailablePaneTemplates]);
-
   const paneShortcutItems = useCallback((options?: {
     filterQuery?: string;
     createOptions?: PaneTemplateCreateOptions;
@@ -2096,10 +2305,9 @@ export function CommandBar({
     command: CommandDef,
     shortcutArg: string,
   ): Record<string, string> => {
-    if (!shortcutArg.trim()) return {};
     return command.shortcutArg?.parse?.(shortcutArg, {
       activeTicker: activeTickerSymbol,
-    }) ?? { shortcut: shortcutArg };
+    }) ?? (shortcutArg.trim() ? { shortcut: shortcutArg } : {});
   }, [activeTickerSymbol]);
 
   const createPluginCommandItem = useCallback((
@@ -2144,7 +2352,8 @@ export function CommandBar({
           return;
         }
         if (command.wizard && command.wizard.length > 0) {
-          openPluginCommandWorkflow(command);
+          const values = parsePluginCommandShortcutArg(command, "");
+          openPluginCommandWorkflow(command, { values });
           return;
         }
         const confirm = resolvePluginCommandConfirm(command);
@@ -2304,7 +2513,7 @@ export function CommandBar({
         });
         return;
       case "export-config": {
-        const exportPath = `${process.env.HOME || "~"}/gloomberb-config-backup.json`;
+        const exportPath = getDefaultConfigBackupPath();
         void exportConfig(state.config, exportPath)
           .then(() => {
             notify(`Config exported to ${exportPath}`, { type: "success" });
@@ -2316,7 +2525,7 @@ export function CommandBar({
         return;
       }
       case "import-config": {
-        const importPath = `${process.env.HOME || "~"}/gloomberb-config-backup.json`;
+        const importPath = getDefaultConfigBackupPath();
         void importConfig(state.config.dataDir, importPath)
           .then((imported) => {
             dispatch({ type: "SET_CONFIG", config: imported });
@@ -2350,8 +2559,8 @@ export function CommandBar({
         void onCheckForUpdates?.();
         closeAll({ revertThemePreview: false });
         return;
-      case "search-ticker":
-        void runTickerSearchShortcut(arg);
+      case "security-description":
+        void runSecurityDescriptionShortcut(arg);
         return;
       case "remove-watchlist":
       case "remove-portfolio": {
@@ -2384,12 +2593,12 @@ export function CommandBar({
     onCheckForUpdates,
     pluginRegistry,
     quitApp,
-    runTickerSearchShortcut,
+    runSecurityDescriptionShortcut,
     executeCollectionCommand,
   ]);
 
-  const activeMatch = matchPrefix(rootQuery);
-  const rootTickerSearchArg = activeMatch?.command.id === "search-ticker" && activeMatch.arg.length >= 1
+  const activeMatch = matchPrefix(rootQuery, availableCommands);
+  const rootSecurityDescriptionArg = activeMatch?.command.id === "security-description" && activeMatch.arg.length >= 1
     ? activeMatch.arg
     : null;
 
@@ -2406,18 +2615,17 @@ export function CommandBar({
     if (currentRoute) return;
 
     const previousMode = previousRootModeRef.current;
-    if (rootModeInfo.kind === "themes" && previousMode !== "themes") {
+    if (rootModeInfo.kind === "themes" && (previousMode !== "themes" || !rootThemeBaseIdRef.current)) {
       rootThemeBaseIdRef.current = state.config.theme;
     } else if (rootModeInfo.kind !== "themes" && previousMode === "themes") {
       const rootThemeBaseId = rootThemeBaseIdRef.current;
-      if (rootThemeBaseId && state.config.theme !== rootThemeBaseId) {
-        applyTheme(rootThemeBaseId);
-        dispatch({ type: "SET_THEME", theme: rootThemeBaseId });
+      if (rootThemeBaseId && getEffectiveThemeId(state) !== rootThemeBaseId) {
+        clearThemePreview(rootThemeBaseId);
       }
       rootThemeBaseIdRef.current = null;
     }
     previousRootModeRef.current = rootModeInfo.kind;
-  }, [currentRoute, dispatch, rootModeInfo.kind, state.config.theme]);
+  }, [clearThemePreview, currentRoute, rootModeInfo.kind, state.config.theme, state.themePreview]);
 
   const tickerSearchRouteQuery = currentRoute?.kind === "mode" && currentRoute.screen === "ticker-search"
     ? currentRoute.query
@@ -2597,9 +2805,9 @@ export function CommandBar({
         case "check-for-updates":
           if (state.updateProgress?.phase === "downloading") return `Downloading v${state.updateAvailable?.version}: ${state.updateProgress.percent ?? 0}%`;
           if (state.updateProgress?.phase === "replacing") return "Installing update";
-          if (state.updateProgress?.phase === "done") return "Update installed - restart to apply";
+          if (state.updateProgress?.phase === "done") return state.updateProgress.message ?? "Update installed - restart to apply";
           if (state.updateProgress?.phase === "error") return `Update failed: ${state.updateProgress.error}`;
-          if (state.updateCheckInProgress) return "Checking GitHub releases now";
+          if (state.updateCheckInProgress) return "Checking releases now";
           if (state.updateAvailable) return `Latest available: v${state.updateAvailable.version}`;
           if (state.updateNotice) return state.updateNotice;
           return command.description;
@@ -2651,17 +2859,17 @@ export function CommandBar({
       }
 
       const { command } = rootShortcutIntent;
-      if (command.id === "search-ticker") {
+      if (command.id === "security-description") {
         const inferredSymbol = normalizeTickerInput(activeTickerSymbol, undefined);
         if (!rootShortcutIntent.argText && inferredSymbol) {
           return {
-            id: "search-ticker:inferred",
+            id: "security-description:inferred",
             label: inferredSymbol,
-            detail: `Open ${inferredSymbol}`,
+            detail: `Open security details for ${inferredSymbol}`,
             category: "Search",
             kind: "action",
             right: command.prefix,
-            action: () => { void runTickerSearchShortcut(inferredSymbol); },
+            action: () => { void runSecurityDescriptionShortcut(inferredSymbol); },
           };
         }
         return null;
@@ -2724,13 +2932,29 @@ export function CommandBar({
     }
 
     const items: ResultItem[] = [];
-    const match = matchPrefix(rootQuery);
+    const match = matchPrefix(rootQuery, availableCommands);
     let initialIdx = 0;
     const shortcutItem = buildRootShortcutItem();
 
-    if (
+    if (rootShortcutIntent.kind !== "none" && rootShortcutIntent.source === "pane-template" && shortcutItem) {
+      const matchingTemplates = getAvailablePaneShortcutTemplates(rootQuery);
+      const templateItems = matchingTemplates.length > 0
+        ? matchingTemplates.map((template) => createPaneTemplateItem(template, {
+          category: "Panes",
+          createOptions: rootShortcutIntent.argText ? { arg: rootShortcutIntent.argText } : undefined,
+          showShortcut: true,
+          shortcutExecution: true,
+        }))
+        : [shortcutItem];
+      const seenItemIds = new Set<string>();
+      for (const item of templateItems) {
+        if (seenItemIds.has(item.id)) continue;
+        seenItemIds.add(item.id);
+        items.push(item);
+      }
+    } else if (
       rootShortcutIntent.kind !== "none"
-      && (rootShortcutIntent.source === "pane-template" || rootShortcutIntent.source === "plugin-command")
+      && rootShortcutIntent.source === "plugin-command"
       && shortcutItem
     ) {
       items.push(shortcutItem);
@@ -2768,8 +2992,6 @@ export function CommandBar({
           action: toggleAction,
         });
       }
-    } else if (match && match.command.id === "new-pane") {
-      items.push(...paneTemplateItems(match.arg));
     } else if (match && match.command.id === "layout") {
       const currentLayout = state.config.layout;
       const focusedPane = state.focusedPaneId ? findPaneInstance(currentLayout, state.focusedPaneId) : null;
@@ -3052,7 +3274,7 @@ export function CommandBar({
           },
         });
       });
-    } else if (match && match.command.id === "search-ticker") {
+    } else if (match && match.command.id === "security-description") {
       if (shortcutItem) {
         items.push(shortcutItem);
       }
@@ -3060,7 +3282,7 @@ export function CommandBar({
         items.push({
           id: "search-hint",
           label: "Type a ticker symbol",
-          detail: "Search Yahoo Finance and connected brokers",
+          detail: "Open security details after resolving a ticker",
           category: "Search",
           kind: "info",
           action: () => {},
@@ -3091,7 +3313,7 @@ export function CommandBar({
         category: "Tickers",
       })));
       items.push(...paneShortcutItems());
-      for (const command of commands) {
+      for (const command of availableCommands) {
         const item = commandToItem(command);
         if (item) items.push(item);
       }
@@ -3099,7 +3321,7 @@ export function CommandBar({
       items.push(...pluginCommandItems());
     } else {
       const tickerItems = localTickerSearchResultItems(undefined, { category: "Tickers" });
-      const commandItems = commands
+      const commandItems = availableCommands
         .map((command) => commandToItem(command))
         .filter((item): item is ResultItem => item !== null);
       const allItems = [
@@ -3118,6 +3340,7 @@ export function CommandBar({
     activeCollectionId,
     activeTickerData,
     activeTickerSymbol,
+    availableCommands,
     closeAll,
     createPluginCommandItem,
     currentRoute,
@@ -3130,7 +3353,6 @@ export function CommandBar({
     openBuiltInWorkflow,
     openPickerRoute,
     paneShortcutItems,
-    paneTemplateItems,
     persistLayoutChange,
     pluginCommandItems,
     pluginRegistry,
@@ -3138,7 +3360,7 @@ export function CommandBar({
     rootQuery,
     rootShortcutIntent,
     runDirectCommand,
-    runTickerSearchShortcut,
+    runSecurityDescriptionShortcut,
     state,
     tickerActionItems,
   ]);
@@ -3175,7 +3397,7 @@ export function CommandBar({
       return;
     }
 
-    if (!rootTickerSearchArg) {
+    if (!rootSecurityDescriptionArg) {
       setRootSearching(false);
       setRootProviderResults(null);
       setRootProviderResultsQuery(null);
@@ -3184,7 +3406,7 @@ export function CommandBar({
       return;
     }
 
-    const searchQuery = rootTickerSearchArg;
+    const searchQuery = rootSecurityDescriptionArg;
     if (rootSearchTimerRef.current) clearTimeout(rootSearchTimerRef.current);
     if (rootLastSearchedQueryRef.current === searchQuery) {
       return;
@@ -3250,18 +3472,18 @@ export function CommandBar({
     currentRoute,
     dataProvider,
     readTickerSearchCache,
-    rootTickerSearchArg,
+    rootSecurityDescriptionArg,
     state.config.portfolios,
     state.tickers,
     writeTickerSearchCache,
   ]);
 
   const rootResults = useMemo(() => {
-    if (rootTickerSearchArg && rootProviderResultsQuery === rootTickerSearchArg && rootProviderResults) {
+    if (rootSecurityDescriptionArg && rootProviderResultsQuery === rootSecurityDescriptionArg && rootProviderResults) {
       return rootProviderResults;
     }
     return rootResultModel.items;
-  }, [rootProviderResults, rootProviderResultsQuery, rootResultModel.items, rootTickerSearchArg]);
+  }, [rootProviderResults, rootProviderResultsQuery, rootResultModel.items, rootSecurityDescriptionArg]);
 
   const rootGhostCompletion = !currentRoute && rootShortcutIntent.kind === "inferred-complete"
     ? rootShortcutIntent.completionQuery
@@ -3302,14 +3524,14 @@ export function CommandBar({
         : `Shortcut: ${rootShortcutIntent.label}`;
     }
 
-    if (rootShortcutIntent.command.id === "search-ticker") {
+    if (rootShortcutIntent.command.id === "security-description") {
       const symbol = normalizeTickerInput(activeTickerSymbol, rootShortcutIntent.argText);
       if (symbol) {
         return rootShortcutIntent.kind === "inferred-complete"
-          ? `Shortcut: Open ${symbol} · Tab to accept`
-          : `Shortcut: Open ${symbol}`;
+          ? `Shortcut: DES ${symbol} · Tab to accept`
+          : `Shortcut: DES ${symbol}`;
       }
-      return "Shortcut: Search ticker";
+      return "Shortcut: Description";
     }
 
     if (isCollectionCommand(rootShortcutIntent.command.id)) {
@@ -3351,7 +3573,7 @@ export function CommandBar({
   const acceptRootShortcutTab = useCallback((): boolean => {
     const intent = parseRootShortcutIntent({
       query: rootQueryRef.current,
-      commands,
+      commands: availableCommands,
       pluginCommands: getAvailablePluginCommands(),
       paneTemplates: getAvailablePaneShortcutTemplates(rootQueryRef.current),
       activeTicker: activeTickerSymbol,
@@ -3381,7 +3603,7 @@ export function CommandBar({
       return false;
     }
 
-    if (intent.command.id === "search-ticker") {
+    if (intent.command.id === "security-description") {
       openModeRoute("ticker-search", intent.argText);
       return true;
     }
@@ -3395,6 +3617,7 @@ export function CommandBar({
     return false;
   }, [
     activeTickerSymbol,
+    availableCommands,
     getAvailablePluginCommands,
     getAvailablePaneShortcutTemplates,
     openModeRoute,
@@ -3405,7 +3628,7 @@ export function CommandBar({
   const resolveImmediateRootSelection = useCallback((query: string): ResultItem | null => {
     const intent = parseRootShortcutIntent({
       query,
-      commands,
+      commands: availableCommands,
       pluginCommands: getAvailablePluginCommands(),
       paneTemplates: getAvailablePaneShortcutTemplates(query),
       activeTicker: activeTickerSymbol,
@@ -3425,49 +3648,45 @@ export function CommandBar({
       });
     }
 
-    const match = matchPrefix(query);
+    const match = matchPrefix(query, availableCommands);
     if (!match) {
       return null;
     }
 
-    if (match.command.id === "search-ticker") {
+    if (match.command.id === "security-description") {
       if (!match.arg) {
         const inferredTicker = normalizeTickerInput(activeTickerSymbol, undefined);
         if (inferredTicker) {
           return {
-            id: "search-ticker:inferred",
+            id: "security-description:inferred",
             label: inferredTicker,
-            detail: `Open ${inferredTicker}`,
+            detail: `Open security details for ${inferredTicker}`,
             category: "Search",
             kind: "action",
             right: match.command.prefix,
-            action: () => { void runTickerSearchShortcut(inferredTicker); },
+            action: () => { void runSecurityDescriptionShortcut(inferredTicker); },
           };
         }
         return {
-          id: "search-ticker-route",
-          label: "Search Ticker",
-          detail: "Search Yahoo Finance and connected brokers",
+          id: "security-description-route",
+          label: "Description",
+          detail: "Open security details for a ticker",
           category: "Search",
           kind: "command",
           action: () => openModeRoute("ticker-search", ""),
         };
       }
       return {
-        id: `search-ticker:${match.arg}`,
-        label: `Open ${match.arg.toUpperCase()}`,
-        detail: "Resolve the symbol exactly or open inline search",
+        id: `security-description:${match.arg}`,
+        label: `DES ${match.arg.toUpperCase()}`,
+        detail: "Open security details or resolve the ticker",
         category: "Search",
         kind: "command",
         right: match.command.prefix,
-        action: () => { void runTickerSearchShortcut(match.arg); },
+        action: () => { void runSecurityDescriptionShortcut(match.arg); },
       };
     }
 
-    if (match.command.id === "new-pane") {
-      return paneTemplateItems(match.arg)[0] ?? null;
-    }
-
     if (match.command.id === "theme") {
       return {
         id: "theme-route",
@@ -3534,13 +3753,13 @@ export function CommandBar({
     createPaneTemplateItem,
     createPluginCommandItem,
     activeTickerSymbol,
+    availableCommands,
     executeCollectionCommand,
     getAvailablePluginCommands,
     getAvailablePaneShortcutTemplates,
     openModeRoute,
-    paneTemplateItems,
     runDirectCommand,
-    runTickerSearchShortcut,
+    runSecurityDescriptionShortcut,
   ]);
 
   const routeListState = useMemo<ListScreenState | null>(() => {
@@ -3548,7 +3767,7 @@ export function CommandBar({
       const emptyState = getEmptyState(
         rootModeInfo.kind,
         rootQuery,
-        activeMatch?.command.id === "search-ticker" ? activeMatch.arg : undefined,
+        activeMatch?.command.id === "security-description" ? activeMatch.arg : undefined,
       );
       return {
         kind: "root",
@@ -3904,23 +4123,6 @@ export function CommandBar({
             footerRight: getScreenFooterRight(currentRoute),
           };
         }
-        case "new-pane": {
-          const results = paneTemplateItems(currentRoute.query);
-          return {
-            kind: "mode",
-            title: "New Pane",
-            subtitle: "Create panes from plugin-defined templates.",
-            query: currentRoute.query,
-            selectedIdx: currentRoute.selectedIdx,
-            hoveredIdx: currentRoute.hoveredIdx,
-            results: orderListResults(results),
-            searching: false,
-            emptyLabel: getEmptyState("new-pane", currentRoute.query).label,
-            emptyDetail: getEmptyState("new-pane", currentRoute.query).detail,
-            footerLeft: getScreenFooterLeft(currentRoute),
-            footerRight: getScreenFooterRight(currentRoute),
-          };
-        }
         case "ticker-search": {
           const results = currentRoute.query.trim()
             ? tickerSearchResults.map((item) => adaptTickerSearchRouteResult(item, currentRoute.payload))
@@ -3928,8 +4130,8 @@ export function CommandBar({
           const emptyState = getEmptyState("search", currentRoute.query, currentRoute.query);
           return {
             kind: "mode",
-            title: "Search Ticker",
-            subtitle: "Search Yahoo Finance and connected brokers.",
+            title: "Security Description",
+            subtitle: "Resolve a ticker, then open its detail pane.",
             query: currentRoute.query,
             selectedIdx: currentRoute.selectedIdx,
             hoveredIdx: currentRoute.hoveredIdx,
@@ -4022,6 +4224,7 @@ export function CommandBar({
     dispatch,
     duplicatePane,
     executeCollectionCommand,
+    getAvailablePaneShortcutTemplates,
     getAvailablePaneTemplates,
     localTickerSearchResultItems,
     mapTickerSearchCandidateToResultItem,
@@ -4032,7 +4235,6 @@ export function CommandBar({
     openPaneSettingsRoute,
     openPickerRoute,
     paneShortcutItems,
-    paneTemplateItems,
     persistLayoutChange,
     pluginCommandItems,
     pluginRegistry,
@@ -4052,21 +4254,6 @@ export function CommandBar({
   ]);
   visibleListStateRef.current = routeListState;
 
-  useEffect(() => {
-    if (!state.commandBarOpen) return;
-    if (!routeListState) return;
-    const selected = currentRoute?.kind === "mode" && currentRoute.screen === "themes"
-      ? routeListState.results[currentRoute.selectedIdx]
-      : !currentRoute && rootModeInfo.kind === "themes"
-        ? routeListState.results[rootSelectedIdx]
-        : null;
-    if (!selected?.themeId) return;
-    if (selected?.themeId && state.config.theme !== selected.themeId) {
-      applyTheme(selected.themeId);
-      dispatch({ type: "SET_THEME", theme: selected.themeId });
-    }
-  }, [currentRoute, dispatch, rootModeInfo.kind, rootSelectedIdx, routeListState, state.commandBarOpen, state.config.theme]);
-
   useEffect(() => {
     if (currentRoute?.kind !== "workflow") return;
     ensureRouteFieldFocus(currentRoute);
@@ -4092,6 +4279,10 @@ export function CommandBar({
 
   const setActiveListQuery = useCallback((nextQuery: string) => {
     if (!currentRoute) {
+      if (rootModeInfo.kind === "themes" && resolveCommandBarMode(nextQuery, availableCommands).kind !== "themes") {
+        clearThemePreview(rootThemeBaseIdRef.current ?? stateRef.current.config.theme);
+        rootThemeBaseIdRef.current = null;
+      }
       setRootQuery(nextQuery);
       return;
     }
@@ -4104,14 +4295,18 @@ export function CommandBar({
         return route;
       });
     }
-  }, [currentRoute, setRootQuery, updateTopRoute]);
+  }, [availableCommands, clearThemePreview, currentRoute, rootModeInfo.kind, setRootQuery, updateTopRoute]);
 
   const moveListSelection = useCallback((delta: number) => {
     const listState = visibleListStateRef.current;
     if (!listState || listState.results.length === 0 || delta === 0) return;
-    const maxIndex = listState.results.length - 1;
+    const nextIndex = clampListIndex(listState.selectedIdx + delta, listState.results.length);
+    const nextListState = { ...listState, selectedIdx: nextIndex, hoveredIdx: null };
+    visibleListStateRef.current = nextListState;
+    previewThemeSelection(nextListState, nextIndex);
+
     if (!currentRouteRef.current) {
-      setRootSelectedIdx((current) => Math.max(0, Math.min(current + delta, maxIndex)));
+      setRootSelectedIdx(nextIndex);
       setRootHoveredIdx(null);
       return;
     }
@@ -4122,19 +4317,19 @@ export function CommandBar({
       if (!top || (top.kind !== "mode" && top.kind !== "picker" && top.kind !== "pane-settings")) {
         return current;
       }
-      const nextIndex = Math.max(0, Math.min(top.selectedIdx + delta, maxIndex));
       next[next.length - 1] = { ...top, selectedIdx: nextIndex, hoveredIdx: null };
       return next;
     });
-  }, []);
+  }, [previewThemeSelection]);
 
   const setHoveredIndex = useCallback((index: number | null) => {
     if (!currentRoute) {
-      setRootHoveredIdx(index);
+      setRootHoveredIdx((current) => (current === index ? current : index));
       return;
     }
     updateTopRoute((route) => {
       if (route.kind === "mode" || route.kind === "picker" || route.kind === "pane-settings") {
+        if (route.hoveredIdx === index) return route;
         return { ...route, hoveredIdx: index };
       }
       return route;
@@ -4185,6 +4380,111 @@ export function CommandBar({
     });
   }, []);
 
+  const alertWorkflowActive = isSetAlertWorkflow(currentRoute);
+  const alertWorkflowSymbol = alertWorkflowActive
+    ? normalizeAlertWorkflowSymbol(currentRoute.values.symbol)
+    : "";
+
+  useEffect(() => {
+    if (!alertWorkflowActive) return;
+
+    const requestId = alertWorkflowQuoteRequestRef.current + 1;
+    alertWorkflowQuoteRequestRef.current = requestId;
+
+    if (!alertWorkflowSymbol) {
+      updateTopRoute((route) => {
+        if (!isSetAlertWorkflow(route)) return route;
+        return {
+          ...route,
+          fields: updateAlertWorkflowFieldDescriptions(route.fields, {
+            symbol: "Enter a symbol to validate it.",
+            price: "Target fills from the current price after the symbol resolves.",
+          }),
+          payloadMeta: {
+            ...(route.payloadMeta ?? {}),
+            alertQuoteSymbol: "",
+            alertQuoteStatus: "idle",
+          },
+        };
+      });
+      return;
+    }
+
+    updateTopRoute((route) => {
+      if (!isSetAlertWorkflow(route)) return route;
+      if (normalizeAlertWorkflowSymbol(route.values.symbol) !== alertWorkflowSymbol) return route;
+      return {
+        ...route,
+        fields: updateAlertWorkflowFieldDescriptions(route.fields, {
+          symbol: `Checking ${alertWorkflowSymbol}...`,
+          price: "Target fills from the current price after the symbol resolves.",
+        }),
+        payloadMeta: {
+          ...(route.payloadMeta ?? {}),
+          alertQuoteSymbol: alertWorkflowSymbol,
+          alertQuoteStatus: "checking",
+        },
+      };
+    });
+
+    void dataProvider.getQuote(alertWorkflowSymbol, "")
+      .then((quote) => {
+        if (alertWorkflowQuoteRequestRef.current !== requestId) return;
+        if (!quote || typeof quote.price !== "number" || !Number.isFinite(quote.price)) {
+          throw new Error(`No quote found for "${alertWorkflowSymbol}".`);
+        }
+
+        const quotePrice = formatAlertWorkflowPrice(quote.price);
+        updateTopRoute((route) => {
+          if (!isSetAlertWorkflow(route)) return route;
+          if (normalizeAlertWorkflowSymbol(route.values.symbol) !== alertWorkflowSymbol) return route;
+
+          const currentPrice = coerceFieldString(route.values.price).trim();
+          const previousAutoPrice = String(route.payloadMeta?.alertAutoPrice ?? "");
+          const shouldPrefill = currentPrice.length === 0 || currentPrice === previousAutoPrice;
+          const nextValues = shouldPrefill
+            ? { ...route.values, price: quotePrice }
+            : route.values;
+
+          return {
+            ...route,
+            values: nextValues,
+            fields: updateAlertWorkflowFieldDescriptions(route.fields, {
+              symbol: formatAlertWorkflowQuote(quote),
+              price: `Current price ${quotePrice}; edit to set the target.`,
+            }),
+            payloadMeta: {
+              ...(route.payloadMeta ?? {}),
+              alertQuoteSymbol: alertWorkflowSymbol,
+              alertQuoteStatus: "valid",
+              alertAutoPrice: quotePrice,
+            },
+          };
+        });
+      })
+      .catch((error) => {
+        if (alertWorkflowQuoteRequestRef.current !== requestId) return;
+        const message = summarizeAlertWorkflowQuoteError(alertWorkflowSymbol, error);
+        updateTopRoute((route) => {
+          if (!isSetAlertWorkflow(route)) return route;
+          if (normalizeAlertWorkflowSymbol(route.values.symbol) !== alertWorkflowSymbol) return route;
+          return {
+            ...route,
+            fields: updateAlertWorkflowFieldDescriptions(route.fields, {
+              symbol: message,
+              price: undefined,
+            }),
+            payloadMeta: {
+              ...(route.payloadMeta ?? {}),
+              alertQuoteSymbol: alertWorkflowSymbol,
+              alertQuoteStatus: "invalid",
+              alertQuoteError: message,
+            },
+          };
+        });
+      });
+  }, [alertWorkflowActive, alertWorkflowSymbol, dataProvider, updateTopRoute]);
+
   const moveWorkflowFocus = useCallback((delta: number) => {
     if (currentRoute?.kind !== "workflow") return;
     syncActiveWorkflowTextarea(currentRoute);
@@ -4602,6 +4902,18 @@ export function CommandBar({
         const activeField = visibleFields.find((field) => field.id === currentRoute.activeFieldId) ?? visibleFields[0];
         const activeTextarea = activeField?.type === "textarea";
 
+        if (isPlainBackspace(event)) {
+          const activeValue = activeField
+            ? getWorkflowFieldStringValue(activeField, currentRoute.values[activeField.id])
+            : "";
+          if (!activeField || !isWorkflowTextField(activeField) || activeValue.length === 0) {
+            event.stopPropagation();
+            event.preventDefault();
+            popRoute();
+            return;
+          }
+        }
+
         if (event.name === "tab") {
           event.stopPropagation();
           event.preventDefault();
@@ -4641,11 +4953,19 @@ export function CommandBar({
           return;
         }
 
-        if (event.name === "return" || event.name === "enter") {
+        if (
+          event.name === "return"
+          || event.name === "enter"
+          || (nativePaneChrome && event.name === "space" && activeField?.type === "select")
+        ) {
           if (!activeField) return;
           if (activeField.type === "select" || activeField.type === "multi-select" || activeField.type === "ordered-multi-select" || activeField.type === "toggle") {
             event.stopPropagation();
             event.preventDefault();
+            if (nativePaneChrome && activeField.type === "select") {
+              openNativeSelect(workflowNativeSelectRefs.current.get(activeField.id));
+              return;
+            }
             openWorkflowFieldPicker(currentRoute, activeField);
             return;
           }
@@ -4670,7 +4990,8 @@ export function CommandBar({
         if (currentRoute.pickerId === "field-multi-select" && (event.name === "space" || event.sequence === " ")) {
           event.stopPropagation();
           event.preventDefault();
-          const selected = routeListState?.results[currentRoute.selectedIdx];
+          const listState = visibleListStateRef.current;
+          const selected = listState?.results[listState.selectedIdx];
           if (!selected) return;
           handleMultiSelectToggle(selected.id);
           return;
@@ -4720,7 +5041,8 @@ export function CommandBar({
         return;
       }
 
-      if (!routeListState) return;
+      const activeListState = visibleListStateRef.current;
+      if (!activeListState) return;
 
       if (!currentRoute && event.name === "tab") {
         if (acceptRootShortcutTab()) {
@@ -4754,7 +5076,7 @@ export function CommandBar({
       if ((event.ctrl && event.name === "w") || (event.meta && (event.name === "h" || event.name === "u"))) {
         event.stopPropagation();
         event.preventDefault();
-        const trimmed = routeListState.query.replace(/\s+$/, "");
+        const trimmed = activeListState.query.replace(/\s+$/, "");
         const nextQuery = trimmed.replace(/[^\s]+$/, "").replace(/\s+$/, "");
         setActiveListQuery(nextQuery);
         return;
@@ -4765,7 +5087,7 @@ export function CommandBar({
       if (pluginToggleMode && event.name === "space") {
         event.stopPropagation();
         event.preventDefault();
-        const selected = routeListState.results[routeListState.selectedIdx];
+        const selected = activeListState.results[activeListState.selectedIdx];
         if (selected?.pluginToggle) {
           void selected.pluginToggle();
         }
@@ -4806,21 +5128,20 @@ export function CommandBar({
     handleMultiSelectToggle,
     moveListSelection,
     moveWorkflowFocus,
+    nativePaneChrome,
     openWorkflowFieldPicker,
     popRoute,
     renderer,
     rootModeInfo.kind,
-    routeListState,
     setActiveListQuery,
     updateWorkflowValue,
   ]);
 
-  const barWidth = Math.max(42, Math.min(72, termWidth - 8, Math.floor(termWidth * 0.68)));
-  const bodyHeight = Math.min(16, Math.max(9, termHeight - 9));
-  const barHeight = bodyHeight + 7;
-  const barLeft = Math.max(4, Math.floor((termWidth - barWidth) / 2));
-  const barTop = Math.max(1, Math.floor((termHeight - barHeight) / 2));
-  const contentPadding = 3;
+  const barWidth = nativePaneChrome
+    ? Math.max(46, Math.min(78, termWidth - 10, Math.floor(termWidth * 0.64)))
+    : Math.max(42, Math.min(72, termWidth - 8, Math.floor(termWidth * 0.68)));
+  const baseBodyHeight = Math.min(16, Math.max(9, termHeight - 9));
+  const contentPadding = nativePaneChrome ? 1 : 3;
   const paletteBg = commandBarBg();
   const paletteHeadingText = commandBarHeadingText();
   const paletteHoverBg = commandBarHoverBg();
@@ -4828,98 +5149,138 @@ export function CommandBar({
   const paletteSelectedText = commandBarSelectedText();
   const paletteText = commandBarText();
   const paletteSubtleText = commandBarSubtleText();
-  const resultsInnerWidth = Math.max(12, barWidth - contentPadding * 2);
-  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, barWidth - contentPadding * 2);
+  const panelBg = nativePaneChrome ? commandBarPanelBg() : paletteBg;
+  const inputBg = nativePaneChrome ? commandBarInputBg() : paletteBg;
   const visibleListState = routeListState && (routeListState.kind === "root" || routeListState.kind === "mode" || routeListState.kind === "picker" || routeListState.kind === "pane-settings")
     ? routeListState
     : null;
   const showCustomMultiSelectPicker = currentRoute?.kind === "picker" && currentRoute.pickerId === "field-multi-select";
+  const listRows = visibleListState ? buildListRows(visibleListState) : [];
+  const nativeListRows = visibleListState ? buildNativeListRows(visibleListState, listRows) : [];
+  const workflowBodyHeight = currentRoute?.kind === "workflow"
+    ? Math.min(
+      Math.max(9, termHeight - (nativePaneChrome ? 7 : 9)),
+      Math.max(7, estimateWorkflowBodyRows(currentRoute)),
+    )
+    : baseBodyHeight;
+  const bodyHeight = currentRoute?.kind === "workflow" ? workflowBodyHeight : baseBodyHeight;
+  const listBodyHeight = baseBodyHeight;
+  const nativePanelPaddingColumns = nativePaneChrome
+    ? Math.ceil((NATIVE_COMMAND_BAR_PADDING_X_PX * 2) / Math.max(1, cellWidthPx))
+    : 0;
+  const nativePanelPaddingRows = nativePaneChrome
+    ? Math.ceil((NATIVE_COMMAND_BAR_PADDING_Y_PX * 2) / Math.max(1, cellHeightPx))
+    : 0;
+  const nativeBodyChromeRows = (currentRoute?.kind === "workflow"
+    || currentRoute?.kind === "confirm"
+    || showCustomMultiSelectPicker)
+    ? 1
+    : 3;
+  const barHeight = nativePaneChrome
+    ? bodyHeight + nativeBodyChromeRows + nativePanelPaddingRows
+    : bodyHeight + 7;
+  const barLeft = Math.max(4, Math.floor((termWidth - barWidth) / 2));
+  const barTop = Math.max(1, Math.floor((termHeight - barHeight) / 2));
+  const resultsInnerWidth = Math.max(12, barWidth - nativePanelPaddingColumns - contentPadding * 2);
+  const trailingWidth = Math.max(8, Math.min(12, Math.floor(resultsInnerWidth * 0.18)));
+  const labelWidth = Math.max(10, resultsInnerWidth - trailingWidth);
+  const queryDisplayWidth = Math.max(8, resultsInnerWidth);
+  const nativeSelectedRowIndex = nativePaneChrome && visibleListState
+    ? nativeListRows.findIndex((row) => row.kind === "item" && row.globalIdx === visibleListState.selectedIdx)
+    : -1;
   const bodySlotKey = showCustomMultiSelectPicker
     ? "picker:field-multi-select"
     : currentRoute?.kind === "picker"
       ? `picker:${currentRoute.pickerId}`
       : currentRoute?.kind ?? "root";
 
+  useEffect(() => {
+    if (!nativePaneChrome || nativeSelectedRowIndex < 0) return;
+    const scrollBox = nativeListScrollRef.current;
+    if (!scrollBox) 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);
+    }
+  }, [listBodyHeight, nativePaneChrome, nativeSelectedRowIndex, visibleListState?.kind, visibleListState?.query]);
+
+  useEffect(() => {
+    if (!nativePaneChrome || currentRoute?.kind !== "workflow") return;
+    const scrollBox = workflowScrollRef.current;
+    if (!scrollBox) return;
+    const visibleFields = getVisibleWorkflowFields(currentRoute.fields, currentRoute.values);
+    const activeIndex = visibleFields.findIndex((field) => field.id === currentRoute.activeFieldId);
+    if (activeIndex < 0) return;
+
+    const estimatedFieldHeight = 4;
+    const fieldTop = activeIndex * estimatedFieldHeight;
+    const fieldBottom = fieldTop + estimatedFieldHeight;
+    const viewportHeight = Math.max(1, scrollBox.viewport?.height ?? bodyHeight);
+    if (fieldTop < scrollBox.scrollTop) {
+      scrollBox.scrollTo(fieldTop);
+    } else if (fieldBottom > scrollBox.scrollTop + viewportHeight) {
+      scrollBox.scrollTo(fieldBottom - viewportHeight);
+    }
+  }, [bodyHeight, currentRoute, nativePaneChrome]);
+
   const renderListBody = () => {
     if (!visibleListState) return null;
 
-    const allRows: Array<
-      | { 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 sections = buildSections(visibleListState.results);
-    let globalIdx = 0;
-    sections.forEach((section, sectionIndex) => {
-      if (sectionIndex > 0) {
-        allRows.push({ kind: "spacer", id: `spacer:${sectionIndex}:${section.category}` });
-      }
-      allRows.push({ kind: "heading", id: `heading:${sectionIndex}:${section.category}`, label: section.category });
-      for (const item of section.items) {
-        allRows.push({ kind: "item", item, globalIdx });
-        globalIdx += 1;
-      }
-    });
-
-    let visibleRows: typeof allRows;
-    if (visibleListState.searching && allRows.length === 0) {
+    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(bodyHeight / 2);
-      let windowStart = Math.max(0, Math.min(selectedRowIdx - halfWindow, allRows.length - bodyHeight));
+      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 + bodyHeight);
+      visibleRows = allRows.slice(windowStart, windowStart + listBodyHeight);
       if (visibleListState.searching) {
-        if (visibleRows.length >= bodyHeight) {
-          visibleRows = visibleRows.slice(0, bodyHeight - 1);
+        if (visibleRows.length >= listBodyHeight) {
+          visibleRows = visibleRows.slice(0, listBodyHeight - 1);
         }
         visibleRows.push({ kind: "spinner", id: "searching", label: "Searching…" });
       }
     }
 
-    while (visibleRows.length < bodyHeight) {
+    while (!nativePaneChrome && visibleRows.length < listBodyHeight) {
       visibleRows.push({ kind: "filler", id: `filler:${visibleRows.length}` });
     }
 
-    return (
-      <box
-        flexDirection="column"
-        height={bodyHeight}
-        onMouseScroll={handleListScroll}
-      >
+    const renderedRows = (
+      <>
         {visibleRows.map((row) => {
           if (row.kind === "filler" || row.kind === "spacer") {
-            return <box key={row.id} height={1} />;
+            return <Box key={row.id} height={1} />;
           }
           if (row.kind === "spinner") {
             return (
-              <box key={row.id} height={1} paddingX={contentPadding} onMouseScroll={handleListScroll}>
+              <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: handleListScroll } : {})}>
                 <Spinner label={row.label} />
-              </box>
+              </Box>
             );
           }
           if (row.kind === "message") {
             return (
-              <box key={row.id} height={1} paddingX={contentPadding} onMouseScroll={handleListScroll}>
-                <text fg={paletteText}>{truncateText(row.label, barWidth - contentPadding * 2)}</text>
-              </box>
+              <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} onMouseScroll={handleListScroll}>
-                <text attributes={TextAttributes.BOLD} fg={paletteHeadingText}>
-                  {truncateText(row.label, barWidth - contentPadding * 2)}
-                </text>
-              </box>
+              <Box key={row.id} height={1} paddingX={contentPadding} {...(!nativePaneChrome ? { onMouseScroll: handleListScroll } : {})}>
+                <Text attributes={TextAttributes.BOLD} fg={paletteHeadingText}>
+                  {truncateText(row.label, queryDisplayWidth)}
+                </Text>
+              </Box>
             );
           }
 
@@ -4929,14 +5290,19 @@ export function CommandBar({
           const label = truncateText(presentation.label, labelWidth);
           const trailing = truncateText(presentation.trailing, trailingWidth);
           return (
-            <box
+            <Box
               key={row.item.id}
               flexDirection="row"
               height={1}
               paddingX={contentPadding}
-              backgroundColor={isSelected ? paletteSelectedBg : isHovered ? paletteHoverBg : paletteBg}
+              backgroundColor={isSelected
+                ? paletteSelectedBg
+                : isHovered
+                  ? paletteHoverBg
+                  : (nativePaneChrome ? panelBg : paletteBg)}
               onMouseMove={() => setHoveredIndex(row.globalIdx)}
-              onMouseScroll={handleListScroll}
+              onMouseOut={() => setHoveredIndex(null)}
+              {...(!nativePaneChrome ? { onMouseScroll: handleListScroll } : {})}
               onMouseDown={(event: any) => {
                 event.stopPropagation?.();
                 event.preventDefault?.();
@@ -4952,64 +5318,97 @@ export function CommandBar({
                 }
                 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}>
+              <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>
+                </Text>
+              </Box>
+              <Box width={trailingWidth}>
+                <Text fg={isSelected ? paletteSelectedText : paletteSubtleText}>{trailing}</Text>
+              </Box>
+            </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);
-    return (
-      <box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
+    const workflowContent = (
+      <>
         {currentRoute.subtitle && (
-          <box height={1}>
-            <text fg={paletteSubtleText}>{truncateText(currentRoute.subtitle, barWidth - contentPadding * 2)}</text>
-          </box>
+          <Box height={1}>
+            <Text fg={paletteSubtleText}>{truncateText(currentRoute.subtitle, queryDisplayWidth)}</Text>
+          </Box>
         )}
         {currentRoute.description?.map((line, index) => (
-          <box key={`workflow-desc:${index}`} height={1}>
-            <text fg={paletteSubtleText}>{truncateText(line, barWidth - contentPadding * 2)}</text>
-          </box>
+          <Box key={`workflow-desc:${index}`} height={1}>
+            <Text fg={paletteSubtleText}>{truncateText(line, queryDisplayWidth)}</Text>
+          </Box>
         ))}
-        {currentRoute.subtitle || (currentRoute.description?.length ?? 0) > 0 ? <box height={1} /> : null}
-        {visibleFields.map((field) => {
+        {currentRoute.subtitle || (currentRoute.description?.length ?? 0) > 0 ? <Box height={1} /> : null}
+        {visibleFields.map((field, fieldIndex) => {
           const active = field.id === currentRoute.activeFieldId;
+          const isLastField = fieldIndex === visibleFields.length - 1;
           const value = currentRoute.values[field.id];
           const borderColor = active ? paletteSelectedBg : paletteBg;
+          const fieldBg = nativePaneChrome ? "transparent" : active ? inputBg : panelBg;
+          const useNativeSelect = nativePaneChrome && field.type === "select";
+          const fieldDescription = getWorkflowFieldDescription(field, active);
           return (
-            <box
+            <Box
               key={field.id}
               flexDirection="column"
-              marginBottom={1}
-              backgroundColor={active ? colors.panel : paletteBg}
+              {...(!nativePaneChrome ? { marginBottom: isLastField ? 0 : 1 } : {})}
+              backgroundColor={fieldBg}
               onMouseDown={(event: any) => {
                 event.stopPropagation?.();
                 syncActiveWorkflowTextarea(currentRoute);
                 updateTopRoute((route) => route.kind === "workflow"
                   ? { ...route, activeFieldId: field.id, error: null }
                   : route);
-                if (!isWorkflowTextField(field)) {
+                if (!isWorkflowTextField(field) && !useNativeSelect) {
                   openWorkflowFieldPicker(currentRoute, field);
                 }
               }}
+              style={nativePaneChrome ? {
+                marginBottom: isLastField ? 8 : 10,
+                paddingBlock: 3,
+              } : undefined}
             >
-              <box height={1}>
-                <text fg={active ? paletteText : paletteSubtleText} attributes={active ? TextAttributes.BOLD : 0}>
+              <Box height={1}>
+                <Text fg={active ? paletteText : paletteSubtleText} attributes={active ? TextAttributes.BOLD : 0}>
                   {field.label}
-                </text>
-              </box>
+                </Text>
+              </Box>
               {isWorkflowTextField(field) ? (
                 field.type === "number" ? (
                   <NumberField
@@ -5017,6 +5416,8 @@ export function CommandBar({
                     value={coerceFieldString(value)}
                     placeholder={field.placeholder}
                     focused={active && !currentRoute.pending}
+                    variant="default"
+                    backgroundColor={nativePaneChrome ? inputBg : fieldBg}
                     onChange={(nextValue) => updateWorkflowValue(field.id, nextValue)}
                     onSubmit={() => {
                       const index = visibleFields.findIndex((entry) => entry.id === field.id);
@@ -5028,15 +5429,20 @@ export function CommandBar({
                     }}
                   />
                 ) : field.type === "textarea" ? (
-                  <box
+                  <Box
                     minHeight={6}
                     height={6}
-                    border
+                    border={!nativePaneChrome}
                     borderColor={active ? paletteSelectedBg : paletteBg}
-                    backgroundColor={active ? colors.panel : paletteBg}
+                    backgroundColor={nativePaneChrome ? inputBg : fieldBg}
+                    style={nativePaneChrome ? {
+                      border: `1px solid ${active ? colors.borderFocused : colors.border}`,
+                      borderRadius: 6,
+                      overflow: "hidden",
+                    } : undefined}
                   >
                     {active ? (
-                      <textarea
+                      <Textarea
                         key={field.id}
                         ref={getInputRef(workflowInputRefs.current, field.id) as RefObject<TextareaRenderable | null>}
                         initialValue={coerceFieldString(value)}
@@ -5044,27 +5450,27 @@ export function CommandBar({
                         focused={!currentRoute.pending}
                         textColor={paletteText}
                         placeholderColor={paletteSubtleText}
-                        backgroundColor={colors.panel}
+                        backgroundColor={nativePaneChrome ? inputBg : colors.panel}
                         flexGrow={1}
                         wrapText
                       />
                     ) : (
-                      <box flexDirection="column" paddingX={1} paddingY={0}>
+                      <Box flexDirection="column" paddingX={1} paddingY={0}>
                         {(() => {
                           const preview = coerceFieldString(value).trim();
                           const lines = (preview || field.placeholder || "Unset")
                             .split("\n")
-                            .flatMap((line) => line.match(new RegExp(`.{1,${Math.max(1, barWidth - contentPadding * 2 - 8)}}`, "g")) ?? [""])
+                            .flatMap((line) => line.match(new RegExp(`.{1,${Math.max(1, queryDisplayWidth - 8)}}`, "g")) ?? [""])
                             .slice(0, 4);
                           return lines.map((line, index) => (
-                            <box key={`${field.id}:preview:${index}`} height={1}>
-                              <text fg={preview ? paletteText : paletteSubtleText}>{line || " "}</text>
-                            </box>
+                            <Box key={`${field.id}:preview:${index}`} height={1}>
+                              <Text fg={preview ? paletteText : paletteSubtleText}>{line || " "}</Text>
+                            </Box>
                           ));
                         })()}
-                      </box>
+                      </Box>
                     )}
-                  </box>
+                  </Box>
                 ) : (
                   <TextField
                     inputRef={getInputRef(workflowInputRefs.current, field.id) as RefObject<InputRenderable | null>}
@@ -5072,6 +5478,8 @@ export function CommandBar({
                     value={coerceFieldString(value)}
                     placeholder={field.placeholder}
                     focused={active && !currentRoute.pending}
+                    variant="default"
+                    backgroundColor={nativePaneChrome ? inputBg : fieldBg}
                     onChange={(nextValue) => updateWorkflowValue(field.id, nextValue)}
                     onSubmit={() => {
                       const index = visibleFields.findIndex((entry) => entry.id === field.id);
@@ -5083,83 +5491,116 @@ export function CommandBar({
                     }}
                   />
                 )
+              ) : useNativeSelect ? (
+                <NativeSelect
+                  value={coerceFieldString(value)}
+                  options={field.options}
+                  width="100%"
+                  selectRef={(element) => setWorkflowNativeSelectRef(field.id, element)}
+                  onFocus={() => {
+                    updateTopRoute((route) => route.kind === "workflow"
+                      ? { ...route, activeFieldId: field.id, error: null }
+                      : route);
+                  }}
+                  onChange={(nextValue) => updateWorkflowValue(field.id, nextValue)}
+                />
               ) : (
-                <box
+                <Box
                   height={1}
-                  backgroundColor={borderColor}
+                  backgroundColor={nativePaneChrome ? "transparent" : borderColor}
                   onMouseDown={(event: any) => {
                     event.stopPropagation?.();
                     openWorkflowFieldPicker(currentRoute, field);
                   }}
+                  style={nativePaneChrome ? { borderRadius: 4 } : undefined}
                 >
-                  <text fg={active ? paletteText : paletteSubtleText}>
-                    {truncateText(summarizeWorkflowFieldValue(field, value), barWidth - contentPadding * 2)}
-                  </text>
-                </box>
+                  <Text fg={active ? paletteText : paletteSubtleText}>
+                    {truncateText(summarizeWorkflowFieldValue(field, value), queryDisplayWidth)}
+                  </Text>
+                </Box>
               )}
-              {field.description && (
-                <box height={1}>
-                  <text fg={paletteSubtleText}>
-                    {truncateText(
-                      field.type === "textarea" && active
-                        ? `${field.description} Ctrl+S submits.`
-                        : field.description,
-                      barWidth - contentPadding * 2,
-                    )}
-                  </text>
-                </box>
+              {fieldDescription && (
+                <Box height={1}>
+                  <Text fg={paletteSubtleText}>
+                    {truncateText(fieldDescription, queryDisplayWidth)}
+                  </Text>
+                </Box>
               )}
-            </box>
+            </Box>
           );
         })}
         {currentRoute.error && (
-          <box height={1}>
-            <text fg={colors.negative}>{truncateText(currentRoute.error, barWidth - contentPadding * 2)}</text>
-          </box>
+          <Box height={1}>
+            <Text fg={colors.negative}>{truncateText(currentRoute.error, queryDisplayWidth)}</Text>
+          </Box>
         )}
         {currentRoute.pendingLabel && currentRoute.pending && (
-          <box height={1}>
+          <Box height={1}>
             <Spinner label={currentRoute.pendingLabel} />
-          </box>
+          </Box>
         )}
-        <box flexGrow={1} />
-        <box flexDirection="row" gap={1} justifyContent={visibleFields.some((field) => field.type === "textarea") ? "flex-end" : "flex-start"}>
+        {!nativePaneChrome && <Box flexGrow={1} />}
+        <Box flexDirection="row" gap={1} justifyContent={visibleFields.some((field) => field.type === "textarea") ? "flex-end" : "flex-start"}>
           <Button label={currentRoute.submitLabel} variant="primary" onPress={() => { void submitWorkflowRoute(currentRoute); }} disabled={currentRoute.pending} />
-        </box>
-      </box>
+        </Box>
+      </>
+    );
+
+    if (nativePaneChrome) {
+      return (
+        <ScrollBox
+          ref={workflowScrollRef}
+          height={bodyHeight}
+          scrollY
+          style={{ overflowX: "hidden", paddingRight: 4 }}
+        >
+          <Box
+            flexDirection="column"
+            paddingX={contentPadding}
+          >
+            {workflowContent}
+          </Box>
+        </ScrollBox>
+      );
+    }
+
+    return (
+      <Box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
+        {workflowContent}
+      </Box>
     );
   };
 
   const renderConfirmBody = () => {
     if (currentRoute?.kind !== "confirm") return null;
     return (
-      <box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
+      <Box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
         {currentRoute.body.map((line, index) => (
-          <box key={`confirm:${index}`} height={1}>
-            <text fg={paletteText}>{truncateText(line, barWidth - contentPadding * 2)}</text>
-          </box>
+          <Box key={`confirm:${index}`} height={1}>
+            <Text fg={paletteText}>{truncateText(line, queryDisplayWidth)}</Text>
+          </Box>
         ))}
-        <box height={1} />
+        <Box height={1} />
         {currentRoute.error && (
-          <box height={1}>
-            <text fg={colors.negative}>{truncateText(currentRoute.error, barWidth - contentPadding * 2)}</text>
-          </box>
+          <Box height={1}>
+            <Text fg={colors.negative}>{truncateText(currentRoute.error, queryDisplayWidth)}</Text>
+          </Box>
         )}
         {currentRoute.pending && (
-          <box height={1}>
+          <Box height={1}>
             <Spinner label="Working…" />
-          </box>
+          </Box>
         )}
-        <box flexGrow={1} />
-        <box flexDirection="row" gap={1}>
+        <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>
+        </Box>
+      </Box>
     );
   };
 
@@ -5177,7 +5618,7 @@ export function CommandBar({
       ? 0
       : Math.max(0, Math.min(currentRoute.selectedIdx, items.length - 1));
     return (
-      <box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
+      <Box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
         <ToggleList
           items={items}
           selectedIdx={selectedIdx}
@@ -5190,113 +5631,149 @@ export function CommandBar({
               : route);
           }}
           onToggle={(id) => handleMultiSelectToggle(id)}
-          bgColor={paletteBg}
+          bgColor={nativePaneChrome ? panelBg : paletteBg}
         />
-        <box flexDirection="row" gap={1}>
+        <Box flexDirection="row" gap={1}>
           <Button label="Done" variant="primary" onPress={commitMultiSelectPicker} />
-        </box>
-      </box>
+        </Box>
+      </Box>
     );
   };
 
   return (
-    <box
+    <Box
       position="absolute"
       top={0}
       left={0}
       width={termWidth}
       height={termHeight}
-      zIndex={100}
+      zIndex={nativePaneChrome ? COMMAND_BAR_OVERLAY_Z_INDEX : 100}
       onMouseDown={(event: any) => {
         event.stopPropagation?.();
         event.preventDefault?.();
         closeAll();
       }}
     >
-      <box
+      <Box
         position="absolute"
         top={barTop}
         left={barLeft}
         width={barWidth}
         height={barHeight}
         flexDirection="column"
-        backgroundColor={paletteBg}
-        zIndex={101}
+        backgroundColor={panelBg}
+        zIndex={nativePaneChrome ? COMMAND_BAR_PANEL_Z_INDEX : 101}
         onMouseDown={(event: any) => {
           event.stopPropagation?.();
         }}
+        data-gloom-role="command-bar-panel"
+        style={nativePaneChrome ? {
+          borderRadius: 8,
+          boxShadow: "0 14px 32px rgba(0,0,0,0.18)",
+          overflow: "hidden",
+          padding: `${NATIVE_COMMAND_BAR_PADDING_Y_PX}px ${NATIVE_COMMAND_BAR_PADDING_X_PX}px`,
+        } : undefined}
       >
-        <box height={1} />
+        {!nativePaneChrome && <Box height={1} backgroundColor={paletteBg} />}
+
+        {!nativePaneChrome && (
+          <Box
+            height={1}
+            paddingX={contentPadding}
+            flexDirection="row"
+            alignItems="center"
+          >
+            {currentRoute && (
+              <Box marginRight={1}>
+                <Button label="Back" variant="ghost" onPress={popRoute} />
+              </Box>
+            )}
+            <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?.kind === "picker" ? currentRoute.title
+                    : currentRoute?.kind === "pane-settings" ? "Pane Settings"
+                      : currentRoute?.kind === "workflow" ? currentRoute.title
+                      : currentRoute?.kind === "confirm" ? currentRoute.title
+                          : "Commands"}
+              </Text>
+            </Box>
+          </Box>
+        )}
 
-        <box height={1} paddingX={contentPadding} flexDirection="row" alignItems="center">
-          {currentRoute && (
-            <box marginRight={1}>
-              <Button label="Back" variant="ghost" onPress={popRoute} />
-            </box>
+        <Box key={bodySlotKey} flexDirection="column" flexGrow={1} width="100%" backgroundColor={panelBg}>
+          {nativePaneChrome && currentRoute && (
+            <Box height={1} paddingX={contentPadding}>
+              <Text
+                fg={paletteSubtleText}
+                onMouseDown={(event: any) => {
+                  event.stopPropagation?.();
+                  event.preventDefault?.();
+                  popRoute();
+                }}
+                data-gloom-interactive="true"
+              >
+                ← Back
+              </Text>
+            </Box>
           )}
-          <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"
-                      : currentRoute.screen === "new-pane" ? "New Pane"
-                        : "Search Ticker"
-                : currentRoute?.kind === "picker" ? currentRoute.title
-                  : currentRoute?.kind === "pane-settings" ? "Pane Settings"
-                    : currentRoute?.kind === "workflow" ? currentRoute.title
-                    : currentRoute?.kind === "confirm" ? currentRoute.title
-                        : "Commands"}
-            </text>
-          </box>
-        </box>
-
-        <box key={bodySlotKey} flexDirection="column" flexGrow={1} width="100%" backgroundColor={paletteBg}>
           {(visibleListState || currentRoute?.kind === "picker") && visibleListState && (
             <>
-              <box height={1} paddingX={contentPadding}>
-                <box width={queryDisplayWidth} height={1} position="relative">
-                  <input
+              <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={queryDisplayWidth}
-                    backgroundColor={paletteBg}
-                    focusedBackgroundColor={paletteBg}
+                    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
+                    <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}>
+                      <Text fg={paletteSubtleText}>
                         {truncateText(
                           rootGhostSuffix,
                           Math.max(0, queryDisplayWidth - Math.min(rootQuery.length, queryDisplayWidth - 1)),
                         )}
-                      </text>
-                    </box>
+                      </Text>
+                    </Box>
                   )}
-                </box>
-              </box>
-              <box height={1} paddingX={contentPadding}>
+                </Box>
+              </Box>
+              <Box height={1} paddingX={contentPadding}>
                 {visibleListState.kind === "root" && rootShortcutFeedback
                   ? (
-                    <text fg={paletteSubtleText}>
-                      {truncateText(rootShortcutFeedback, barWidth - contentPadding * 2)}
-                    </text>
+                    <Text fg={paletteSubtleText}>
+                      {truncateText(rootShortcutFeedback, queryDisplayWidth)}
+                    </Text>
                   )
                   : null}
-              </box>
+              </Box>
             </>
           )}
 
@@ -5304,10 +5781,10 @@ export function CommandBar({
           {currentRoute?.kind === "workflow" && renderWorkflowBody()}
           {currentRoute?.kind === "confirm" && renderConfirmBody()}
           {showCustomMultiSelectPicker && renderMultiSelectBody()}
-        </box>
+        </Box>
 
-        <box flexGrow={1} />
-      </box>
-    </box>
+        {!nativePaneChrome && <Box flexGrow={1} />}
+      </Box>
+    </Box>
   );
 }