gloomberb 0.9.6 → 0.9.8

package/src/plugins/builtin/chat/content/new-dm-dialog.tsx

@@ -0,0 +1,264 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ListView, TextField, type ListViewItem } from "../../../../components/ui";
+import { useShortcut } from "../../../../react/input";
+import { colors, hoverBg } from "../../../../theme/colors";
+import { Box, Text, TextAttributes, type InputRenderable } from "../../../../ui";
+import type { ChatUserSummary } from "../../../../api-client";
+import { isPlainKey } from "../../../../utils/keyboard";
+import {
+  hasOnlyDmUsernameArgs,
+  parseDmUsernames,
+  truncateChannelLabel,
+} from "../channels";
+
+const MAX_RECENT_USERS = 6;
+const MIN_DIALOG_WIDTH = 32;
+const MAX_DIALOG_WIDTH = 52;
+const DIALOG_HEIGHT = 10;
+
+interface DmUserCandidate {
+  username: string;
+  displayName: string;
+}
+
+function normalizeUsername(value: string | null | undefined): string {
+  return value?.trim().replace(/^@+/, "").toLowerCase() ?? "";
+}
+
+function currentTokenQuery(value: string): string {
+  const token = value.split(/[\s,]+/).at(-1) ?? "";
+  return normalizeUsername(token);
+}
+
+function candidateUsers(
+  userByUsername: Map<string, ChatUserSummary>,
+  currentUserId: string | null | undefined,
+): DmUserCandidate[] {
+  const candidates = new Map<string, DmUserCandidate>();
+  for (const [key, user] of userByUsername) {
+    if (currentUserId && user.id === currentUserId) continue;
+    const username = normalizeUsername(user.username ?? key);
+    if (!username) continue;
+    candidates.set(username, {
+      username,
+      displayName: user.displayName?.trim() || `@${username}`,
+    });
+  }
+  return [...candidates.values()].sort((left, right) => left.username.localeCompare(right.username));
+}
+
+function setUsernameSelected(value: string, username: string, selected: boolean): string {
+  const usernames = parseDmUsernames(value).filter((existing) => existing !== username);
+  if (selected) usernames.push(username);
+  return usernames.map((entry) => `@${entry}`).join(" ") + (usernames.length > 0 ? " " : "");
+}
+
+function usernamesLabel(usernames: string[], width: number): string {
+  return truncateChannelLabel(usernames.map((username) => `@${username}`).join(" "), width);
+}
+
+export function NewDmDialog({
+  width,
+  height,
+  userByUsername,
+  currentUserId,
+  onCancel,
+  onSubmit,
+}: {
+  width: number;
+  height: number;
+  userByUsername: Map<string, ChatUserSummary>;
+  currentUserId?: string | null;
+  onCancel: () => void;
+  onSubmit: (usernames: string[]) => Promise<void>;
+}) {
+  const inputRef = useRef<InputRenderable | null>(null);
+  const [value, setValue] = useState("");
+  const valueRef = useRef("");
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [submitting, setSubmitting] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const dialogWidth = Math.max(MIN_DIALOG_WIDTH, Math.min(MAX_DIALOG_WIDTH, width - 4));
+  const dialogHeight = Math.min(DIALOG_HEIGHT, Math.max(7, height - 2));
+  const left = Math.max(0, Math.floor((width - dialogWidth) / 2));
+  const top = Math.max(0, Math.floor((height - dialogHeight) / 2));
+  const contentWidth = Math.max(1, dialogWidth - 4);
+  const selectedUsernames = useMemo(() => parseDmUsernames(value), [value]);
+  const selectedUsernameSet = useMemo(() => new Set(selectedUsernames), [selectedUsernames]);
+  const allCandidates = useMemo(() => candidateUsers(userByUsername, currentUserId), [currentUserId, userByUsername]);
+  const query = currentTokenQuery(value);
+  const visibleCandidates = useMemo(() => {
+    const filtered = query
+      ? allCandidates.filter((candidate) => candidate.username.includes(query))
+      : allCandidates;
+    return filtered.slice(0, MAX_RECENT_USERS);
+  }, [allCandidates, query]);
+  const items = useMemo<ListViewItem[]>(() => visibleCandidates.map((candidate) => ({
+    id: candidate.username,
+    label: `@${candidate.username}`,
+    detail: candidate.displayName,
+    checked: selectedUsernameSet.has(candidate.username),
+  })), [selectedUsernameSet, visibleCandidates]);
+  const canSubmit = hasOnlyDmUsernameArgs(value) && selectedUsernames.length > 0 && !submitting;
+
+  useEffect(() => {
+    inputRef.current?.focus?.();
+  }, []);
+
+  useEffect(() => {
+    setSelectedIndex((current) => Math.max(0, Math.min(current, Math.max(items.length - 1, 0))));
+  }, [items.length]);
+
+  const updateValue = (nextValue: string) => {
+    valueRef.current = nextValue;
+    setValue(nextValue);
+  };
+
+  const toggleCandidate = (username: string) => {
+    updateValue(setUsernameSelected(valueRef.current, username, !parseDmUsernames(valueRef.current).includes(username)));
+    setError(null);
+    queueMicrotask(() => inputRef.current?.focus?.());
+  };
+
+  const submit = async () => {
+    const submittedValue = valueRef.current;
+    const submittedUsernames = parseDmUsernames(submittedValue);
+    if (!hasOnlyDmUsernameArgs(submittedValue) || submittedUsernames.length === 0 || submitting) {
+      setError("Enter at least one @username.");
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      await onSubmit(submittedUsernames);
+    } catch {
+      setError("Could not start conversation.");
+      setSubmitting(false);
+    }
+  };
+
+  useShortcut((event) => {
+    if (event.name === "escape") {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      onCancel();
+      return;
+    }
+    if (isPlainKey(event, "up", "down")) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      setSelectedIndex((current) => {
+        if (items.length === 0) return 0;
+        return event.name === "up"
+          ? Math.max(0, current - 1)
+          : Math.min(items.length - 1, current + 1);
+      });
+      return;
+    }
+    if (event.name === "tab" && items[selectedIndex]) {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      toggleCandidate(items[selectedIndex]!.id);
+      return;
+    }
+    if (event.name === "enter" || event.name === "return") {
+      event.preventDefault?.();
+      event.stopPropagation?.();
+      void submit();
+    }
+  }, { allowEditable: true, phase: "before" });
+
+  return (
+    <Box
+      position="absolute"
+      left={left}
+      top={top}
+      width={dialogWidth}
+      height={dialogHeight}
+      flexDirection="column"
+      border
+      borderColor={colors.borderFocused}
+      backgroundColor={colors.bg}
+      paddingX={1}
+      onMouseDown={(event: any) => {
+        event?.preventDefault?.();
+        event?.stopPropagation?.();
+      }}
+      style={{ zIndex: 8 }}
+    >
+      <Box height={1} flexDirection="row">
+        <Text fg={colors.textBright} attributes={TextAttributes.BOLD}>New DM</Text>
+        <Box flexGrow={1} />
+        <Box width={3} height={1} backgroundColor={colors.panel} onMouseDown={onCancel} style={{ cursor: "pointer" }}>
+          <Text fg={colors.text}> x </Text>
+        </Box>
+      </Box>
+      <TextField
+        inputRef={inputRef}
+        value={value}
+        placeholder="@username, @second"
+        focused
+        width={contentWidth}
+        backgroundColor={colors.panel}
+        onChange={(nextValue) => {
+          updateValue(nextValue);
+          setError(null);
+        }}
+        onSubmit={() => { void submit(); }}
+      />
+      <Box height={1}>
+        <Text fg={selectedUsernames.length > 0 ? colors.textMuted : colors.textDim}>
+          {selectedUsernames.length > 0 ? usernamesLabel(selectedUsernames, contentWidth) : "Recent users"}
+        </Text>
+      </Box>
+      <ListView
+        items={items}
+        selectedIndex={items.length > 0 ? selectedIndex : -1}
+        height={Math.max(1, dialogHeight - 6)}
+        bgColor={colors.bg}
+        selectedBgColor={colors.selected}
+        hoverBgColor={hoverBg()}
+        emptyMessage="No recent users"
+        selectOnHover
+        onSelect={setSelectedIndex}
+        onActivate={(item) => toggleCandidate(item.id)}
+        renderRow={(item, state) => (
+          <Box flexDirection="row" width={contentWidth}>
+            <Text fg={state.selected ? colors.selectedText : colors.textDim}>
+              {item.checked ? "x " : "+ "}
+            </Text>
+            <Text
+              fg={state.selected ? colors.text : colors.textMuted}
+              attributes={state.selected ? TextAttributes.BOLD : 0}
+            >
+              {truncateChannelLabel(item.label, Math.max(1, contentWidth - 12))}
+            </Text>
+            <Box flexGrow={1} />
+            {item.detail ? (
+              <Text fg={colors.textDim}>{truncateChannelLabel(item.detail, 10)}</Text>
+            ) : null}
+          </Box>
+        )}
+      />
+      <Box height={1} flexDirection="row">
+        {error ? (
+          <Text fg={colors.negative}>{truncateChannelLabel(error, contentWidth)}</Text>
+        ) : (
+          <Text fg={colors.textDim}>{selectedUsernames.length > 1 ? "Group chat" : "Direct message"}</Text>
+        )}
+        <Box flexGrow={1} />
+        <Box
+          width={submitting ? 10 : 7}
+          height={1}
+          backgroundColor={canSubmit ? colors.selected : colors.panel}
+          onMouseDown={() => { void submit(); }}
+          style={{ cursor: canSubmit ? "pointer" : "default" }}
+        >
+          <Text fg={canSubmit ? colors.selectedText : colors.textDim}>
+            {submitting ? " Starting " : " Start "}
+          </Text>
+        </Box>
+      </Box>
+    </Box>
+  );
+}

package/src/plugins/builtin/chat/content/shortcuts.ts

@@ -11,6 +11,7 @@ export function useChatContentShortcuts({
   blurInput,
   canSend,
   cancelEditMessage,
+  commandBarOpen,
   clearReplyTarget,
   cycleChannel,
   focusChannelSidebar,
@@ -22,6 +23,10 @@ export function useChatContentShortcuts({
   inputValueRef,
   loadingOlderMessages,
   messages,
+  mentionMenuOpen,
+  moveMentionSelection,
+  dismissMentionSuggestions,
+  commitMentionSelection,
   moveMessageSelection,
   moveSidebarChannelSelection,
   nativePaneChrome,
@@ -43,6 +48,7 @@ export function useChatContentShortcuts({
   blurInput: () => void;
   canSend: boolean;
   cancelEditMessage: () => void;
+  commandBarOpen: boolean;
   clearReplyTarget: () => void;
   cycleChannel: (direction: 1 | -1) => boolean;
   focusChannelSidebar: () => boolean;
@@ -54,6 +60,10 @@ export function useChatContentShortcuts({
   inputValueRef: MutableRefObject<string>;
   loadingOlderMessages: boolean;
   messages: ChatMessage[];
+  mentionMenuOpen: boolean;
+  moveMentionSelection: (direction: "up" | "down") => boolean;
+  dismissMentionSuggestions: () => boolean;
+  commitMentionSelection: () => boolean;
   moveMessageSelection: (direction: "up" | "down") => boolean;
   moveSidebarChannelSelection: (direction: "up" | "down") => boolean;
   nativePaneChrome?: boolean;
@@ -71,7 +81,25 @@ export function useChatContentShortcuts({
   sidebarFocusedRef: MutableRefObject<boolean>;
 }) {
   useShortcut((event) => {
-    if (!focused) return;
+    if (!focused || commandBarOpen || !inputFocused || !mentionMenuOpen) return;
+    if (
+      event.name !== "tab"
+      || event.ctrl
+      || event.meta
+      || event.super
+      || event.alt
+      || event.option
+    ) {
+      return;
+    }
+
+    event.preventDefault?.();
+    event.stopPropagation?.();
+    commitMentionSelection();
+  }, { allowEditable: true, phase: "before" });
+
+  useShortcut((event) => {
+    if (!focused || commandBarOpen) return;
     const isEnterKey = event.name === "return" || event.name === "enter";
 
     if (sidebarFocusedRef.current && showChannelSidebar) {
@@ -117,6 +145,24 @@ export function useChatContentShortcuts({
     }
 
     if (inputFocused) {
+      if (mentionMenuOpen) {
+        if (event.name === "escape") {
+          event.preventDefault?.();
+          event.stopPropagation?.();
+          dismissMentionSuggestions();
+          return;
+        }
+
+        if (isPlainKey(event, "up", "down")) {
+          event.preventDefault?.();
+          event.stopPropagation?.();
+          if (event.name === "up" || event.name === "down") {
+            moveMentionSelection(event.name);
+          }
+          return;
+        }
+      }
+
       if (event.name === "escape") {
         event.preventDefault?.();
         event.stopPropagation?.();

package/src/plugins/builtin/chat/content/snapshot.ts

@@ -17,6 +17,7 @@ interface ChatSnapshotStateArgs {
   initialSnapshot: ChatSnapshot;
   inputRef: MutableRef<TextareaRenderable | null>;
   inputValueRef: MutableRef<string>;
+  onComposerStateChange?: (draft: string, cursorOffset: number) => void;
   prependAnchorRef: MutableRef<ChatPrependAnchor | null>;
   setFollowMessages: Dispatch<SetStateAction<boolean>>;
   setSelectedIdx: Dispatch<SetStateAction<number>>;
@@ -28,18 +29,21 @@ function syncDraftFromSnapshot({
   applyingExternalDraftRef,
   inputRef,
   inputValueRef,
+  onComposerStateChange,
   snapshot,
   updateComposerRows,
 }: {
   applyingExternalDraftRef: MutableRef<boolean>;
   inputRef: MutableRef<TextareaRenderable | null>;
   inputValueRef: MutableRef<string>;
+  onComposerStateChange?: (draft: string, cursorOffset: number) => void;
   snapshot: ChatSnapshot;
   updateComposerRows: (draft: string) => void;
 }) {
   if (inputValueRef.current !== snapshot.draft) {
     inputValueRef.current = snapshot.draft;
     updateComposerRows(snapshot.draft);
+    onComposerStateChange?.(snapshot.draft, snapshot.draft.length);
   }
   const textarea = inputRef.current;
   if (textarea && textarea.editBuffer.getText() !== snapshot.draft) {
@@ -62,6 +66,7 @@ export function useChatSnapshotState({
   initialSnapshot,
   inputRef,
   inputValueRef,
+  onComposerStateChange,
   prependAnchorRef,
   setFollowMessages,
   setSelectedIdx,
@@ -110,6 +115,7 @@ export function useChatSnapshotState({
         applyingExternalDraftRef,
         inputRef,
         inputValueRef,
+        onComposerStateChange,
         snapshot,
         updateComposerRows,
       });
@@ -130,6 +136,7 @@ export function useChatSnapshotState({
     controller,
     inputRef,
     inputValueRef,
+    onComposerStateChange,
     prependAnchorRef,
     setFollowMessages,
     setSelectedIdx,

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

@@ -29,7 +29,6 @@ interface ChatTranscriptProps {
   messages: ChatMessage[];
   nativePaneChrome: boolean | undefined;
   latestEditableMessageId: string | null;
-  openDirectMessage: (target: ChatUserSummary) => void;
   openTicker: (symbol: string) => void;
   profilePopoverUser: ChatUserSummary | null;
   registerMessageElement: (messageId: string, node: unknown | null) => void;
@@ -61,7 +60,6 @@ export function ChatTranscript({
   messages,
   nativePaneChrome,
   latestEditableMessageId,
-  openDirectMessage,
   openTicker,
   profilePopoverUser,
   registerMessageElement,
@@ -152,8 +150,6 @@ export function ChatTranscript({
         <UserProfilePopover
           user={profilePopoverUser}
           width={chatWidth}
-          currentUserId={user?.id}
-          onDirectMessage={openDirectMessage}
           onClose={scheduleProfilePopoverClose}
           onKeepOpen={cancelProfilePopoverClose}
         />

package/src/plugins/builtin/chat/message/profile-popover.test.tsx

@@ -0,0 +1,36 @@
+import { describe, expect, test } from "bun:test";
+import type { ChatUserSummary } from "../../../../api-client";
+import { hasPublicChatProfileInfo } from "./profile-popover";
+
+function makeUser(overrides: Partial<ChatUserSummary>): ChatUserSummary {
+  return {
+    id: "u1",
+    username: "vince",
+    displayName: "Vince",
+    profilePublic: true,
+    ...overrides,
+  };
+}
+
+describe("profile popover", () => {
+  test("treats public portfolio analytics as hover profile information", () => {
+    expect(hasPublicChatProfileInfo(makeUser({
+      bio: null,
+      company: null,
+      title: null,
+      portfolioAnalytics: {
+        oneYearReturn: 0.14,
+        spyBeta: 1.05,
+      },
+    }))).toBe(true);
+  });
+
+  test("hides analytics when the chat profile is private", () => {
+    expect(hasPublicChatProfileInfo(makeUser({
+      profilePublic: false,
+      portfolioAnalytics: {
+        oneYearReturn: 0.14,
+      },
+    }))).toBe(false);
+  });
+});

package/src/plugins/builtin/chat/message/profile-popover.tsx

@@ -1,36 +1,140 @@
 import { Box, Text } from "../../../../ui";
 import { TextAttributes } from "../../../../ui";
 import { colors } from "../../../../theme/colors";
-import type { ChatUserSummary } from "../../../../api-client";
+import type { ChatUserSummary, PublicPortfolioAnalytics } from "../../../../api-client";
+import { formatNumber } from "../../../../utils/format";
 import { truncateChannelLabel } from "../channels";
-import { ChatActionChip } from "./action-chip";
 
 export const PROFILE_POPOVER_CLOSE_DELAY_MS = 40;
 
+function hasPortfolioAnalytics(analytics: PublicPortfolioAnalytics | null | undefined): boolean {
+  return Boolean(
+    analytics
+    && (
+      analytics.oneYearReturn != null
+      || analytics.spyBeta != null
+    ),
+  );
+}
+
 export function hasPublicChatProfileInfo(user: ChatUserSummary): boolean {
   if (user.profilePublic === false) return false;
-  return Boolean(user.bio?.trim() || user.title?.trim() || user.company?.trim());
+  return Boolean(user.bio?.trim() || user.title?.trim() || user.company?.trim() || hasPortfolioAnalytics(user.portfolioAnalytics));
+}
+
+function formatSignedPercent(value: number): string {
+  const percent = value * 100;
+  return `${percent >= 0 ? "+" : ""}${formatNumber(percent, 2)}%`;
+}
+
+type AnalyticsMetric = {
+  id: "one-year" | "beta";
+  label: string;
+  value: string;
+  rawValue: number;
+};
+
+function analyticsValueColor(id: string, value: number): string {
+  if (id === "one-year") {
+    if (value > 0) return colors.positive;
+    if (value < 0) return colors.negative;
+  }
+  return colors.warning;
+}
+
+function analyticsMetrics(analytics: PublicPortfolioAnalytics): AnalyticsMetric[] {
+  return [
+    analytics.oneYearReturn != null
+      ? {
+        id: "one-year",
+        label: "1Y",
+        value: formatSignedPercent(analytics.oneYearReturn),
+        rawValue: analytics.oneYearReturn,
+      }
+      : null,
+    analytics.spyBeta != null
+      ? {
+        id: "beta",
+        label: "Beta",
+        value: formatNumber(analytics.spyBeta, 2),
+        rawValue: analytics.spyBeta,
+      }
+      : null,
+  ].filter((metric): metric is AnalyticsMetric => !!metric);
+}
+
+function headerMetricLabel(metric: AnalyticsMetric): string {
+  return metric.id === "beta" ? "Beta" : metric.label;
+}
+
+function headerMetricsNaturalWidth(metrics: AnalyticsMetric[]): number {
+  const metricWidth = metrics.reduce((sum, metric) => (
+    sum + headerMetricLabel(metric).length + 1 + metric.value.length
+  ), 0);
+  return metricWidth + Math.max(0, metrics.length - 1);
+}
+
+function HeaderAnalyticsStats({
+  metrics,
+  width,
+}: {
+  metrics: AnalyticsMetric[];
+  width: number;
+}) {
+  if (metrics.length === 0 || width < 8) return null;
+  const gapWidth = Math.max(0, metrics.length - 1);
+  const naturalWidths = metrics.map((metric) => headerMetricLabel(metric).length + 1 + metric.value.length);
+  const availableMetricWidth = Math.max(metrics.length * 4, width - gapWidth);
+  let overflow = Math.max(0, naturalWidths.reduce((sum, value) => sum + value, 0) - availableMetricWidth);
+  const metricWidths = naturalWidths.map((naturalWidth, index) => {
+    const shrinkable = Math.max(0, naturalWidth - 4);
+    const shrink = Math.min(shrinkable, Math.ceil(overflow / (naturalWidths.length - index)));
+    overflow -= shrink;
+    return naturalWidth - shrink;
+  });
+
+  return (
+    <Box flexDirection="row" gap={1} width={width}>
+      {metrics.map((metric, index) => {
+        const label = headerMetricLabel(metric);
+        const metricWidth = metricWidths[index] ?? 4;
+        const labelWidth = Math.max(1, Math.min(label.length, metricWidth - 2));
+        const valueWidth = Math.max(1, metricWidth - labelWidth - 1);
+        return (
+          <Box key={metric.id} width={metricWidth} height={1} flexDirection="row" gap={1}>
+            <Text fg={colors.textMuted}>{truncateChannelLabel(label, labelWidth)}</Text>
+            <Text fg={analyticsValueColor(metric.id, metric.rawValue)} attributes={TextAttributes.BOLD}>
+              {truncateChannelLabel(metric.value, valueWidth)}
+            </Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
 }
 
 export function UserProfilePopover({
   user,
   width,
-  currentUserId,
-  onDirectMessage,
   onClose,
   onKeepOpen,
 }: {
   user: ChatUserSummary;
   width: number;
-  currentUserId?: string | null;
-  onDirectMessage: (user: ChatUserSummary) => void;
   onClose: () => void;
   onKeepOpen: () => void;
 }) {
   const popoverWidth = Math.max(24, Math.min(38, width - 4));
   const meta = [user.title, user.company].filter(Boolean).join(" · ");
   const bio = user.bio?.trim();
-  const canDm = user.id === currentUserId || user.acceptUnknownDms !== false;
+  const analytics = user.portfolioAnalytics;
+  const metrics = analytics ? analyticsMetrics(analytics) : [];
+  const headerWidth = Math.max(1, popoverWidth - 2);
+  const maxStatsWidth = Math.max(0, headerWidth - 8);
+  const statsWidth = metrics.length > 0 && maxStatsWidth >= 8
+    ? Math.min(headerMetricsNaturalWidth(metrics), maxStatsWidth)
+    : 0;
+  const usernameWidth = Math.max(1, headerWidth - (statsWidth > 0 ? statsWidth + 1 : 0));
 
   return (
     <Box
@@ -47,19 +151,19 @@ export function UserProfilePopover({
       onMouseOut={onClose}
       style={{ zIndex: 4 }}
     >
-      <Box height={1} flexDirection="row">
-        <Text fg={colors.positive} attributes={TextAttributes.BOLD}>
-          {truncateChannelLabel(user.username ? `@${user.username}` : user.displayName, Math.max(popoverWidth - 10, 1))}
-        </Text>
+      <Box height={1} width={headerWidth} flexDirection="row">
+        <Box width={usernameWidth}>
+          <Text fg={colors.positive} attributes={TextAttributes.BOLD}>
+            {truncateChannelLabel(user.username ? `@${user.username}` : user.displayName, usernameWidth)}
+          </Text>
+        </Box>
+        {statsWidth > 0 ? (
+          <>
+            <Box width={1} />
+            <HeaderAnalyticsStats metrics={metrics} width={statsWidth} />
+          </>
+        ) : null}
         <Box flexGrow={1} />
-        <ChatActionChip
-          label={canDm ? "DM" : "Closed"}
-          width={canDm ? 5 : 9}
-          emphasized
-          onPress={() => {
-            if (canDm) onDirectMessage(user);
-          }}
-        />
       </Box>
       {meta ? <Text fg={colors.textDim}>{truncateChannelLabel(meta, popoverWidth - 2)}</Text> : null}
       {bio ? (