gloomberb 0.6.1 → 0.7.1

package/src/components/chart/stock-chart.tsx

@@ -9,6 +9,7 @@ import { ShortcutHint } from "../ui";
 import { saveConfig } from "../../data/config-store";
 import { getSharedMarketData } from "../../plugins/registry";
 import { colors } from "../../theme/colors";
+import { useThemeColors } from "../../theme/theme-context";
 import { formatCompact } from "../../utils/format";
 import { formatMarketPriceWithCurrency } from "../../utils/market-format";
 import { useChartQueries, useChartQuery } from "../../market-data/hooks";
@@ -27,7 +28,7 @@ import {
   getKeyboardPanCellCount,
   resolveDragPanOffset,
 } from "./chart-scroll";
-import { getVisibleWindow, projectChartData, resolveBarSize, resolveStableOhlcProjectionOptions, type ProjectedChartPoint } from "./chart-data";
+import { projectChartData, resolveBarSize, resolveStableOhlcProjectionOptions, type ProjectedChartPoint } from "./chart-data";
 import {
   buildPresetDateWindow,
   buildVisibleDateWindow,
@@ -82,7 +83,6 @@ import {
 } from "./chart-viewport";
 import {
   buildChartScene,
-  formatAxisCell,
   formatCursorAxisValue,
   getActivePointIndex,
   getPointTerminalColumn,
@@ -127,6 +127,8 @@ import {
 } from "./native/surface-visibility";
 import type { PricePoint, TickerFinancials } from "../../types/financials";
 import type { TickerRecord } from "../../types/ticker";
+import { TimeAxisLabel } from "./time-axis-label";
+import { PriceAxisLabels } from "./price-axis-labels";
 
 const MODE_CHIPS: Record<ChartRenderMode, string> = {
   area: "A",
@@ -173,7 +175,6 @@ interface StockChartProps {
 }
 
 interface ResolvedStockChartProps extends StockChartProps {
-  symbol: string | null;
   ticker: TickerRecord | null;
   financials: TickerFinancials | null;
 }
@@ -726,14 +727,6 @@ function isSeriesAcceptedForRequest(
   return windowPoints.length >= minimumPointCount;
 }
 
-function canRenderAutoViewForWindow(
-  render: AutoRenderedView | null,
-  requestedWindow: DateWindowRange | null | undefined,
-): render is AutoRenderedView {
-  if (!render || !requestedWindow?.start || !requestedWindow.end) return false;
-  return getWindowPoints(render.data, requestedWindow).length > 0;
-}
-
 export function resolveAutoDisplayState(options: {
   shouldUseRenderedAutoView: boolean;
   renderedAutoView: AutoRenderedView | null;
@@ -772,13 +765,6 @@ export function resolveAutoDisplayState(options: {
   };
 }
 
-export function resolveVisibleChartDateWindow(
-  points: readonly Pick<PricePoint, "date">[],
-  preferredWindow: DateWindowRange | null | undefined,
-): DateWindowRange | null {
-  return getDateWindowBounds(getPointDates(points)) ?? preferredWindow ?? null;
-}
-
 function buildDateWindowFromIndices(dates: readonly Date[], startIdx: number, endIdx: number): DateWindowRange | null {
   if (dates.length === 0 || endIdx <= startIdx) return null;
   return {
@@ -1430,8 +1416,8 @@ function buildIndicatorProjectionKey(options: {
 }
 
 export function StockChart(props: StockChartProps) {
-  const { symbol, ticker, financials } = usePaneTicker();
-  return <ResolvedStockChart {...props} symbol={symbol} ticker={ticker} financials={financials} />;
+  const { ticker, financials } = usePaneTicker();
+  return <ResolvedStockChart {...props} ticker={ticker} financials={financials} />;
 }
 
 export const ResolvedStockChart = memo(function ResolvedStockChart({
@@ -1448,10 +1434,10 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   showVolume: showVolumeOverride,
   footerControls,
   footerHints,
-  symbol,
   ticker,
   financials,
 }: ResolvedStockChartProps) {
+  const themeColors = useThemeColors();
   const renderer = useNativeRenderer();
   const { canvasCharts, cellWidthPx = 8, cellHeightPx = 18, pixelRatio = 1 } = useUiCapabilities();
   const dispatch = useAppDispatch();
@@ -1514,6 +1500,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   const lastCanvasBaseBitmapRef = useRef<{ key: string; bitmap: NativeChartBitmap } | null>(null);
   const displayCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
   const targetCursorRef = useRef<DisplayCursorState>(EMPTY_DISPLAY_CURSOR);
+  const mouseCrosshairDisabledRef = useRef(false);
   const cursorMotionKindRef = useRef<ChartCursorMotionKind>("discrete");
   const animationFrameRef = useRef<number | null>(null);
   const pendingCanonicalResetRef = useRef(1);
@@ -2906,6 +2893,11 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     if (!interactive) return;
 
     switch (key) {
+      case "escape":
+        mouseCrosshairDisabledRef.current = true;
+        updateDisplayCursorTarget(EMPTY_DISPLAY_CURSOR, "discrete");
+        commitSelectionCursor({ cursorX: null, cursorY: null });
+        return;
       case "left":
         if (event.shift) {
           if (effectiveResolution === "auto") {
@@ -2923,6 +2915,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
             return { ...cleared, panOffset: current.panOffset + panStep };
           });
         } else {
+          mouseCrosshairDisabledRef.current = false;
           cursorMotionKindRef.current = "discrete";
           const pointCount = projection.points.length;
           const currentIndex = pointCount <= 0
@@ -2974,6 +2967,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
             return cleared.panOffset === nextPanOffset ? cleared : { ...cleared, panOffset: nextPanOffset };
           });
         } else {
+          mouseCrosshairDisabledRef.current = false;
           cursorMotionKindRef.current = "discrete";
           const pointCount = projection.points.length;
           const currentIndex = pointCount <= 0
@@ -3021,15 +3015,24 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       : 0;
     const trend = rawChange < 0 ? "negative" : rawChange > 0 ? "positive" : "neutral";
     return resolveChartPalette({
-      bg: colors.bg,
-      border: colors.border,
-      borderFocused: colors.borderFocused,
-      text: colors.text,
-      textDim: colors.textDim,
-      positive: colors.positive,
-      negative: colors.negative,
+      bg: themeColors.bg,
+      border: themeColors.border,
+      borderFocused: themeColors.borderFocused,
+      text: themeColors.text,
+      textDim: themeColors.textDim,
+      positive: themeColors.positive,
+      negative: themeColors.negative,
     }, trend);
-  }, [chartWindow.points]);
+  }, [
+    chartWindow.points,
+    themeColors.bg,
+    themeColors.border,
+    themeColors.borderFocused,
+    themeColors.negative,
+    themeColors.positive,
+    themeColors.text,
+    themeColors.textDim,
+  ]);
 
   const cursorX = viewState.cursorX !== null ? clamp(viewState.cursorX, 0, chartWidth - 1) : null;
   const cursorY = viewState.cursorY !== null ? clamp(viewState.cursorY, 0, chartHeight - 1) : null;
@@ -3058,6 +3061,19 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     colors: chartColors,
     timeAxisDates,
   }), [axisMode, chartColors, chartHeight, chartWidth, compact, projection.effectiveMode, projection.points, selectionCursorX, selectionCursorY, showVolume, timeAxisDates, volumeHeight]);
+  const displayScene = useMemo(() => buildChartScene(projection.points, {
+    width: chartWidth,
+    height: chartHeight,
+    showVolume: showVolume && !compact,
+    volumeHeight,
+    cursorX: displayCursorX,
+    cursorY: displayCursorY,
+    mode: projection.effectiveMode,
+    axisMode,
+    colors: chartColors,
+    timeAxisDates,
+    indicators,
+  }), [axisMode, chartColors, chartHeight, chartWidth, compact, displayCursorX, displayCursorY, indicators, projection.effectiveMode, projection.points, showVolume, timeAxisDates, volumeHeight]);
   const snappedSelectionCursorX = selectionScene
     ? getPointTerminalColumn(selectionScene.activeIdx, projection.points.length, chartWidth, projection.effectiveMode)
     : null;
@@ -3419,6 +3435,8 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     : null;
   const isUpdating = !compact && (renderBodyState.updating || boundsBodyState.updating);
   const timeAxisLabel = selectionScene?.timeLabels ?? staticResult.timeLabels;
+  const cursorTimeAxisColumn = hasDisplayCursor ? displayScene?.cursorColumn ?? null : null;
+  const cursorTimeAxisDate = hasDisplayCursor ? displayScene?.dateAtCursor ?? null : null;
   const timeAxisBox = (
     <Box
       height={1}
@@ -3426,7 +3444,15 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
       overflow="hidden"
       data-gloom-role="chart-time-axis"
     >
-      <Text fg={colors.textDim} style={{ whiteSpace: "pre" }}>{timeAxisLabel}</Text>
+      <TimeAxisLabel
+        timeLabels={timeAxisLabel}
+        width={chartWidth}
+        cursorColumn={cursorTimeAxisColumn}
+        cursorPixelX={hasDisplayCursor ? displayCursor.pixelX : null}
+        cursorDate={cursorTimeAxisDate}
+        dates={timeAxisDates}
+        cursorColor={chartColors.crosshairColor}
+      />
     </Box>
   );
   const chartFooterHints = useMemo<PaneHint[]>(() => {
@@ -3573,6 +3599,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
 
   const handlePlotMove = (event: ChartMouseEvent) => {
     if (!interactive || compact) return;
+    if (mouseCrosshairDisabledRef.current) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
     const selectionCursor = resolveSelectionCursor(localPointer, projection.points.length, chartWidth, projection.effectiveMode);
@@ -3594,6 +3621,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
     if (compact) return;
     if (!interactive) onActivate?.();
     focusPaneForMouseInteraction(event);
+    mouseCrosshairDisabledRef.current = false;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (!localPointer) return;
     const selectionCursor = resolveSelectionCursor(localPointer, projection.points.length, chartWidth, projection.effectiveMode);
@@ -3618,6 +3646,7 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
 
   const handlePlotDrag = (event: ChartMouseEvent) => {
     if (compact || (!interactive && !dragRef.current)) return;
+    if (mouseCrosshairDisabledRef.current && !dragRef.current) return;
     const localPointer = getLocalPlotPointer(event, plotRef.current, renderer);
     if (localPointer) {
       const selectionCursor = resolveSelectionCursor(localPointer, projection.points.length, chartWidth, projection.effectiveMode);
@@ -3938,17 +3967,16 @@ export const ResolvedStockChart = memo(function ResolvedStockChart({
   );
 
   const axisBox = (
-    <Box width={axisSectionWidth} height={chartHeight} flexDirection="column">
-      {Array.from({ length: chartHeight }, (_, row) => {
-        const isCursorRow = cursorAxisLabel !== null && cursorRow === row;
-        const label = isCursorRow ? cursorAxisLabel : (axisLabels.get(row) ?? null);
-        return (
-          <Text key={row} fg={isCursorRow ? chartColors.crosshairColor : colors.textDim}>
-            {formatAxisCell(label, axisWidth).padEnd(axisSectionWidth)}
-          </Text>
-        );
-      })}
-    </Box>
+    <PriceAxisLabels
+      axisLabels={axisLabels}
+      axisWidth={axisWidth}
+      axisSectionWidth={axisSectionWidth}
+      height={chartHeight}
+      cursorRow={cursorRow}
+      cursorPixelY={hasDisplayCursor ? displayCursor.pixelY : null}
+      cursorLabel={cursorAxisLabel}
+      cursorColor={chartColors.crosshairColor}
+    />
   );
 
   if (compact) {

package/src/components/chart/time-axis-label.tsx

@@ -0,0 +1,120 @@
+import { useMemo } from "react";
+import { Box, Span, Text, useUiCapabilities } from "../../ui";
+import { colors } from "../../theme/colors";
+import { buildCursorTimeAxisSegments } from "./chart-renderer";
+
+interface TimeAxisLabelProps {
+  timeLabels: string;
+  width: number;
+  cursorColumn: number | null;
+  cursorPixelX?: number | null;
+  cursorDate: Date | string | number | null;
+  dates: Array<Date | string | number>;
+  cursorColor: string;
+}
+
+interface CursorTimeAxisOverlay {
+  baseText: string;
+  label: string | null;
+  leftPercent: number | null;
+}
+
+function clamp(value: number, min: number, max: number): number {
+  return Math.max(min, Math.min(max, value));
+}
+
+export function buildCursorTimeAxisOverlay({
+  segments,
+  width,
+  cursorPixelX,
+  cellWidthPx,
+}: {
+  segments: ReturnType<typeof buildCursorTimeAxisSegments>;
+  width: number;
+  cursorPixelX: number | null | undefined;
+  cellWidthPx: number;
+}): CursorTimeAxisOverlay {
+  const baseText = segments
+    .map((segment) => (segment.highlighted ? " ".repeat(segment.text.length) : segment.text))
+    .join("")
+    .padEnd(width)
+    .slice(0, width);
+  const label = segments.find((segment) => segment.highlighted)?.text ?? null;
+  const pixelWidth = Math.max(width * cellWidthPx, 1);
+  let leftPercent: number | null = null;
+  if (label && cursorPixelX !== null && cursorPixelX !== undefined && Number.isFinite(cursorPixelX) && pixelWidth > 1) {
+    const halfLabelWidth = Math.min((label.length * cellWidthPx) / 2, (pixelWidth - 1) / 2);
+    const leftPx = clamp(cursorPixelX, halfLabelWidth, Math.max(pixelWidth - halfLabelWidth, halfLabelWidth));
+    leftPercent = (leftPx / Math.max(pixelWidth - 1, 1)) * 100;
+  }
+
+  return { baseText, label, leftPercent };
+}
+
+export function TimeAxisLabel({
+  timeLabels,
+  width,
+  cursorColumn,
+  cursorPixelX = null,
+  cursorDate,
+  dates,
+  cursorColor,
+}: TimeAxisLabelProps) {
+  const { cellWidthPx = 8, fractionalViewport = false } = useUiCapabilities();
+  const segments = useMemo(() => buildCursorTimeAxisSegments({
+    timeLabels,
+    width,
+    cursorColumn,
+    cursorDate,
+    dates,
+  }), [cursorColumn, cursorDate, dates, timeLabels, width]);
+  const overlay = useMemo(() => buildCursorTimeAxisOverlay({
+    segments,
+    width,
+    cursorPixelX,
+    cellWidthPx,
+  }), [cellWidthPx, cursorPixelX, segments, width]);
+
+  if (fractionalViewport && overlay.label && overlay.leftPercent !== null) {
+    return (
+      <Box
+        width={width}
+        height={1}
+        overflow="hidden"
+        style={{ position: "relative" }}
+      >
+        <Text fg={colors.textDim} style={{ whiteSpace: "pre" }}>
+          {overlay.baseText}
+        </Text>
+        <Text
+          fg={cursorColor}
+          bg={colors.bg}
+          style={{
+            position: "absolute",
+            left: `${overlay.leftPercent}%`,
+            top: 0,
+            transform: "translateX(-50%)",
+            whiteSpace: "pre",
+            pointerEvents: "none",
+            zIndex: 1,
+          }}
+        >
+          {overlay.label}
+        </Text>
+      </Box>
+    );
+  }
+
+  return (
+    <Text style={{ whiteSpace: "pre" }}>
+      {segments.map((segment, index) => (
+        <Span
+          key={index}
+          fg={segment.highlighted ? cursorColor : colors.textDim}
+        >
+          {segment.text}
+        </Span>
+      ))}
+    </Text>
+  );
+}

package/src/components/command-bar/__snapshots__/command-bar.test.tsx.snap

@@ -25,34 +25,6 @@ exports[`CommandBar renders the default layout with opencode-style chrome 1`] =
                                                                                 
                                                                                 
                                                                                 
-"
-`;
-
-exports[`CommandBar renders theme prefix results in the root query 1`] = `
-"                                                                                
-                                                                                
-                Commands                                                        
-                TH                                                              
-                                                                                
-                Themes                                                          
-                Amber                                   current                 
-                Green Phosphor                                                  
-                Cyan                                                            
-                Red Phosphor                                                    
-                Blue Phosphor                                                   
-                Purple Phosphor                                                 
-                Hot Pink                                                        
-                White Phosphor                                                  
-                Tokyo Night                                                     
-                Solarized Dark                                                  
-                Dracula                                                         
-                Nord                                                            
-                Monokai                                                         
-                Catppuccin Mocha                                                
-                                                                                
-                                                                                
-                                                                                
-                                                                                
 "
 `;