gloomberb 0.9.7 → 0.9.8

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

@@ -45,6 +45,55 @@ function makeOwnMessage(content = "typo", createdAt = recentChatTimestamp()): Ch
   };
 }
 
+const makeNamedMessage = (index: number, username: string): ChatMessage => ({
+  id: `named-${index}`,
+  channelId: "everyone",
+  content: `message from ${username}`,
+  replyToId: null,
+  createdAt: `2026-03-30T00:01:${String(index).padStart(2, "0")}.000Z`,
+  user: { id: `u-${username}`, username, displayName: username },
+});
+
+async function renderFocusedComposerWithDraft(
+  controller: ReturnType<typeof createController>,
+  draft: string,
+  options: Parameters<typeof createHarness>[1] = {},
+) {
+  const harnessOptions = {
+    width: 72,
+    height: 14,
+    ...options,
+  };
+  await act(async () => {
+    testSetup = await testRender(createHarness(controller, harnessOptions), {
+      width: harnessOptions.width ?? 72,
+      height: harnessOptions.height ?? 14,
+    });
+  });
+
+  await flushFrame();
+
+  const frameBeforeClick = setup().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 setup().mockMouse.click(inputCol + 1, inputRow);
+    await setup().renderOnce();
+    await setup().renderOnce();
+  });
+
+  await act(async () => {
+    await setup().mockInput.typeText(draft);
+    await setup().renderOnce();
+    await setup().renderOnce();
+  });
+  await flushFrame();
+}
+
 beforeEach(() => {
   installChatApiTestDefaults();
 });
@@ -177,6 +226,82 @@ describe("ChatContent", () => {
     expect(frameAfterType).not.toContain("> betaalpha");
   });
 
+  test("autocompletes recent user mentions from the focused composer", async () => {
+    const controller = createController({
+      messages: [
+        makeNamedMessage(1, "alpha"),
+        makeNamedMessage(2, "bravo"),
+        makeNamedMessage(3, "charlie"),
+      ],
+    });
+
+    await renderFocusedComposerWithDraft(controller, "@");
+
+    let frame = setup().captureCharFrame();
+    expect(frame).toContain("@charlie");
+    expect(frame).toContain("@bravo");
+
+    await emitKeypress({ name: "down", sequence: "\u001b[B" });
+
+    await act(async () => {
+      setup().mockInput.pressEnter();
+      await setup().renderOnce();
+      await setup().renderOnce();
+    });
+    await flushFrame();
+
+    frame = setup().captureCharFrame();
+    expect(frame).toContain("> @bravo");
+    expect(frame).not.toContain("@charlie");
+  });
+
+  test("tab accepts the current mention suggestion without pane cycling", async () => {
+    const controller = createController({
+      messages: [
+        makeNamedMessage(1, "alpha"),
+        makeNamedMessage(2, "bravo"),
+        makeNamedMessage(3, "charlie"),
+      ],
+    });
+
+    await renderFocusedComposerWithDraft(controller, "@");
+
+    const event = await emitKeypress({ name: "tab", sequence: "\t" });
+    await flushFrame();
+
+    const frame = setup().captureCharFrame();
+    expect(frame).toContain("> @charlie");
+    expect(frame).not.toContain("@bravo");
+    expect(event.defaultPrevented).toBe(true);
+    expect(event.propagationStopped).toBe(true);
+  });
+
+  test("leaves tab for the command bar when mention suggestions are open behind it", async () => {
+    const controller = createController({
+      messages: [
+        makeNamedMessage(1, "alpha"),
+        makeNamedMessage(2, "bravo"),
+        makeNamedMessage(3, "charlie"),
+      ],
+    });
+
+    await renderFocusedComposerWithDraft(controller, "@", {
+      configureState: (state) => {
+        state.commandBarOpen = true;
+      },
+    });
+
+    const event = await emitKeypress({ name: "tab", sequence: "\t" });
+    await flushFrame();
+
+    const frame = setup().captureCharFrame();
+    expect(frame).toContain("@charlie");
+    expect(frame).toContain("> @");
+    expect(frame).not.toContain("> @charlie");
+    expect(event.defaultPrevented).toBe(false);
+    expect(event.propagationStopped).toBe(false);
+  });
+
   test("up arrow selects the newest message first when nothing is selected", async () => {
     const controller = createController({
       messages: [makeMessage(1), makeMessage(2)],

package/src/plugins/builtin/chat/content/channel-navigation.ts

@@ -1,12 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Dispatch, MutableRefObject, SetStateAction } from "react";
-import type { ChatChannel, ChatUserSummary } from "../../../../api-client";
+import type { ChatChannel } from "../../../../api-client";
 import { useThrottledCommitValue } from "../../../../react/use-throttled-commit-value";
 import {
   DEFAULT_CHAT_CHANNEL_ID,
   normalizeChannelId,
 } from "../channels";
-import type { ChatContentController } from "./types";
 
 const CHANNEL_NAVIGATION_COMMIT_DELAY_MS = 150;
 
@@ -20,8 +19,6 @@ export function useChatChannelNavigation({
   channelIdRef,
   channels,
   channelsLoading,
-  closeProfilePopover,
-  controller,
   focused,
   inputFocused,
   onChannelChange,
@@ -33,8 +30,6 @@ export function useChatChannelNavigation({
   channelIdRef: MutableRefObject<string>;
   channels: ChatChannel[];
   channelsLoading: boolean;
-  closeProfilePopover: () => void;
-  controller: ChatContentController;
   focused: boolean;
   inputFocused: boolean;
   onChannelChange?: (channelId: string) => void;
@@ -46,7 +41,6 @@ export function useChatChannelNavigation({
   focusChannelSidebar: () => boolean;
   focusChatContent: () => boolean;
   moveSidebarChannelSelection: (direction: "up" | "down") => boolean;
-  openDirectMessage: (target: ChatUserSummary) => Promise<void>;
   selectSidebarChannel: (channelId: string) => void;
   setDirectExpanded: Dispatch<SetStateAction<boolean>>;
   setSidebarFocused: (nextFocused: boolean) => void;
@@ -82,19 +76,6 @@ export function useChatChannelNavigation({
     replaceValue: replaceSidebarCursorChannelId,
   } = useThrottledCommitValue(channelId, changeChannel, CHANNEL_NAVIGATION_COMMIT_DELAY_MS);
 
-  const openDirectMessage = useCallback(async (target: ChatUserSummary) => {
-    if (!target.id && !target.username) return;
-    try {
-      const channel = await controller.openDirectChannel({
-        userId: target.id,
-        username: target.username ?? undefined,
-      });
-      setDirectExpanded(true);
-      setSidebarCursorChannelId(channel.id, { immediate: true });
-      closeProfilePopover();
-    } catch {}
-  }, [closeProfilePopover, controller, setSidebarCursorChannelId]);
-
   useEffect(() => {
     if (!onChannelChange || channelsLoading || channels.length === 0) return;
     if (channels.some((channel) => channel.id === channelId)) return;
@@ -185,7 +166,6 @@ export function useChatChannelNavigation({
     focusChannelSidebar,
     focusChatContent,
     moveSidebarChannelSelection,
-    openDirectMessage,
     selectSidebarChannel,
     setDirectExpanded,
     setSidebarFocused,

package/src/plugins/builtin/chat/content/composer-cursor.ts

@@ -0,0 +1,29 @@
+import type { TextareaRenderable } from "../../../../ui";
+
+const clampCursorOffset = (offset: number, draft: string) => Math.max(0, Math.min(offset, draft.length));
+
+export function getComposerCursorOffset(
+  textarea: TextareaRenderable | null | undefined,
+  draft: string,
+): number {
+  const offset = textarea?.visualCursor?.offset ?? textarea?.cursorOffset ?? draft.length;
+  return clampCursorOffset(offset, draft);
+}
+
+export function moveComposerCursorToOffset(
+  textarea: TextareaRenderable,
+  draft: string,
+  offset: number,
+): void {
+  const nextOffset = clampCursorOffset(offset, draft);
+  const editBuffer = textarea.editBuffer as typeof textarea.editBuffer & {
+    setCursorByOffset?: (offset: number) => void;
+  };
+  if (typeof editBuffer.setCursorByOffset === "function") return editBuffer.setCursorByOffset(nextOffset);
+  if (typeof textarea.setCursorOffset === "function") return textarea.setCursorOffset(nextOffset);
+  try {
+    textarea.cursorOffset = nextOffset;
+  } catch {
+    // Some host renderers expose cursorOffset as read-only.
+  }
+}

package/src/plugins/builtin/chat/content/composer-runtime.ts

@@ -7,31 +7,12 @@ import {
 } from "../layout";
 import { parseChatComposerCommand } from "../composer-commands";
 import type { ChatContentController } from "./types";
+import { getComposerCursorOffset, moveComposerCursorToOffset } from "./composer-cursor";
 
 interface MutableRef<T> {
   current: T;
 }
 
-function moveComposerCursorToEnd(textarea: TextareaRenderable, draft: string) {
-  const offset = draft.length;
-  const editBuffer = textarea.editBuffer as typeof textarea.editBuffer & {
-    setCursorByOffset?: (offset: number) => void;
-  };
-  if (typeof editBuffer.setCursorByOffset === "function") {
-    editBuffer.setCursorByOffset(offset);
-    return;
-  }
-  if (typeof textarea.setCursorOffset === "function") {
-    textarea.setCursorOffset(offset);
-    return;
-  }
-  try {
-    textarea.cursorOffset = offset;
-  } catch {
-    // Some host renderers expose cursorOffset as read-only.
-  }
-}
-
 export function useChatComposerRuntime({
   applyingExternalDraftRef,
   blurInput,
@@ -46,6 +27,7 @@ export function useChatComposerRuntime({
   inputRef,
   inputValueRef,
   messages,
+  onComposerStateChange,
   onChannelChange,
   editingMessage,
   latestEditableMessageId,
@@ -71,6 +53,7 @@ export function useChatComposerRuntime({
   inputRef: MutableRef<TextareaRenderable | null>;
   inputValueRef: MutableRef<string>;
   messages: ChatMessage[];
+  onComposerStateChange?: (draft: string, cursorOffset: number) => void;
   onChannelChange?: (channelId: string) => void;
   editingMessage: ChatMessage | null;
   latestEditableMessageId: string | null;
@@ -112,7 +95,7 @@ export function useChatComposerRuntime({
     }
   }, [channelId, controller, useDefaultControllerChannel]);
 
-  const replaceLocalComposer = useCallback((draft: string) => {
+  const replaceLocalComposer = useCallback((draft: string, cursorOffset = draft.length) => {
     inputValueRef.current = draft;
     updateComposerRows(draft);
     const textarea = inputRef.current;
@@ -120,14 +103,20 @@ export function useChatComposerRuntime({
       applyingExternalDraftRef.current = true;
       try {
         textarea.setText(draft);
-        moveComposerCursorToEnd(textarea, draft);
+        moveComposerCursorToOffset(textarea, draft, cursorOffset);
       } finally {
         applyingExternalDraftRef.current = false;
       }
     } else if (textarea) {
-      moveComposerCursorToEnd(textarea, draft);
+      moveComposerCursorToOffset(textarea, draft, cursorOffset);
     }
-  }, [applyingExternalDraftRef, inputRef, inputValueRef, updateComposerRows]);
+    onComposerStateChange?.(draft, cursorOffset);
+  }, [applyingExternalDraftRef, inputRef, inputValueRef, onComposerStateChange, updateComposerRows]);
+
+  const replaceComposerDraft = useCallback((draft: string, cursorOffset = draft.length) => {
+    replaceLocalComposer(draft, cursorOffset);
+    persistDraft(draft);
+  }, [persistDraft, replaceLocalComposer]);
 
   const beginReplyTo = useCallback((index: number, options?: { deferFocus?: boolean }) => {
     if (!canSend || index < 0 || index >= messages.length) return;
@@ -295,14 +284,22 @@ export function useChatComposerRuntime({
 
   const commitLocalDraft = useCallback((draft: string) => {
     if (applyingExternalDraftRef.current) return;
+    const previousDraft = inputValueRef.current;
     inputValueRef.current = draft;
     updateComposerRows(draft);
     persistDraft(draft);
+    const rawCursorOffset = getComposerCursorOffset(inputRef.current, draft);
+    const cursorOffset = rawCursorOffset === 0 && draft.length > previousDraft.length && draft.startsWith(previousDraft)
+      ? draft.length
+      : rawCursorOffset;
+    onComposerStateChange?.(draft, cursorOffset);
   }, [
     applyingExternalDraftRef,
     channelId,
     controller,
+    inputRef,
     inputValueRef,
+    onComposerStateChange,
     persistDraft,
     updateComposerRows,
     useDefaultControllerChannel,
@@ -376,6 +373,7 @@ export function useChatComposerRuntime({
     focusComposer,
     inputPlaceholder,
     replyPreview,
+    replaceComposerDraft,
     returnToComposer,
     sendMessage,
   };

package/src/plugins/builtin/chat/content/composer.tsx

@@ -5,6 +5,7 @@ import type { ChatMessage } from "../../../../api-client";
 import { InlineAuthActions } from "../../cloud/auth-actions";
 import { ChatActionChip } from "../message/action-chip";
 import { COMPOSER_ACTION_WIDTH } from "../layout";
+import type { ChatMentionSuggestion } from "./mentions";
 
 const DESKTOP_CHAT_INPUT_TOP_MARGIN_PX = 6;
 
@@ -33,9 +34,73 @@ interface ChatComposerAreaProps {
   replyPreview: string;
   replyTo: ChatMessage | null;
   sendMessage: () => void;
+  mentionSuggestions: ChatMentionSuggestion[];
+  mentionSelectedIndex: number;
+  onMentionCursorChange: () => void;
+  onMentionSelect: (index?: number) => boolean;
   user: { id: string; username: string; emailVerified: boolean } | null;
 }
 
+function ChatMentionSuggestions({
+  contentWidth,
+  nativePaneChrome,
+  onSelect,
+  selectedIndex,
+  suggestions,
+}: {
+  contentWidth: number;
+  nativePaneChrome: boolean | undefined;
+  onSelect: (index?: number) => boolean;
+  selectedIndex: number;
+  suggestions: ChatMentionSuggestion[];
+}) {
+  if (suggestions.length === 0) return null;
+  const width = Math.max(18, Math.min(contentWidth, 44));
+  const menuStyle = nativePaneChrome
+    ? {
+      marginBottom: 4,
+      border: `1px solid ${colors.border}`,
+      borderRadius: 6,
+      overflow: "hidden",
+    }
+    : undefined;
+
+  return (
+    <Box
+      width={width}
+      height={suggestions.length}
+      flexDirection="column"
+      backgroundColor={nativePaneChrome ? colors.panel : colors.bg}
+      style={menuStyle}
+    >
+      {suggestions.map((suggestion, index) => {
+        const selected = index === selectedIndex;
+        return (
+          <Box
+            key={suggestion.username}
+            height={1}
+            width={width}
+            flexDirection="row"
+            backgroundColor={selected ? colors.selected : "transparent"}
+            onMouseDown={() => { onSelect(index); }}
+            style={{
+              cursor: "pointer",
+              paddingInline: nativePaneChrome ? 8 : undefined,
+            }}
+          >
+            <Text
+              fg={selected ? colors.selectedText : colors.positive}
+              attributes={selected ? TextAttributes.BOLD : 0}
+            >
+              {`@${suggestion.username}`}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}
+
 export function ChatComposerArea({
   canSend,
   cancelEditMessage,
@@ -57,6 +122,10 @@ export function ChatComposerArea({
   replyPreview,
   replyTo,
   sendMessage,
+  mentionSuggestions,
+  mentionSelectedIndex,
+  onMentionCursorChange,
+  onMentionSelect,
   user,
 }: ChatComposerAreaProps) {
   if (!canSend) {
@@ -122,6 +191,14 @@ export function ChatComposerArea({
         </Box>
       )}
 
+      <ChatMentionSuggestions
+        contentWidth={contentWidth}
+        nativePaneChrome={nativePaneChrome}
+        onSelect={onMentionSelect}
+        selectedIndex={mentionSelectedIndex}
+        suggestions={mentionSuggestions}
+      />
+
       <MessageComposer
         inputRef={inputRef}
         initialValue={inputValueRef.current}
@@ -132,6 +209,7 @@ export function ChatComposerArea({
         height={composerHeight}
         onFocusRequest={focusComposer}
         onInput={commitLocalDraft}
+        onCursorChange={onMentionCursorChange}
         keyBindings={[
           { name: "return", action: "submit" },
           { name: "linefeed", action: "submit" },
@@ -141,6 +219,7 @@ export function ChatComposerArea({
           { name: "linefeed", meta: true, action: "submit" },
         ]}
         onSubmit={() => {
+          if (onMentionSelect()) return;
           if (inputValueRef.current.trim()) {
             sendMessage();
           }
@@ -157,13 +236,17 @@ export function getChatComposerAreaHeight({
   editingMessage,
   nativePaneChrome,
   replyTo,
+  mentionSuggestionCount,
 }: {
   canSend: boolean;
   composerHeight: number;
   editingMessage: ChatMessage | null;
   nativePaneChrome: boolean | undefined;
   replyTo: ChatMessage | null;
+  mentionSuggestionCount?: number;
 }) {
   if (!canSend) return 2;
-  return getMessageComposerBlockHeight({ height: composerHeight, nativePaneChrome }) + (editingMessage || replyTo ? 1 : 0);
+  return getMessageComposerBlockHeight({ height: composerHeight, nativePaneChrome })
+    + (editingMessage || replyTo ? 1 : 0)
+    + Math.max(0, mentionSuggestionCount ?? 0);
 }