gloomberb 0.18.4 → 0.19.0

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

@@ -23,6 +23,7 @@ import type { SeriesCatalogInstrument, SeriesCatalogSuggestion } from "./series-
 import { useSeriesCatalogSuggestions } from "./use-series-catalog";
 import { clampIndex } from "../../../utils/math";
 
+const RETRY_SEARCH_ID = "\u0000retry-search";
 const MAX_VISIBLE_SUGGESTIONS = 4;
 const CHART_TOOLBAR_HEIGHT = 1;
 const MINIMUM_CHART_HEIGHT = 4;
@@ -116,7 +117,7 @@ export function ChartSeriesQuickAdd({
   const [selectedIndex, setSelectedIndex] = useState(0);
   const [error, setError] = useState<string | null>(null);
   const defaultInstrument = useMemo(() => defaultCatalogInstrument(spec), [spec]);
-  const { suggestions, loading, error: searchError } = useSeriesCatalogSuggestions({
+  const { suggestions, loading, error: searchError, retry } = useSeriesCatalogSuggestions({
     query,
     defaultInstrument,
     enabled: active,
@@ -127,10 +128,7 @@ export function ChartSeriesQuickAdd({
   const drawerStatus = error
     ?? (loading && suggestions.length === 0
       ? "Searching instruments..."
-      // A failed lookup is not zero matches, so it keeps its own message.
-      : searchError && suggestions.length === 0
-        ? searchError
-        : active && query.trim().length > 0 && suggestions.length === 0
+      : active && !searchError && query.trim().length > 0 && suggestions.length === 0
           ? "No matching security or metric."
           : null);
   const maximumDrawerHeight = Math.max(
@@ -141,7 +139,7 @@ export function ChartSeriesQuickAdd({
     ),
   );
   const drawerHeight = active
-    ? Math.min(maximumDrawerHeight, drawerStatus ? 1 : suggestions.length)
+    ? Math.min(maximumDrawerHeight, drawerStatus ? 1 : suggestions.length + (searchError ? 1 : 0))
     : 0;
   const nativeSurfaceManager = nativeRenderer.nativeSurfaceManager;
   useAppInputCapture(inputFocused && focused);
@@ -203,9 +201,14 @@ export function ChartSeriesQuickAdd({
 
   // Plugin catalogs land after the securities: only pull a stranded cursor
   // back into range, so a row the user already moved to stays selected.
+  // -1 is the retry row when a lookup failed. Suggestions retain their indices
+  // when that row arrives, so an in-flight failure cannot change what Enter adds.
+  const clampSelection = useCallback((index: number) => suggestions.length
+    ? Math.min(suggestions.length - 1, Math.max(searchError ? -1 : 0, index))
+    : -1, [searchError, suggestions.length]);
   useEffect(() => {
-    setSelectedIndex((current) => clampIndex(current, suggestions.length, -1));
-  }, [suggestions.length]);
+    setSelectedIndex(clampSelection);
+  }, [clampSelection]);
 
   useEffect(() => {
     if (focused || !active) return;
@@ -287,9 +290,16 @@ export function ChartSeriesQuickAdd({
     queueMicrotask(() => inputRef.current?.blur?.());
   }, [cancelPendingBlur, clearInput, onActiveChange, setSpec, spec]);
 
+  const retrySearch = useCallback(() => {
+    cancelPendingBlur();
+    setInputFocused(true);
+    queueMicrotask(() => inputRef.current?.focus?.());
+    void retry();
+  }, [cancelPendingBlur, retry]);
   const submit = useCallback(() => {
-    commitSuggestion(suggestions[clampIndex(selectedIndex, suggestions.length, -1)]);
-  }, [commitSuggestion, selectedIndex, suggestions]);
+    if (selectedIndex < 0 && searchError) retrySearch();
+    else commitSuggestion(suggestions[clampIndex(selectedIndex, suggestions.length, -1)]);
+  }, [commitSuggestion, retrySearch, searchError, selectedIndex, suggestions]);
   const cancel = useCallback(() => {
     cancelPendingBlur();
     inputRef.current?.blur?.();
@@ -317,11 +327,11 @@ export function ChartSeriesQuickAdd({
     } else if (event.name === "up") {
       event.preventDefault?.();
       event.stopPropagation?.();
-      setSelectedIndex((current) => clampIndex(current - 1, suggestions.length, -1));
+      setSelectedIndex((current) => clampSelection(current - 1));
     } else if (event.name === "down") {
       event.preventDefault?.();
       event.stopPropagation?.();
-      setSelectedIndex((current) => clampIndex(current + 1, suggestions.length, -1));
+      setSelectedIndex((current) => clampSelection(current + 1));
     }
   }, {
     phase: "before",
@@ -377,12 +387,17 @@ export function ChartSeriesQuickAdd({
       />
   );
 
-  const items = useMemo<ListViewItem[]>(() => suggestions.map((suggestion) => ({
-    id: suggestion.id,
-    label: suggestion.label,
-    description: suggestion.description,
-    detail: suggestion.detail,
-  })), [suggestions]);
+  const items = useMemo<ListViewItem[]>(() => [
+    ...(searchError ? [{ id: RETRY_SEARCH_ID, label: searchError, detail: "Retry", color: colors.negative }] : []),
+    ...suggestions.map((suggestion) => ({
+      id: suggestion.id, label: suggestion.label, description: suggestion.description, detail: suggestion.detail,
+    })),
+  ], [searchError, suggestions]);
+  const selectedItemIndex = selectedIndex + (searchError ? 1 : 0);
+  const activateItem = (id: string) => {
+    if (id === RETRY_SEARCH_ID) retrySearch();
+    else commitSuggestion(suggestions.find((suggestion) => suggestion.id === id));
+  };
 
   return (
     <Box
@@ -408,17 +423,17 @@ export function ChartSeriesQuickAdd({
           label="Chart series suggestions"
           minWidth={controlWidth * 8}
           closeOnSelect={false}
-          highlightedId={suggestions[clampIndex(selectedIndex, suggestions.length, -1)]?.id ?? null}
-          onHighlight={(id) => setSelectedIndex(Math.max(0, suggestions.findIndex((suggestion) => suggestion.id === id)))}
+          highlightedId={items[selectedItemIndex]?.id ?? null}
+          onHighlight={(id) => setSelectedIndex(id === RETRY_SEARCH_ID ? -1 : Math.max(0, suggestions.findIndex((suggestion) => suggestion.id === id)))}
           items={drawerStatus
             ? [{ id: "\u0000status", kind: "heading", label: drawerStatus }]
-            : suggestions.map((suggestion) => ({
+            : items.map((suggestion) => ({
               id: suggestion.id,
               label: suggestion.label,
               description: suggestion.description,
               hint: suggestion.detail,
             }))}
-          onSelect={(id) => commitSuggestion(suggestions.find((suggestion) => suggestion.id === id))}
+          onSelect={activateItem}
         />
       ) : quickAddRow}
       {!desktop && drawerHeight > 0 ? (
@@ -454,15 +469,15 @@ export function ChartSeriesQuickAdd({
           ) : (
             <ListView
               items={items}
-              selectedIndex={clampIndex(selectedIndex, items.length, -1)}
+              selectedIndex={clampIndex(selectedItemIndex, items.length, -1)}
               height={drawerHeight}
               surface="plain"
               bgColor={colors.panel}
               scrollable={items.length > drawerHeight}
               rowGap={0}
               selectOnHover
-              onSelect={setSelectedIndex}
-              onActivate={(_, index) => commitSuggestion(suggestions[index])}
+              onSelect={(index) => setSelectedIndex(index - (searchError ? 1 : 0))}
+              onActivate={(item) => activateItem(item.id)}
               remoteLabel="Chart series suggestions"
             />
           )}

package/src/plugins/builtin/chart-composer/session-history.ts

@@ -207,22 +207,27 @@ export function resolveIntradayRequest(options: {
   return { rangePreset, resolution, session };
 }
 
-function unavailableReason(symbol: string, request: IntradayRequest, kind: "empty" | "not-intraday"): string {
+function unavailableReason(symbol: string, request: IntradayRequest, kind: "empty" | "not-intraday" | "failed"): string {
   const window = request.session
     ? `session ${request.session}`
     : request.rangePreset === "1W" ? "the latest five sessions" : "the latest session";
+  if (kind === "failed") return `Intraday history request failed for ${symbol}. Try again.`;
   return kind === "not-intraday"
     ? `The market-data provider did not return intraday bars for ${symbol} for ${window}.`
     : `No intraday price history is available for ${symbol} for ${window}.`;
 }
 
+interface IntradayHistoryAttempt extends PriceHistoryResult {
+  requestFailed?: true;
+}
+
 async function loadTrailingHistory(
   provider: DataProvider,
   symbol: string,
   exchange: string,
   request: IntradayRequest,
   context?: MarketDataRequestContext,
-): Promise<PriceHistoryResult> {
+): Promise<IntradayHistoryAttempt> {
   const fetchRange: TimeRange = request.rangePreset === "1W" && request.resolution !== "1m"
     ? "1M"
     : "1W";
@@ -230,8 +235,9 @@ async function loadTrailingHistory(
     return await fetchHistoryResult(provider, symbol, exchange,
       { kind: "resolution", range: fetchRange, resolution: request.resolution }, context)
       ?? { points: [], resolution: request.resolution };
-  } catch {
-    return { points: [], resolution: request.resolution };
+  } catch (error) {
+    logFailure("chart-composer.session-history", "Load trailing intraday history failed")(error);
+    return { points: [], resolution: request.resolution, requestFailed: true };
   }
 }
 
@@ -243,18 +249,19 @@ async function loadHistoricalFallback(
   now: Date,
   timeZone: string,
   context?: MarketDataRequestContext,
-): Promise<PriceHistoryResult> {
+): Promise<IntradayHistoryAttempt> {
   const empty = { points: [], resolution: request.resolution };
+  const failed: IntradayHistoryAttempt = { ...empty, requestFailed: true };
   if (request.session) {
     const bounds = sessionUtcBounds(request.session, timeZone);
     return await fetchHistoryResult(provider, symbol, exchange,
-      { kind: "detail", start: bounds.start, end: bounds.end, interval: request.resolution }, context).catch(logFailure("chart-composer.session-history", "Load requested intraday session failed", null)) ?? empty;
+      { kind: "detail", start: bounds.start, end: bounds.end, interval: request.resolution }, context).catch(logFailure("chart-composer.session-history", "Load requested intraday session failed", failed)) ?? empty;
   }
   const end = new Date(now.getTime() - HISTORICAL_RETRY_DELAY_MS);
   const lookbackDays = request.rangePreset === "1W" ? 35 : 8;
   const start = new Date(end.getTime() - lookbackDays * DAY_MS);
   return await fetchHistoryResult(provider, symbol, exchange,
-    { kind: "detail", start, end, interval: request.resolution }, context).catch(logFailure("chart-composer.session-history", "Load historical intraday fallback failed", null)) ?? empty;
+    { kind: "detail", start, end, interval: request.resolution }, context).catch(logFailure("chart-composer.session-history", "Load historical intraday fallback failed", failed)) ?? empty;
 }
 
 export async function loadIntradayWindow(options: {
@@ -280,6 +287,7 @@ export async function loadIntradayWindow(options: {
         options.exchange,
         options.request, options.context,
       );
+  let requestFailed = acquisition.requestFailed === true;
   let raw = acquisition.points;
   let window = resolveIntradaySessionWindow(raw, {
     rangePreset: options.request.rangePreset,
@@ -303,6 +311,7 @@ export async function loadIntradayWindow(options: {
           options.request,
           options.now ?? new Date(), timeZone, options.context,
         );
+    requestFailed ||= acquisition.requestFailed === true;
     raw = acquisition.points;
     window = resolveIntradaySessionWindow(raw, {
       rangePreset: options.request.rangePreset,
@@ -324,7 +333,7 @@ export async function loadIntradayWindow(options: {
       unavailableReason: unavailableReason(
         options.symbol,
         options.request,
-        sawNonIntradayData ? "not-intraday" : "empty",
+        requestFailed ? "failed" : sawNonIntradayData ? "not-intraday" : "empty",
       ),
     };
   }
@@ -338,7 +347,7 @@ export async function loadIntradayWindow(options: {
       sessionDates: window.sessionDates,
       start: requestedWindow?.start ?? null,
       end: requestedWindow?.end ?? null,
-      unavailableReason: unavailableReason(options.symbol, options.request, "not-intraday"),
+      unavailableReason: unavailableReason(options.symbol, options.request, requestFailed ? "failed" : "not-intraday"),
     };
   }
   const bufferedPoints = normalizedPoints(raw);

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

@@ -129,6 +129,20 @@ export const CHART_SETTING_KEYS = {
   realizedVolEstimator: "chartRealizedVolEstimator",
 } as const;
 
+/**
+ * Whether rising candles take their series' colour or the theme's gain colour.
+ * Kept beside the spec in the pane's settings, so a build without it opens the
+ * chart unchanged; it is not one of CHART_SETTING_KEYS, which a spec edit
+ * clears as derived from the spec.
+ */
+export const CHART_CANDLE_COLOURS_SETTING_KEY = "chartCandleColours";
+
+export type ChartCandleColours = "series" | "change";
+
+export function chartCandleColours(value: unknown): ChartCandleColours {
+  return value === "change" ? "change" : "series";
+}
+
 function fallbackSpec(symbol: string | null | undefined): ChartSpec {
   return symbol ? buildPriceChartPreset(symbol) : buildEmptyChartPreset();
 }
@@ -417,6 +431,7 @@ export function buildChartComposerPaneSettingsDef(
       [CHART_SETTING_KEYS.range]: spec.viewport.range,
       [CHART_SETTING_KEYS.resolution]: spec.viewport.resolution,
       [CHART_SETTING_KEYS.mode]: inlineStyleTarget?.style ?? "",
+      [CHART_CANDLE_COLOURS_SETTING_KEY]: chartCandleColours(settings[CHART_CANDLE_COLOURS_SETTING_KEY]),
       ...(realizedVol ? {
         [CHART_SETTING_KEYS.realizedVolWindow]: String(realizedVol.parameters.window ?? 30),
         [CHART_SETTING_KEYS.realizedVolEstimator]: realizedVol.parameters.estimator ?? "close-to-close",
@@ -494,6 +509,18 @@ export function buildChartComposerPaneSettingsDef(
           options: modes.map((mode) => ({ value: mode, label: mode.toUpperCase() })),
         }]
         : []),
+      ...(spec.series.some((series) => isOhlcSeriesStyle(series.style))
+        ? [{
+          key: CHART_CANDLE_COLOURS_SETTING_KEY,
+          label: "Candle Colours",
+          description: "Draw rising candles in their series' colour, or in the theme's gain colour against its loss colour.",
+          type: "select" as const,
+          options: [
+            { value: "series", label: "Series colour" },
+            { value: "change", label: "Gains & losses" },
+          ],
+        }]
+        : []),
     ],
     applyValue: applyChartComposerPaneSetting,
   };

package/src/plugins/builtin/chart-composer/use-series-catalog.ts

@@ -1,5 +1,6 @@
+import { useAsyncResource } from "../../../react/async-resource";
 import { logFailure } from "../../../utils/log-failure";
-import { useEffect, useMemo, useState, useSyncExternalStore } from "react";
+import { useCallback, useEffect, useMemo, useState, useSyncExternalStore } from "react";
 import {
   buildTickerSearchCandidates,
   searchTickerCandidates,
@@ -84,7 +85,7 @@ function candidateToInstrument(candidate: {
  * folder) are asked for once and listed after the rest; elsewhere, sources
  * that change while the app runs catch up when the catalog opens.
  */
-export function useRegisteredSeries(): readonly SeriesCatalogEntry[] {
+export function useRegisteredSeries() {
   const registry = getSharedRegistry();
   const series = registry?.series;
   const version = useSyncExternalStore(
@@ -93,29 +94,32 @@ export function useRegisteredSeries(): readonly SeriesCatalogEntry[] {
     () => 0,
   );
   const disabledPlugins = useOptionalAppSelector((state) => state.config.disabledPlugins, EMPTY_PLUGINS);
-  const [remote, setRemote] = useState<readonly SeriesCatalogEntry[] | null>(null);
+  const remoteLoader = useMemo(() => registry?.usesRemoteCapabilities && series ? async () => {
+    try {
+      const result = await registry.invokeCapability<{ entries: SeriesCatalogEntry[] }>(SERIES_CATALOG_CAPABILITY_ID, "list", {});
+      if (!Array.isArray(result?.entries)) throw new Error("Invalid series catalog response");
+      return result.entries;
+    } catch (error) {
+      logFailure("chart-composer.use-series-catalog", "Load remote chart series catalog failed")(error);
+      throw new Error("Series catalog unavailable.");
+    }
+  } : null, [registry, series]);
+  const remote = useAsyncResource(remoteLoader);
 
   useEffect(() => {
-    if (!registry || !series) return;
-    if (!registry.usesRemoteCapabilities) {
-      void series.refresh();
-      return;
-    }
-    let cancelled = false;
-    void registry.invokeCapability<{ entries: SeriesCatalogEntry[] }>(SERIES_CATALOG_CAPABILITY_ID, "list", {})
-      .then((result) => {
-        if (!cancelled && Array.isArray(result?.entries)) setRemote(result.entries);
-      })
-      .catch(logFailure("chart-composer.use-series-catalog", "Load remote chart series catalog failed"));
-    return () => { cancelled = true; };
+    if (registry && series && !registry.usesRemoteCapabilities) void series.refresh();
   }, [registry, series]);
+  const retry = useCallback(async () => {
+    if (remoteLoader) await remote.reload();
+    else await series?.refresh();
+  }, [remoteLoader, remote.reload, series]);
 
-  return useMemo(() => {
+  const entries = useMemo(() => {
     const local = series?.catalog() ?? EMPTY_ENTRIES;
     let entries = local;
-    if (remote?.length) {
+    if (remote.data?.length) {
       const known = new Set(local.map((entry) => entry.id));
-      const extra = remote.filter((entry) => !known.has(entry.id));
+      const extra = remote.data.filter((entry) => !known.has(entry.id));
       if (extra.length) entries = [...local, ...extra];
     }
     if (disabledPlugins.length === 0) return entries;
@@ -123,7 +127,8 @@ export function useRegisteredSeries(): readonly SeriesCatalogEntry[] {
     return entries.some((entry) => disabled.has(entry.pluginId))
       ? entries.filter((entry) => !disabled.has(entry.pluginId))
       : entries;
-  }, [disabledPlugins, remote, series, version]);
+  }, [disabledPlugins, remote.data, series, version]);
+  return { entries, loading: remote.loading, error: remote.error, retry };
 }
 
 export function useCatalogUniverse(query: string): {
@@ -230,6 +235,7 @@ export interface SeriesCatalogSearchResult {
   loading: boolean;
   /** Set when a lookup failed, so an outage is never reported as zero matches. */
   error: string | null;
+  retry: () => Promise<void>;
 }
 
 function searchFailureMessage(error: unknown): string {
@@ -248,6 +254,11 @@ export function useSeriesCatalogSuggestions({
 }): SeriesCatalogSearchResult {
   const tickers = useOptionalAppSelector((state) => state.tickers, EMPTY_TICKERS);
   const registered = useRegisteredSeries();
+  const [attempt, setAttempt] = useState(0);
+  const retry = useCallback(async () => {
+    setAttempt((value) => value + 1);
+    await registered.retry();
+  }, [registered.retry]);
   const analysis = useMemo(() => analyzeSeriesSearchQuery(query), [query]);
   const [providerSearch, setProviderSearch] = useState<{
     query: string;
@@ -295,7 +306,7 @@ export function useSeriesCatalogSuggestions({
       controller.abort();
       clearTimeout(timer);
     };
-  }, [enabled, query]);
+  }, [attempt, enabled, query]);
 
   useEffect(() => {
     const instrumentQuery = analysis.instrumentQuery.trim();
@@ -344,7 +355,7 @@ export function useSeriesCatalogSuggestions({
       cancelled = true;
       clearTimeout(timer);
     };
-  }, [analysis.directInstrument, analysis.instrumentQuery, enabled, tickers]);
+  }, [analysis.directInstrument, analysis.instrumentQuery, attempt, enabled, tickers]);
 
   const instruments = search.query === analysis.instrumentQuery
     ? search.instruments
@@ -353,18 +364,21 @@ export function useSeriesCatalogSuggestions({
   // and they arrive well before plugin catalogs (which can take seconds), so
   // late plugin results append below instead of pushing the list around.
   const suggestions = useMemo(() => {
-    const builtIn = buildSeriesCatalogSuggestions(query, defaultInstrument, instruments, MAX_SERIES_SUGGESTIONS, registered);
+    const builtIn = buildSeriesCatalogSuggestions(query, defaultInstrument, instruments, MAX_SERIES_SUGGESTIONS, registered.entries);
     const provider = providerSearch.query === query.trim() ? providerSearch.suggestions : [];
     return [...builtIn, ...provider.filter((entry) => !builtIn.some((candidate) => candidate.id === entry.id))]
       .slice(0, MAX_SERIES_SUGGESTIONS);
-  }, [defaultInstrument, instruments, providerSearch, query, registered]);
+  }, [defaultInstrument, instruments, providerSearch, query, registered.entries]);
 
   return {
     suggestions,
     instruments,
-    loading: (search.loading && search.query === analysis.instrumentQuery)
+    retry,
+    loading: registered.loading || (search.loading && search.query === analysis.instrumentQuery)
       || (providerSearch.loading && providerSearch.query === query.trim()),
-    error: (search.query === analysis.instrumentQuery ? search.error : null)
-      ?? (providerSearch.query === query.trim() ? providerSearch.error : null),
+    error: [registered.error,
+      search.query === analysis.instrumentQuery ? search.error : null,
+      providerSearch.query === query.trim() ? providerSearch.error : null,
+    ].filter(Boolean).join(" ") || null,
   };
 }

package/src/plugins/builtin/chat/content/command-suggestions.ts

@@ -0,0 +1,93 @@
+import type { ChatFunction } from "../pane-links/commands";
+
+/** A function offered after a backtick: its code and what it is called. */
+export interface ChatCommandSuggestion {
+  code: string;
+  name: string;
+  takesArg: boolean;
+}
+
+interface ChatCommandTrigger {
+  /** Where the opening backtick is. */
+  start: number;
+  end: number;
+  query: string;
+}
+
+// An opening backtick after a space or punctuation (not inside a word, not a
+// second tick of a fence), then the start of a code.
+const COMMAND_TRIGGER_RE = /(^|[\s([{<,.;:!?"'])`([A-Za-z][A-Za-z0-9+-]{0,11})$/;
+const FENCE_RE = /^\s{0,3}```/;
+const MAX_COMMAND_SUGGESTIONS = 5;
+
+/**
+ * The code being typed after an opening backtick, up to the cursor. A
+ * backtick that closes a span already open on the line, or one inside a
+ * fenced code block, starts no code.
+ */
+export function detectChatCommandTrigger(draft: string, cursorOffset: number): ChatCommandTrigger | null {
+  const cursor = Math.max(0, Math.min(cursorOffset, draft.length));
+  const beforeCursor = draft.slice(0, cursor);
+  const match = beforeCursor.match(COMMAND_TRIGGER_RE);
+  if (!match) return null;
+  const query = match[2]!;
+  const start = cursor - query.length - 1;
+  const lines = draft.slice(0, start).split("\n");
+  const line = lines[lines.length - 1]!;
+  if ((line.match(/`/g)?.length ?? 0) % 2 === 1) return null;
+  if (lines.slice(0, -1).filter((previous) => FENCE_RE.test(previous)).length % 2 === 1) return null;
+  return { start, end: cursor, query };
+}
+
+/**
+ * The functions whose code starts with the query, the exact one and the
+ * shortest first, then those with a word of their name that does, as people
+ * are found by their handle or their name.
+ */
+export function filterCommandSuggestions(
+  functions: ReadonlyMap<string, ChatFunction>,
+  query: string,
+  limit = MAX_COMMAND_SUGGESTIONS,
+): ChatCommandSuggestion[] {
+  const upper = query.trim().toUpperCase();
+  if (!upper) return [];
+  const lower = upper.toLowerCase();
+  const byCode: ChatFunction[] = [];
+  const byName: ChatFunction[] = [];
+  for (const fn of new Set(functions.values())) {
+    if (fn.unlisted) continue;
+    if (fn.code.startsWith(upper) || fn.aliases.includes(upper)) byCode.push(fn);
+    else if (fn.name.toLowerCase().split(/[\s/&()-]+/).some((word) => word.startsWith(lower))) byName.push(fn);
+  }
+  const rank = (fn: ChatFunction) => (fn.code === upper || fn.aliases.includes(upper) ? 0 : 1);
+  byCode.sort((a, b) => rank(a) - rank(b) || a.code.length - b.code.length || a.code.localeCompare(b.code));
+  byName.sort((a, b) => a.code.localeCompare(b.code));
+  return [...byCode, ...byName].slice(0, Math.min(limit, MAX_COMMAND_SUGGESTIONS))
+    .map(({ code, name, arg }) => ({ code, name, takesArg: arg !== "none" }));
+}
+
+/**
+ * The code in place of what was typed, with the closing backtick. A function
+ * that takes an argument leaves the cursor before it, after a space, for the
+ * ticker or topic; any other leaves it after the span and a space.
+ */
+export function applyCommandSuggestion(
+  draft: string,
+  trigger: ChatCommandTrigger,
+  suggestion: ChatCommandSuggestion,
+): { draft: string; cursorOffset: number } {
+  const before = draft.slice(0, trigger.start);
+  let after = draft.slice(trigger.end);
+  // A closing backtick already there is the one this span ends with.
+  if (after.startsWith("`")) after = after.slice(1);
+  const code = `\`${suggestion.code}`;
+  if (suggestion.takesArg) {
+    return { draft: `${before}${code} \`${after}`, cursorOffset: before.length + code.length + 1 };
+  }
+  // A space to go on writing after, unless the text there already goes on.
+  const suffix = /^[\s.,;:!?)\]]/.test(after) ? "" : " ";
+  return {
+    draft: `${before}${code}\`${suffix}${after}`,
+    cursorOffset: before.length + code.length + 1 + suffix.length,
+  };
+}

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

@@ -10,7 +10,6 @@ import { Button, ListView } from "../../../../components/ui";
 import { COMPOSER_ACTION_WIDTH } from "../layout";
 import { isManagedBot } from "../ghost-user";
 import { ChatBotIcon } from "../message/person-icons";
-import type { ChatMentionSuggestion } from "./mentions";
 import type { ChatDraftAttachment } from "../controller/attachments";
 import { DesktopChatAttachButton, DesktopChatAttachmentStrip } from "../attachments/desktop";
 import { TerminalChatAttachmentRows } from "../attachments/terminal";
@@ -48,7 +47,8 @@ interface ChatComposerAreaProps {
   replyPreview: string;
   replyTo: ChatMessage | null;
   sendMessage: () => void;
-  mentionSuggestions: ChatMentionSuggestion[];
+  /** People after @, or functions after a backtick: one list at a time. */
+  suggestions: ChatComposerSuggestion[];
   mentionSelectedIndex: number;
   onMentionCursorChange: () => void;
   onMentionSelect: (index?: number) => boolean;
@@ -69,6 +69,13 @@ interface ChatComposerAreaProps {
   attachPickerRef: { current: (() => void) | null };
 }
 
+/** A row of the list over the composer: a handle, or a function's code with its name at the end. */
+interface ChatComposerSuggestion {
+  id: string;
+  label: string;
+  detail?: string;
+}
+
 function ChatMentionSuggestions({
   contentWidth,
   onSelect,
@@ -78,14 +85,14 @@ function ChatMentionSuggestions({
   contentWidth: number;
   onSelect: (index?: number) => boolean;
   selectedIndex: number;
-  suggestions: ChatMentionSuggestion[];
+  suggestions: ChatComposerSuggestion[];
 }) {
   if (suggestions.length === 0) return null;
   const width = Math.max(18, Math.min(contentWidth, 44));
   return (
     <Box width={width}>
       <ListView
-        items={suggestions.map((suggestion) => ({ id: suggestion.username, label: `@${suggestion.username}` }))}
+        items={suggestions}
         selectedIndex={selectedIndex}
         height={suggestions.length}
         rowGap={0}
@@ -119,7 +126,7 @@ export function ChatComposerArea({
   replyPreview,
   replyTo,
   sendMessage,
-  mentionSuggestions,
+  suggestions,
   mentionSelectedIndex,
   onMentionCursorChange,
   onMentionSelect,
@@ -211,7 +218,7 @@ export function ChatComposerArea({
         contentWidth={contentWidth}
         onSelect={onMentionSelect}
         selectedIndex={mentionSelectedIndex}
-        suggestions={mentionSuggestions}
+        suggestions={suggestions}
       />
 
       {!editingMessage && draftAttachments.length > 0 && (nativePaneChrome ? (

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

@@ -9,6 +9,7 @@ import { useOptionalDialog, type PromptContext } from "../../../../ui/dialog";
 import { chatAuthorName, isDiscordGhost } from "../ghost-user";
 import { chatMessageOpenTargets, type ChatOpenTarget } from "./open-targets";
 import { chatMessagePaneLinks, type ChatMessagePaneLink } from "../pane-links/model";
+import { useChatFunctions } from "../pane-links/commands";
 import { openChatImageViewer } from "../attachments/desktop";
 import { canReactToMessage } from "../reactions";
 
@@ -102,11 +103,13 @@ export function useChatFooter({
   const rendererHost = useRendererHost();
   const { links: paneLinks, content } = chatMessagePaneLinks(selectedMessage);
   const attachments = selectedMessage?.attachments;
+  const { nativePaneChrome } = useUiCapabilities();
+  const functions = useChatFunctions();
+  // The desktop and the web draw functions written in a message as chips, so Open offers them too.
   const openTargets = useMemo(
-    () => chatMessageOpenTargets(content, catalog, attachments, paneLinks),
-    [attachments, catalog, content, paneLinks],
+    () => chatMessageOpenTargets(content, catalog, attachments, paneLinks, nativePaneChrome ? functions : undefined),
+    [attachments, catalog, content, functions, nativePaneChrome, paneLinks],
   );
-  const { nativePaneChrome } = useUiCapabilities();
 
   const openTarget = useCallback((target: ChatOpenTarget) => {
     if (target.kind === "pane") {