gloomberb 0.9.2 → 0.9.4

package/src/renderers/electrobun/view/host/input.tsx

@@ -2,12 +2,14 @@
 /** @jsxImportSource react */
 import {
   forwardRef,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
   useState,
   type CSSProperties,
   type KeyboardEvent,
+  type RefObject,
 } from "react";
 import type { InputRenderable, TextareaRenderable } from "../../../../ui/host";
 import { WEB_CELL_HEIGHT, WEB_CELL_WIDTH } from "../input-host";
@@ -79,6 +81,65 @@ function useEditableValue(props: Record<string, unknown>) {
   return { value, valueRef, setValue };
 }
 
+function useLatestRef<T>(value: T): RefObject<T> {
+  const ref = useRef(value);
+  ref.current = value;
+  return ref;
+}
+
+function useSyncedEditableElement<T extends HTMLInputElement | HTMLTextAreaElement>({
+  elementRef,
+  propsRef,
+  valueRef,
+  handleValueChange,
+  active,
+}: {
+  elementRef: RefObject<T | null>;
+  propsRef: RefObject<Record<string, unknown>>;
+  valueRef: RefObject<string>;
+  handleValueChange: (nextValue: string) => void;
+  active: boolean;
+}): () => string {
+  const syncElementValue = useCallback(() => {
+    const nextValue = elementRef.current?.value;
+    if (typeof nextValue !== "string") return valueRef.current;
+    if (nextValue !== valueRef.current) {
+      handleValueChange(nextValue);
+    }
+    return nextValue;
+  }, [elementRef, handleValueChange, valueRef]);
+
+  useEffect(() => {
+    if (!active) return;
+    let animationFrame: number | null = null;
+    const syncDomValue = () => {
+      syncElementValue();
+      animationFrame = globalThis.requestAnimationFrame?.(syncDomValue) ?? null;
+    };
+    animationFrame = globalThis.requestAnimationFrame?.(syncDomValue) ?? null;
+    return () => {
+      if (animationFrame !== null) globalThis.cancelAnimationFrame?.(animationFrame);
+    };
+  }, [active, syncElementValue]);
+
+  useEffect(() => {
+    if (!active) return;
+    const commitBeforeOutsideMouseDown = (event: globalThis.MouseEvent) => {
+      const element = elementRef.current;
+      const target = event.target;
+      if (!element || (target instanceof Node && element.contains(target))) return;
+      const nextValue = syncElementValue();
+      callTextHandler(propsRef.current.onBlur, nextValue);
+    };
+    document.addEventListener("mousedown", commitBeforeOutsideMouseDown, true);
+    return () => {
+      document.removeEventListener("mousedown", commitBeforeOutsideMouseDown, true);
+    };
+  }, [active, elementRef, propsRef, syncElementValue]);
+
+  return syncElementValue;
+}
+
 type WebVisualCursor = TextareaRenderable["visualCursor"];
 
 function textareaColumnCount(props: Record<string, unknown>, element: HTMLTextAreaElement | null): number {
@@ -149,8 +210,10 @@ function textareaMetrics(
 
 export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(function WebInput(props, ref) {
   const elementRef = useRef<HTMLInputElement | null>(null);
+  const propsRef = useLatestRef(props);
   const { value, valueRef, setValue } = useEditableValue(props);
   const [cursorOffset, setCursorOffset] = useState(value.length);
+  const [domFocused, setDomFocused] = useState(false);
   const applyCursorOffset = (offset: number) => {
     setCursorOffset(offset);
     queueMicrotask(() => applyDomCursorOffset(elementRef.current, offset));
@@ -165,7 +228,7 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
 
   useImperativeHandle(ref, () => ({
     editBuffer: {
-      getText: () => valueRef.current,
+      getText: () => elementRef.current?.value ?? valueRef.current,
       setText: (nextText: string) => setValue(nextText),
     },
     get cursorOffset() {
@@ -175,18 +238,25 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
     focus: () => elementRef.current?.focus(),
   }), [applyCursorOffset, cursorOffset, setValue, valueRef]);
 
-  const handleValueChange = (nextValue: string) => {
+  const handleValueChange = useCallback((nextValue: string) => {
     setValue(nextValue);
     setCursorOffset(elementRef.current?.selectionStart ?? nextValue.length);
-    callTextHandler(props.onInput, nextValue);
-    callTextHandler(props.onChange, nextValue);
-    callTextHandler(props.onCursorChange, nextValue);
-  };
+    callTextHandler(propsRef.current.onInput, nextValue);
+    callTextHandler(propsRef.current.onChange, nextValue);
+    callTextHandler(propsRef.current.onCursorChange, nextValue);
+  }, [propsRef, setValue]);
+  const syncElementValue = useSyncedEditableElement({
+    elementRef,
+    propsRef,
+    valueRef,
+    handleValueChange,
+    active: props.focused === true || domFocused,
+  });
 
   const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter" && typeof props.onSubmit === "function") {
+    if (event.key === "Enter" && typeof propsRef.current.onSubmit === "function") {
       event.preventDefault();
-      (props.onSubmit as (value: string) => void)(valueRef.current);
+      (propsRef.current.onSubmit as (value: string) => void)(syncElementValue());
     }
   };
 
@@ -200,7 +270,16 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
       autoComplete="off"
       spellCheck={false}
       placeholder={getStringProp(props, "placeholder")}
+      onInput={(event) => handleValueChange(event.currentTarget.value)}
       onChange={(event) => handleValueChange(event.currentTarget.value)}
+      onFocus={() => {
+        setDomFocused(true);
+        callTextHandler(propsRef.current.onFocus, elementRef.current?.value ?? valueRef.current);
+      }}
+      onBlur={() => {
+        setDomFocused(false);
+        callTextHandler(propsRef.current.onBlur, syncElementValue());
+      }}
       onKeyDown={handleKeyDown}
       onContextMenu={(event) => {
         if (!NATIVE_CONTEXT_MENU_SUPPORTED) return;
@@ -211,7 +290,7 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
       }}
       onSelect={() => {
         setCursorOffset(elementRef.current?.selectionStart ?? valueRef.current.length);
-        callTextHandler(props.onCursorChange, valueRef.current);
+        callTextHandler(propsRef.current.onCursorChange, valueRef.current);
       }}
       style={textInputStyle(props, false)}
     />
@@ -220,8 +299,10 @@ export const WebInput = forwardRef<InputRenderable, Record<string, unknown>>(fun
 
 export const WebTextarea = forwardRef<TextareaRenderable, Record<string, unknown>>(function WebTextarea(props, ref) {
   const elementRef = useRef<HTMLTextAreaElement | null>(null);
+  const propsRef = useLatestRef(props);
   const { value, valueRef, setValue } = useEditableValue(props);
   const [cursorOffset, setCursorOffset] = useState(value.length);
+  const [domFocused, setDomFocused] = useState(false);
   const applyCursorOffset = (offset: number) => {
     setCursorOffset(offset);
     queueMicrotask(() => applyDomCursorOffset(elementRef.current, offset));
@@ -236,7 +317,7 @@ export const WebTextarea = forwardRef<TextareaRenderable, Record<string, unknown
 
   useImperativeHandle(ref, () => ({
     editBuffer: {
-      getText: () => valueRef.current,
+      getText: () => elementRef.current?.value ?? valueRef.current,
       setText: (nextText: string) => setValue(nextText),
     },
     get cursorOffset() {
@@ -271,18 +352,25 @@ export const WebTextarea = forwardRef<TextareaRenderable, Record<string, unknown
     clearLineHighlights: () => {},
   }), [applyCursorOffset, cursorOffset, props, setValue, valueRef]);
 
-  const handleValueChange = (nextValue: string) => {
+  const handleValueChange = useCallback((nextValue: string) => {
     setValue(nextValue);
     setCursorOffset(elementRef.current?.selectionStart ?? nextValue.length);
-    callTextHandler(props.onInput, nextValue);
-    callTextHandler(props.onChange, nextValue);
-    callTextHandler(props.onCursorChange, nextValue);
-  };
+    callTextHandler(propsRef.current.onInput, nextValue);
+    callTextHandler(propsRef.current.onChange, nextValue);
+    callTextHandler(propsRef.current.onCursorChange, nextValue);
+  }, [propsRef, setValue]);
+  const syncElementValue = useSyncedEditableElement({
+    elementRef,
+    propsRef,
+    valueRef,
+    handleValueChange,
+    active: props.focused === true || domFocused,
+  });
 
   const handleKeyDown = (event: KeyboardEvent<HTMLTextAreaElement>) => {
-    if (event.key === "Enter" && !event.shiftKey && typeof props.onSubmit === "function") {
+    if (event.key === "Enter" && !event.shiftKey && typeof propsRef.current.onSubmit === "function") {
       event.preventDefault();
-      (props.onSubmit as (value: string) => void)(valueRef.current);
+      (propsRef.current.onSubmit as (value: string) => void)(syncElementValue());
     }
   };
 
@@ -296,7 +384,16 @@ export const WebTextarea = forwardRef<TextareaRenderable, Record<string, unknown
       autoComplete="off"
       spellCheck={false}
       placeholder={getStringProp(props, "placeholder")}
+      onInput={(event) => handleValueChange(event.currentTarget.value)}
       onChange={(event) => handleValueChange(event.currentTarget.value)}
+      onFocus={() => {
+        setDomFocused(true);
+        callTextHandler(propsRef.current.onFocus, elementRef.current?.value ?? valueRef.current);
+      }}
+      onBlur={() => {
+        setDomFocused(false);
+        callTextHandler(propsRef.current.onBlur, syncElementValue());
+      }}
       onKeyDown={handleKeyDown}
       onContextMenu={(event) => {
         if (!NATIVE_CONTEXT_MENU_SUPPORTED) return;
@@ -307,7 +404,7 @@ export const WebTextarea = forwardRef<TextareaRenderable, Record<string, unknown
       }}
       onSelect={() => {
         setCursorOffset(elementRef.current?.selectionStart ?? valueRef.current.length);
-        callTextHandler(props.onCursorChange, valueRef.current);
+        callTextHandler(propsRef.current.onCursorChange, valueRef.current);
       }}
       style={textInputStyle(props, true)}
     />

package/src/renderers/electrobun/view/host/tabs.tsx

@@ -21,6 +21,7 @@ export function WebTabs({
   closeMode = "always",
   addLabel = "+",
   onAdd,
+  focused = false,
   palette,
 }: HostTabsProps) {
   const activeTabRef = useRef<HTMLButtonElement | null>(null);
@@ -112,16 +113,20 @@ export function WebTabs({
           paddingBlock: 0,
           paddingBottom: showUnderline ? 2 : 0,
           margin: 0,
-          border: 0,
+          border: "1px solid transparent",
           borderRadius: variant === "underline" ? 5 : 6,
           background: resolveTabBackground(active, hovered),
+          boxSizing: "border-box",
           font: "inherit",
           fontSize: tabFontSize,
           fontWeight: active ? 700 : 500,
           lineHeight: 1,
           textAlign: "center",
           whiteSpace: "nowrap",
-          transition: "background-color 110ms ease, color 110ms ease, box-shadow 110ms ease",
+          borderColor: active && focused && variant !== "pill"
+            ? `color-mix(in srgb, ${palette.activeUnderline} 35%, transparent)`
+            : "transparent",
+          transition: "background-color 110ms ease, border-color 110ms ease, color 110ms ease",
           cursor: disabled ? "default" : "pointer",
         } satisfies CssVars;
 

package/src/renderers/electrobun/view/host/text.test.ts

@@ -0,0 +1,22 @@
+import { describe, expect, test } from "bun:test";
+import { renderAsciiText } from "../../../../ui/ascii-font";
+import { webAsciiTextLines, webAsciiTextWordmarkVariant } from "./ascii-text";
+
+describe("desktop web ASCII text", () => {
+  test("keeps the legacy Gloomberb wordmark on macOS", () => {
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "darwin")).toBe("legacy");
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "MacIntel")).toBe("legacy");
+    expect(webAsciiTextLines("Gloomberb", "wordmark", "darwin")).toEqual(
+      renderAsciiText("Gloomberb", "wordmark"),
+    );
+  });
+
+  test("uses the web-safe Gloomberb wordmark off macOS", () => {
+    const lines = webAsciiTextLines("Gloomberb", "wordmark", "win32");
+
+    expect(webAsciiTextWordmarkVariant("Gloomberb", "wordmark", "win32")).toBe("compat");
+    expect(lines).toHaveLength(5);
+    expect(lines[0]).toContain("____");
+    expect(lines).not.toEqual(renderAsciiText("Gloomberb", "wordmark"));
+  });
+});

package/src/renderers/electrobun/view/host/text.tsx

@@ -7,21 +7,17 @@ import {
   type StyledTextChunk,
   type TextProps,
 } from "../../../../ui/host";
-import { renderAsciiText } from "../../../../ui/ascii-font";
 import { WEB_CELL_WIDTH } from "../input-host";
+import { webAsciiTextLines, webAsciiTextWordmarkVariant } from "./ascii-text";
 import { hasDirectMouseHandler, mouseHandlers } from "./mouse";
 import { cleanDomProps, commonStyle, textStyle } from "./style";
 
-const WEB_GLOOMBERB_WORDMARK = [
-  "  ____ _                       _               _     ",
-  " / ___| | ___   ___  _ __ ___ | |__   ___ _ __| |__  ",
-  "| |  _| |/ _ \\ / _ \\| '_ ` _ \\| '_ \\ / _ \\ '__| '_ \\ ",
-  "| |_| | | (_) | (_) | | | | | | |_) |  __/ |  | |_) |",
-  " \\____|_|\\___/ \\___/|_| |_| |_|_.__/ \\___|_|  |_.__/ ",
-];
-
 const WEB_WORDMARK_CHAR_WIDTH_PX = Math.max(10, WEB_CELL_WIDTH);
 
+interface WebAsciiTextProps extends AsciiTextProps {
+  desktopPlatform?: string;
+}
+
 function isStyledTextContent(value: unknown): value is { chunks: StyledTextChunk[] } {
   return value instanceof StyledText
     || (!!value && typeof value === "object" && Array.isArray((value as { chunks?: unknown }).chunks));
@@ -100,16 +96,17 @@ export function WebAsciiText({
   bg,
   backgroundColor,
   selectable = false,
+  desktopPlatform,
   ...props
-}: AsciiTextProps) {
-  const isWordmark = font === "wordmark";
-  const lines = isWordmark && text.trim().toLowerCase() === "gloomberb"
-    ? WEB_GLOOMBERB_WORDMARK
-    : renderAsciiText(text, font);
+}: WebAsciiTextProps) {
+  const wordmarkVariant = webAsciiTextWordmarkVariant(text, font, desktopPlatform);
+  const isCompatWordmark = wordmarkVariant === "compat";
+  const isLegacyWordmark = wordmarkVariant === "legacy";
+  const lines = webAsciiTextLines(text, font, desktopPlatform);
   const resolvedColor = color ?? fg;
   const resolvedBackground = bg ?? backgroundColor;
-  const lineHeightPx = isWordmark ? 16 : 12;
-  const wordmarkWidthPx = isWordmark
+  const lineHeightPx = isCompatWordmark ? 16 : 12;
+  const wordmarkWidthPx = isCompatWordmark
     ? Math.max(...lines.map((line) => line.length)) * WEB_WORDMARK_CHAR_WIDTH_PX
     : undefined;
   return (
@@ -118,15 +115,16 @@ export function WebAsciiText({
       data-gloom-role={(props["data-gloom-role"] as string | undefined) ?? "ascii-text"}
       style={{
         ...commonStyle({ ...props, fg: resolvedColor, bg: resolvedBackground }),
-        display: "block",
+        display: isLegacyWordmark ? "flex" : "block",
+        flexDirection: isLegacyWordmark ? "column" : undefined,
         flexShrink: 0,
         ...(wordmarkWidthPx != null && props.width == null
           ? { width: `${wordmarkWidthPx}px`, minWidth: `${wordmarkWidthPx}px` }
           : {}),
         color: resolvedColor,
         backgroundColor: resolvedBackground,
-        fontFamily: isWordmark ? "\"Cascadia Mono\", Consolas, \"Courier New\", monospace" : undefined,
-        fontSize: isWordmark ? "16px" : undefined,
+        fontFamily: isCompatWordmark ? "\"Cascadia Mono\", Consolas, \"Courier New\", monospace" : undefined,
+        fontSize: isCompatWordmark ? "16px" : undefined,
         fontVariantLigatures: "none",
         lineHeight: `${lineHeightPx}px`,
         whiteSpace: "pre",
@@ -135,7 +133,13 @@ export function WebAsciiText({
         ...(props.style as CSSProperties | undefined),
       }}
     >
-      {lines.join("\n")}
+      {isLegacyWordmark
+        ? lines.map((line, index) => (
+          <span key={index} style={{ display: "block", height: "12px", lineHeight: "12px" }}>
+            {line}
+          </span>
+        ))
+        : lines.join("\n")}
     </div>
   );
 }

package/src/renderers/electrobun/view/styles.css

@@ -170,6 +170,17 @@ body.gloom-dragging {
 [data-gloom-role="status-bar"] span {
   line-height: var(--cell-h);
 }
+[data-gloom-role="pane-body"] {
+  overflow: hidden;
+}
+[data-gloom-role="pane-content"] {
+  overflow: hidden;
+}
+[data-gloom-role="pane-content"] > * {
+  min-width: 0;
+  min-height: 0;
+  max-height: 100%;
+}
 [data-gloom-role="pane-footer"] {
   flex: 0 0 var(--cell-h);
   height: var(--cell-h);

package/src/renderers/electrobun/view/ui-host.tsx

@@ -137,7 +137,7 @@ export function createWebUiHost(desktopPlatform?: string): UiHost {
         *
       </span>
     ),
-    AsciiText: WebAsciiText,
+    AsciiText: (props) => <WebAsciiText {...props} desktopPlatform={desktopPlatform} />,
   };
 }
 

package/src/renderers/opentui/host.tsx

@@ -138,8 +138,14 @@ export async function createOpenTuiHost(): Promise<OpenTuiHost> {
     get isDestroyed() {
       return renderer.isDestroyed;
     },
+    get currentFocusedRenderable() {
+      return renderer.currentFocusedRenderable ?? null;
+    },
+    get currentFocusedEditor() {
+      return renderer.currentFocusedEditor ?? null;
+    },
     get keyInput() {
-      return renderer.keyInput;
+      return renderer.keyInput as unknown as NativeRendererHost["keyInput"];
     },
     on: (event, handler) => renderer.on(event, handler),
     off: (event, handler) => renderer.off(event, handler),
@@ -147,7 +153,17 @@ export async function createOpenTuiHost(): Promise<OpenTuiHost> {
     registerLifecyclePass: (renderable) => renderer.registerLifecyclePass(renderable as any),
     unregisterLifecyclePass: (renderable) => renderer.unregisterLifecyclePass(renderable as any),
     getSelection: () => renderer.getSelection(),
+    getCursorState: () => renderer.getCursorState(),
+    setCursorPosition: (x, y, visible = true) => renderer.setCursorPosition(x, y, visible),
+    addPostProcessFn: (processFn) => renderer.addPostProcessFn(processFn as any),
+    removePostProcessFn: (processFn) => renderer.removePostProcessFn(processFn as any),
     copyToClipboardOSC52: (text) => renderer.copyToClipboardOSC52(text),
+    captureMouseRenderable(renderable) {
+      const capture = (renderer as unknown as { setCapturedRenderable?: (target: unknown) => void }).setCapturedRenderable;
+      if (typeof capture === "function") {
+        capture.call(renderer, renderable);
+      }
+    },
     write(data) {
       if (renderer.isDestroyed) return false;
       const writer = (renderer as unknown as { writeOut?: (payload: string | Uint8Array) => void }).writeOut;

package/src/renderers/opentui/start.tsx

@@ -16,18 +16,26 @@ import { ToastHostProvider } from "../../ui/toast";
 import { colors } from "../../theme/colors";
 import { startMainThreadMonitor } from "../../utils/main-thread-monitor";
 import { measurePerfAsync } from "../../utils/perf-marks";
+import type { CliLaunchRequest } from "../../types/plugin";
 
-export async function startOpenTuiApp(): Promise<void> {
+export interface StartOpenTuiAppOptions {
+  externalPlugins?: Awaited<ReturnType<typeof loadExternalPlugins>>;
+  cliArgs?: string[];
+  skipCliDispatch?: boolean;
+  cliLaunchRequest?: CliLaunchRequest | null;
+}
+
+export async function startOpenTuiApp(options: StartOpenTuiAppOptions = {}): Promise<void> {
   setConfigStoreHost(nodeConfigStoreHost);
   debugLog.interceptConsole();
 
   const appLog = debugLog.createLogger("app");
   appLog.info("Gloomberb starting");
 
-  const cliArgs = process.argv.slice(2);
-  const externalPlugins = await measurePerfAsync("startup.opentui.load-external-plugins", () => loadExternalPlugins());
-  let cliLaunchRequest = null;
-  if (cliArgs.length > 0) {
+  const cliArgs = options.cliArgs ?? process.argv.slice(2);
+  const externalPlugins = options.externalPlugins ?? await measurePerfAsync("startup.opentui.load-external-plugins", () => loadExternalPlugins());
+  let cliLaunchRequest = options.cliLaunchRequest ?? null;
+  if (!options.skipCliDispatch && cliArgs.length > 0) {
     const dispatchResult = await dispatchCli(cliArgs, { externalPlugins });
     if (dispatchResult.kind === "handled") return;
     if (dispatchResult.kind === "launch-ui") {

package/src/renderers/opentui/ui-host.tsx

@@ -1,11 +1,25 @@
 import { RGBA, StyledText as OpenTuiStyledText, SyntaxStyle, TextAttributes as OpenTuiTextAttributes } from "@opentui/core";
-import { createElement } from "react";
+import { createElement, forwardRef, type ReactNode } from "react";
 import "opentui-spinner/react";
 import { TextAttributes, type UiHost, type TextProps } from "../../ui/host";
 import { renderAsciiText } from "../../ui/ascii-font";
 import { OpenTuiImageSurface } from "./image/surface";
 import { OpenTuiChartSurface } from "./chart-surface";
 
+interface OpenTuiPrimitiveProps {
+  children?: ReactNode;
+  [key: string]: unknown;
+}
+
+function createOpenTuiPrimitive(tagName: string) {
+  return forwardRef<unknown, OpenTuiPrimitiveProps>(function OpenTuiPrimitive(
+    { children, ...props },
+    ref,
+  ) {
+    return createElement(tagName as any, { ...props, ref }, children as ReactNode);
+  });
+}
+
 function mapTextAttributes(appAttributes: number | undefined, props?: TextProps): number | undefined {
   const flags = typeof appAttributes === "number" ? appAttributes : 0;
   let attributes = 0;
@@ -37,41 +51,59 @@ function mapTextContent(content: unknown): unknown {
       fg: mapColor(chunk.fg),
       bg: mapColor(chunk.bg),
       attributes: mapTextAttributes(chunk.attributes as number | undefined),
-    })));
+    })) as any);
   }
   return content;
 }
 
+const OpenTuiBox = createOpenTuiPrimitive("box");
+const OpenTuiScrollBox = createOpenTuiPrimitive("scrollbox");
+const OpenTuiInput = createOpenTuiPrimitive("input");
+const OpenTuiTextarea = createOpenTuiPrimitive("textarea");
+const OpenTuiSpinnerMark = createOpenTuiPrimitive("spinner");
+
+const OpenTuiText = forwardRef<unknown, TextProps>(function OpenTuiText({ children, ...props }, ref) {
+  const textProps = stripTextProps(props);
+  return createElement("text" as any, {
+    ...textProps,
+    ref,
+    content: mapTextContent(textProps.content),
+    attributes: mapTextAttributes(props.attributes as number | undefined, props),
+  }, children as ReactNode);
+});
+
+const OpenTuiSpan = forwardRef<unknown, TextProps>(function OpenTuiSpan({ children, ...props }, ref) {
+  return createElement("span" as any, {
+    ...stripTextProps(props),
+    ref,
+    attributes: mapTextAttributes(props.attributes as number | undefined, props),
+  }, children as ReactNode);
+});
+
+const OpenTuiStrong = forwardRef<unknown, TextProps>(function OpenTuiStrong({ children, ...props }, ref) {
+  return createElement("strong" as any, { ...stripTextProps(props), ref }, children as ReactNode);
+});
+
+const OpenTuiUnderline = forwardRef<unknown, TextProps>(function OpenTuiUnderline({ children, ...props }, ref) {
+  return createElement("u" as any, { ...stripTextProps(props), ref }, children as ReactNode);
+});
+
 export const openTuiUiHost: UiHost = {
   kind: "opentui",
   capabilities: {
     nativeCharts: true,
   },
-  Box: ({ children, ...props }) => <box {...props}>{children}</box>,
-  Text: ({ children, ...props }) => {
-    const textProps = stripTextProps(props);
-    return (
-      <text
-        {...textProps}
-        content={mapTextContent(textProps.content)}
-        attributes={mapTextAttributes(props.attributes as number | undefined, props)}
-      >
-        {children}
-      </text>
-    );
-  },
-  Span: ({ children, ...props }) => createElement("span" as any, {
-    ...stripTextProps(props),
-    attributes: mapTextAttributes(props.attributes as number | undefined, props),
-  }, children),
-  Strong: ({ children, ...props }) => createElement("strong" as any, stripTextProps(props), children),
-  Underline: ({ children, ...props }) => createElement("u" as any, stripTextProps(props), children),
-  ScrollBox: ({ children, ...props }) => <scrollbox {...props}>{children}</scrollbox>,
-  Input: ({ children, ...props }) => createElement("input" as any, props, children),
-  Textarea: ({ children, ...props }) => createElement("textarea" as any, props, children),
+  Box: OpenTuiBox as UiHost["Box"],
+  Text: OpenTuiText as UiHost["Text"],
+  Span: OpenTuiSpan as UiHost["Span"],
+  Strong: OpenTuiStrong as UiHost["Strong"],
+  Underline: OpenTuiUnderline as UiHost["Underline"],
+  ScrollBox: OpenTuiScrollBox as UiHost["ScrollBox"],
+  Input: OpenTuiInput as UiHost["Input"],
+  Textarea: OpenTuiTextarea as UiHost["Textarea"],
   ChartSurface: OpenTuiChartSurface,
   ImageSurface: OpenTuiImageSurface,
-  SpinnerMark: ({ children, ...props }) => createElement("spinner" as any, props, children),
+  SpinnerMark: OpenTuiSpinnerMark as UiHost["SpinnerMark"],
   AsciiText: ({ text, font = "tiny", color, fg, bg, backgroundColor, selectable = false, ...props }) => {
     const resolvedColor = color ?? fg;
     const resolvedBackground = backgroundColor ?? bg;

package/src/sources/provider-router/batches.ts

@@ -11,7 +11,12 @@ import { normalizeTickerFinancialsPriceHistory } from "../../utils/price-history
 import { isQuoteStaleForCurrentSession } from "../../market-data/quotes/freshness";
 import { resolveTickerFinancialsQuoteState } from "../../market-data/quotes/resolution";
 import { selectCachedResource } from "./cache";
-import { quoteWithFreshnessExchange, type CachedFinancialsSelection } from "./financials";
+import {
+  hasDeepStatementHistory,
+  hasDetailedStatementRows,
+  quoteWithFreshnessExchange,
+  type CachedFinancialsSelection,
+} from "./financials";
 import type { ProviderRouterCoreDeps } from "./route-types";
 
 export interface ProviderRouterBatchDeps extends ProviderRouterCoreDeps {
@@ -31,6 +36,10 @@ export interface ProviderRouterBatchDeps extends ProviderRouterCoreDeps {
 export class ProviderRouterBatchRoutes {
   constructor(private readonly deps: ProviderRouterBatchDeps) {}
 
+  private needsSingleFinancialsRoute(value: TickerFinancials): boolean {
+    return !(hasDetailedStatementRows(value) && hasDeepStatementHistory(value));
+  }
+
   async getQuotesBatch(
     targets: QuoteSubscriptionTarget[],
     options: { forceRefresh?: boolean } = {},
@@ -105,6 +114,7 @@ export class ProviderRouterBatchRoutes {
   ): Promise<TickerFinancialsBatchResult[]> {
     const forceRefresh = options.forceRefresh === true;
     const results = new Array<TickerFinancialsBatchResult | null>(targets.length).fill(null);
+    const batchFallbacks = new Array<TickerFinancials | null>(targets.length).fill(null);
     const misses: Array<{ index: number; target: CachedFinancialsTarget }> = [];
 
     targets.forEach((target, index) => {
@@ -139,6 +149,8 @@ export class ProviderRouterBatchRoutes {
           const entityKey = this.deps.getEntityKey(entry.target.symbol, entry.target.instrument ?? undefined);
           const variantKey = this.deps.getTickerVariantCandidates(entry.target.exchange)[0] ?? "";
           this.deps.cacheResource("financials", entityKey, variantKey, sourceKey, value, this.deps.resolveProviderPolicy("financials", batchProvider));
+          batchFallbacks[entry.index] = value;
+          if (this.needsSingleFinancialsRoute(value)) continue;
           results[entry.index] = { target: entry.target, financials: value };
         }
       }
@@ -153,7 +165,9 @@ export class ProviderRouterBatchRoutes {
         });
         results[index] = { target, financials };
       } catch (error) {
-        results[index] = { target, financials: null, error };
+        results[index] = batchFallbacks[index]
+          ? { target, financials: batchFallbacks[index] }
+          : { target, financials: null, error };
       }
     }));
 

package/src/sources/provider-router/financial-routes.ts

@@ -19,6 +19,7 @@ import { withBrokerTimeout } from "./brokers";
 import {
   deriveMarketCapFromShares,
   hasMeaningfulProfile,
+  hasShallowStatementHistory,
   mergeCachedFinancialRecords,
   mergeFinancials,
   quoteWithFreshnessExchange,
@@ -86,6 +87,10 @@ export class ProviderRouterFinancialRoutes {
       if (isOptionTicker && !cached.value.quote) {
         return quoteOnlyFinancials(cached.value);
       }
+      if (!cached.stale && hasMeaningfulProfile(cached.value) && hasShallowStatementHistory(cached.value)) {
+        const providerResult = await this.deps.primaryRoutes.fetchProviderFinancials(ticker, exchange, context);
+        return mergeFinancials(cached.value, providerResult?.value ?? null) ?? cached.value;
+      }
       if (!cached.stale && hasMeaningfulProfile(cached.value)) {
         return cached.value;
       }