gloomberb 0.5.0 → 0.6.0

package/src/plugins/builtin/chat.test.tsx

@@ -1,13 +1,17 @@
 import { afterEach, describe, expect, test } from "bun:test";
 import { act, useState } from "react";
-import { testRender } from "@opentui/react/test-utils";
+import { PaneFooterBar, PaneFooterProvider } from "../../components/layout/pane-footer";
+import { testRender } from "../../renderers/opentui/test-utils";
 import { AppContext, createInitialState } from "../../state/app-context";
+import { createTestPluginRuntime } from "../../test-support/plugin-runtime";
 import { colors } from "../../theme/colors";
 import { createDefaultConfig } from "../../types/config";
 import type { PersistedResourceValue } from "../../types/persistence";
 import type { PluginPersistence } from "../../types/plugin";
+import { Box } from "../../ui";
 import { apiClient, type ChatMessage } from "../../utils/api-client";
-import { setSharedDataProviderForTests, setSharedRegistryForTests } from "../registry";
+import { PluginRenderProvider, type PluginRuntimeAccess } from "../plugin-runtime";
+import { setSharedMarketDataForTests, setSharedRegistryForTests } from "../registry";
 import { ChatContent, ChatStatusWidget, getSelectedMessageScrollTop, gloomberbCloudPlugin } from "./chat";
 import { ChatController } from "./chat-controller";
 
@@ -141,6 +145,8 @@ function createHarness(
     height?: number;
     configureState?: (state: ReturnType<typeof createInitialState>) => void;
     close?: () => void;
+    withFooter?: boolean;
+    runtime?: PluginRuntimeAccess;
   },
 ) {
   const width = options?.width ?? 60;
@@ -148,15 +154,36 @@ function createHarness(
   const state = createInitialState(createDefaultConfig("/tmp/gloomberb-chat"));
   options?.configureState?.(state);
 
+  const content = options?.withFooter ? (
+    <PaneFooterProvider>
+      {(footer) => (
+        <Box flexDirection="column" width={width} height={height}>
+          <ChatContent
+            controller={controller}
+            width={width}
+            height={Math.max(1, height - 1)}
+            focused
+            close={options?.close}
+          />
+          <PaneFooterBar footer={footer} focused width={width} />
+        </Box>
+      )}
+    </PaneFooterProvider>
+  ) : (
+    <ChatContent
+      controller={controller}
+      width={width}
+      height={height}
+      focused
+      close={options?.close}
+    />
+  );
+
   return (
     <AppContext value={{ state, dispatch: () => {} }}>
-      <ChatContent
-        controller={controller}
-        width={width}
-        height={height}
-        focused
-        close={options?.close}
-      />
+      <PluginRenderProvider pluginId="gloomberb-cloud" runtime={options?.runtime ?? createTestPluginRuntime()}>
+        {content}
+      </PluginRenderProvider>
     </AppContext>
   );
 }
@@ -208,7 +235,7 @@ function hexToRgbaInts(hex: string) {
 
 afterEach(async () => {
   setSharedRegistryForTests(undefined);
-  setSharedDataProviderForTests(undefined);
+  setSharedMarketDataForTests(undefined);
   apiClient.connectChannel = originalConnectChannel;
   apiClient.setSessionToken(null);
 
@@ -329,6 +356,29 @@ describe("ChatContent", () => {
     expect(frame).not.toContain("click a message");
   });
 
+  test("uses the full message row width when the reply action is hidden", async () => {
+    const controller = createController({
+      messages: [{
+        ...makeMessage(1),
+        content: "small panes should use full width",
+      }],
+    });
+
+    await act(async () => {
+      testSetup = await testRender(createHarness(controller, {
+        width: 44,
+        height: 8,
+      }), {
+        width: 44,
+        height: 8,
+      });
+    });
+
+    await flushFrame();
+
+    expect(testSetup.captureCharFrame()).toContain("small panes should use full width");
+  });
+
   test("does not select a message when the row is clicked", async () => {
     const controller = createController({
       messages: [makeMessage(1)],
@@ -417,6 +467,34 @@ describe("ChatContent", () => {
     expect(frame).toContain("Reply to @user2...");
   });
 
+  test("shows the reply action next to the selected message timestamp", async () => {
+    const controller = createController({
+      messages: [makeMessage(1), makeMessage(2)],
+    });
+
+    await act(async () => {
+      testSetup = await testRender(createHarness(controller, {
+        width: 72,
+        height: 12,
+      }), {
+        width: 72,
+        height: 12,
+      });
+    });
+
+    await flushFrame();
+
+    await emitKeypress({ name: "up", sequence: "\u001b[A" });
+    await flushFrame();
+
+    const lines = testSetup.captureCharFrame().split("\n");
+    const headerLine = lines.find((line) => line.includes("user2"));
+    const bodyLine = lines.find((line) => line.includes("message 2"));
+
+    expect(headerLine).toContain("Reply");
+    expect(bodyLine).not.toContain("Reply");
+  });
+
   test("down arrow from the newest selected message returns focus to the composer", async () => {
     const controller = createController({
       messages: [makeMessage(1), makeMessage(2)],
@@ -839,6 +917,45 @@ describe("ChatContent", () => {
     expect(sentMessages).toEqual(["first line\nsecond line"]);
   });
 
+  test("keeps typed shortcut letters in the composer instead of moving message selection", async () => {
+    const controller = createController({
+      messages: Array.from({ length: 18 }, (_, index) => makeMessage(index + 1)),
+    });
+
+    await act(async () => {
+      testSetup = await testRender(createHarness(controller), {
+        width: 60,
+        height: 12,
+      });
+    });
+
+    await flushFrame();
+
+    const frameBeforeClick = testSetup.captureCharFrame().split("\n");
+    const inputRow = frameBeforeClick.findIndex((line) => line.includes("Type a message..."));
+    const inputCol = frameBeforeClick[inputRow]?.indexOf("Type a message...") ?? -1;
+
+    expect(inputRow).toBeGreaterThanOrEqual(0);
+    expect(inputCol).toBeGreaterThanOrEqual(0);
+
+    await act(async () => {
+      await testSetup!.mockMouse.click(inputCol + 1, inputRow);
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    await act(async () => {
+      await testSetup!.mockInput.typeText("g");
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const frameAfterType = testSetup.captureCharFrame();
+    expect(frameAfterType).toContain("> g");
+    expect(frameAfterType).not.toContain("user1 3/30/26");
+    expect(frameAfterType).not.toContain("message 1 ");
+  });
+
   test("renders optimistic sends with a sending status", async () => {
     const controller = createController({
       messages: [{
@@ -880,9 +997,9 @@ describe("ChatContent", () => {
     });
 
     await act(async () => {
-      testSetup = await testRender(createHarness(controller, { width: 60, height: 12 }), {
+      testSetup = await testRender(createHarness(controller, { width: 60, height: 13, withFooter: true }), {
         width: 60,
-        height: 12,
+        height: 13,
       });
     });
 
@@ -899,11 +1016,131 @@ describe("ChatContent", () => {
     await flushFrame();
 
     const frameAfterUpdate = testSetup.captureCharFrame();
-    expect(frameAfterUpdate).toContain("7 messages");
+    expect(frameAfterUpdate).not.toContain("7 messages");
     expect(frameAfterUpdate).toContain("message 7");
     expect(frameAfterUpdate).not.toContain("message 1");
   });
 
+  test("loads older messages at the top without jumping away from the current transcript", async () => {
+    const controller = createController({
+      messages: [
+        makeMessage(4),
+        makeMessage(5),
+        makeMessage(6),
+        makeMessage(7),
+        makeMessage(8),
+        makeMessage(9),
+        makeMessage(10),
+      ],
+    });
+    let loadCount = 0;
+    controller.loadOlderMessages = async () => {
+      loadCount += 1;
+      (controller as any).mergeMessages([
+        makeMessage(1),
+        makeMessage(2),
+        makeMessage(3),
+      ], { notifyMentions: false });
+    };
+
+    await act(async () => {
+      testSetup = await testRender(createHarness(controller, { width: 60, height: 13 }), {
+        width: 60,
+        height: 13,
+      });
+    });
+
+    await flushFrame();
+    expect(testSetup.captureCharFrame()).toContain("message 10");
+
+    await emitKeypress({ name: "g", sequence: "g" });
+    await flushFrame();
+
+    expect(loadCount).toBe(1);
+    expect(controller.getSnapshot().messages.map((message) => message.id)).toEqual([
+      "m1",
+      "m2",
+      "m3",
+      "m4",
+      "m5",
+      "m6",
+      "m7",
+      "m8",
+      "m9",
+      "m10",
+    ]);
+    const frame = testSetup.captureCharFrame();
+    expect(frame).toContain("message 4");
+    expect(frame).not.toContain("message 1");
+  });
+
+  test("repins the transcript to the latest message when a following chat pane regains focus", async () => {
+    const controller = createController({
+      messages: [
+        makeMessage(1),
+        makeMessage(2),
+        makeMessage(3),
+        makeMessage(4),
+        makeMessage(5),
+        makeMessage(6),
+        makeMessage(7),
+        makeMessage(8),
+      ],
+    });
+    const state = createInitialState(createDefaultConfig("/tmp/gloomberb-chat-refocus"));
+    let setFocused: ((focused: boolean) => void) | undefined;
+
+    function FocusHarness() {
+      const [isFocused, updateFocused] = useState(false);
+      setFocused = updateFocused;
+
+      return (
+        <AppContext value={{ state, dispatch: () => {} }}>
+          <PluginRenderProvider pluginId="gloomberb-cloud" runtime={createTestPluginRuntime()}>
+            <ChatContent
+              controller={controller}
+              width={60}
+              height={13}
+              focused={isFocused}
+            />
+          </PluginRenderProvider>
+        </AppContext>
+      );
+    }
+
+    await act(async () => {
+      testSetup = await testRender(<FocusHarness />, {
+        width: 60,
+        height: 13,
+      });
+    });
+
+    await flushFrame();
+    expect(testSetup.captureCharFrame()).toContain("message 8");
+
+    await act(async () => {
+      await testSetup!.mockMouse.scroll(3, 4, "up");
+      await testSetup!.mockMouse.scroll(3, 4, "up");
+      await testSetup!.mockMouse.scroll(3, 4, "up");
+      await testSetup!.renderOnce();
+      await testSetup!.renderOnce();
+    });
+
+    const scrolledFrame = testSetup.captureCharFrame();
+    expect(scrolledFrame).toContain("message 2");
+    expect(scrolledFrame).not.toContain("message 8");
+
+    await act(async () => {
+      setFocused?.(true);
+      await testSetup!.renderOnce();
+    });
+    await flushFrame();
+
+    const refocusedFrame = testSetup.captureCharFrame();
+    expect(refocusedFrame).toContain("message 8");
+    expect(refocusedFrame).not.toContain("message 2");
+  });
+
   test("keeps the bottom reachable after narrowing the chat pane", async () => {
     const controller = createController({
       messages: [
@@ -932,12 +1169,14 @@ describe("ChatContent", () => {
 
       return (
         <AppContext value={{ state, dispatch: () => {} }}>
-          <ChatContent
-            controller={controller}
-            width={size.width}
-            height={size.height}
-            focused
-          />
+          <PluginRenderProvider pluginId="gloomberb-cloud" runtime={createTestPluginRuntime()}>
+            <ChatContent
+              controller={controller}
+              width={size.width}
+              height={size.height}
+              focused
+            />
+          </PluginRenderProvider>
         </AppContext>
       );
     }
@@ -960,7 +1199,7 @@ describe("ChatContent", () => {
     const frame = testSetup!.captureCharFrame();
     expect(frame).toContain("vince");
     expect(frame).toContain("newest message stays");
-    expect(frame).toContain("reachable after shrink");
+    expect(frame).toContain("shrink");
   });
 
   test("renders ticker badges and opens a floating detail pane on click", async () => {
@@ -977,7 +1216,7 @@ describe("ChatContent", () => {
     const opened: string[] = [];
 
     setSharedRegistryForTests({
-      pinTickerFn(symbol: string) {
+      pinTicker(symbol: string) {
         opened.push(symbol);
       },
     } as any);
@@ -1107,7 +1346,7 @@ describe("ChatContent", () => {
     const frame = testSetup.captureCharFrame();
     expect(frame).toContain("message 1");
     expect(frame).toContain("Read-only chat.");
-    expect(frame).toContain("Login");
+    expect(frame).toContain("Log In");
     expect(frame).toContain("Sign Up");
     expect(frame).not.toContain("Type a message...");
   });
@@ -1123,7 +1362,9 @@ describe("ChatContent", () => {
     await act(async () => {
       testSetup = await testRender(
         <AppContext value={{ state, dispatch: () => {} }}>
-          <ChatStatusWidget controller={controller} />
+          <PluginRenderProvider pluginId="gloomberb-cloud" runtime={createTestPluginRuntime()}>
+            <ChatStatusWidget controller={controller} />
+          </PluginRenderProvider>
         </AppContext>,
         { width: 40, height: 1 },
       );
@@ -1146,16 +1387,18 @@ describe("ChatContent", () => {
     const state = createInitialState(createDefaultConfig("/tmp/gloomberb-chat"));
     state.config.disabledPlugins = [];
 
-    setSharedRegistryForTests({
-      openCommandBarFn(query?: string) {
+    const runtime = createTestPluginRuntime({
+      openCommandBar(query?: string) {
         openedQueries.push(query ?? "");
       },
-    } as any);
+    });
 
     await act(async () => {
       testSetup = await testRender(
         <AppContext value={{ state, dispatch: () => {} }}>
-          <ChatStatusWidget controller={controller} />
+          <PluginRenderProvider pluginId="gloomberb-cloud" runtime={runtime}>
+            <ChatStatusWidget controller={controller} />
+          </PluginRenderProvider>
         </AppContext>,
         { width: 40, height: 1 },
       );
@@ -1165,22 +1408,22 @@ describe("ChatContent", () => {
 
     const frame = testSetup.captureCharFrame();
     expect(frame).toContain("☁");
-    expect(frame).toContain("Login");
-    expect(frame).toContain("Sign Up");
+    expect(frame).toContain("Log In");
+    expect(frame).not.toContain("Sign Up");
     expect(frame).not.toContain("Shift+C");
 
     const line = frame.split("\n")[0] ?? "";
-    const signUpCol = line.indexOf("Sign Up");
+    const loginCol = line.indexOf("Log In");
 
-    expect(signUpCol).toBeGreaterThanOrEqual(0);
+    expect(loginCol).toBeGreaterThanOrEqual(0);
 
     await act(async () => {
-      await testSetup!.mockMouse.click(signUpCol + 1, 0);
+      await testSetup!.mockMouse.click(loginCol + 1, 0);
       await testSetup!.renderOnce();
       await testSetup!.renderOnce();
     });
 
-    expect(openedQueries).toEqual(["Sign Up"]);
+    expect(openedQueries).toEqual(["Log In"]);
   });
 
   test("shows an unread mention badge and opens chat from the status widget", async () => {
@@ -1192,11 +1435,11 @@ describe("ChatContent", () => {
     const state = createInitialState(createDefaultConfig("/tmp/gloomberb-chat"));
     state.config.disabledPlugins = [];
 
-    setSharedRegistryForTests({
+    const runtime = createTestPluginRuntime({
       showWidget(paneId: string) {
         openedWidgets.push(paneId);
       },
-    } as any);
+    });
 
     await act(async () => {
       (controller as any).mergeMessages([{
@@ -1212,7 +1455,9 @@ describe("ChatContent", () => {
     await act(async () => {
       testSetup = await testRender(
         <AppContext value={{ state, dispatch: () => {} }}>
-          <ChatStatusWidget controller={controller} />
+          <PluginRenderProvider pluginId="gloomberb-cloud" runtime={runtime}>
+            <ChatStatusWidget controller={controller} />
+          </PluginRenderProvider>
         </AppContext>,
         { width: 40, height: 1 },
       );
@@ -1249,6 +1494,8 @@ describe("ChatContent", () => {
         deleteState: () => {},
       },
       registerPane: () => {},
+      registerPaneTemplate: () => {},
+      registerDetailTab: () => {},
       registerShortcut: () => {},
       registerCommand: (command: { id: string; wizardLayout?: string; wizard?: Array<{ key: string }> }) => {
         registeredCommands.push(command);