@cueloop/client 0.1.0-alpha.109 → 0.1.0-alpha.110

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cueloop/client",
-  "version": "0.1.0-alpha.109",
+  "version": "0.1.0-alpha.110",
   "description": "The cueloop review UI: projection renderer, keyboard grammar, review rail",
   "homepage": "https://github.com/mmurakaru/cueloop#readme",
   "bugs": {
@@ -27,14 +27,14 @@
     "access": "public"
   },
   "dependencies": {
-    "@cueloop/daemon": "0.1.0-alpha.109",
-    "@cueloop/extension-api": "0.1.0-alpha.109",
-    "@cueloop/integration-obsidian": "0.1.0-alpha.109",
-    "@cueloop/schema": "0.1.0-alpha.109",
-    "@opentui/core": "^0.5.17",
-    "@opentui/keymap": "0.5.17",
-    "@opentui/react": "^0.5.17",
-    "@opentui/ssh": "0.5.17",
+    "@cueloop/daemon": "0.1.0-alpha.110",
+    "@cueloop/extension-api": "0.1.0-alpha.110",
+    "@cueloop/integration-obsidian": "0.1.0-alpha.110",
+    "@cueloop/schema": "0.1.0-alpha.110",
+    "@opentui/core": "^0.6.8",
+    "@opentui/keymap": "0.6.8",
+    "@opentui/react": "^0.6.8",
+    "@opentui/ssh": "0.6.8",
     "@pierre/diffs": "^1.6.1",
     "@tanstack/virtual-core": "^3.19.7",
     "diff": "^9",

package/src/annotations/components/AnnotationCards.tsx

@@ -7,7 +7,7 @@
  */
 
 import React, { useContext, useLayoutEffect, useRef, useState } from "react";
-import { usePaste } from "@opentui/react";
+import { usePaste, useRenderer } from "@opentui/react";
 import type {
   BoxRenderable,
   KeyBinding,
@@ -69,6 +69,7 @@ export function Composer({
   agentEnabled?: boolean;
   focusRequest?: number;
 }): React.ReactNode {
+  const renderer = useRenderer();
   const editorRef = useRef<TextareaRenderable | null>(null);
   const pastedImageCount = useRef(0);
   const [rows, setRows] = useState(1);
@@ -86,7 +87,7 @@ export function Composer({
   });
 
   const paintReferences = (editor: TextareaRenderable): void => {
-    const { styleId } = referenceStyleFor(tokens);
+    const { styleId } = referenceStyleFor(tokens, renderer.nativeScene);
 
     editor.editBuffer.clearAllHighlights();
     for (const range of skillReferenceRanges(editor.plainText, referenceNames)) {
@@ -103,7 +104,7 @@ export function Composer({
     if (!editor) return;
 
     editor.cursorOffset = seed.length;
-    editor.editBuffer.setSyntaxStyle(referenceStyleFor(tokens).style);
+    editor.editBuffer.setSyntaxStyle(referenceStyleFor(tokens, renderer.nativeScene).style);
     paintReferences(editor);
     setRows(composeRowCount(editor.plainText, editor.width));
     onReady(() => editorRef.current?.plainText ?? "");

package/src/app/App.prototype-markdown.test.tsx

@@ -66,6 +66,7 @@ describe("markdown prototype review", () => {
     for (let attempt = 0; attempt < 60 && !keywordHighlighted; attempt++) {
       await setup.renderOnce();
       await new Promise((resolve) => setTimeout(resolve, 20));
+      await setup.renderOnce();
       const accentText = setup
         .captureSpans()
         .lines.flatMap((line) =>

package/src/app/App.readonly.test.tsx

@@ -263,6 +263,7 @@ for (const role of ["collaborator", "observer"] as const) {
 
       expect(row).toBeGreaterThanOrEqual(0);
       await setup.mockMouse.moveTo(12, row);
+      await setup.renderOnce();
       expect(setup.captureCharFrame()).not.toContain(NERD.kebab);
       expect(setup.captureCharFrame()).not.toContain(" edit ");
     } finally {

package/src/app/App.tsx

@@ -944,12 +944,21 @@ export function App({
       return;
     }
 
-    renderer?.suspend();
-    try {
-      controller.edit();
-    } finally {
-      renderer?.resume();
-    }
+    void (async () => {
+      let suspended = false;
+
+      try {
+        await renderer?.suspend();
+        suspended = true;
+      } catch {
+        suspended = false;
+      }
+      try {
+        controller.edit();
+      } finally {
+        if (suspended) await renderer?.resume();
+      }
+    })();
   };
 
   // ── keyboard grammar: build state, reduce, dispatch ──

package/src/app/App.workbench.test.tsx

@@ -415,6 +415,7 @@ describe("the four-pane workbench", () => {
       return header.includes("util.ts") && header.includes("README.md");
     });
     await setup.mockMouse.click(util.column, util.row);
+    await setup.renderOnce();
     const header = setup.captureCharFrame().split("\n")[HEADER_ROW]!;
 
     expect(header.match(/util\.ts/g)).toHaveLength(1);
@@ -694,6 +695,7 @@ describe("the bare-launch welcome shell", () => {
     const skill = locateText(setup, "custom-review");
 
     await setup.mockMouse.click(skill.column, skill.row);
+    await setup.renderOnce();
     expect(setup.captureCharFrame()).toContain("custom-review");
     setup.renderer.destroy();
   });
@@ -788,12 +790,12 @@ describe("the bare-launch welcome shell", () => {
 
     expect(frame).toContain("README.md");
     expect(frame).toContain(NERD.copy);
-    const title = locateText(setup, "README.md");
+    const title = locateText(setup, "│ README.md");
 
-    await setup.mockMouse.click(title.column, title.row);
+    await setup.mockMouse.click(title.column + 2, title.row);
     await waitForTextGone(setup, "edited in the working tree");
     expect(setup.captureCharFrame()).toContain("README.md");
-    await setup.mockMouse.click(title.column, title.row);
+    await setup.mockMouse.click(title.column + 2, title.row);
     await waitForText(setup, "edited in the working tree");
     setup.renderer.destroy();
   });

package/src/diff/components/AnnotatableFileView.test.tsx

@@ -48,7 +48,6 @@ describe("AnnotatableFileView", () => {
     { path: "src/add.js", source: "const add = 1;", keyword: "const" },
   ]) {
     test(`highlights ${path} by its detected language`, async () => {
-      allowEventLoopUpdates();
       const setup = await testRender(
         <AnnotatableFileView
           path={path}
@@ -64,11 +63,14 @@ describe("AnnotatableFileView", () => {
         />,
         { width: 64, height: 12 },
       );
+
+      allowEventLoopUpdates();
       let highlighted = false;
 
       for (let attempt = 0; attempt < 60 && !highlighted; attempt++) {
         await setup.renderOnce();
         await new Promise((resolve) => setTimeout(resolve, 20));
+        await setup.renderOnce();
         highlighted = setup.captureSpans().lines.some((line) =>
           line.spans
             .filter((span) => colorHex(span.fg) === DARK.accent)
@@ -147,6 +149,7 @@ describe("AnnotatableFileView", () => {
       { width: 64, height: 12 },
     );
 
+    allowEventLoopUpdates();
     await waitForText(setup, "return a + b");
 
     // Assert - the current file shows, but the head-side note is not attached to it

package/src/diff/components/DiffContentView.syntax.test.tsx

@@ -47,11 +47,13 @@ test("renders tree-sitter colors, with the changed word in the diff color on top
 
   // Act
   // syntax highlighting resolves off the render path; pump until a keyword paints
+  allowEventLoopUpdates();
   let keywordAccent = false;
 
   for (let attempt = 0; attempt < 60 && !keywordAccent; attempt++) {
     await setup.renderOnce();
     await new Promise((resolve) => setTimeout(resolve, 20));
+    await setup.renderOnce();
     // the caret cell splits the keyword's first character into its own span, so read the
     // accent-colored text of a whole line rather than one span
     for (const line of setup.captureSpans().lines) {

package/src/markdown/components/MarkdownThreadEditor.tsx

@@ -13,6 +13,7 @@
 
 import React, { forwardRef, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import type { KeyBinding, TextareaRenderable } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
 import { type Theme } from "../../appearance/theme";
 import { markdownHighlightRanges } from "../markdown-highlight";
 import { markdownEditorStyle } from "../markdown-editor-syntax-style";
@@ -63,6 +64,7 @@ function newlinePrefixCounts(text: string): number[] {
 
 export const MarkdownThreadEditor = forwardRef<MarkdownEditorHandle, MarkdownThreadEditorProps>(
   function MarkdownThreadEditor({ initialText, theme, onExitEditor }, handleRef): React.ReactNode {
+    const renderer = useRenderer();
     const editorRef = useRef<TextareaRenderable | null>(null);
     const [position, setPosition] = useState<MarkdownEditorPosition>({
       line: 1,
@@ -76,7 +78,7 @@ export const MarkdownThreadEditor = forwardRef<MarkdownEditorHandle, MarkdownThr
     useImperativeHandle(handleRef, () => ({ requestExit: exitWithCurrentText }));
 
     const paintMarkdown = (editor: TextareaRenderable): void => {
-      const { styleIdFor } = markdownEditorStyle(theme);
+      const { styleIdFor } = markdownEditorStyle(theme, renderer.nativeScene);
       const text = editor.plainText;
       // addHighlightByCharRange counts offsets with newlines excluded, so map source offsets down by the
       // newlines before them - otherwise a highlight drifts one cell per preceding line
@@ -98,7 +100,7 @@ export const MarkdownThreadEditor = forwardRef<MarkdownEditorHandle, MarkdownThr
 
       if (!editor) return;
 
-      editor.editBuffer.setSyntaxStyle(markdownEditorStyle(theme).style);
+      editor.editBuffer.setSyntaxStyle(markdownEditorStyle(theme, renderer.nativeScene).style);
       paintMarkdown(editor);
       setPosition((prior) => ({ ...prior, lineCount: editor.editBuffer.getLineCount() }));
       // eslint-disable-next-line react-hooks/exhaustive-deps

package/src/markdown/components/ThreadView.tsx

@@ -296,7 +296,7 @@ export function ThreadView({
     const usable = viewWidth > 0 ? Math.max(1, viewWidth - 6) : 40;
     const lines = Math.max(1, Math.ceil(displayText(block).length / usable));
 
-    return lines + (index === 0 ? 0 : 1);
+    return lines + 1;
   };
   const virtual = useTerminalVirtualizer({
     scrollbox: scrollRef,
@@ -400,7 +400,12 @@ export function ThreadView({
 
     if (custom !== undefined)
       return (
-        <box key={`custom-${blockIndex}`} ref={virtual.measureRef(blockIndex)}>
+        <box
+          key={`custom-${blockIndex}`}
+          ref={virtual.measureRef(blockIndex)}
+          style={{ flexDirection: "column" }}
+        >
+          {blockIndex === 0 ? <box key="lead-gap" style={{ height: 1 }} /> : null}
           {custom}
         </box>
       );
@@ -415,8 +420,7 @@ export function ThreadView({
       (block.kind === "li" || block.kind === "oli");
     // the leading gap rides inside the measured box (not marginTop, which sits outside it) so the
     // virtualizer's spacer math counts it
-    const leadingGap =
-      blockIndex === 0 || tight ? null : <box key="lead-gap" style={{ height: 1 }} />;
+    const leadingGap = tight ? null : <box key="lead-gap" style={{ height: 1 }} />;
     const measuredBox = (children: React.ReactNode): React.ReactNode => (
       <box
         key={isPromptBlock?.(blockIndex) ? "prompt-block" : `discussion-block-${blockIndex}`}
@@ -550,7 +554,7 @@ export function ThreadView({
         {/* the rail draws this box's scrollbar past the dots, so the built-in one stays hidden */}
         <scrollbox
           ref={scrollRef}
-          style={{ flexGrow: 1, paddingTop: 1 }}
+          style={{ flexGrow: 1 }}
           focused={false}
           verticalScrollbarOptions={{ visible: false }}
         >

package/src/markdown/markdown-editor-syntax-style.ts

@@ -6,7 +6,12 @@
  * hidden, since the editor shows raw source.
  */
 
-import { SyntaxStyle, type StyleDefinitionInput } from "@opentui/core";
+import {
+  SyntaxStyle,
+  type NativeResourceOwner,
+  type ResourceContext,
+  type StyleDefinitionInput,
+} from "@opentui/core";
 import { type Theme } from "../appearance/theme";
 import { MARKDOWN_HIGHLIGHT_GROUPS, type MarkdownHighlightGroup } from "./markdown-highlight";
 
@@ -25,16 +30,26 @@ function markdownGroupStyles(theme: Theme): Record<MarkdownHighlightGroup, Style
   };
 }
 
-const markdownEditorStyleCache = new WeakMap<Theme, MarkdownEditorStyle>();
+const markdownEditorStyleCache = new WeakMap<
+  ResourceContext,
+  WeakMap<Theme, MarkdownEditorStyle>
+>();
 
 /** Build (or reuse) the markdown editor's SyntaxStyle for a theme, with a group-to-styleId lookup. */
-export function markdownEditorStyle(theme: Theme): MarkdownEditorStyle {
-  const cached = markdownEditorStyleCache.get(theme);
+export function markdownEditorStyle(theme: Theme, owner: NativeResourceOwner): MarkdownEditorStyle {
+  let byTheme = markdownEditorStyleCache.get(owner.resourceContext);
+
+  if (!byTheme) {
+    byTheme = new WeakMap<Theme, MarkdownEditorStyle>();
+    markdownEditorStyleCache.set(owner.resourceContext, byTheme);
+  }
+
+  const cached = byTheme.get(theme);
 
   if (cached) return cached;
 
   const groupStyles = markdownGroupStyles(theme);
-  const style = SyntaxStyle.fromStyles(groupStyles);
+  const style = SyntaxStyle.fromStyles(groupStyles, owner);
   const styleIds = new Map<MarkdownHighlightGroup, number>();
 
   for (const group of MARKDOWN_HIGHLIGHT_GROUPS) {
@@ -45,7 +60,7 @@ export function markdownEditorStyle(theme: Theme): MarkdownEditorStyle {
     styleIdFor: (group) => styleIds.get(group) ?? 0,
   };
 
-  markdownEditorStyleCache.set(theme, entry);
+  byTheme.set(theme, entry);
 
   return entry;
 }

package/src/prototype/components/PrototypeContentView.tsx

@@ -248,7 +248,7 @@ function PrototypeContentViewImpl({
 
     if (launchedRef.current || !region) return;
 
-    if (caps && caps.kitty_graphics === false) {
+    if (caps && Boolean(caps.terminal.name) && caps.kitty_graphics === false) {
       setStatus("unsupported");
 
       return;

package/src/testing/test-support.ts

@@ -45,6 +45,7 @@ export async function renderReadyApp(
   const probe = appReadyProbe();
   const setup = await testRender(cloneElement(element, { onReady: probe.onReady }), options);
 
+  allowEventLoopUpdates();
   await probe.ready;
 
   return setup;
@@ -117,9 +118,21 @@ export async function settle(setup: TestRendererSetup): Promise<void> {
   let quietTurns = 0;
 
   for (let turn = 0; turn < SETTLE_MAX_TURNS; turn++) {
+    if (setup.renderer.isDestroyed) return;
+
     await new Promise((resolve) => setTimeout(resolve, 0));
+
+    if (setup.renderer.isDestroyed) return;
+
     await setup.renderOnce();
     await setup.waitForVisualIdle();
+
+    if (setup.renderer.isDestroyed) return;
+
+    if (setup.renderer.getSchedulerState().isRendering) {
+      await setup.renderOnce();
+    }
+
     const frame = paintedFrame(setup);
 
     quietTurns = frame === previous ? quietTurns + 1 : 0;
@@ -281,7 +294,20 @@ async function waitForFramePredicate(
   let lastLog = start;
 
   for (;;) {
+    if (setup.renderer.isDestroyed) {
+      throw new Error(
+        `waitFor ${label} failed: renderer was destroyed before frame matched.\nlast frame:\n${lastFrame}`,
+      );
+    }
+
     await setup.renderOnce();
+
+    if (setup.renderer.isDestroyed) {
+      throw new Error(
+        `waitFor ${label} failed: renderer was destroyed before frame matched.\nlast frame:\n${lastFrame}`,
+      );
+    }
+
     const frame = setup.captureCharFrame();
 
     polls++;
@@ -329,9 +355,24 @@ export async function waitForState(
   let lastLog = start;
 
   for (;;) {
-    if (predicate()) return;
+    if (setup.renderer.isDestroyed) {
+      if (predicate()) return;
+
+      throw new Error(
+        `waitForState ${label} failed: renderer was destroyed before condition matched.\nlast frame:\n${lastFrame}`,
+      );
+    }
 
     await setup.renderOnce();
+
+    if (setup.renderer.isDestroyed) {
+      if (predicate()) return;
+
+      throw new Error(
+        `waitForState ${label} failed: renderer was destroyed before condition matched.\nlast frame:\n${lastFrame}`,
+      );
+    }
+
     const frame = setup.captureCharFrame();
 
     polls++;

package/src/ui/components/CodeBlock.tsx

@@ -7,6 +7,7 @@
 
 import React from "react";
 import { createTextAttributes } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
 import type { Theme } from "../../appearance/theme";
 import { useComponentTheme } from "../../appearance/components/theme-context";
 import { filetypeFor, syntaxStyleFor } from "./syntax-highlight";
@@ -38,6 +39,7 @@ export function CodeBlock({
   theme,
 }: CodeBlockProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+  const renderer = useRenderer();
   const tagColor = changeTag === "new" ? tokens.green : tokens.accent;
 
   return (
@@ -69,7 +71,7 @@ export function CodeBlock({
           <code
             content={content}
             filetype={filetypeFor(language)}
-            syntaxStyle={syntaxStyleFor(tokens)}
+            syntaxStyle={syntaxStyleFor(tokens, renderer.nativeScene)}
             selectable={false}
             style={{ wrapMode: "none", fg: tokens.textMuted, bg: tokens.elevated }}
           />

package/src/ui/components/Tooltip.tsx

@@ -2,7 +2,7 @@
 // surfaced at the screen root instead: controls report the hovered label and cursor cell, and this layer
 // paints it one row below, nudged left when it would run past the right edge.
 
-import React, { createContext, useContext, useMemo, useState } from "react";
+import React, { createContext, useContext, useMemo, useRef, useState } from "react";
 import { useTerminalDimensions } from "@opentui/react";
 import { DARK, type Theme } from "../../appearance/theme";
 
@@ -15,11 +15,13 @@ interface TooltipTarget {
 interface TooltipApi {
   showTooltip: (label: string, x: number, y: number) => void;
   hideTooltip: () => void;
+  dismissTooltip: (x: number, y: number) => void;
 }
 
 const TooltipContext = createContext<TooltipApi>({
   showTooltip: () => {},
   hideTooltip: () => {},
+  dismissTooltip: () => {},
 });
 
 /** Report or clear the hovered control's tooltip; a no-op outside a TooltipProvider. */
@@ -38,10 +40,29 @@ export function TooltipProvider({
   const tokens = theme ?? DARK;
   const { width, height } = useTerminalDimensions();
   const [target, setTarget] = useState<TooltipTarget | null>(null);
+  const suppressedCell = useRef<{ x: number; y: number } | null>(null);
   const api = useMemo<TooltipApi>(
     () => ({
-      showTooltip: (label, x, y) => setTarget({ label, x, y }),
-      hideTooltip: () => setTarget(null),
+      showTooltip: (label, x, y) => {
+        if (
+          suppressedCell.current &&
+          suppressedCell.current.x === x &&
+          suppressedCell.current.y === y
+        ) {
+          return;
+        }
+
+        suppressedCell.current = null;
+        setTarget({ label, x, y });
+      },
+      hideTooltip: () => {
+        suppressedCell.current = null;
+        setTarget(null);
+      },
+      dismissTooltip: (x, y) => {
+        suppressedCell.current = { x, y };
+        setTarget(null);
+      },
     }),
     [],
   );

package/src/ui/components/primitives/IconButton.tsx

@@ -32,11 +32,11 @@ export function IconButton({
 }: IconButtonProps): React.ReactNode {
   const tokens = theme ?? DARK;
   const resolved = color ?? (disabled ? tokens.textDim : active ? tokens.accent : tokens.textMuted);
-  const { showTooltip, hideTooltip } = useTooltip();
+  const { showTooltip, hideTooltip, dismissTooltip } = useTooltip();
   // a button press is its own action - never let it bubble to a clickable row behind it
   const handleMouseUp = (event: TerminalMouseEvent): void => {
     event.stopPropagation();
-    hideTooltip();
+    dismissTooltip(event.x, event.y);
     onPress?.();
   };
 

package/src/ui/components/syntax-highlight.ts

@@ -11,6 +11,8 @@ import {
   infoStringToFiletype,
   extensionToFiletype,
   basenameToFiletype,
+  type NativeResourceOwner,
+  type ResourceContext,
 } from "@opentui/core";
 import type { Theme } from "../../appearance/theme";
 
@@ -86,16 +88,23 @@ function syntaxGroupStyles(theme: Theme): SyntaxGroupStyles {
   };
 }
 
-const syntaxStyleCache = new WeakMap<Theme, SyntaxStyle>();
+const syntaxStyleCache = new WeakMap<ResourceContext, WeakMap<Theme, SyntaxStyle>>();
 
-export function syntaxStyleFor(theme: Theme): SyntaxStyle {
-  const cached = syntaxStyleCache.get(theme);
+export function syntaxStyleFor(theme: Theme, owner: NativeResourceOwner): SyntaxStyle {
+  let byTheme = syntaxStyleCache.get(owner.resourceContext);
+
+  if (!byTheme) {
+    byTheme = new WeakMap<Theme, SyntaxStyle>();
+    syntaxStyleCache.set(owner.resourceContext, byTheme);
+  }
+
+  const cached = byTheme.get(theme);
 
   if (cached) return cached;
 
-  const style = SyntaxStyle.fromStyles(syntaxGroupStyles(theme));
+  const style = SyntaxStyle.fromStyles(syntaxGroupStyles(theme), owner);
 
-  syntaxStyleCache.set(theme, style);
+  byTheme.set(theme, style);
 
   return style;
 }
@@ -106,20 +115,27 @@ export interface ReferenceStyle {
   styleId: number;
 }
 
-const referenceStyleCache = new WeakMap<Theme, ReferenceStyle>();
+const referenceStyleCache = new WeakMap<ResourceContext, WeakMap<Theme, ReferenceStyle>>();
+
+export function referenceStyleFor(theme: Theme, owner: NativeResourceOwner): ReferenceStyle {
+  let byTheme = referenceStyleCache.get(owner.resourceContext);
+
+  if (!byTheme) {
+    byTheme = new WeakMap<Theme, ReferenceStyle>();
+    referenceStyleCache.set(owner.resourceContext, byTheme);
+  }
 
-export function referenceStyleFor(theme: Theme): ReferenceStyle {
-  const cached = referenceStyleCache.get(theme);
+  const cached = byTheme.get(theme);
 
   if (cached) return cached;
 
   const entry: ReferenceStyle = {
-    style: SyntaxStyle.fromStyles({ reference: { fg: theme.accent } }),
+    style: SyntaxStyle.fromStyles({ reference: { fg: theme.accent } }, owner),
     styleId: 0,
   };
 
   entry.styleId = entry.style.getStyleId("reference") ?? 0;
-  referenceStyleCache.set(theme, entry);
+  byTheme.set(theme, entry);
 
   return entry;
 }

package/src/ui/use-frame-measure.ts

@@ -6,7 +6,7 @@
  */
 
 import { useEffect, useState } from "react";
-import { useRenderer } from "@opentui/react";
+import { flushSync, useRenderer } from "@opentui/react";
 
 type Renderer = NonNullable<ReturnType<typeof useRenderer>>;
 type Measure = () => void;
@@ -18,13 +18,24 @@ interface FrameSubscriptions {
 
 const subscribers = new WeakMap<Renderer, FrameSubscriptions>();
 
+declare global {
+  var IS_REACT_ACT_ENVIRONMENT: boolean | undefined;
+}
+
+function flushFrameMeasures(measures: ReadonlySet<Measure>): void {
+  globalThis.IS_REACT_ACT_ENVIRONMENT = false;
+  flushSync(() => {
+    for (const subscriber of measures) subscriber();
+  });
+}
+
 export function subscribeToFrames(renderer: Renderer, measure: Measure): () => void {
   let subscription = subscribers.get(renderer);
 
   if (!subscription) {
     const measures = new Set<Measure>();
     const notify = (): void => {
-      for (const subscriber of measures) subscriber();
+      flushFrameMeasures(measures);
     };
 
     subscription = { measures, notify };

package/src/ui/use-terminal-virtualizer.ts

@@ -150,6 +150,10 @@ export function useTerminalVirtualizer(options: TerminalVirtualizerOptions): Ter
 
   // the offset reporter the core registered, so a scroll the core asks for reports at once
   const reportOffset = useRef<(() => void) | null>(null);
+  const pendingScroll = useRef<{
+    index: number;
+    align: "auto" | "start" | "center" | "end";
+  } | null>(null);
 
   // a frame-event poll stands in for scroll and resize events: the renderer fires it after every
   // render, and the callbacks only fire the core when the value actually changed
@@ -241,6 +245,13 @@ export function useTerminalVirtualizer(options: TerminalVirtualizerOptions): Ter
         for (const element of virtualizer.elementsCache.values()) {
           virtualizer.measureElement(element);
         }
+
+        if (pendingScroll.current) {
+          const target = pendingScroll.current;
+
+          pendingScroll.current = null;
+          virtualizer.scrollToIndex(target.index, { align: target.align });
+        }
       }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [virtualizer, renderer],
@@ -262,8 +273,14 @@ export function useTerminalVirtualizer(options: TerminalVirtualizerOptions): Ter
         if (virtualizer.elementsCache.get(index) === view) virtualizer.elementsCache.delete(index);
       };
     },
-    scrollToIndex: (index, align = "auto") => virtualizer.scrollToIndex(index, { align }),
+    scrollToIndex: (index, align = "auto") => {
+      pendingScroll.current = { index, align };
+      virtualizer.scrollToIndex(index, { align });
+    },
     startOfIndex: (index) => virtualizer.getOffsetForIndex(index, "start")?.[0],
-    scrollToOffset: (offset) => virtualizer.scrollToOffset(offset, { align: "start" }),
+    scrollToOffset: (offset) => {
+      pendingScroll.current = null;
+      virtualizer.scrollToOffset(offset, { align: "start" });
+    },
   };
 }

package/src/workbench/components/EditorGrid.split.test.tsx

@@ -111,6 +111,7 @@ test("Split is disabled at eight tiles and when a tile is too small", async () =
 
     expect(button).toBeDefined();
     await setup.mockMouse.click(button!.x, button!.y);
+    await setup.renderOnce();
     expect(setup.captureCharFrame()).not.toContain("right →");
     expect(splitCalls).toBe(0);
     setup.renderer.destroy();

package/src/workbench/components/FileContentsView.tsx

@@ -7,6 +7,7 @@
 import { ScrollArea } from "../../ui/components/ScrollArea";
 import React, { useEffect, useRef, useState } from "react";
 import type { CodeRenderable } from "@opentui/core";
+import { useRenderer } from "@opentui/react";
 import type { Theme } from "../../appearance/theme";
 import { useComponentTheme } from "../../appearance/components/theme-context";
 import { filetypeForPath, syntaxStyleFor } from "../../ui/components/syntax-highlight";
@@ -29,6 +30,7 @@ export function FileContentsView({
   theme,
 }: FileContentsViewProps): React.ReactNode {
   const tokens = useComponentTheme(theme);
+  const renderer = useRenderer();
   const [loaded, setLoaded] = useState<FileLoad | null>(null);
   // The gutter mirrors the code renderable's line info, so it needs the mounted
   // instance; a state-backed ref rebinds the target once the code renderable exists.
@@ -92,7 +94,7 @@ export function FileContentsView({
           ref={setCodeTarget}
           content={content}
           filetype={filetypeForPath(path)}
-          syntaxStyle={syntaxStyleFor(tokens)}
+          syntaxStyle={syntaxStyleFor(tokens, renderer.nativeScene)}
           selectable={false}
           style={{ wrapMode: "none", fg: tokens.text }}
         />