gloomberb 0.10.2 → 0.10.4

package/src/plugins/builtin/chart-composer/pane.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { Box, Text } from "../../../ui";
+import { Box, Text, useUiHost } from "../../../ui";
 import {
   ChoiceDialog,
   Tabs,
@@ -13,7 +13,8 @@ import {
 import { CompositeChart } from "../../../components/chart/composite";
 import type { PaneProps, TickerResearchTabProps } from "../../../types/plugin";
 import type { ChartResolution, TimeRange } from "../../../components/chart/core/types";
-import type { ChartSpec, SeriesStyle } from "../../../time-series/types";
+import type { ChartSpec, ResolvedSeries, SeriesStyle } from "../../../time-series/types";
+import { getSupportedChartResolutionsForViewport } from "../../../time-series/resolution";
 import { useResolvedChartSpec } from "../../../time-series/hooks";
 import { useShortcut } from "../../../react/input";
 import { useDialog, useDialogState, type PromptContext } from "../../../ui/dialog";
@@ -60,13 +61,9 @@ import {
 } from "./settings";
 import { resolveChartComposerShortcut } from "./shortcuts";
 import { ChartSeriesQuickAdd } from "./quick-add";
+import { useLiveStreamingSetting } from "../shared/live-streaming";
 
 const RANGE_TABS = RANGES.map((range, index) => ({ label: `${index + 1}:${range}`, value: range }));
-const RESOLUTION_TABS = RESOLUTIONS.map((value) => ({ label: value.toUpperCase(), value }));
-const RESOLUTION_TABS_WIDTH = RESOLUTION_TABS.reduce(
-  (width, tab) => width + [...tab.label].length + 1,
-  0,
-);
 const AUTO_VIEWPORT_DEBOUNCE_MS = 350;
 
 interface RuntimeChartViewport {
@@ -92,6 +89,8 @@ interface ChartComposerSurfaceProps {
   onCapture?: (capturing: boolean) => void;
 }
 
+const QUICK_ADD_CAPTURE = "quick-add";
+
 function isPriceStudyTarget(spec: ChartSpec): boolean {
   return spec.series.some((series) => (
     series.source.kind === "security"
@@ -110,7 +109,9 @@ function ChartComposerSurface({
 }: ChartComposerSurfaceProps) {
   const dialog = useDialog();
   const dispatch = useAppDispatch();
+  const isDesktopWeb = useUiHost().kind === "desktop-web";
   const paneId = usePaneInstanceId();
+  const liveStreaming = useLiveStreamingSetting();
   const dialogOpen = useDialogState((state) => state.isOpen);
   const authoredViewportKey = useMemo(() => JSON.stringify({
     range: spec.viewport.range,
@@ -149,19 +150,73 @@ function ChartComposerSurface({
       : null,
     requestViewport: activeRuntimeViewport?.requestViewport,
     targetPointCount,
+    liveStreaming,
   });
+  const availableResolutions = useMemo<ChartResolution[]>(() => {
+    if (!resolution.resolutionSupport) {
+      if (!resolution.loading) return RESOLUTIONS;
+      return spec.viewport.resolution === "auto"
+        ? ["auto"]
+        : ["auto", spec.viewport.resolution];
+    }
+    const supported = new Set(getSupportedChartResolutionsForViewport(
+      spec.viewport.range,
+      resolution.resolutionSupport,
+      spec.viewport.dateWindow,
+    ));
+    return RESOLUTIONS.filter((value) => value === "auto" || supported.has(value));
+  }, [
+    resolution.loading,
+    resolution.resolutionSupport,
+    spec.viewport.dateWindow,
+    spec.viewport.range,
+    spec.viewport.resolution,
+  ]);
+  const resolutionTabs = useMemo(
+    () => availableResolutions.map((value) => ({ label: value.toUpperCase(), value })),
+    [availableResolutions],
+  );
+  const resolutionTabsWidth = useMemo(
+    () => resolutionTabs.reduce((total, tab) => total + [...tab.label].length + 1, 0),
+    [resolutionTabs],
+  );
   const selectedStudies = getSelectedBuiltinStudies(spec);
   const selectedPairStudies = getSelectedPairStudies(spec);
   const inlineStyleTarget = useMemo(() => getChartInlineStyleTarget(spec), [spec]);
   const styles = useMemo(() => getChartInlineStyles(spec), [spec]);
-  const styleTabs = useMemo(
-    () => styles.map((value) => ({ label: value.toUpperCase(), value })),
-    [styles],
-  );
   const inlineStyle = inlineStyleTarget?.style ?? "line";
   const inlineStyleLabel = inlineStyleTarget ? chartSeriesLabel(inlineStyleTarget) : "";
   const viewport = resolution.viewport;
   const baseSeriesIds = useMemo(() => new Set(spec.series.map((series) => series.id)), [spec.series]);
+  // Hidden series are never loaded, so the resolver has nothing to report for
+  // them. Without a placeholder they vanish from the legend entirely and the
+  // only way back is the series dialog.
+  const legendSeries = useMemo(() => {
+    const resolved = resolution.legendSeries ?? [];
+    const resolvedIds = new Set(resolved.map((entry) => entry.id));
+    const missing = spec.series.filter((entry) => !resolvedIds.has(entry.id));
+    if (missing.length === 0) return resolution.legendSeries;
+    const bySpecOrder = new Map(spec.series.map((entry, index) => [entry.id, index] as const));
+    return [
+      ...resolved,
+      ...missing.map((entry): ResolvedSeries => ({
+        id: entry.id,
+        label: chartSeriesLabel(entry),
+        color: entry.color ?? colors.textDim,
+        unit: "",
+        unitGroup: "unknown",
+        nativeFrequency: "daily",
+        dataShape: "scalar",
+        style: entry.style,
+        transform: entry.transform,
+        axis: entry.axis === "right" ? "right" : "left",
+        panelId: entry.panelId,
+        interpolation: entry.interpolation,
+        hidden: true,
+        points: [],
+      })),
+    ].sort((a, b) => (bySpecOrder.get(a.id) ?? Number.MAX_SAFE_INTEGER) - (bySpecOrder.get(b.id) ?? Number.MAX_SAFE_INTEGER));
+  }, [resolution.legendSeries, spec.series]);
   const plottedSeries = useMemo(
     () => projectVisibleChartSeries(
       spec,
@@ -171,6 +226,8 @@ function ChartComposerSurface({
     [resolution.bufferedSeries, resolution.legendSeries, resolution.series, spec],
   );
   const [interactionCaptured, setInteractionCapturedState] = useState(false);
+  // Typing in quick-add must not freeze the plot: it only takes the keyboard.
+  const [modalCaptured, setModalCaptured] = useState(false);
   const [quickAddWidth, setQuickAddWidth] = useState(14);
   const interactionCaptureRef = useRef(false);
   const interactionCaptureSourcesRef = useRef(new Set<string>());
@@ -183,6 +240,7 @@ function ChartComposerSurface({
     if (captured) sources.add(source);
     else sources.delete(source);
     const next = sources.size > 0;
+    setModalCaptured([...sources].some((entry) => entry !== QUICK_ADD_CAPTURE));
     if (interactionCaptureRef.current === next) return;
     interactionCaptureRef.current = next;
     setInteractionCapturedState(next);
@@ -197,6 +255,8 @@ function ChartComposerSurface({
     [setInteractionCaptured],
   );
   const surfaceInteractive = !dialogOpen && !interactionCaptured;
+  /** The plot keeps its pointer unless something modal is actually covering it. */
+  const surfacePointerInteractive = !dialogOpen && !modalCaptured;
   const shortcutActive = focused && surfaceInteractive;
   const activatePane = useCallback(() => {
     if (!focused) dispatch({ type: "FOCUS_PANE", paneId });
@@ -257,7 +317,11 @@ function ChartComposerSurface({
   useRemoteUiNode({
     role: "chart-data",
     label: "Rendered chart composer data",
-    metadata: chartComposerSemanticMetadata(spec, resolution),
+    metadata: chartComposerSemanticMetadata(
+      spec,
+      resolution,
+      activeRuntimeViewport?.requestViewport,
+    ),
   });
 
   const openSeriesEditor = useCallback(async () => {
@@ -310,6 +374,15 @@ function ChartComposerSurface({
   const setResolution = useCallback((next: ChartResolution) => {
     setSpec({ ...spec, viewport: { ...spec.viewport, resolution: next } });
   }, [setSpec, spec]);
+  useEffect(() => {
+    if (
+      spec.viewport.resolution === "auto"
+      || availableResolutions.includes(spec.viewport.resolution)
+    ) {
+      return;
+    }
+    setResolution("auto");
+  }, [availableResolutions, setResolution, spec.viewport.resolution]);
   const setInlineStyle = useCallback((style: SeriesStyle) => {
     if (!inlineStyleTarget || !styles.includes(style)) return;
     setSpec({
@@ -352,7 +425,7 @@ function ChartComposerSurface({
             {...context}
             title="Chart Resolution"
             selectedChoiceId={spec.viewport.resolution}
-            choices={RESOLUTIONS.map((value) => ({
+            choices={availableResolutions.map((value) => ({
               id: value,
               label: value.toUpperCase(),
               description: value === "auto"
@@ -362,11 +435,17 @@ function ChartComposerSurface({
           />
         ),
       }).catch(() => "");
-      if (RESOLUTIONS.includes(next as ChartResolution)) setResolution(next as ChartResolution);
+      if (availableResolutions.includes(next as ChartResolution)) setResolution(next as ChartResolution);
     } finally {
       setInteractionCaptured("prompt", false);
     }
-  }, [dialog, setInteractionCaptured, setResolution, spec.viewport.resolution]);
+  }, [
+    availableResolutions,
+    dialog,
+    setInteractionCaptured,
+    setResolution,
+    spec.viewport.resolution,
+  ]);
   const openModePicker = useCallback(async () => {
     if (styles.length === 0) return;
     setInteractionCaptured("prompt", true);
@@ -400,7 +479,7 @@ function ChartComposerSurface({
     [baseSeriesIds, spec],
   );
   const handleQuickAddActiveChange = useCallback(
-    (active: boolean) => setInteractionCaptured("quick-add", active),
+    (active: boolean) => setInteractionCaptured(QUICK_ADD_CAPTURE, active),
     [setInteractionCaptured],
   );
   const openIndicators = useCallback((event?: PaneFooterPressEvent) => {
@@ -505,7 +584,15 @@ function ChartComposerSurface({
   return (
     <Box flexDirection="column" width={width} height={height} backgroundColor={colors.panel}>
       <Box flexDirection="row" height={1} paddingX={1} gap={0} overflow="hidden">
-        <Box flexShrink={0} height={1} maxWidth={52} overflow="hidden">
+        <Box
+          flexShrink={0}
+          height={1}
+          maxWidth={52}
+          overflow="hidden"
+          // Desktop tabs are laid out in pixels, so a cell budget clips them
+          // while the row still has room to spare.
+          style={isDesktopWeb ? { maxWidth: "none", width: "auto" } : undefined}
+        >
           <Tabs
             tabs={RANGE_TABS}
             activeValue={spec.viewport.dateWindow ? null : spec.viewport.range}
@@ -522,13 +609,14 @@ function ChartComposerSurface({
         <Box
           flexShrink={1}
           minWidth={0}
-          width={RESOLUTION_TABS_WIDTH}
+          width={resolutionTabsWidth}
           height={1}
           overflow="hidden"
+          style={isDesktopWeb ? { width: "auto", flexShrink: 0 } : undefined}
           data-gloom-role="chart-resolution-control"
         >
           <Tabs
-            tabs={RESOLUTION_TABS}
+            tabs={resolutionTabs}
             activeValue={spec.viewport.resolution}
             onSelect={(value) => setResolution(value as ChartResolution)}
             compact
@@ -538,29 +626,6 @@ function ChartComposerSurface({
             keyboardNavigation={false}
           />
         </Box>
-        {width >= 132 && inlineStyleTarget && (
-          <Box
-            flexDirection="row"
-            flexShrink={0}
-            maxWidth={64}
-            height={1}
-            overflow="hidden"
-            data-gloom-role="chart-inline-style"
-            data-gloom-label={`${inlineStyleLabel} style`}
-          >
-            <Text fg={colors.textDim}>{`${inlineStyleLabel}: `}</Text>
-            <Tabs
-              tabs={styleTabs}
-              activeValue={inlineStyle}
-              onSelect={(value) => setInlineStyle(value as SeriesStyle)}
-              compact
-              dense
-              variant="bare"
-              focused={focused}
-              keyboardNavigation={false}
-            />
-          </Box>
-        )}
       </Box>
       <MultiSelectDialogButton
         ref={indicatorsDialogRef}
@@ -594,7 +659,7 @@ function ChartComposerSurface({
       <Box flexGrow={1} minHeight={4}>
         <CompositeChart
           series={plottedSeries}
-          legendSeries={resolution.legendSeries}
+          legendSeries={legendSeries}
           timelineSeries={resolution.timelineSeries}
           panels={spec.panels}
           viewport={viewport}
@@ -602,7 +667,9 @@ function ChartComposerSurface({
           width={Math.max(1, width)}
           height={Math.max(4, height - 1)}
           focused={focused}
-          interactive={surfaceInteractive}
+          interactive={surfacePointerInteractive}
+          allowHistoricalBackfill
+          showLatestChangePercent={!spec.viewport.dateWindow && spec.viewport.range === "1D"}
           onViewportChange={handleChartViewportChange}
           onActivate={activatePane}
           onToggleSeries={toggleSeries}

package/src/plugins/builtin/chart-composer/quick-add.tsx

@@ -34,6 +34,19 @@ interface ClosestElementLike {
   } | null;
 }
 
+/**
+ * Blurs the field itself rather than going through the imperative handle, which
+ * only reaches the element it still owns. A no-op unless this widget truly holds
+ * the document focus, so a click inside a dialog leaves that dialog alone.
+ */
+export function releaseQuickAddFocus(quickAddId: string): void {
+  const active = (globalThis as {
+    document?: { activeElement?: { blur?: () => void } | null };
+  }).document?.activeElement;
+  if (!active || !isChartQuickAddMouseTarget(active, quickAddId)) return;
+  active.blur?.();
+}
+
 export function isChartQuickAddMouseTarget(target: unknown, quickAddId: string): boolean {
   if (!target || typeof target !== "object") return false;
   const candidate = target as Partial<ClosestElementLike> & {
@@ -197,16 +210,18 @@ export function ChartSeriesQuickAdd({
   }, [active, focused]);
 
   useEffect(() => {
-    if (ui.kind !== "desktop-web" || !inputFocused) return;
+    if (ui.kind !== "desktop-web") return;
 
+    // Watch regardless of what state believes: the field can hold the document
+    // focus after the state that tracks it has already moved on.
     const handleOutsideMouseDown = (event: globalThis.MouseEvent) => {
       if (isChartQuickAddMouseTarget(event.target, quickAddId)) return;
-      inputRef.current?.blur?.();
+      releaseQuickAddFocus(quickAddId);
     };
 
     document.addEventListener("mousedown", handleOutsideMouseDown, true);
     return () => document.removeEventListener("mousedown", handleOutsideMouseDown, true);
-  }, [inputFocused, quickAddId, ui.kind]);
+  }, [quickAddId, ui.kind]);
 
   const cancelPendingBlur = useCallback(() => {
     if (blurTimerRef.current === null) return;
@@ -216,10 +231,17 @@ export function ChartSeriesQuickAdd({
 
   useEffect(() => cancelPendingBlur, [cancelPendingBlur]);
 
+  // Writing the field programmatically comes back through onChange, which is
+  // otherwise indistinguishable from a keystroke and re-arms what just closed.
+  const clearingRef = useRef(false);
   const clearInput = useCallback(() => {
+    clearingRef.current = true;
     setQuery("");
     inputRef.current?.editBuffer.setText?.("");
     inputRef.current?.setCursorOffset?.(0);
+    queueMicrotask(() => {
+      clearingRef.current = false;
+    });
   }, []);
 
   const focusInput = useCallback(() => {
@@ -320,6 +342,7 @@ export function ChartSeriesQuickAdd({
       zIndex={30}
       data-gloom-role="chart-series-quick-add"
       data-gloom-chart-quick-add={quickAddId}
+      data-gloom-focus-scope="chart-series-quick-add"
     >
       <InlineQuickAddRow
         value={query}
@@ -335,6 +358,7 @@ export function ChartSeriesQuickAdd({
         onChange={(value) => {
           setQuery(value);
           setError(null);
+          if (clearingRef.current) return;
           if (!active) setActive(true);
           if (!inputFocused) setInputFocused(true);
         }}

package/src/plugins/builtin/chart-composer/semantic.ts

@@ -15,6 +15,15 @@ function pointEvidence(point: TimeSeriesPoint | undefined) {
     : null;
 }
 
+function viewportEvidence(viewport: UseChartResolutionResult["viewport"]) {
+  if (!viewport) return null;
+  return {
+    start: viewport.start.toISOString(),
+    end: viewport.end.toISOString(),
+    spanMs: viewport.end.getTime() - viewport.start.getTime(),
+  };
+}
+
 function sourceEvidence(series: ChartSeriesSpec) {
   return series.source.kind === "security"
     ? {
@@ -36,6 +45,7 @@ function sourceEvidence(series: ChartSeriesSpec) {
 export function chartComposerSemanticMetadata(
   spec: ChartSpec,
   resolution: UseChartResolutionResult,
+  runtimeViewport?: { start: Date; end: Date } | null,
 ): Record<string, unknown> {
   const resolvedById = new Map(resolution.series.map((series) => [series.id, series] as const));
   const symbols = [...new Set(spec.series.flatMap((series) => (
@@ -54,6 +64,7 @@ export function chartComposerSemanticMetadata(
       panelId: series.panelId,
       visible: series.visible !== false,
       pointCount: resolved?.points.length ?? 0,
+      latestChangePercent: resolved?.latestChangePercent ?? null,
       first: pointEvidence(resolved?.points[0]),
       last: pointEvidence(resolved?.points.at(-1)),
     };
@@ -69,7 +80,16 @@ export function chartComposerSemanticMetadata(
     loading: resolution.loading,
     errors: resolution.errors,
     warnings: resolution.warnings,
+    resolutionSupport: resolution.resolutionSupport ?? null,
+    viewport: viewportEvidence(runtimeViewport ?? resolution.viewport),
+    authoredViewport: viewportEvidence(resolution.viewport),
     baseSeries,
+    bufferedSeries: (resolution.bufferedSeries ?? []).map((series) => ({
+      id: series.id,
+      pointCount: series.points.length,
+      first: pointEvidence(series.points[0]),
+      last: pointEvidence(series.points.at(-1)),
+    })),
     resolvedSeries: resolution.series.map((series) => ({
       id: series.id,
       label: series.label,
@@ -77,6 +97,7 @@ export function chartComposerSemanticMetadata(
       transform: series.transform,
       axis: series.axis,
       panelId: series.panelId,
+      timeBasis: series.timeBasis ?? null,
       pointCount: series.points.length,
       first: pointEvidence(series.points[0]),
       last: pointEvidence(series.points.at(-1)),

package/src/plugins/builtin/chat/controller/persistence.ts

@@ -22,6 +22,9 @@ export interface ChatSessionUser {
   username: string;
   emailVerified: boolean;
   plan?: "free" | "pro";
+  /** Cached so a cold start renders the right entitlement before /auth/get-session lands. */
+  trialEndsAt?: string | null;
+  effectivePlan?: "free" | "pro";
 }
 
 export function readChatSessionState(
@@ -42,6 +45,8 @@ export function normalizeSessionUser(user: PersistedAuthUser | null | undefined)
       username: user.username ?? user.name ?? "account",
       emailVerified: user.emailVerified === true,
       plan: user.plan,
+      trialEndsAt: user.trialEndsAt ?? undefined,
+      effectivePlan: user.effectivePlan,
     }
     : null;
 }

package/src/plugins/builtin/cloud/plugin.tsx

@@ -21,6 +21,8 @@ import {
 import { registerTwitterFeedFeature } from "../cloud-tweets/registration";
 import { composeBuiltinPlugin, type PluginModule } from "../plugin-module";
 import { registerCloudAuthCommands } from "./auth-commands";
+import { registerCloudUpgradeCommand } from "./upgrade-command";
+import { CloudUpgradeStatusWidget } from "./upgrade-status-widget";
 
 interface GloomberbCloudPluginComponents {
   ChatPane: (props: PaneProps) => ReactNode;
@@ -137,7 +139,13 @@ const accountModule: PluginModule = {
     shortcut: { prefix: "ACM" },
     createInstance: () => ({ placement: "floating" }),
   }],
-  setup: registerCloudAuthCommands,
+  slots: {
+    "status:widget": () => <CloudUpgradeStatusWidget />,
+  },
+  setup: (ctx) => {
+    registerCloudAuthCommands(ctx);
+    registerCloudUpgradeCommand(ctx);
+  },
 };
 
 const buildoutModule: PluginModule = {

package/src/plugins/builtin/cloud/upgrade-command.ts

@@ -0,0 +1,28 @@
+import { apiClient } from "../../../api-client";
+import type { GloomPluginContext } from "../../../types/plugin";
+import { requestAccountManagementTab } from "../account-management/navigation";
+import { openCloudUpgradeUrl } from "../shared/cloud-upgrade";
+import { resolvePlanAccess } from "../shared/plan-access";
+
+export function registerCloudUpgradeCommand(ctx: GloomPluginContext): void {
+  ctx.registerCommand({
+    id: "cloud-upgrade",
+    label: "Upgrade to Pro",
+    description: "Real-time market data, real-time news, and X data",
+    keywords: ["upgrade", "pro", "pricing", "plan", "billing", "subscribe", "trial", "real-time"],
+    category: "config",
+    shortcut: "UPGRADE",
+    // Paying subscribers have nothing to upgrade to; trial accounts still do.
+    hidden: () => resolvePlanAccess(apiClient.getCurrentUser()).isPayingPro,
+    execute: () => {
+      if (!apiClient.getSessionToken()) {
+        ctx.openCommandBar("Sign Up");
+        return;
+      }
+      if (openCloudUpgradeUrl()) return;
+      // No renderer-backed opener yet: fall back to the in-app billing surface.
+      requestAccountManagementTab("pro");
+      ctx.showPane("account-management");
+    },
+  });
+}

package/src/plugins/builtin/cloud/upgrade-status-widget.tsx

@@ -0,0 +1,54 @@
+import { useEffect, useState } from "react";
+import { apiClient } from "../../../api-client";
+import { t, tf } from "../../../i18n";
+import { useAppLanguage } from "../../../i18n/react";
+import { useAppSelector } from "../../../state/app/context";
+import { colors, hoverBg } from "../../../theme/colors";
+import { Box, Text } from "../../../ui";
+import { chatController, type ChatController } from "../chat/controller";
+import { useCloudPlanAction, useCloudUpgradeAction } from "../shared/cloud-upgrade";
+import { resolvePlanAccess } from "../shared/plan-access";
+
+interface CloudUpgradeStatusWidgetProps {
+  controller?: Pick<ChatController, "getSnapshot" | "subscribe">;
+}
+
+/**
+ * Global entitlement status: the trial countdown while Pro is on loan, or the
+ * delay free accounts get on cloud data. Signed-out users already have sign-in
+ * affordances next to it, and paying subscribers have nothing to report.
+ */
+export function CloudUpgradeStatusWidget({ controller = chatController }: CloudUpgradeStatusWidgetProps) {
+  useAppLanguage();
+  const cloudPluginDisabled = useAppSelector((state) => state.config.disabledPlugins).includes("gloomberb-cloud");
+  const openUpgrade = useCloudUpgradeAction();
+  const openPlan = useCloudPlanAction();
+  const [access, setAccess] = useState(() => resolvePlanAccess(apiClient.getCurrentUser()));
+  const [hovered, setHovered] = useState(false);
+
+  useEffect(
+    // The chat widget already drives session refreshes; this only follows them.
+    () => controller.subscribe(() => setAccess(resolvePlanAccess(apiClient.getCurrentUser()))),
+    [controller],
+  );
+
+  if (cloudPluginDisabled || !access.signedIn || access.isPayingPro) return null;
+
+  const trial = access.isTrialActive;
+  const label = trial
+    ? tf("Pro trial {days}d", { days: access.trialDaysLeft })
+    : t("delayed data · upgrade");
+
+  return (
+    <Box
+      flexDirection="row"
+      paddingRight={1}
+      backgroundColor={hovered ? hoverBg() : undefined}
+      onMouseOver={() => setHovered((current) => (current ? current : true))}
+      onMouseOut={() => setHovered((current) => (current ? false : current))}
+      onMouseDown={trial ? openPlan : openUpgrade}
+    >
+      <Text fg={trial ? colors.positive : colors.warning}>{label}</Text>
+    </Box>
+  );
+}

package/src/plugins/builtin/help/index.tsx

@@ -153,6 +153,40 @@ function HelpPane({ focused, width, height }: PaneProps) {
               />
             </HelpSection>
 
+            <HelpSection title="Charts">
+              <ShortcutRow
+                badges={["Drag", "Scroll"]}
+                description="Pan the chart through time."
+              />
+              <ShortcutRow
+                badges={["Shift+Z", "Shift+Drag"]}
+                description="Pick the zoom tool, then drag a time range to zoom into."
+              />
+              <ShortcutRow
+                badges={["Shift+M", "Alt+Drag"]}
+                description="Pick the ruler, then drag to measure change, percent, bars, and elapsed time."
+              />
+              <ShortcutRow
+                badges={["Shift+D", "Shift+P"]}
+                description="Draw a trend line or a freehand shape. Grab a line's end to reshape it, drag its middle to move it."
+              />
+              <ShortcutRow
+                badges={["c", "Backspace"]}
+                description="Cycle the drawing colour, or delete the selected drawing."
+              />
+              <ShortcutRow
+                badges={["Ctrl+Scroll"]}
+                description="Zoom around the pointer."
+              />
+              <ShortcutRow
+                badges={["+/-", "0"]}
+                description="Zoom the focused chart in or out, or reset it."
+              />
+              <Text fg={colors.textDim} wrapText>
+                {t("The tool icons sit over the top-left corner of the chart. Most terminals keep shift-drag and option-drag for their own text selection, so pick the tool there instead.")}
+              </Text>
+            </HelpSection>
+
             <HelpSection title="Global Keys">
               <ShortcutRow
                 badges={["Tab", "Shift+Tab"]}
@@ -327,6 +361,10 @@ function HelpPane({ focused, width, height }: PaneProps) {
                 badges={["DES", "<ticker>"]}
                 description="Open security details for a specific ticker."
               />
+              <ShortcutRow
+                badges={["UPGRADE"]}
+                description="Go Pro for real-time data at gloom.sh/cloud, free for 7 days."
+              />
               <ShortcutRow
                 badges={["Up/Down", "Ctrl+P/N"]}
                 description="Move through command bar results."