gloomberb 0.3.7 → 0.4.0

package/src/plugins/builtin/chat.tsx

@@ -19,7 +19,7 @@ interface ChatContentProps {
   close?: () => void;
   controller?: Pick<
     ChatController,
-    "getSnapshot" | "refreshSession" | "send" | "setDraft" | "setReplyToId" | "subscribe"
+    "attachView" | "getSnapshot" | "refreshMessages" | "refreshSession" | "send" | "setDraft" | "setReplyToId" | "subscribe"
   >;
 }
 
@@ -34,16 +34,27 @@ function estimateWrappedLineCount(text: string, width: number) {
   ), 0);
 }
 
-function estimateMessageHeight(message: ChatMessage, width: number) {
+const MESSAGE_GROUP_THRESHOLD_MS = 5 * 60 * 1000;
+
+function isGroupedWithPrevious(messages: ChatMessage[], index: number) {
+  if (index === 0) return false;
+  const prev = messages[index - 1]!;
+  const curr = messages[index]!;
+  if (prev.user.id !== curr.user.id) return false;
+  return new Date(curr.createdAt).getTime() - new Date(prev.createdAt).getTime() < MESSAGE_GROUP_THRESHOLD_MS;
+}
+
+function estimateMessageHeight(message: ChatMessage, width: number, grouped = false) {
   const contentLineWidth = Math.max(width - 4, 1);
   const normalizedContent = message.content.replace(/\$[A-Z][A-Z0-9.-]{0,9}/g, (match) => ` ${match.slice(1)} +0% `);
-  return 1 + (message.replyTo ? 1 : 0) + estimateWrappedLineCount(normalizedContent, contentLineWidth);
+  const headerHeight = grouped ? 0 : 1;
+  return headerHeight + (message.replyTo ? 1 : 0) + estimateWrappedLineCount(normalizedContent, contentLineWidth);
 }
 
 function getMessageTopOffset(messages: ChatMessage[], index: number, width: number) {
   let offset = 0;
   for (let i = 0; i < index; i += 1) {
-    offset += estimateMessageHeight(messages[i]!, width);
+    offset += estimateMessageHeight(messages[i]!, width, isGroupedWithPrevious(messages, i));
   }
   return offset;
 }
@@ -53,6 +64,42 @@ function scrollToBottom(scrollBox: ScrollBoxRenderable | null) {
   scrollBox.scrollTo(Math.max(0, scrollBox.scrollHeight - scrollBox.viewport.height));
 }
 
+function openAuthCommand(query: string, event?: { preventDefault?: () => void; stopPropagation?: () => void }) {
+  event?.preventDefault?.();
+  event?.stopPropagation?.();
+  getSharedRegistry()?.openCommandBarFn(query);
+}
+
+function InlineAuthActions({ showSignup = true }: { showSignup?: boolean }) {
+  const [hoveredAction, setHoveredAction] = useState<"login" | "signup" | null>(null);
+
+  return (
+    <box flexDirection="row">
+      <box
+        backgroundColor={hoveredAction === "login" ? hoverBg() : undefined}
+        onMouseMove={() => setHoveredAction("login")}
+        onMouseOut={() => setHoveredAction((current) => (current === "login" ? null : current))}
+        onMouseDown={(event: any) => openAuthCommand("Login", event)}
+      >
+        <text fg={hoveredAction === "login" ? colors.text : colors.textDim}> Login </text>
+      </box>
+      {showSignup && (
+        <>
+          <text fg={colors.textDim}>/</text>
+          <box
+            backgroundColor={hoveredAction === "signup" ? hoverBg() : undefined}
+            onMouseMove={() => setHoveredAction("signup")}
+            onMouseOut={() => setHoveredAction((current) => (current === "signup" ? null : current))}
+            onMouseDown={(event: any) => openAuthCommand("Sign Up", event)}
+          >
+            <text fg={hoveredAction === "signup" ? colors.text : colors.textDim}> Sign Up </text>
+          </box>
+        </>
+      )}
+    </box>
+  );
+}
+
 export function ChatContent({
   width,
   height,
@@ -77,6 +124,11 @@ export function ChatContent({
   ));
   const inputRef = useRef<InputRenderable>(null);
   const scrollRef = useRef<ScrollBoxRenderable>(null);
+  const canSend = !!user?.emailVerified;
+
+  useEffect(() => {
+    return controller.attachView();
+  }, [controller]);
 
   useEffect(() => {
     const unsubscribe = controller.subscribe((snapshot) => {
@@ -91,6 +143,7 @@ export function ChatContent({
     });
 
     void controller.refreshSession().catch(() => {});
+    void controller.refreshMessages().catch(() => {});
     return unsubscribe;
   }, [controller]);
 
@@ -121,11 +174,16 @@ export function ChatContent({
     const content = inputValueRef.current.trim();
     if (!content) return;
     controller.send(content, replyToRef.current?.id);
-    setReplyTo(null);
     setSelectedIdx(-1);
     setFollowMessages(true);
   }, [controller]);
 
+  useEffect(() => {
+    if (!canSend && inputFocused) {
+      blurInput();
+    }
+  }, [blurInput, canSend, inputFocused]);
+
   useEffect(() => {
     if (!focused && inputFocused) {
       blurInput();
@@ -138,6 +196,12 @@ export function ChatContent({
     }
   }, [focused, inputFocused]);
 
+  useEffect(() => {
+    if (canSend || !replyTo) return;
+    setReplyTo(null);
+    controller.setReplyToId(null);
+  }, [canSend, controller, replyTo]);
+
   useKeyboard((event) => {
     if (!focused) return;
 
@@ -161,7 +225,7 @@ export function ChatContent({
       return;
     }
 
-    if (event.name === "return" || event.name === "i") {
+    if ((event.name === "return" || event.name === "i") && canSend) {
       focusInput();
       return;
     }
@@ -187,7 +251,7 @@ export function ChatContent({
       return;
     }
 
-    if (event.name === "r" && selectedIdx >= 0 && selectedIdx < messages.length) {
+    if (canSend && event.name === "r" && selectedIdx >= 0 && selectedIdx < messages.length) {
       const nextReplyTo = messages[selectedIdx] ?? null;
       setReplyTo(nextReplyTo);
       controller.setReplyToId(nextReplyTo?.id ?? null);
@@ -207,7 +271,7 @@ export function ChatContent({
       queueMicrotask(() => scrollToBottom(scrollRef.current));
       return;
     }
-  }, [blurInput, close, controller, focusInput, focused, inputFocused, messages, replyTo, selectedIdx]);
+  }, [blurInput, canSend, close, controller, focusInput, focused, inputFocused, messages, replyTo, selectedIdx]);
 
   useEffect(() => {
     if (selectedIdx < messages.length) return;
@@ -220,7 +284,7 @@ export function ChatContent({
     if (followMessages) return;
     if (selectedIdx < 0 || selectedIdx >= messages.length) return;
     const top = getMessageTopOffset(messages, selectedIdx, contentWidth);
-    const rowHeight = estimateMessageHeight(messages[selectedIdx]!, contentWidth);
+    const rowHeight = estimateMessageHeight(messages[selectedIdx]!, contentWidth, isGroupedWithPrevious(messages, selectedIdx));
     const viewportHeight = Math.max(sb.viewport.height, 1);
     if (top < sb.scrollTop) {
       sb.scrollTo(top);
@@ -229,13 +293,13 @@ export function ChatContent({
     }
   }, [contentWidth, followMessages, messages, selectedIdx]);
 
-  const replyBarHeight = replyTo ? 1 : 0;
-  const inputAreaHeight = 1 + replyBarHeight;
+  const replyBarHeight = canSend && replyTo ? 1 : 0;
+  const inputAreaHeight = canSend ? 1 + replyBarHeight : 2;
   const headerHeight = 1;
   const separatorHeight = 1;
   const messageAreaHeight = Math.max(1, height - headerHeight - separatorHeight - inputAreaHeight - 1);
 
-  if (loading) {
+  if (loading && messages.length === 0) {
     return (
       <box flexGrow={1} alignItems="center" justifyContent="center">
         <text fg={colors.textDim}>Loading...</text>
@@ -243,39 +307,6 @@ export function ChatContent({
     );
   }
 
-  if (!user && !hasSavedSession) {
-    return (
-      <box flexGrow={1} alignItems="center" justifyContent="center" flexDirection="column">
-        <text fg={colors.textDim}>Not logged in.</text>
-        <text fg={colors.textDim}> </text>
-        <text fg={colors.text}>Press Ctrl+P and search "Login" or "Sign Up"</text>
-        <text fg={colors.textDim}>to start chatting.</text>
-      </box>
-    );
-  }
-
-  if (!user && hasSavedSession) {
-    return (
-      <box flexGrow={1} alignItems="center" justifyContent="center" flexDirection="column">
-        <text fg={colors.positive}>Saved login found.</text>
-        <text fg={colors.textDim}> </text>
-        <text fg={colors.text}>Reconnect to refresh your Gloomberb Cloud session.</text>
-        <text fg={colors.textDim}>Your cached transcript is still available locally.</text>
-      </box>
-    );
-  }
-
-  if (!user.emailVerified) {
-    return (
-      <box flexGrow={1} alignItems="center" justifyContent="center" flexDirection="column">
-        <text fg={colors.positive}>Check your email to unlock Gloomberb Cloud.</text>
-        <text fg={colors.textDim}> </text>
-        <text fg={colors.text}>Near real-time data and chat are free, but require email verification.</text>
-        <text fg={colors.textDim}>Use Ctrl+P and search "Resend Verification Email" if you need another link.</text>
-      </box>
-    );
-  }
-
   return (
     <box flexDirection="column" width={width} height={height}>
       <box height={1} width={contentWidth} flexDirection="row">
@@ -305,6 +336,13 @@ export function ChatContent({
           const isSelected = index === selectedIdx;
           const isHovered = index === hoveredIdx && !isSelected;
           const bgColor = isSelected ? colors.selected : isHovered ? hoverBg() : undefined;
+          const grouped = isGroupedWithPrevious(messages, index);
+          const isSending = msg.clientStatus === "sending";
+          const hasFailed = msg.clientStatus === "failed";
+          const headerStatus = isSending ? "sending..." : hasFailed ? "failed" : formatTimeAgo(msg.createdAt);
+          const headerStatusColor = isSending ? colors.textDim : hasFailed ? colors.negative : colors.textMuted;
+          const authorAttributes = (isSending ? TextAttributes.DIM : 0) | TextAttributes.BOLD;
+          const bodyColor = hasFailed ? colors.negative : isSending ? colors.textDim : colors.text;
 
           return (
             <box
@@ -329,18 +367,20 @@ export function ChatContent({
                   </text>
                 </box>
               )}
-              <box flexDirection="row" height={1} paddingLeft={1}>
-                <text fg={colors.positive} attributes={TextAttributes.BOLD}>
-                  {msg.user.username ?? "anon"}
-                </text>
-                <text fg={colors.textMuted}> ({formatTimeAgo(msg.createdAt)})</text>
-              </box>
+              {!grouped && (
+                <box flexDirection="row" height={1} paddingLeft={1}>
+                  <text fg={colors.positive} attributes={authorAttributes}>
+                    {msg.user.username ?? "anon"}
+                  </text>
+                  <text fg={headerStatusColor}> ({headerStatus})</text>
+                </box>
+              )}
               <box paddingLeft={3}>
                 <TickerBadgeText
                   text={msg.content}
                   lineWidth={contentWidth - 4}
                   catalog={catalog}
-                  textColor={colors.text}
+                  textColor={bodyColor}
                   openTicker={openTicker}
                 />
               </box>
@@ -353,35 +393,58 @@ export function ChatContent({
         <text fg={colors.border}>{"-".repeat(contentWidth)}</text>
       </box>
 
-      {replyTo && (
-        <box height={1} width={contentWidth} flexDirection="row">
-          <text fg={colors.textMuted}> replying to </text>
-          <text fg={colors.positive}>{replyTo.user.username}</text>
-          <box flexGrow={1} />
-          <text fg={colors.textDim}>[Esc cancel]</text>
+      {canSend ? (
+        <>
+          {replyTo && (
+            <box height={1} width={contentWidth} flexDirection="row">
+              <text fg={colors.textMuted}> replying to </text>
+              <text fg={colors.positive}>{replyTo.user.username}</text>
+              <box flexGrow={1} />
+              <text fg={colors.textDim}>[Esc cancel]</text>
+            </box>
+          )}
+
+          <box height={1} width={contentWidth} flexDirection="row" onMouseDown={focusInput}>
+            <text fg={colors.textDim}> {">"} </text>
+            <input
+              ref={inputRef}
+              value={inputValue}
+              focused={inputFocused && focused}
+              placeholder="Type a message..."
+              placeholderColor={colors.textMuted}
+              textColor={colors.text}
+              backgroundColor={colors.bg}
+              flexGrow={1}
+              onInput={updateDraft}
+              onChange={updateDraft}
+              onSubmit={() => {
+                if (inputValueRef.current.trim()) {
+                  sendMessage();
+                }
+              }}
+            />
+          </box>
+        </>
+      ) : (
+        <box width={contentWidth} height={2} flexDirection="column">
+          {!user && !hasSavedSession ? (
+            <>
+              <text fg={colors.textDim}>Read-only chat. Log in or sign up to send.</text>
+              <InlineAuthActions />
+            </>
+          ) : !user ? (
+            <>
+              <text fg={colors.positive}>Saved login found. Log in again to send.</text>
+              <InlineAuthActions showSignup={false} />
+            </>
+          ) : (
+            <>
+              <text fg={colors.positive}>Verify your email to send messages.</text>
+              <text fg={colors.textDim}>Ctrl+P: Resend Verification Email</text>
+            </>
+          )}
         </box>
       )}
-
-      <box height={1} width={contentWidth} flexDirection="row" onMouseDown={focusInput}>
-        <text fg={colors.textDim}> {">"} </text>
-        <input
-          ref={inputRef}
-          value={inputValue}
-          focused={inputFocused && focused}
-          placeholder="Type a message..."
-          placeholderColor={colors.textMuted}
-          textColor={colors.text}
-          backgroundColor={colors.bg}
-          flexGrow={1}
-          onInput={updateDraft}
-          onChange={updateDraft}
-          onSubmit={() => {
-            if (inputValueRef.current.trim()) {
-              sendMessage();
-            }
-          }}
-        />
-      </box>
     </box>
   );
 }
@@ -398,17 +461,24 @@ export function ChatPane({ focused, width, height, close }: PaneProps) {
 }
 
 export function ChatStatusWidget({ controller = chatController }: ChatStatusWidgetProps) {
-  const registry = getSharedRegistry();
   const { state } = useAppState();
   const initialSnapshot = controller.getSnapshot();
-  const [hoveredAction, setHoveredAction] = useState<"login" | "signup" | null>(null);
   const [username, setUsername] = useState<string | null>(initialSnapshot.user?.username ?? null);
   const [hasSavedSession, setHasSavedSession] = useState(initialSnapshot.hasSavedSession);
+  const [unreadMentionCount, setUnreadMentionCount] = useState(initialSnapshot.unreadMentionCount);
+  const [hovered, setHovered] = useState(false);
+
+  const openChat = (event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
+    event?.preventDefault?.();
+    event?.stopPropagation?.();
+    getSharedRegistry()?.showWidget("chat");
+  };
 
   useEffect(() => {
     const unsubscribe = controller.subscribe((snapshot) => {
       setUsername(snapshot.user?.username ?? null);
       setHasSavedSession(snapshot.hasSavedSession);
+      setUnreadMentionCount(snapshot.unreadMentionCount);
     });
     void controller.refreshSession().catch(() => {});
     return unsubscribe;
@@ -416,47 +486,34 @@ export function ChatStatusWidget({ controller = chatController }: ChatStatusWidg
 
   if (state.config.disabledPlugins.includes("gloomberb-cloud")) return null;
 
-  const openAuthCommand = (query: string, event?: { preventDefault?: () => void; stopPropagation?: () => void }) => {
-    event?.preventDefault?.();
-    event?.stopPropagation?.();
-    registry?.openCommandBarFn(query);
-  };
-
   return (
     <box flexDirection="row" paddingRight={1}>
       {!username && !hasSavedSession ? (
         <>
           <text fg={colors.textDim}>☁ </text>
-          <box
-            backgroundColor={hoveredAction === "login" ? hoverBg() : undefined}
-            onMouseMove={() => setHoveredAction("login")}
-            onMouseOut={() => setHoveredAction((current) => (current === "login" ? null : current))}
-            onMouseDown={(event: any) => openAuthCommand("Login", event)}
-          >
-            <text fg={hoveredAction === "login" ? colors.text : colors.textDim}> Login </text>
-          </box>
-          <text fg={colors.textDim}>/</text>
-          <box
-            backgroundColor={hoveredAction === "signup" ? hoverBg() : undefined}
-            onMouseMove={() => setHoveredAction("signup")}
-            onMouseOut={() => setHoveredAction((current) => (current === "signup" ? null : current))}
-            onMouseDown={(event: any) => openAuthCommand("Sign Up", event)}
-          >
-            <text fg={hoveredAction === "signup" ? colors.text : colors.textDim}> Sign Up </text>
-          </box>
+          <InlineAuthActions />
         </>
       ) : (
-        <text fg={colors.textDim}>
-          <span fg={colors.positive}>@</span>
-          {username ? (
-            <>
-              {" "}
-              <span fg={colors.positive}>{username}</span>
-              {"  "}
-            </>
-          ) : "  "}
-          <span fg={colors.text}>Shift+C</span> cloud
-        </text>
+        <box
+          flexDirection="row"
+          backgroundColor={hovered ? hoverBg() : undefined}
+          onMouseMove={() => setHovered(true)}
+          onMouseOut={() => setHovered(false)}
+          onMouseDown={openChat}
+        >
+          <text fg={unreadMentionCount > 0 ? colors.text : colors.textDim}>
+            <span fg={colors.positive}>@</span>
+            {username ? (
+              <>
+                {" "}
+                <span fg={colors.positive}>{username}</span>
+              </>
+            ) : null}
+          </text>
+          {unreadMentionCount > 0 ? (
+            <text fg={colors.positive} attributes={TextAttributes.BOLD}>{` [${unreadMentionCount}]`}</text>
+          ) : null}
+        </box>
       )}
     </box>
   );
@@ -488,6 +545,7 @@ export const gloomberbCloudPlugin: GloomPlugin = {
 
   setup(ctx) {
     chatController.attachPersistence(ctx.persistence, ctx.resume);
+    chatController.setToastNotifier(ctx.showToast);
 
     ctx.registerPane({
       id: "chat",
@@ -609,7 +667,8 @@ export const gloomberbCloudPlugin: GloomPlugin = {
           return;
         }
         await apiClient.signOut();
-        chatController.reset(true);
+        await chatController.refreshSession();
+        await chatController.refreshMessages();
         ctx.showToast("Logged out.", { type: "info" });
       },
       hidden: () => !apiClient.getSessionToken(),

package/src/plugins/builtin/comparison-chart.test.tsx

@@ -1,6 +1,7 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act } from "react";
 import { testRender } from "@opentui/react/test-utils";
+import { MarketDataCoordinator, setSharedMarketDataCoordinator } from "../../market-data/coordinator";
 import {
   AppContext,
   createInitialState,
@@ -23,6 +24,7 @@ import {
 const TEST_PANE_ID = "comparison-chart:test";
 
 let testSetup: Awaited<ReturnType<typeof testRender>> | undefined;
+let sharedCoordinator: MarketDataCoordinator | null = null;
 
 function makeTicker(symbol: string, currency: string): TickerRecord {
   return {
@@ -76,12 +78,19 @@ function createProvider(historyBySymbol: Record<string, number[]>, currencyBySym
     search: async () => [],
     getNews: async () => [],
     getArticleSummary: async () => null,
+    getChartResolutionCapabilities: async () => ["5m", "15m", "1h", "1d", "1wk", "1mo"],
     getPriceHistory: async (symbol) => (
       historyBySymbol[symbol] ?? []
     ).map((close, index) => ({
       date: new Date(2024, 0, index + 2),
       close,
     })),
+    getPriceHistoryForResolution: async (symbol) => (
+      historyBySymbol[symbol] ?? []
+    ).map((close, index) => ({
+      date: new Date(2024, 0, index + 2),
+      close,
+    })),
   };
 }
 
@@ -154,6 +163,8 @@ afterEach(() => {
     testSetup.renderer.destroy();
     testSetup = undefined;
   }
+  sharedCoordinator = null;
+  setSharedMarketDataCoordinator(null);
   setSharedRegistryForTests(undefined);
   setSharedDataProviderForTests(undefined);
 });
@@ -178,6 +189,8 @@ describe("comparisonChartPlugin", () => {
       title: "AAPL · MSFT · NVDA",
       settings: {
         axisMode: "percent",
+        rangePreset: "1Y",
+        chartResolution: "1d",
         symbols: ["AAPL", "MSFT", "NVDA"],
         symbolsText: "AAPL, MSFT, NVDA",
       },
@@ -190,19 +203,24 @@ describe("comparisonChartPlugin", () => {
       symbols: ["AAPL", "MSFT"],
     })).toEqual({
       axisMode: "percent",
+      rangePreset: "1Y",
+      chartResolution: "1d",
       symbols: ["AAPL", "MSFT"],
       symbolsText: "AAPL, MSFT",
     });
   });
 
   test("renders one shared overlay chart with the mixed-currency warning", async () => {
-    setSharedDataProviderForTests(createProvider({
+    const provider = createProvider({
       AAPL: [100, 102, 104, 106],
       "7203": [2000, 2020, 2050, 2100],
     }, {
       AAPL: "USD",
       "7203": "JPY",
-    }));
+    });
+    setSharedDataProviderForTests(provider);
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
     setSharedRegistryForTests(createRegistrySpy({ selected: [], focused: [] }));
 
     testSetup = await testRender(
@@ -224,14 +242,54 @@ describe("comparisonChartPlugin", () => {
 
     const frame = testSetup.captureCharFrame();
     expect(frame).toContain("Mixed currencies detected; showing percent change.");
-    expect(frame).toContain("1:1W");
+    expect(frame).toContain("1:1D");
+    expect(frame).toContain("2:1W");
+    expect(frame).toContain("1D");
+    expect(frame).toContain("view:");
     expect(frame).toContain("arrows legend");
     expect(frame).not.toContain("side by side");
   });
 
+  test("keeps controls visible when comparison history is empty", async () => {
+    const provider = createProvider({
+      AAPL: [],
+      MSFT: [],
+    }, {
+      AAPL: "USD",
+      MSFT: "USD",
+    });
+    setSharedDataProviderForTests(provider);
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
+    setSharedRegistryForTests(createRegistrySpy({ selected: [], focused: [] }));
+
+    testSetup = await testRender(
+      createComparisonHarness({
+        axisMode: "price",
+        symbols: ["AAPL", "MSFT"],
+        symbolsText: "AAPL, MSFT",
+      }, [
+        makeTicker("AAPL", "USD"),
+        makeTicker("MSFT", "USD"),
+      ], [
+        ["AAPL", makeFinancials("AAPL", "USD", [])],
+        ["MSFT", makeFinancials("MSFT", "USD", [])],
+      ]),
+      { width: 120, height: 20 },
+    );
+
+    await flushFrames();
+
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("No chart data yet.");
+    expect(frame).toContain("1:1D");
+    expect(frame).toContain("2:1W");
+    expect(frame).toContain("AUTO");
+  });
+
   test("moves legend selection with the keyboard and opens the selected ticker on Enter", async () => {
     const spy = { selected: [] as string[], focused: [] as string[] };
-    setSharedDataProviderForTests(createProvider({
+    const provider = createProvider({
       AAPL: [100, 102, 104],
       MSFT: [200, 202, 204],
       NVDA: [300, 305, 310],
@@ -239,7 +297,10 @@ describe("comparisonChartPlugin", () => {
       AAPL: "USD",
       MSFT: "USD",
       NVDA: "USD",
-    }));
+    });
+    setSharedDataProviderForTests(provider);
+    sharedCoordinator = new MarketDataCoordinator(provider);
+    setSharedMarketDataCoordinator(sharedCoordinator);
     setSharedRegistryForTests(createRegistrySpy(spy));
 
     testSetup = await testRender(

package/src/plugins/builtin/comparison-chart.tsx

@@ -1,7 +1,12 @@
 import { useCallback, useMemo } from "react";
 import { EmptyState } from "../../components";
 import { ComparisonStockChart } from "../../components/chart/comparison-stock-chart";
-import type { ChartAxisMode } from "../../components/chart/chart-types";
+import type { ChartAxisMode, TimeRange } from "../../components/chart/chart-types";
+import {
+  DEFAULT_COMPARISON_CHART_RANGE_PRESET,
+  DEFAULT_COMPARISON_CHART_RESOLUTION,
+  normalizeChartResolution,
+} from "../../components/chart/chart-resolution";
 import { getSharedRegistry } from "../../plugins/registry";
 import { useAppState } from "../../state/app-context";
 import { colors } from "../../theme/colors";
@@ -13,6 +18,8 @@ export const COMPARISON_CHART_TEMPLATE_ID = "comparison-chart-pane";
 
 interface ComparisonChartPaneSettings {
   axisMode: ChartAxisMode;
+  rangePreset: TimeRange;
+  chartResolution: ReturnType<typeof normalizeChartResolution>;
   symbols: string[];
   symbolsText: string;
 }
@@ -46,6 +53,17 @@ export function getComparisonChartPaneSettings(settings: Record<string, unknown>
 
   return {
     axisMode: isChartAxisMode(settings?.axisMode) ? settings.axisMode : "price",
+    rangePreset: settings?.rangePreset === "1D"
+      || settings?.rangePreset === "1W"
+      || settings?.rangePreset === "1M"
+      || settings?.rangePreset === "3M"
+      || settings?.rangePreset === "6M"
+      || settings?.rangePreset === "1Y"
+      || settings?.rangePreset === "5Y"
+      || settings?.rangePreset === "ALL"
+      ? settings.rangePreset
+      : DEFAULT_COMPARISON_CHART_RANGE_PRESET,
+    chartResolution: normalizeChartResolution(settings?.chartResolution, DEFAULT_COMPARISON_CHART_RESOLUTION),
     symbols,
     symbolsText: storedText.trim().length > 0 ? storedText : formatTickerListInput(symbols),
   };
@@ -159,6 +177,8 @@ export const comparisonChartPlugin: GloomPlugin = {
           placement: "floating",
           settings: {
             axisMode: "percent",
+            rangePreset: DEFAULT_COMPARISON_CHART_RANGE_PRESET,
+            chartResolution: DEFAULT_COMPARISON_CHART_RESOLUTION,
             symbols,
             symbolsText: formatTickerListInput(symbols),
           },