gloomberb 0.16.0 → 0.16.2

package/src/plugins/installer.ts

@@ -95,6 +95,8 @@ export interface PluginDirectoryInfo {
   path: string;
   commit: string | null;
   plugin: Pick<GloomPlugin, "id" | "name" | "version"> | null;
+  /** Sibling plugins installed along with it, by folder, each before the plugin that imports it. */
+  peers?: string[];
 }
 
 class GitError extends Error {
@@ -258,6 +260,10 @@ async function installDependencies(targetDir: string, quiet: boolean): Promise<v
 }
 
 async function readPluginExport(targetDir: string): Promise<Pick<GloomPlugin, "id" | "name" | "version"> | null> {
+  // Not before the sibling plugins it imports are installed: the import
+  // would fail, and Bun keeps that failure for the life of the process, so
+  // loading the plugin once the sibling is there would fail the same way.
+  if (missingPeerPlugins(targetDir).length > 0) return null;
   const entryFile = await resolvePluginEntry(targetDir);
   if (!entryFile) return null;
   // Fresh so an update is validated against the new code, not the module Bun
@@ -322,6 +328,19 @@ export async function installPlugin(ref: string, options: PluginInstallOptions =
 
   await installDependencies(targetDir, quiet);
 
+  const missing = missingPeerPlugins(targetDir);
+  if (missing.length > 0) {
+    say(cliStyles.muted(`Needs the ${missing.join(", ")} plugin.`));
+    return describe(targetDir, name, null);
+  }
+  return validateInstall(targetDir, name, quiet);
+}
+
+/** Reads the export of a checkout that was just installed, and says what it is. */
+async function validateInstall(targetDir: string, name: string, quiet: boolean): Promise<PluginDirectoryInfo> {
+  const say = (message: string) => {
+    if (!quiet) console.log(message);
+  };
   try {
     const plugin = await readPluginExport(targetDir);
     if (plugin) {
@@ -518,28 +537,45 @@ export async function loadRegistryListings(): Promise<Map<string, RegistryListin
 
 /**
  * Installs a plugin the way the marketplace does: a listed one at the commit
- * the registry reviewed, and not at all on a Gloomberb too old to run it.
- * An unlisted repository follows its default branch. A caller installing
- * several passes `listings` so the registry is read once.
+ * the registry reviewed (or at `options.pin`, the one the user was shown), and
+ * not at all on a Gloomberb too old to run it. An unlisted repository follows
+ * its default branch. A caller installing several passes `listings` so the
+ * registry is read once.
  */
 export async function installListedPlugin(
   ref: string,
-  options: Omit<PluginInstallOptions, "pin"> = {},
+  options: PluginInstallOptions = {},
   listings?: ReadonlyMap<string, RegistryListing>,
 ): Promise<PluginDirectoryInfo> {
+  const { pin, ...shared } = options;
   const repo = parseGitHubRef(ref).repo.toLowerCase();
-  const listing = (listings ?? await loadRegistryListings()).get(repo);
+  const known = listings ?? await loadRegistryListings();
+  const listing = known.get(repo);
   const required = requiredGloomberb(listing?.minGloomberb);
   if (required) fail(`${ref} needs Gloomberb ${required}, this is ${VERSION}.`, "Update Gloomberb first.");
-  const installed = await installPlugin(ref, { ...options, ...(listing?.pin ? { pin: listing.pin } : {}) });
+  const reviewed = pin ?? listing?.pin;
+  const installed = await installPlugin(ref, { ...shared, ...(reviewed ? { pin: reviewed } : {}) });
+  const missing = missingPeerPlugins(installed.path);
+  if (missing.length === 0) return installed;
+
   // A plugin that imports a sibling plugin (IBKR Gateway imports Interactive
-  // Brokers) brings it along, from the same registry.
-  const known = listings ?? await loadRegistryListings();
-  for (const peer of missingPeerPlugins(installed.path)) {
-    const repo = [...known.keys()].find((candidate) => pluginDirectoryNames(peer).includes(candidate.split("/")[1] ?? ""));
-    if (repo) await installListedPlugin(repo, options, known);
+  // Brokers) brings it along, from the same registry. One that cannot be
+  // installed leaves the plugin waiting for it, never imported.
+  const peers: string[] = [];
+  for (const peer of missing) {
+    const peerRepo = [...known.keys()].find((candidate) => pluginDirectoryNames(peer).includes(candidate.split("/")[1] ?? ""));
+    if (!peerRepo) continue;
+    try {
+      const added = await installListedPlugin(peerRepo, shared, known);
+      peers.push(...(added.peers ?? []), added.directory);
+    } catch (error) {
+      if (!shared.quiet) console.error(cliStyles.warning(`Could not install ${peer}: ${error instanceof Error ? error.message : String(error)}`));
+    }
   }
-  return installed;
+  const withPeers = peers.length > 0 ? { peers } : {};
+  if (missingPeerPlugins(installed.path).length > 0) return { ...installed, ...withPeers };
+  linkHostPackages(installed.path);
+  return { ...await validateInstall(installed.path, installed.directory, shared.quiet === true), ...withPeers };
 }
 
 /** Folder names of every installed plugin, clones and links alike. */

package/src/plugins/loader.ts

@@ -8,7 +8,7 @@ import { reportCrash } from "../telemetry/crash-reports";
 import { findAbsorbedPlugin, type AbsorbedPlugin } from "./absorbed";
 import { checkPluginCompatibility, explainPluginLoadError, findMissingHostExport, pluginSourceFiles, readPluginManifest } from "./compat";
 import { installPluginDependencies, missingPluginDependencies } from "./dependencies";
-import { linkHostPackages } from "./host-link";
+import { isLinkedPeerModule, linkHostPackages } from "./host-link";
 import { pluginFromModule, pluginSupportsTarget } from "./plugin-export";
 
 const loaderLog = debugLog.createLogger("plugin-loader");
@@ -40,7 +40,11 @@ export interface LoadedExternalPlugin {
   needsGloomberb?: string;
   /** Set when the plugin loaded but does not support the running renderer. */
   unsupportedTarget?: PluginTarget;
-  /** Loaded after startup in a way this session could not fully apply. */
+  /**
+   * Loaded in a way this session cannot fully apply: new files under modules
+   * it already imported, or an import Bun failed before a sibling plugin was
+   * linked. Never registered; the next launch loads it.
+   */
   needsRestart?: boolean;
 }
 
@@ -197,6 +201,21 @@ export function pluginsMissingHostExports(): string[] {
   return [...missingHostExportFailures].sort();
 }
 
+/** Bun's wording when an import does not resolve, from a native import. */
+const UNRESOLVED_MODULE = /Cannot find (?:module|package) '([^']+)'/;
+
+/**
+ * The specifier an import failed to resolve. Bun puts it on the error as
+ * `specifier`; the message is only a fallback, because from Bun 1.4 it names
+ * the package alone ("Cannot find package 'peer' imported from …" for
+ * `peer/bridge`), and the subpath decides whether the peer has the file.
+ */
+export function unresolvedSpecifier(err: unknown, message: string): string | undefined {
+  const specifier = (err as { specifier?: unknown } | null)?.specifier;
+  if (typeof specifier === "string" && specifier) return specifier;
+  return UNRESOLVED_MODULE.exec(message)?.[1];
+}
+
 /** Imported at another commit earlier in this process, with files besides the entry that Bun keeps. */
 function hasStaleModules(pluginDir: string, commit: string | null): boolean {
   if (!importedCommits.has(pluginDir) || importedCommits.get(pluginDir) === commit) return false;
@@ -289,9 +308,17 @@ export async function loadExternalPlugin(
     loaderLog.info(`Loaded external plugin: ${plugin.id} v${plugin.version ?? "0.0.0"}`);
     return { ...base, ...restart, plugin };
   } catch (err) {
+    const message = err instanceof Error ? err.message : String(err);
+    // A sibling plugin it imports that is linked now but was not when this
+    // process first resolved it. Bun keeps that failure until a restart, which
+    // is all the plugin needs: not a crash.
+    const unresolved = unresolvedSpecifier(err, message);
+    if (unresolved && isLinkedPeerModule(pluginDir, unresolved)) {
+      loaderLog.info(`${directory} loads after a restart: ${message}`);
+      return { ...base, plugin: placeholder, needsRestart: true };
+    }
     loaderLog.error(`Failed to load plugin from ${pluginDir}: ${err}`);
     reportCrash(err, { kind: "plugin", plugin: directory });
-    const message = err instanceof Error ? err.message : String(err);
     if (findMissingHostExport(message)) missingHostExportFailures.add(directory);
     return {
       ...base,

package/src/plugins/manager-node.ts

@@ -22,18 +22,28 @@ export interface NodePluginManagerHooks {
 const installer = () => import("./installer");
 
 export function createNodePluginManager(target: PluginTarget, hooks: NodePluginManagerHooks = {}): NodePluginManager {
-  async function attempt(run: () => Promise<{ directory: string; kept?: string; changed?: boolean }>): Promise<PluginOperationResult> {
+  async function attempt(
+    run: () => Promise<{ directory: string; kept?: string; changed?: boolean; peers?: string[] }>,
+  ): Promise<PluginOperationResult> {
     try {
-      const { directory, kept, changed } = await run();
-      hooks.onChanged?.(join(getPluginsDir(), directory));
-      return { ok: true, directory, ...(kept ? { kept } : {}), ...(changed !== undefined ? { changed } : {}) };
+      const { directory, kept, changed, peers } = await run();
+      for (const changedDirectory of [...(peers ?? []), directory]) hooks.onChanged?.(join(getPluginsDir(), changedDirectory));
+      return {
+        ok: true,
+        directory,
+        ...(kept ? { kept } : {}),
+        ...(changed !== undefined ? { changed } : {}),
+        ...(peers?.length ? { peers } : {}),
+      };
     } catch (error) {
       return { ok: false, error: error instanceof Error ? error.message : String(error) };
     }
   }
 
   return {
-    install: (repo, pin) => attempt(async () => (await installer()).installPlugin(repo, { quiet: true, pin })),
+    // Through the registry, like `gloomberb install`: a plugin that builds on
+    // another brings it along instead of failing to load without it.
+    install: (repo, pin) => attempt(async () => (await installer()).installListedPlugin(repo, { quiet: true, ...(pin ? { pin } : {}) })),
     update: (directory, pin) => attempt(async () => (await installer()).updatePlugin(directory, { quiet: true, pin })),
     remove: (directory) => attempt(async () => {
       await (await installer()).removePlugin(directory, { quiet: true });

package/src/plugins/registry/index.ts

@@ -388,7 +388,7 @@ export class PluginRegistry implements PluginRuntimeAccess {
   async togglePaneQuickSetting(paneId: string, key: string): Promise<void> {
     const quickSetting = this.resolvePaneQuickSettings(paneId).find((setting) => setting.key === key);
     if (!quickSetting) return;
-    await this.applyPaneSettingValue(paneId, quickSetting.field, !quickSetting.value);
+    await this.applyPaneSettingValue(paneId, quickSetting.field, quickSetting.nextValue);
   }
 
   getCommandPluginId(commandId: string): string | undefined {

package/src/plugins/registry/pane-settings.ts

@@ -31,7 +31,9 @@ export interface ResolvedRegistryPaneQuickSetting extends PaneQuickSettingDef {
   label: string;
   description?: string;
   value: boolean;
-  field: PaneSettingField & { type: "toggle" };
+  field: PaneSettingField;
+  /** What pressing the control writes to the field. */
+  nextValue: boolean | string;
 }
 
 export function resolveRegistryPaneQuickSettings(
@@ -39,17 +41,34 @@ export function resolveRegistryPaneQuickSettings(
 ): ResolvedRegistryPaneQuickSetting[] {
   if (!resolved?.paneDef.quickSettings?.length) return [];
 
-  return resolved.paneDef.quickSettings.flatMap((quickSetting) => {
-    const field = resolved.settingsDef.fields.find((candidate) => (
-      candidate.key === quickSetting.key && candidate.type === "toggle"
-    ));
-    if (!field || field.type !== "toggle") return [];
+  return resolved.paneDef.quickSettings.flatMap((quickSetting): ResolvedRegistryPaneQuickSetting[] => {
+    const field = resolved.settingsDef.fields.find((candidate) => candidate.key === quickSetting.key);
+    if (!field) return [];
+    if (quickSetting.visible && !quickSetting.visible(resolved.context)) return [];
+    if (quickSetting.onValue != null) {
+      if (field.type !== "select") return [];
+      const onValue = quickSetting.onValue;
+      const offValue = field.options.find((option) => option.value !== onValue)?.value;
+      if (offValue == null || !field.options.some((option) => option.value === onValue)) return [];
+      const value = resolved.context.settings[quickSetting.key] === onValue;
+      return [{
+        ...quickSetting,
+        label: quickSetting.label ?? field.label,
+        description: field.description,
+        value,
+        field,
+        nextValue: value ? offValue : onValue,
+      }];
+    }
+    if (field.type !== "toggle") return [];
+    const value = resolved.context.settings[quickSetting.key] === true;
     return [{
       ...quickSetting,
       label: quickSetting.label ?? field.label,
       description: field.description,
-      value: resolved.context.settings[quickSetting.key] === true,
+      value,
       field,
+      nextValue: !value,
     }];
   });
 }

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

@@ -99,6 +99,8 @@ exports[`the runtime exports of every public subpath are the reviewed ones 1`] =
     "Prose",
     "QueryBar",
     "READING_WIDTH",
+    "RangeTrack",
+    "RatioBar",
     "RemoteImage",
     "Section",
     "SectionHeading",

package/src/renderers/dom/build-assets.ts

@@ -1,5 +1,6 @@
 import { readFile, writeFile } from "fs/promises";
-import { join, relative } from "path";
+import { dirname, join, relative, resolve } from "path";
+import type { BunPlugin } from "bun";
 import { TITLEBAR_OVERLAY_HEIGHT_PX } from "../../components/layout/titlebar-overlay";
 
 /** Imports whose path ends with the first entry resolve to the second, relative to the view directory. */
@@ -27,6 +28,13 @@ interface ViewBundleOptions {
 }
 
 const ELECTROBUN_VIEW_DIR = join(process.cwd(), "src", "renderers", "electrobun", "view");
+
+/**
+ * Where the world map finds its land data, relative to the map's
+ * `basemap.ts`. Only view bundles define it, so the terminal binary, which
+ * never draws that map, leaves the data out.
+ */
+export const WORLD_MAP_DATA_SPECIFIER = "./natural-earth/index.chunk.js";
 const DOM_RENDERER_DIR = join(process.cwd(), "src", "renderers", "dom");
 
 export function electrobunViewPath(...parts: string[]): string {
@@ -50,6 +58,7 @@ export async function buildViewBundle({
   failureMessage,
   missingEntryMessage,
 }: ViewBundleOptions): Promise<{ script: string; stylesheet: string | null }> {
+  const chunks = new Map<string, string>();
   const result = await Bun.build({
     entrypoints: [entrypoint],
     outdir,
@@ -58,8 +67,15 @@ export async function buildViewBundle({
     splitting: false,
     sourcemap,
     minify: true,
-    define: { "process.env.NODE_ENV": "\"production\"", ...define },
-    plugins: aliasRules.length > 0 ? [electrobunViewAliasPlugin(aliasRules)] : [],
+    define: {
+      "process.env.NODE_ENV": "\"production\"",
+      __GLOOM_WORLD_MAP_DATA__: JSON.stringify(WORLD_MAP_DATA_SPECIFIER),
+      ...define,
+    },
+    plugins: [
+      lazyChunkPlugin(outdir, outdir, chunks),
+      ...(aliasRules.length > 0 ? [electrobunViewAliasPlugin(aliasRules)] : []),
+    ],
   });
 
   if (!result.success) {
@@ -69,6 +85,7 @@ export async function buildViewBundle({
 
   const script = result.outputs.find((output) => output.kind === "entry-point" && output.path.endsWith(".js"));
   if (!script) throw new Error(missingEntryMessage);
+  await buildLazyChunks(outdir, chunks, failureMessage);
 
   const stylesheet = result.outputs.find((output) => output.path.endsWith(".css"))?.path ?? null;
   if (stylesheet) await writeFile(stylesheet, withTitlebarOverlayHeight(await readFile(stylesheet, "utf8")));
@@ -122,6 +139,67 @@ ${bootstrapScript}
 `;
 }
 
+/**
+ * The view bundle is one file (no splitting), so a module reached through
+ * `import()` would land in it. A module named `*.chunk.ts` and imported as
+ * `import("./path/name.chunk.js")` instead ships as its own file at that path
+ * next to the importing bundle, fetched the first time it is asked for: large
+ * data only some panes draw, such as the world map's coastlines. The terminal
+ * and the tests run the source, where the same `import()` loads the module.
+ */
+function lazyChunkPlugin(rootOutdir: string, emitDir: string, chunks: Map<string, string>): BunPlugin {
+  return {
+    name: "lazy-chunks",
+    setup(build) {
+      build.onResolve({ filter: /\.chunk(\.js|\.ts)?$/ }, (args) => {
+        if (args.kind.startsWith("entry-point") || /[\\/]node_modules[\\/]/.test(args.importer)) return undefined;
+        if (args.kind !== "dynamic-import") {
+          throw new Error(`${args.path} is a lazy chunk; load it with import() (from ${args.importer})`);
+        }
+        if (!args.path.startsWith("./") || !args.path.endsWith(".chunk.js")) {
+          throw new Error(`Lazy chunk ${args.path} must be imported as "./<path>.chunk.js" (from ${args.importer})`);
+        }
+        const source = resolve(dirname(args.importer), args.path.replace(/\.js$/, ".ts"));
+        const output = resolve(emitDir, args.path);
+        if (relative(rootOutdir, output).startsWith("..")) throw new Error(`Lazy chunk ${args.path} would land outside ${rootOutdir}`);
+        const existing = chunks.get(output);
+        if (existing && existing !== source) throw new Error(`Two lazy chunks emit ${output}: ${existing} and ${source}`);
+        chunks.set(output, source);
+        return { path: args.path, external: true };
+      });
+    },
+  };
+}
+
+/** Builds each lazy chunk on its own, and the chunks those load in turn. */
+async function buildLazyChunks(rootOutdir: string, chunks: Map<string, string>, failureMessage: string): Promise<void> {
+  const built = new Set<string>();
+  let pending = [...chunks.entries()];
+  while (pending.length) {
+    const nested = new Map<string, string>();
+    for (const [output, source] of pending) {
+      if (built.has(output)) continue;
+      built.add(output);
+      const result = await Bun.build({
+        entrypoints: [source],
+        outdir: dirname(output),
+        naming: relative(dirname(output), output),
+        target: "browser",
+        format: "esm",
+        splitting: false,
+        sourcemap: "none",
+        minify: true,
+        plugins: [lazyChunkPlugin(rootOutdir, dirname(output), nested)],
+      });
+      if (!result.success) {
+        const details = result.logs.map((log) => log.message).filter(Boolean).join("\n");
+        throw new Error(`${failureMessage}: lazy chunk ${source}\n${details}`);
+      }
+    }
+    pending = [...nested.entries()];
+  }
+}
+
 function electrobunViewAliasPlugin(aliasRules: AliasRule[]) {
   return {
     name: "electrobun-view-aliases",

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

@@ -1,5 +1,5 @@
 /** @jsxImportSource react */
-import { memo, type CSSProperties } from "react";
+import { memo, type CSSProperties, type ReactNode } from "react";
 import { TextAttributes } from "../../../ui/host";
 import { DisclosureMarker } from "../../../components/ui/disclosure-marker";
 import type {
@@ -27,10 +27,26 @@ import {
   eventWithCellCoordinates,
 } from "./dom";
 
-/** Space between a header label and its sort marker. */
-const SORT_MARKER_GAP_PX = 4;
+/** Space between a label and its sort marker or the artwork drawn before it. */
+const LABEL_GAP_PX = 4;
 const SORT_MARKER_SIZE_PX = 9;
 
+/**
+ * Artwork a column or cell draws before its text. It is decoration, so
+ * assistive technology skips it and the text stays the only name.
+ */
+function Leading({ children }: { children: ReactNode }) {
+  return (
+    <span
+      aria-hidden="true"
+      data-gloom-role="data-table-leading"
+      style={{ display: "flex", flex: "none", alignItems: "center" }}
+    >
+      {children}
+    </span>
+  );
+}
+
 function contentJustifyForAlign(align: string | undefined): CSSProperties["justifyContent"] {
   if (align === "right") return "flex-end";
   if (align === "center") return "center";
@@ -130,7 +146,7 @@ export function WebDataTableHeader<C extends DataTableColumn>({
               display: "flex",
               alignItems: "center",
               justifyContent: contentJustifyForAlign(column.align),
-              gap: column.label ? SORT_MARKER_GAP_PX : 0,
+              gap: column.label ? LABEL_GAP_PX : 0,
               backgroundColor: column.headerBackgroundColor ?? CSS_PANEL,
               boxShadow: freezeFirstColumn && columnIndex === 0 ? `-${inlinePaddingPx(horizontalPadding)}px 0 0 ${column.headerBackgroundColor ?? CSS_PANEL}, ${columnGap * WEB_CELL_WIDTH}px 0 0 ${column.headerBackgroundColor ?? CSS_PANEL}` : undefined,
             }}
@@ -141,6 +157,7 @@ export function WebDataTableHeader<C extends DataTableColumn>({
               onHeaderClick(column.id);
             } : undefined}
           >
+            {column.headerLeading !== undefined ? <Leading>{column.headerLeading}</Leading> : null}
             <span
               title={column.label || undefined}
               style={{
@@ -336,6 +353,8 @@ function WebDataTableRowInner<
           <div
             key={column.id}
             data-gloom-role="data-table-cell"
+            // The instant behind a shortened time ("Wed 11:27"), so a rendered-view report can print it whole.
+            data-gloom-cell-instant={cell.value instanceof Date && Number.isFinite(cell.value.getTime()) ? cell.value.toISOString() : undefined}
             style={{
               minWidth: 0,
               position: freezeFirstColumn && columnIndex === 0 ? "sticky" : undefined,
@@ -392,18 +411,13 @@ function WebDataTableRowInner<
                 {cell.content}
               </div>
             ) : (
-              <span
-                title={cell.text}
-                style={clippedCellTextStyle(
-                  column,
-                  selected && (cell.color === undefined || (selectedTextOverridesCellColor && !cell.keepColorWhenSelected))
-                    ? CSS_SELECTED_TEXT
-                    : cell.color ?? CSS_TEXT,
-                  cell.attributes ?? TextAttributes.NONE,
-                )}
-              >
-                {cell.text}
-              </span>
+              <CellText
+                cell={cell}
+                column={column}
+                color={selected && (cell.color === undefined || (selectedTextOverridesCellColor && !cell.keepColorWhenSelected))
+                  ? CSS_SELECTED_TEXT
+                  : cell.color ?? CSS_TEXT}
+              />
             )}
           </div>
         );
@@ -412,4 +426,26 @@ function WebDataTableRowInner<
   );
 }
 
+function CellText({ cell, column, color }: { cell: DataTableCell; column: DataTableColumn; color: string }) {
+  const style = clippedCellTextStyle(column, color, cell.attributes ?? TextAttributes.NONE);
+  if (cell.leading === undefined) return <span title={cell.text} style={style}>{cell.text}</span>;
+  return (
+    <div
+      style={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: contentJustifyForAlign(column.align),
+        gap: LABEL_GAP_PX,
+        width: "100%",
+        height: "100%",
+        minWidth: 0,
+        overflow: "hidden",
+      }}
+    >
+      <Leading>{cell.leading}</Leading>
+      <span title={cell.text} style={{ ...style, width: "auto", flex: "0 1 auto" }}>{cell.text}</span>
+    </div>
+  );
+}
+
 export const WebDataTableRow = memo(WebDataTableRowInner) as typeof WebDataTableRowInner;

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

@@ -345,8 +345,10 @@ export function WebTextField({
           focusedBackgroundColor={plain ? "transparent" : resolvedBackgroundColor}
           cursorColor={colors.textBright}
           style={{
-            paddingLeft: plain ? 0 : comfortable ? 8 : 10,
-            paddingRight: plain ? 0 : comfortable ? 8 : 10,
+            // A framed field keeps its text one cell off the frame; a plain one
+            // sits flush in the row or band that holds it.
+            paddingLeft: plain ? 0 : "var(--cell-w)",
+            paddingRight: plain ? 0 : "var(--cell-w)",
             borderRadius: plain ? 0 : CONTROL_RADIUS,
             // The field is taller than a cell, so the input takes the inner
             // height and centers its text on the box's own line.
@@ -581,8 +583,10 @@ export function WebDialogFrame({
       </Box>
       {children}
       {footer && (
+        // Sized by its line, not one cell: a cell-high box with this padding
+        // left the key line hanging out of its bottom.
         <Box
-          height={1}
+          flexShrink={0}
           style={{
             borderTop: `1px solid ${panelBorder(colors)}`,
             paddingTop: 8,

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

@@ -14,6 +14,7 @@ const ICONS: Record<IconName, ReactNode> = {
   ),
   close: <path d="M3 3L9 9M9 3L3 9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" />,
   zap: <path d="M7.1 1.2 2.7 6.5h3.1l-.7 4.3 4.4-5.5H6.4l.7-4.1Z" fill="currentColor" />,
+  sqrt: <path d="M1.5 6.6h1.6l1.8 3.6L7.6 2h3" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />,
   lock: (
     <>
       <rect x="2.5" y="5.5" width="7" height="5" rx="1.2" fill="currentColor" />

package/src/renderers/dom/desktop/list-view.tsx

@@ -5,6 +5,7 @@ import { TextAttributes } from "../../../ui";
 import type { ListRowState, ListViewItem, ListViewProps } from "../../../components/ui/list-view";
 import { blendHex, hoverBg, type ThemeColors } from "../../../theme/colors";
 import { useThemeColors } from "../../../theme/theme-context";
+import { WEB_CELL_HEIGHT } from "../../../theme/font-scale";
 import { isInsideDialogSurface } from "../host/focus-scope";
 import { isEditableKeyboardTarget } from "../key-event";
 import {
@@ -58,6 +59,10 @@ function DefaultDesktopRow({
   );
 }
 
+const FRAMED_LIST_PADDING_PX = 4;
+/** What a framed list adds above and below its rows: padding and a 1px border on each side. */
+const FRAMED_LIST_CHROME_PX = 2 * (FRAMED_LIST_PADDING_PX + 1);
+
 function listRowStyle(selected: boolean, disabled: boolean, colors: ThemeColors): CSSProperties {
   return {
     borderRadius: CONTROL_RADIUS,
@@ -109,6 +114,16 @@ export function WebListView({
   const tabStopIndex = selectedIndex >= 0 && items[selectedIndex] && !items[selectedIndex].disabled
     ? selectedIndex : items.findIndex((item) => !item.disabled);
   const effectiveSurface = surface ?? (scrollable ? "framed" : "plain");
+  // `height` counts terminal rows. A list that is not meant to scroll takes
+  // only the rows it has, up to that many; one with more rows than that
+  // scrolls inside the height instead of drawing over whatever follows it.
+  const rowsHeight = items.length === 0 ? 1 : items.length * rowHeight + (items.length - 1) * rowGap;
+  const overflowsHeight = !scrollable && height != null && rowsHeight > height;
+  const scrolls = scrollable || overflowsHeight;
+  // The frame's padding and border sit outside the rows it was asked to hold.
+  const scrollHeight = overflowsHeight
+    ? `${height * WEB_CELL_HEIGHT + (effectiveSurface === "plain" ? 0 : FRAMED_LIST_CHROME_PX)}px`
+    : height;
   const frameStyle = effectiveSurface === "plain"
     ? {
       border: "none",
@@ -119,12 +134,12 @@ export function WebListView({
     : {
       border: `1px solid ${panelBorder(colors)}`,
       borderRadius: CONTROL_RADIUS,
-      padding: 4,
+      padding: FRAMED_LIST_PADDING_PX,
       backgroundColor: subtlePanelFill(colors),
     };
 
   useEffect(() => {
-    if (!scrollable || !autoScrollToIndex || activeScrollIndex < 0) return;
+    if (!scrolls || !autoScrollToIndex || activeScrollIndex < 0) return;
     const scrollBox = scrollRef.current;
     if (!scrollBox) return;
     const safeIndex = Math.min(activeScrollIndex, items.length - 1);
@@ -136,16 +151,16 @@ export function WebListView({
     } else if (rowBottom > scrollBox.scrollTop + viewportHeight) {
       scrollBox.scrollTo(rowBottom - viewportHeight);
     }
-  }, [activeScrollIndex, autoScrollToIndex, items.length, rowHeight, rowStride, scrollable]);
+  }, [activeScrollIndex, autoScrollToIndex, items.length, rowHeight, rowStride, scrolls]);
 
   useEffect(() => {
-    if (!scrollable) return;
+    if (!scrolls) return;
     const scrollBox = scrollRef.current;
     if (!scrollBox) return;
     if (scrollBox.verticalScrollBar) {
       scrollBox.verticalScrollBar.visible = items.length * rowStride - rowGap > (scrollBox.viewport?.height ?? 0);
     }
-  }, [items.length, height, flexGrow, rowGap, rowStride, scrollable]);
+  }, [items.length, height, flexGrow, rowGap, rowStride, scrolls]);
 
   // The dialog or pane around the list moves its cursor (j/k, Home/End). A row
   // Tab or a press left focused follows it, or Space and Enter would act on the
@@ -156,8 +171,8 @@ export function WebListView({
     const active = document.activeElement;
     if (!list || !active || !list.contains(active) || isEditableKeyboardTarget(active)) return;
     const row = list.querySelectorAll<HTMLElement>('[role="option"]')[selectedIndex];
-    if (row && !row.contains(active)) row.focus({ preventScroll: scrollable });
-  }, [listDomId, scrollable, selectedIndex]);
+    if (row && !row.contains(active)) row.focus({ preventScroll: scrolls });
+  }, [listDomId, scrolls, selectedIndex]);
 
   const rows = items.length === 0
     ? (
@@ -233,11 +248,21 @@ export function WebListView({
     });
 
   return (
-    <Box id={listDomId} flexDirection="column" height={height} flexGrow={flexGrow} gap={1} role="listbox" aria-label={remoteLabel}>
-      {scrollable ? (
+    <Box
+      id={listDomId}
+      flexDirection="column"
+      height={scrollable ? height : undefined}
+      // A list sized by its container gives up height to it, and scrolls.
+      minHeight={scrollable && height == null ? 0 : undefined}
+      flexGrow={flexGrow}
+      gap={1}
+      role="listbox"
+      aria-label={remoteLabel}
+    >
+      {scrolls ? (
         <ScrollBox
           ref={scrollRef}
-          height={height}
+          height={scrollHeight}
           flexGrow={flexGrow}
           scrollY
           focusable={false}