gloomberb 0.15.7 → 0.16.0

package/src/plugins/builtin/ticker-detail/quote-monitor/card.tsx

@@ -1,3 +1,4 @@
+import type { ReactNode } from "react";
 import { useMemo } from "react";
 import { Box, Text, TextAttributes, useUiCapabilities } from "../../../../ui";
 import type { PricePoint, Quote, TickerFinancials } from "../../../../types/financials";
@@ -5,6 +6,7 @@ import type { TickerRecord } from "../../../../types/ticker";
 import type { QueryEntry } from "../../../../market-data/result-types";
 import { resolveEntryData } from "../../../../market-data/selectors";
 import { useDoubleClickActivation } from "../../../../components/use-double-click-activation";
+import { FigureText } from "../../../../components/ui/figure";
 import { colors, priceColor } from "../../../../theme/colors";
 import { formatPercentRaw } from "../../../../utils/format";
 import { formatMarketPriceWithCurrency, formatSignedMarketPrice, liveQuoteFormatOptions } from "../../../../market-data/market/format";
@@ -61,7 +63,9 @@ export function QuoteMonitorCard({
   selected = false,
   onSelect,
   onOpen,
+  perpetuals,
 }: {
+  perpetuals?: ReactNode;
   symbol: string;
   ticker: TickerRecord | null;
   cachedFinancials: TickerFinancials | null;
@@ -97,9 +101,8 @@ export function QuoteMonitorCard({
   const quoteStatus = resolveQuoteStatus(quoteEntry, symbol, quote);
   const quoteFailed = quoteStatus.failed && !!display;
   const changeColor = quoteFailed ? colors.textDim : priceColor(display?.change ?? 0);
-  const priceAttributes = flashDirection ? TextAttributes.DIM : TextAttributes.BOLD;
-  const changeAttributes = flashDirection ? TextAttributes.DIM : TextAttributes.NONE;
-  const currency = quote?.currency ?? ticker?.metadata.currency ?? "USD";
+  const flashing = !!flashDirection;
+  const currency = quote?.currency || ticker?.metadata.currency || "USD";
   const stacked = width < 31;
   const compactQuoteFailure = quoteFailed && stacked && height <= 3;
   // One decimal count per instrument, so streamed ticks never narrow or widen the price column.
@@ -119,22 +122,8 @@ export function QuoteMonitorCard({
   const trend = quoteTrend(display?.change);
   const terminalSparklineHeight = !nativePaneChrome && !stacked && height >= 4 ? 2 : 1;
   const showTerminalSparkline = !quoteFailed || height >= (stacked ? 3 : 2) + 1 + terminalSparklineHeight;
-  const desktopPriceStyle = nativePaneChrome
-    ? {
-        fontSize: "22px",
-        lineHeight: "1.05",
-        fontWeight: 720,
-        textShadow: `0 1px 2px ${colors.bg}`,
-      }
-    : undefined;
-  const desktopChangeStyle = nativePaneChrome
-    ? {
-        fontSize: "12px",
-        lineHeight: "1.1",
-        fontWeight: 540,
-        textShadow: `0 1px 2px ${colors.bg}`,
-      }
-    : undefined;
+  // Figures sit over the sparkline, so the desktop rings them in the card colour.
+  const figureHalo = { textShadow: `0 1px 2px ${colors.bg}` };
   const desktopSymbolStyle = nativePaneChrome
     ? {
         fontSize: "15px",
@@ -198,7 +187,7 @@ export function QuoteMonitorCard({
             display: "grid",
             // The name gives way first; the price keeps its natural width.
             gridTemplateColumns: "minmax(0, 1fr) auto",
-            gridTemplateRows: "auto 1fr auto",
+            gridTemplateRows: "auto 1fr auto auto",
             columnGap: 12,
             width: "100%",
             height: "100%",
@@ -253,19 +242,14 @@ export function QuoteMonitorCard({
               paddingBottom: 1,
             }}
           >
-            <Text
-              attributes={priceAttributes}
-              fg={changeColor}
-              style={desktopPriceStyle}
-            >
-              {priceText}
-            </Text>
+            <FigureText fg={changeColor} dim={flashing} style={figureHalo}>{priceText}</FigureText>
             <Box flexDirection="row" gap={1} justifyContent="flex-end">
-              <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changePercentText}</Text>
-              <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changeValueText}</Text>
+              <FigureText part="sub" fg={changeColor} dim={flashing} style={figureHalo}>{changePercentText}</FigureText>
+              <FigureText part="sub" fg={changeColor} dim={flashing} style={figureHalo}>{changeValueText}</FigureText>
             </Box>
           </Box>
 
+          {perpetuals && <Box style={{ gridColumn: "1 / -1", gridRow: "4", alignSelf: "end" }}>{perpetuals}</Box>}
           {rangeLabel && (
             <Text
               fg={colors.textDim}
@@ -294,12 +278,12 @@ export function QuoteMonitorCard({
                 {symbol}
               </Text>
               <Box flexDirection="column">
-                <Text attributes={priceAttributes} fg={changeColor} style={desktopPriceStyle}>
+                <FigureText fg={changeColor} dim={flashing} style={figureHalo}>
                   {compactQuoteFailure ? `${priceText} · ${quoteStatus.stale ? "STALE" : "ERROR"}` : priceText}
-                </Text>
+                </FigureText>
                 <Box flexDirection="row" gap={1}>
-                  <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changePercentText}</Text>
-                  <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changeValueText}</Text>
+                  <FigureText part="sub" fg={changeColor} dim={flashing} style={figureHalo}>{changePercentText}</FigureText>
+                  <FigureText part="sub" fg={changeColor} dim={flashing} style={figureHalo}>{changeValueText}</FigureText>
                 </Box>
               </Box>
             </Box>
@@ -331,16 +315,10 @@ export function QuoteMonitorCard({
                 )}
               </Box>
               <Box flexDirection="column" alignItems="flex-end">
-                <Text
-                  attributes={priceAttributes}
-                  fg={changeColor}
-                  style={desktopPriceStyle}
-                >
-                  {priceText}
-                </Text>
+                <FigureText fg={changeColor} dim={flashing} style={figureHalo}>{priceText}</FigureText>
                 <Box flexDirection="row" gap={1} justifyContent="flex-end">
-                  <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changePercentText}</Text>
-                  <Text fg={changeColor} attributes={changeAttributes} style={desktopChangeStyle}>{changeValueText}</Text>
+                  <FigureText part="sub" fg={changeColor} dim={flashing} style={figureHalo}>{changePercentText}</FigureText>
+                  <FigureText part="sub" fg={changeColor} dim={flashing} style={figureHalo}>{changeValueText}</FigureText>
                 </Box>
               </Box>
             </Box>
@@ -349,6 +327,7 @@ export function QuoteMonitorCard({
           {quoteFailed && !compactQuoteFailure && (
             <Box height={1} overflow="hidden"><Text fg={colors.negative}>{quoteStatus.text}</Text></Box>
           )}
+          {perpetuals}
           {showTerminalSparkline && <Box height={terminalSparklineHeight} flexDirection="row" alignItems="center" gap={1}>
             <PriceSparkline
               priceHistory={priceHistory}

package/src/plugins/builtin/ticker-detail/quote-monitor/index.tsx

@@ -1,3 +1,4 @@
+import { PerpEquityRow } from "../../perps/equity-row";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Box, useUiCapabilities } from "../../../../ui";
 import type { PaneProps } from "../../../../types/plugin";
@@ -263,6 +264,7 @@ export function QuoteMonitorPane({ paneId, focused, width, height }: PaneProps)
             selected={showCursor && index === cursorIndex}
             onSelect={setCursorSymbol}
             onOpen={openTicker}
+            perpetuals={cardHeight >= 8 ? <PerpEquityRow maxRows={1} symbol={entry.symbol} instrumentType={entry.ticker?.metadata.assetCategory} /> : undefined}
           />
         ))}
       </Box>
@@ -297,6 +299,7 @@ export function QuoteMonitorPane({ paneId, focused, width, height }: PaneProps)
               selected={showCursor && rowIndex * columns + columnIndex === cursorIndex}
               onSelect={setCursorSymbol}
               onOpen={openTicker}
+              perpetuals={cardHeight >= 8 ? <PerpEquityRow maxRows={1} symbol={entry.symbol} instrumentType={entry.ticker?.metadata.assetCategory} /> : undefined}
             />
           ))}
         </Box>

package/src/plugins/builtin/time-sales/pane.tsx

@@ -90,7 +90,7 @@ function TimeSalesView({ width, height, focused, symbol, exchange }: PaneProps &
       ...(!data.connected || resource.snapshotOnly ? [{ id: "snapshot", parts: [{ text: "snapshot", tone: "warning" as const }] }] : [])] : [] });
   const selectTab = (value: string) => { setTab(value); setDetail(null); setSelected(null); };
   const { strip: tabStrip, rows: tabRows } = usePaneTabs({ tabs: TABS, activeValue: tab, onSelect: selectTab, focused: focused && !detail, dense: true });
-  if (!data && isCloudSessionRequired(resource.error)) return <SignInWall action="view time and sales" needsVerification={session.needsVerification} />;
+  if (!data && isCloudSessionRequired(resource.error)) return <SignInWall placement="time-sales-signin" action="view time and sales" needsVerification={session.needsVerification} />;
   return <Box width={width} height={height} flexDirection="column">
     {tabStrip}
     <PaneStatusBody loading={resource.loading && !data} error={!data ? resource.error : null} empty={!!data && !rows.length} subject={tab === "quotes" ? "NBBO observations" : "trade observations"}>

package/src/plugins/builtin/world-indices/indices.ts

@@ -28,6 +28,7 @@ export const WORLD_INDICES: IndexEntry[] = [
   { symbol: "000001.SS", name: "Shanghai Composite", shortName: "SHCOMP", region: "asia-pacific" },
   { symbol: "^KS11", name: "KOSPI", shortName: "KOSPI", region: "asia-pacific" },
   { symbol: "^AXJO", name: "ASX 200", shortName: "ASX", region: "asia-pacific" },
+  { symbol: "^NSEI", name: "Nifty 50", shortName: "NIFTY", region: "asia-pacific" },
   { symbol: "^BSESN", name: "BSE Sensex", shortName: "SENSEX", region: "asia-pacific" },
 
   // Other

package/src/plugins/catalog-browser.ts

@@ -1,3 +1,13 @@
+import { creditDocumentsModule } from "./builtin/credit-documents";
+import { attentionModule } from "./builtin/attention";
+import { companyAttentionModule } from "./builtin/company-attention";
+import { catalystsModule } from "./builtin/catalysts";
+import { companyKpisModule } from "./builtin/company-kpis";
+import { powerModule } from "./builtin/power";
+import { perpsModule } from "./builtin/perps";
+import { exposureModule } from "./builtin/exposure";
+import { supplyChainModule } from "./builtin/supply-chain";
+import { awardsModule } from "./builtin/awards";
 import { debtMaturitiesModule } from "./builtin/debt-maturities";
 import { revenueBreakdownModule } from "./builtin/revenue-breakdown";
 import { mnaModule } from "./builtin/mna";
@@ -20,6 +30,9 @@ import { marketHeatmapPlugin } from "./builtin/market-heatmap";
 import { marketHaltsPlugin } from "./builtin/market-halts";
 import { fearGreedPlugin } from "./builtin/fear-greed";
 import { ipoCalendarPlugin } from "./builtin/ipo-calendar";
+import { clinicalTrialsPlugin } from "./builtin/clinical-trials";
+import { commentLettersPlugin } from "./builtin/comment-letters";
+import { openFdaPlugin } from "./builtin/openfda";
 import { browserGloomberbCloudPlugin } from "./builtin/cloud/browser";
 import { changelogModule } from "./builtin/changelog";
 import { chartComposerModule } from "./builtin/chart-composer";
@@ -33,10 +46,13 @@ import { creditConditionsModule } from "./builtin/credit-conditions";
 import { marketValuationModule } from "./builtin/market-valuation";
 import { macroSharedResourcesModule } from "./builtin/macro-resources";
 import { economicCalendarModule } from "./builtin/econ";
+import { cpiModule } from "./builtin/cpi";
 import { econStatisticsModule } from "./builtin/econ-statistics";
 import { futuresModule } from "./builtin/futures";
 import { futuresCurveModule } from "./builtin/futures-curve";
 import { cotModule } from "./builtin/cot";
+import { doeModule } from "./builtin/doe";
+import { gpuModule } from "./builtin/gpu";
 import { fxMatrixModule } from "./builtin/fx-matrix";
 import { helpModule } from "./builtin/help";
 import { positionSizerModule } from "./builtin/kelly-sizer";
@@ -53,6 +69,10 @@ import { optionsCalculatorModule } from "./builtin/options-calculator";
 import { volSurfaceModule } from "./builtin/vol-surface";
 import { realizedVolModule } from "./builtin/realized-vol";
 import { seasonalityModule } from "./builtin/seasonality";
+import { earningsRippleModule } from "./builtin/earnings-ripple";
+import { reverseDcfModule } from "./builtin/reverse-dcf";
+import { peBandModule } from "./builtin/pe-band";
+import { macroDayModule } from "./builtin/macro-day";
 import { ivHistoryModule } from "./builtin/iv-history";
 import { backtestModule } from "./builtin/backtest";
 import { composeBuiltinPlugin } from "./builtin/plugin-module";
@@ -101,6 +121,10 @@ const browserTickerResearchPlugin = composeBuiltinPlugin({
     volSurfaceModule,
     realizedVolModule,
     seasonalityModule,
+    earningsRippleModule,
+    reverseDcfModule,
+    peBandModule,
+    macroDayModule,
     ivHistoryModule,
     backtestModule,
     timeSalesModule,
@@ -110,6 +134,13 @@ const browserTickerResearchPlugin = composeBuiltinPlugin({
     socialMentionsModule,
     debtMaturitiesModule,
     revenueBreakdownModule,
+    supplyChainModule,
+    creditDocumentsModule,
+    companyAttentionModule,
+    catalystsModule,
+    companyKpisModule,
+    awardsModule,
+    exposureModule,
     mnaModule,
     browserDividendYieldModule,
     earningsCallsModule,
@@ -144,7 +175,12 @@ const browserMarketOverviewPlugin = composeBuiltinPlugin({
     futuresModule,
     futuresCurveModule,
     cotModule,
+    doeModule,
+    gpuModule,
+    attentionModule,
+    powerModule,
     cryptoBoardModule,
+    perpsModule,
   ],
 });
 
@@ -155,6 +191,7 @@ const browserMacroPlugin = composeBuiltinPlugin({
     macroSharedResourcesModule,
     economicCalendarModule,
     econStatisticsModule,
+    cpiModule,
     yieldCurveModule,
     ratePathModule,
     moneyMarketsModule,
@@ -185,6 +222,9 @@ export const browserBuiltinPlugins: readonly GloomPlugin[] = [
   marketHaltsPlugin,
   fearGreedPlugin,
   ipoCalendarPlugin,
+  clinicalTrialsPlugin,
+  commentLettersPlugin,
+  openFdaPlugin,
   browserMacroPlugin,
   alertsPlugin,
   researchSearchPlugin,

package/src/plugins/catalog-manifest.ts

@@ -45,6 +45,8 @@ const EDITORIAL: Record<
   alerts: { categories: ["alerts"] },
   application: { categories: ["core"] },
   broker: { categories: ["broker"] },
+  "clinical-trials": { categories: ["research"] },
+  "comment-letters": { categories: ["research"] },
   "custom-view": { categories: ["data", "productivity"] },
   debug: { categories: ["developer"] },
   "fear-greed": { categories: ["markets", "sentiment"], icon: "plugin-icons/fear-greed.webp" },
@@ -55,6 +57,7 @@ const EDITORIAL: Record<
   "market-overview": { categories: ["markets"] },
   news: { categories: ["news"] },
   notes: { categories: ["productivity"] },
+  openfda: { categories: ["research"] },
   portfolio: { categories: ["portfolio"] },
   "research-search": { categories: ["research", "news"] },
   "ticker-research": { categories: ["research"] },

package/src/plugins/catalog-ui.ts

@@ -10,6 +10,9 @@ import { marketHeatmapPlugin } from "./builtin/market-heatmap";
 import { marketHaltsPlugin } from "./builtin/market-halts";
 import { fearGreedPlugin } from "./builtin/fear-greed";
 import { ipoCalendarPlugin } from "./builtin/ipo-calendar";
+import { clinicalTrialsPlugin } from "./builtin/clinical-trials";
+import { commentLettersPlugin } from "./builtin/comment-letters";
+import { openFdaPlugin } from "./builtin/openfda";
 import {
   applicationPlugin,
   brokerPlugin,
@@ -33,6 +36,9 @@ export const uiBuiltinPlugins: GloomPlugin[] = [
   marketHaltsPlugin,
   fearGreedPlugin,
   ipoCalendarPlugin,
+  clinicalTrialsPlugin,
+  commentLettersPlugin,
+  openFdaPlugin,
   macroPlugin,
   alertsPlugin,
   researchSearchPlugin,

package/src/plugins/current-target.ts

@@ -18,15 +18,6 @@ export function getCurrentPluginTarget(): PluginTarget {
   return currentTarget;
 }
 
-/**
- * Whether this renderer can install plugins itself. Installing means cloning a
- * repository and running `bun install`, so only the Bun-hosted renderers can;
- * elsewhere the marketplace shows the command to run instead.
- */
-export function canInstallPlugins(): boolean {
-  return currentTarget === "cli" || currentTarget === "tui";
-}
-
 /**
  * Whether this renderer loads plugins that are not part of its build.
  *

package/src/public/__snapshots__/public-api.test.ts.snap

@@ -91,6 +91,7 @@ exports[`the runtime exports of every public subpath are the reviewed ones 1`] =
     "PaneLinkMenu",
     "PaneSidebar",
     "PaneSidebarAction",
+    "PaneSidebarList",
     "PaneSidebarRow",
     "PaneStatusBody",
     "Popover",

package/src/renderers/browser/cloud-transport.ts

@@ -1,4 +1,5 @@
-import { apiClient, setCloudApiFetchTransport } from "../../api-client";
+import { apiClient, setCloudApiFetchTransport, setCloudApiUploadTransport } from "../../api-client";
+import type { CloudApiUploadRequest } from "../../api-client/request";
 import { settleWithin } from "../../utils/async-deadline";
 import { setHttpFetchTransport } from "../../utils/http-transport";
 import { createBrowserHttpProxyTransport } from "./http-proxy-transport";
@@ -30,10 +31,74 @@ export function browserCredentialedFetch(url: string, init: RequestInit = {}): P
   return fetch(url, { ...init, headers, credentials: "include" });
 }
 
+function parseResponseHeaders(raw: string): Headers {
+  const headers = new Headers();
+  for (const line of raw.trim().split(/[\r\n]+/)) {
+    const separator = line.indexOf(":");
+    if (separator <= 0) continue;
+    try {
+      headers.append(line.slice(0, separator).trim(), line.slice(separator + 1).trim());
+    } catch {
+      // A header the Headers class refuses is not one the client reads.
+    }
+  }
+  return headers;
+}
+
+/**
+ * Uploads through XMLHttpRequest, the one browser API that reports how much of
+ * a request body has gone out, so an image upload can show its progress.
+ */
+function browserXhrUpload(request: CloudApiUploadRequest): Promise<Response> {
+  const cookieHeader = request.headers.get("Cookie");
+  if (cookieHeader) plantBrowserSessionCookies(cookieHeader);
+  return new Promise((resolve, reject) => {
+    if (request.signal?.aborted) {
+      reject(new DOMException("The operation was aborted.", "AbortError"));
+      return;
+    }
+    const xhr = new XMLHttpRequest();
+    xhr.open("POST", request.url);
+    xhr.withCredentials = true;
+    request.headers.forEach((value, name) => {
+      const lower = name.toLowerCase();
+      if (lower === "cookie" || lower === "origin") return;
+      xhr.setRequestHeader(name, value);
+    });
+    const abort = () => xhr.abort();
+    request.signal?.addEventListener("abort", abort, { once: true });
+    const settle = () => request.signal?.removeEventListener("abort", abort);
+    xhr.upload.onprogress = (event) => {
+      if (event.lengthComputable && event.total > 0) request.onProgress?.(event.loaded / event.total);
+    };
+    xhr.onload = () => {
+      settle();
+      const text = xhr.responseText;
+      resolve({
+        ok: xhr.status >= 200 && xhr.status < 300,
+        status: xhr.status,
+        statusText: xhr.statusText,
+        headers: parseResponseHeaders(xhr.getAllResponseHeaders()),
+        text: async () => text,
+      } as Response);
+    };
+    xhr.onerror = () => {
+      settle();
+      reject(new TypeError("The upload could not reach the server."));
+    };
+    xhr.onabort = () => {
+      settle();
+      reject(new DOMException("The operation was aborted.", "AbortError"));
+    };
+    xhr.send(request.body as XMLHttpRequestBodyInit);
+  });
+}
+
 export function installBrowserFetchTransports(): void {
   apiClient.setCookieSessionMode(true);
   // Native fetch, so a response body can be read while it arrives.
   setCloudApiFetchTransport(browserCredentialedFetch, { streaming: true });
+  setCloudApiUploadTransport(browserXhrUpload);
   // Plugin requests to a host on the proxy allowlist go through the worker,
   // which can reach APIs that send no CORS headers. Those come back buffered,
   // but nothing on the allowlist streams; every other host is a direct fetch

package/src/renderers/browser/main.tsx

@@ -29,6 +29,7 @@ import {
   readOrCreateBrowserInstallId,
 } from "../../telemetry/crash-reports-dom";
 import { currentTelemetryConfig } from "../../telemetry/live-config";
+import { attentionCountsEnabled, installAttentionCounter } from "../../telemetry/attention-counts";
 import { installUsageCounter, recordRestoredFunctions, usageCountsEnabled } from "../../telemetry/usage-counts";
 import { installWindowUsageFlush } from "../../telemetry/usage-counts-dom";
 import type { AppConfig } from "../../types/config";
@@ -62,6 +63,7 @@ async function boot(): Promise<void> {
     getInstallId: () => readOrCreateBrowserInstallId(),
     officialPluginIds: loadOfficialPluginIds,
   });
+  installAttentionCounter(() => !browserDoNotTrack() && attentionCountsEnabled(currentTelemetryConfig(loadedConfig)));
   // A document reload does not unmount React. Flush both config and session
   // timers while localStorage is still available, including background tabs.
   window.addEventListener("pagehide", () => { void flushPendingPersistence(); });

package/src/renderers/dom/data-table/row.tsx

@@ -254,6 +254,7 @@ function WebDataTableRowInner<
       <div
         key={itemKey}
         data-gloom-role="data-table-section-header"
+        data-gloom-row-key={itemKey}
         data-selected={selected ? "true" : undefined}
         style={{
           ...baseRowStyle,
@@ -302,6 +303,7 @@ function WebDataTableRowInner<
       key={itemKey}
       ref={ref}
       data-gloom-role="data-table-row"
+      data-gloom-row-key={itemKey}
       data-gloom-context-menu-surface={rowContextMenuSurface ? "true" : undefined}
       data-selected={selected ? "true" : undefined}
       style={{

package/src/renderers/dom/desktop/controls.tsx

@@ -387,6 +387,7 @@ export function WebMessageComposer({
   onSubmit,
   keyBindings,
   wrapText = false,
+  accessory,
 }: MessageComposerProps) {
   const colors = useThemeColors();
   const borderColor = focused
@@ -414,31 +415,43 @@ export function WebMessageComposer({
         overflow: "hidden",
       }}
     >
-      <Textarea
-        ref={inputRef}
-        initialValue={initialValue}
-        width="100%"
-        height={height}
-        focused={focused}
-        placeholder={placeholder}
-        placeholderColor={colors.textMuted}
-        textColor={colors.text}
-        backgroundColor="transparent"
-        focusedBackgroundColor="transparent"
-        cursorColor={colors.textBright}
-        style={{
-          padding: "6px 12px",
-          lineHeight: "20px",
-          fontSize: "13px",
-        }}
-        onMouseDown={requestFocus}
-        onFocus={requestFocus}
-        onInput={handleInput}
-        onCursorChange={onCursorChange}
-        keyBindings={keyBindings}
-        onSubmit={onSubmit}
-        wrapText={wrapText}
-      />
+      {/* The field takes what the accessory leaves. */}
+      <Box flexGrow={1} height={height} style={{ minWidth: 0 }}>
+        <Textarea
+          ref={inputRef}
+          initialValue={initialValue}
+          width="100%"
+          height={height}
+          focused={focused}
+          placeholder={placeholder}
+          placeholderColor={colors.textMuted}
+          textColor={colors.text}
+          backgroundColor="transparent"
+          focusedBackgroundColor="transparent"
+          cursorColor={colors.textBright}
+          style={{
+            padding: "6px 12px",
+            lineHeight: "20px",
+            fontSize: "13px",
+          }}
+          onMouseDown={requestFocus}
+          onFocus={requestFocus}
+          onInput={handleInput}
+          onCursorChange={onCursorChange}
+          keyBindings={keyBindings}
+          onSubmit={onSubmit}
+          wrapText={wrapText}
+        />
+      </Box>
+      {accessory != null && (
+        <Box
+          flexDirection="row"
+          data-gloom-role="desktop-message-composer-accessory"
+          style={{ flex: "none", alignItems: "flex-start", padding: "4px 6px 0 0" }}
+        >
+          {accessory}
+        </Box>
+      )}
     </Box>
   );
 }

package/src/renderers/dom/desktop/icons.tsx

@@ -79,6 +79,14 @@ const ICONS: Record<IconName, ReactNode> = {
       <circle cx="7.6" cy="9" r="0.9" fill="currentColor" />
     </>
   ),
+  // A framed picture: a sun over hills.
+  image: (
+    <>
+      <rect x="1.5" y="2.25" width="9" height="7.5" rx="1.2" stroke="currentColor" strokeWidth="1.1" />
+      <circle cx="4.4" cy="4.9" r="0.85" fill="currentColor" />
+      <path d="M2 9.1 4.7 6.6l1.6 1.5 1.8-2 2.4 2.5" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
+    </>
+  ),
   restore: (
     <>
       <rect x="2" y="4" width="6" height="6" rx="0.8" stroke="currentColor" strokeWidth="1.1" />

package/src/renderers/dom/host/chart-surface.tsx

@@ -3,6 +3,7 @@ import {
   forwardRef,
   memo,
   useEffect,
+  useId,
   useRef,
   type CSSProperties,
   type ReactNode,
@@ -59,8 +60,23 @@ const BoxLayer = memo(function BoxLayer({ bitmap, index }: { bitmap: BitmapSurfa
   );
 });
 
+/** A left-to-right gradient in the overlay's 0..1 user space, so a flat line keeps its colours too. */
+function VectorGradient({ id, shape }: { id: string; shape: ChartVectorShape }) {
+  const stops = shape.gradient ?? [];
+  const xs = shape.points.map((point) => point.x);
+  return (
+    <linearGradient id={id} gradientUnits="userSpaceOnUse" x1={Math.min(...xs)} x2={Math.max(...xs)} y1={0} y2={0}>
+      {stops.map((color, index) => (
+        <stop key={index} offset={stops.length > 1 ? index / (stops.length - 1) : 0} stopColor={color} />
+      ))}
+    </linearGradient>
+  );
+}
+
 const ChartVectors = memo(function ChartVectors({ vectors }: { vectors: readonly ChartVectorShape[] }) {
+  const gradientPrefix = useId().replace(/:/g, "");
   if (vectors.length === 0) return null;
+  const paint = (shape: ChartVectorShape, index: number) => (shape.gradient?.length ? `url(#${gradientPrefix}-${index})` : shape.color);
   return (
     <>
       <svg
@@ -77,9 +93,26 @@ const ChartVectors = memo(function ChartVectors({ vectors }: { vectors: readonly
           zIndex: 9,
         }}
       >
-        {vectors.map((shape) => {
+        <defs>
+          {vectors.map((shape, index) => (shape.gradient?.length && shape.points.length
+            ? <VectorGradient key={shape.id} id={`${gradientPrefix}-${index}`} shape={shape} />
+            : null))}
+        </defs>
+        {vectors.map((shape, index) => {
           const strokeWidth = shape.strokeWidth ?? 1.4;
           const [first, second] = shape.points;
+          if (shape.fill) {
+            return (
+              <polygon
+                key={shape.id}
+                points={shape.points.map((point) => `${point.x},${point.y}`).join(" ")}
+                fill={paint(shape, index)}
+                fillOpacity={shape.fillOpacity ?? 1}
+                stroke="none"
+                opacity={shape.opacity}
+              />
+            );
+          }
           if (shape.box && first && second) {
             return (
               <rect
@@ -101,7 +134,8 @@ const ChartVectors = memo(function ChartVectors({ vectors }: { vectors: readonly
               key={shape.id}
               points={shape.points.map((point) => `${point.x},${point.y}`).join(" ")}
               fill="none"
-              stroke={shape.color}
+              stroke={paint(shape, index)}
+              opacity={shape.opacity}
               strokeWidth={strokeWidth}
               strokeLinecap="round"
               strokeLinejoin="round"

package/src/renderers/dom/host/focus-scope.ts

@@ -60,7 +60,7 @@ export function installFocusScopeRelease(): () => void {
     const active = doc.activeElement;
     if (!active || active === doc.body || isEditableTarget(active)) return;
     const control = asFocusable(event.target)?.closest?.(POINTER_CONTROL_SELECTOR);
-    if (control !== active) return;
+    if (control !== active || holdsTextSelection(doc, control)) return;
     const detail = event.detail;
     queueMicrotask(() => {
       if (doc.activeElement === active) releasePointerFocus(active, detail);
@@ -74,6 +74,16 @@ export function installFocusScopeRelease(): () => void {
   };
 }
 
+/**
+ * Dragging across text ends in a click too, on whatever holds the focus behind
+ * it: usually the app root, which matches `[tabindex]`. That was no press of a
+ * control, and WebKit drops the selection with the blur, so it is left alone.
+ */
+function holdsTextSelection(doc: Document, control: Pick<FocusableLike, "contains"> | null): boolean {
+  const selection = doc.getSelection?.();
+  return !!selection && !selection.isCollapsed && !!control?.contains?.(selection.anchorNode);
+}
+
 /**
  * Keyboard focus lives in the app, not the DOM: Tab moves between panes, and a
  * pane's rows and hints act on keys that reach the window. A button a pointer