gloomberb 0.6.1 → 0.7.1

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

@@ -1,5 +1,4 @@
 import type { AppAction } from "../../state/app-context";
-import { themes, getThemeIds } from "../../theme/themes";
 
 export type CommandExecutor = (dispatch: React.Dispatch<AppAction>, context: CommandContext) => void | Promise<void>;
 
@@ -239,15 +238,6 @@ export const commands: Command[] = [
   },
 ];
 
-/** Get theme options for the command bar */
-export function getThemeOptions(): Array<{ id: string; name: string; description: string }> {
-  return getThemeIds().map((id) => ({
-    id,
-    name: themes[id]!.name,
-    description: themes[id]!.description,
-  }));
-}
-
 /** Find a command whose prefix matches the start of the input */
 export function matchPrefix(input: string, commandList: Command[] = commands): { command: Command; arg: string } | null {
   const upper = input.toUpperCase().trim();

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

@@ -0,0 +1,51 @@
+import { Box, Text } from "../../ui";
+import { colors } from "../../theme/colors";
+import { Button, Spinner } from "../ui";
+import { truncateText } from "./view-model";
+import type { CommandBarConfirmRoute } from "./workflow-types";
+
+export function CommandBarConfirmBody({
+  route,
+  bodyHeight,
+  contentPadding,
+  paletteText,
+  queryDisplayWidth,
+  onConfirm,
+}: {
+  route: CommandBarConfirmRoute;
+  bodyHeight: number;
+  contentPadding: number;
+  paletteText: string;
+  queryDisplayWidth: number;
+  onConfirm: () => void;
+}) {
+  return (
+    <Box flexDirection="column" height={bodyHeight} paddingX={contentPadding}>
+      {route.body.map((line, index) => (
+        <Box key={`confirm:${index}`} height={1}>
+          <Text fg={paletteText}>{truncateText(line, queryDisplayWidth)}</Text>
+        </Box>
+      ))}
+      <Box height={1} />
+      {route.error && (
+        <Box height={1}>
+          <Text fg={colors.negative}>{truncateText(route.error, queryDisplayWidth)}</Text>
+        </Box>
+      )}
+      {route.pending && (
+        <Box height={1}>
+          <Spinner label="Working…" />
+        </Box>
+      )}
+      <Box flexGrow={1} />
+      <Box flexDirection="row" gap={1}>
+        <Button
+          label={route.confirmLabel}
+          variant={route.tone === "danger" ? "danger" : "primary"}
+          onPress={onConfirm}
+          disabled={route.pending}
+        />
+      </Box>
+    </Box>
+  );
+}

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

@@ -14,7 +14,7 @@ import type {
 } from "./workflow-types";
 import type { CollectionKind, CollectionMembershipAction } from "./workflow-ops";
 
-export type RouteCommandId = "security-description" | "theme" | "plugins" | "layout";
+export type RouteCommandId = "security-description" | "plugins" | "layout";
 export type CollectionCommandId = "add-watchlist" | "add-portfolio" | "remove-watchlist" | "remove-portfolio";
 
 export function summarizeError(error: unknown): Record<string, string> {
@@ -30,7 +30,6 @@ export function summarizeError(error: unknown): Record<string, string> {
 
 export function isRouteCommandId(commandId: string): commandId is RouteCommandId {
   return commandId === "security-description"
-    || commandId === "theme"
     || commandId === "plugins"
     || commandId === "layout";
 }
@@ -237,12 +236,10 @@ export function normalizeWizardFields(steps: WizardStep[]): {
   return { fields, description, initialValues, pendingLabel, successLabel };
 }
 
-export function routeCommandIdToScreen(commandId: RouteCommandId): "ticker-search" | "themes" | "plugins" | "layout" {
+export function routeCommandIdToScreen(commandId: RouteCommandId): "ticker-search" | "plugins" | "layout" {
   switch (commandId) {
     case "security-description":
       return "ticker-search";
-    case "theme":
-      return "themes";
     case "plugins":
       return "plugins";
     case "layout":

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

@@ -0,0 +1,76 @@
+import { buildSections } from "./view-model";
+
+export interface ResultItem {
+  id: string;
+  label: string;
+  detail: string;
+  category: string;
+  kind: "command" | "ticker" | "search" | "plugin" | "action" | "info";
+  right?: string;
+  searchText?: 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";
+
+export 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;
+}
+
+export 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 };
+
+export function orderListResults(results: ResultItem[]): ResultItem[] {
+  return buildSections(results).flatMap((section) => section.items);
+}
+
+export 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;
+}
+
+export 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;
+}

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

@@ -0,0 +1,254 @@
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Box, ScrollBox, Text } from "../../ui";
+import { TextAttributes, type ScrollBoxRenderable } from "../../ui";
+import { getThemeIds, themes as themeRegistry } from "../../theme/themes";
+import { truncateText } from "./view-model";
+
+const THEME_PREVIEW_DEBOUNCE_MS = 120;
+const THEME_OPTIONS = getThemeIds().map((id) => ({
+  id,
+  name: themeRegistry[id]!.name,
+}));
+
+interface ThemePickerScrollEvent {
+  stopPropagation: () => void;
+  preventDefault: () => void;
+  scroll?: { direction?: string; delta?: number };
+}
+
+interface ThemePickerProps {
+  filter: string;
+  committedThemeId: string;
+  height: number;
+  contentPadding: number;
+  labelWidth: number;
+  trailingWidth: number;
+  queryDisplayWidth: number;
+  nativePaneChrome: boolean;
+  paletteBg: string;
+  paletteHoverBg: string;
+  paletteSelectedBg: string;
+  paletteSelectedText: string;
+  paletteSubtleText: string;
+  paletteText: string;
+  panelBg: string;
+  onPreview: (themeId: string | null) => void;
+  onCommit: (themeId: string) => void;
+}
+
+export interface ThemePickerHandle {
+  move: (delta: number) => boolean;
+  commit: () => boolean;
+  cancelPreview: () => void;
+}
+
+function clampIndex(index: number, length: number): number {
+  return Math.max(0, Math.min(index, Math.max(0, length - 1)));
+}
+
+export const ThemePicker = memo(forwardRef<ThemePickerHandle, ThemePickerProps>(function ThemePicker({
+  filter,
+  committedThemeId,
+  height,
+  contentPadding,
+  labelWidth,
+  trailingWidth,
+  queryDisplayWidth,
+  nativePaneChrome,
+  paletteBg,
+  paletteHoverBg,
+  paletteSelectedBg,
+  paletteSelectedText,
+  paletteSubtleText,
+  paletteText,
+  panelBg,
+  onPreview,
+  onCommit,
+}: ThemePickerProps, ref) {
+  const scrollRef = useRef<ScrollBoxRenderable | null>(null);
+  const previewTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const pendingPreviewIdRef = useRef<string | null>(null);
+  const committedThemeIdRef = useRef(committedThemeId);
+  const onPreviewRef = useRef(onPreview);
+  const onCommitRef = useRef(onCommit);
+  const normalizedFilter = filter.trim().toLowerCase();
+  const themes = useMemo(() => {
+    if (!normalizedFilter) return THEME_OPTIONS;
+    return THEME_OPTIONS.filter((theme) => (
+      theme.name.toLowerCase().includes(normalizedFilter)
+      || theme.id.toLowerCase().includes(normalizedFilter)
+    ));
+  }, [normalizedFilter]);
+  const [selectedIndex, setSelectedIndex] = useState(() => (
+    Math.max(0, themes.findIndex((theme) => theme.id === committedThemeId))
+  ));
+  const [hoveredIndex, setHoveredIndex] = useState<number | null>(null);
+  const themesRef = useRef(themes);
+  const selectedIndexRef = useRef(selectedIndex);
+
+  themesRef.current = themes;
+  selectedIndexRef.current = selectedIndex;
+  committedThemeIdRef.current = committedThemeId;
+  onPreviewRef.current = onPreview;
+  onCommitRef.current = onCommit;
+
+  const cancelPreview = useCallback(() => {
+    if (previewTimerRef.current) {
+      clearTimeout(previewTimerRef.current);
+      previewTimerRef.current = null;
+    }
+    pendingPreviewIdRef.current = null;
+  }, []);
+
+  const requestPreview = useCallback((themeId: string) => {
+    pendingPreviewIdRef.current = themeId;
+    if (previewTimerRef.current) {
+      clearTimeout(previewTimerRef.current);
+    }
+    previewTimerRef.current = setTimeout(() => {
+      previewTimerRef.current = null;
+      const nextThemeId = pendingPreviewIdRef.current;
+      pendingPreviewIdRef.current = null;
+      if (!nextThemeId) return;
+      onPreviewRef.current(nextThemeId === committedThemeIdRef.current ? null : nextThemeId);
+    }, THEME_PREVIEW_DEBOUNCE_MS);
+  }, []);
+
+  const move = useCallback((delta: number): boolean => {
+    const options = themesRef.current;
+    if (options.length === 0 || delta === 0) return false;
+    const nextIndex = clampIndex(selectedIndexRef.current + delta, options.length);
+    if (nextIndex === selectedIndexRef.current) return false;
+    selectedIndexRef.current = nextIndex;
+    setSelectedIndex(nextIndex);
+    setHoveredIndex(null);
+    requestPreview(options[nextIndex]!.id);
+    return true;
+  }, [requestPreview]);
+
+  const commit = useCallback((): boolean => {
+    const selected = themesRef.current[selectedIndexRef.current];
+    if (!selected) return false;
+    cancelPreview();
+    onCommitRef.current(selected.id);
+    return true;
+  }, [cancelPreview]);
+
+  useImperativeHandle(ref, () => ({
+    move,
+    commit,
+    cancelPreview,
+  }), [cancelPreview, commit, move]);
+
+  useEffect(() => {
+    const preferredIndex = themes.findIndex((theme) => theme.id === committedThemeId);
+    const nextIndex = preferredIndex >= 0 ? preferredIndex : 0;
+    selectedIndexRef.current = nextIndex;
+    setSelectedIndex(nextIndex);
+    setHoveredIndex(null);
+  }, [committedThemeId, themes]);
+
+  useEffect(() => cancelPreview, [cancelPreview]);
+
+  useLayoutEffect(() => {
+    const scrollBox = scrollRef.current;
+    if (!scrollBox) return;
+    if (scrollBox.verticalScrollBar) scrollBox.verticalScrollBar.visible = false;
+    if (themes.length === 0) return;
+    const viewportHeight = Math.max(1, scrollBox.viewport?.height ?? height);
+    if (selectedIndex < scrollBox.scrollTop) {
+      scrollBox.scrollTo(selectedIndex);
+    } else if (selectedIndex >= scrollBox.scrollTop + viewportHeight) {
+      scrollBox.scrollTo(selectedIndex - viewportHeight + 1);
+    }
+  }, [height, selectedIndex, themes.length]);
+
+  const handleScroll = useCallback((event: ThemePickerScrollEvent) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const delta = Math.max(1, Math.round(event.scroll?.delta ?? 1));
+    const direction = event.scroll?.direction;
+    if (direction === "down" || direction === "right") {
+      move(delta);
+    } else if (direction === "up" || direction === "left") {
+      move(-delta);
+    }
+  }, [move]);
+
+  if (themes.length === 0) {
+    return (
+      <Box height={height} paddingX={contentPadding}>
+        <Text fg={paletteSubtleText}>{truncateText("No themes match", queryDisplayWidth)}</Text>
+      </Box>
+    );
+  }
+
+  return (
+    <ScrollBox
+      ref={scrollRef}
+      flexDirection="column"
+      height={height}
+      scrollY
+      focusable={false}
+      {...(!nativePaneChrome ? { onMouseScroll: handleScroll } : {})}
+    >
+      {themes.map((theme, index) => {
+        const selected = index === selectedIndex;
+        const hovered = index === hoveredIndex && !selected;
+        const current = theme.id === committedThemeId;
+        const label = truncateText(theme.name, labelWidth);
+        const trailing = current ? "current" : "";
+        return (
+          <Box
+            key={theme.id}
+            flexDirection="row"
+            height={1}
+            paddingX={contentPadding}
+            backgroundColor={selected
+              ? paletteSelectedBg
+              : hovered
+                ? paletteHoverBg
+                : (nativePaneChrome ? panelBg : paletteBg)}
+            onMouseMove={() => setHoveredIndex(index)}
+            onMouseOut={() => setHoveredIndex(null)}
+            onMouseDown={(event: any) => {
+              event.stopPropagation?.();
+              event.preventDefault?.();
+              selectedIndexRef.current = index;
+              setSelectedIndex(index);
+              cancelPreview();
+              onCommitRef.current(theme.id);
+            }}
+            {...(!nativePaneChrome ? { onMouseScroll: handleScroll } : {})}
+            data-command-bar-row-selected={nativePaneChrome && selected ? "true" : undefined}
+            style={nativePaneChrome ? { borderRadius: 6 } : undefined}
+          >
+            <Box width={labelWidth}>
+              <Text
+                fg={selected ? paletteSelectedText : paletteText}
+                attributes={current ? TextAttributes.BOLD : undefined}
+              >
+                {label}
+              </Text>
+            </Box>
+            <Box width={trailingWidth}>
+              <Text fg={selected ? paletteSelectedText : paletteSubtleText}>
+                {truncateText(trailing, trailingWidth)}
+              </Text>
+            </Box>
+          </Box>
+        );
+      })}
+    </ScrollBox>
+  );
+}));

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

@@ -46,7 +46,7 @@ describe("command bar view model helpers", () => {
     expect(sections.map((section) => section.category)).toEqual(["Tickers", "Config", "Danger", "Debug"]);
   });
 
-  test("derives row presentation for toggles and current theme rows", () => {
+  test("derives row presentation for toggles and current rows", () => {
     expect(getRowPresentation({
       id: "plugin:news",
       label: "News",
@@ -61,11 +61,11 @@ describe("command bar view model helpers", () => {
     });
 
     expect(getRowPresentation({
-      id: "theme:amber",
+      id: "current:amber",
       label: "Amber",
       detail: "Warm terminal palette",
-      category: "Themes",
-      kind: "theme",
+      category: "Config",
+      kind: "command",
       right: "amber",
       current: true,
     }, false, true)).toMatchObject({

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

@@ -10,11 +10,6 @@ export interface CommandBarModeInfo {
   hint: string;
 }
 
-export interface CommandBarFooterHints {
-  left: string;
-  right: string;
-}
-
 export interface CommandBarSection<T> {
   category: string;
   items: T[];
@@ -25,7 +20,7 @@ export interface CommandBarItemView {
   label: string;
   detail: string;
   category: string;
-  kind: "command" | "ticker" | "search" | "theme" | "plugin" | "action" | "info";
+  kind: "command" | "ticker" | "search" | "plugin" | "action" | "info";
   right?: string;
   checked?: boolean;
   current?: boolean;
@@ -83,20 +78,6 @@ export function buildSections<T extends { category: string }>(items: T[]): Array
     .map(({ section }) => section);
 }
 
-export function getFooterHints(mode: CommandBarMode, isNarrow: boolean): CommandBarFooterHints {
-  const moveAndSelect = isNarrow ? "up/down move  enter select" : "up/down move  enter select";
-  if (mode === "plugins") {
-    return {
-      left: isNarrow ? "space toggle" : `${moveAndSelect}  space toggle`,
-      right: "esc cancel",
-    };
-  }
-  if (mode === "layout") {
-    return { left: moveAndSelect, right: "esc cancel" };
-  }
-  return { left: moveAndSelect, right: "esc cancel" };
-}
-
 export function getEmptyState(mode: CommandBarMode, query: string, searchQuery?: string): { label: string; detail: string } {
   switch (mode) {
     case "search":

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

@@ -14,6 +14,7 @@ import { cleanPortfolioPaneSettings, resolvePortfolioPaneCollectionId } from "..
 import {
   buildComparisonChartPaneTitle,
   COMPARISON_CHART_PANE_ID,
+  MIN_COMPARISON_CHART_SYMBOLS,
 } from "../../plugins/builtin/comparison-chart";
 import { getPaneTemplateDisplayLabel } from "./pane-template-display";
 
@@ -415,6 +416,9 @@ export async function applyPaneSettingFieldValue(
       descriptor.context.activeCollectionId,
       deps,
     );
+    if (symbols.length < MIN_COMPARISON_CHART_SYMBOLS) {
+      throw new Error(`Enter at least ${MIN_COMPARISON_CHART_SYMBOLS} tickers.`);
+    }
     const nextLayout = updatePaneInstance(state.config.layout, targetId, (instance) => ({
       ...instance,
       title: buildComparisonChartPaneTitle(symbols),

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

@@ -38,11 +38,10 @@ export interface CommandBarRouteBase {
 
 export interface CommandBarModeRoute extends CommandBarRouteBase {
   kind: "mode";
-  screen: "ticker-search" | "themes" | "plugins" | "layout";
+  screen: "ticker-search" | "plugins" | "layout";
   query: string;
   selectedIdx: number;
   hoveredIdx: number | null;
-  themeBaseId?: string;
   payload?: Record<string, unknown>;
 }
 

package/src/components/data-table-stack-view.test.tsx

@@ -160,6 +160,13 @@ async function emitKeypress(event: { name?: string; sequence?: string }) {
   });
 }
 
+async function emitTerminalMouseBack(x: number, y: number) {
+  await act(async () => {
+    await testSetup!.mockMouse.emitMouseEvent("down", x, y, 128 as any);
+    await testSetup!.renderOnce();
+  });
+}
+
 describe("DataTableStackView", () => {
   test("owns table navigation, detail open, and back navigation", async () => {
     testSetup = await testRender(<Harness />, { width: 60, height: 12 });
@@ -179,16 +186,44 @@ describe("DataTableStackView", () => {
 
     await emitKeypress({ name: "escape", sequence: "\u001b" });
     await renderSettled();
-    expect(testSetup.captureCharFrame()).toContain("Second detail");
-
-    await emitKeypress({ name: "backspace", sequence: "\u007f" });
-    await renderSettled();
 
     const rootFrame = testSetup.captureCharFrame();
     expect(rootFrame).toContain("Second row");
     expect(rootFrame).not.toContain("Second detail");
   });
 
+  test("closes detail from backspace", async () => {
+    testSetup = await testRender(<Harness />, { width: 60, height: 12 });
+
+    await renderSettled();
+    await emitKeypress({ name: "enter", sequence: "\r" });
+    await renderSettled();
+    expect(testSetup.captureCharFrame()).toContain("First detail");
+
+    await emitKeypress({ name: "backspace", sequence: "\u007f" });
+    await renderSettled();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("First row");
+    expect(frame).not.toContain("First detail");
+  });
+
+  test("closes detail from the terminal mouse back button", async () => {
+    testSetup = await testRender(<Harness />, { width: 60, height: 12 });
+
+    await renderSettled();
+    await emitKeypress({ name: "enter", sequence: "\r" });
+    await renderSettled();
+    expect(testSetup.captureCharFrame()).toContain("First detail");
+
+    await emitTerminalMouseBack(30, 4);
+    await renderSettled();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("First row");
+    expect(frame).not.toContain("First detail");
+  });
+
   test("skips section rows while navigating through the stack view", async () => {
     testSetup = await testRender(<GroupedHarness />, { width: 60, height: 12 });