fix: address ink-compat PR review feedback and CI regressions

Author: RtlZeroMemory

biome.json

@@ -27,12 +27,25 @@
           "performance": {
             "noDelete": "off"
           },
+          "suspicious": {
+            "noControlCharactersInRegex": "off"
+          }
+        }
+      }
+    },
+    {
+      "include": [
+        "packages/ink-compat/src/runtime/bridge.ts",
+        "packages/ink-compat/src/runtime/render.ts",
+        "packages/ink-compat/src/shims/ink-gradient.tsx",
+        "packages/ink-compat/src/shims/ink-spinner.tsx",
+        "packages/ink-compat/src/translation/colorMap.ts",
+        "packages/ink-compat/src/translation/propsToVNode.ts"
+      ],
+      "linter": {
+        "rules": {
           "style": {
             "noNonNullAssertion": "off"
-          },
-          "suspicious": {
-            "noControlCharactersInRegex": "off",
-            "noExplicitAny": "off"
           }
         }
       }
@@ -44,6 +57,12 @@
           "correctness": {
             "noChildrenProp": "off",
             "useExhaustiveDependencies": "off"
+          },
+          "style": {
+            "noNonNullAssertion": "off"
+          },
+          "suspicious": {
+            "noExplicitAny": "off"
           }
         }
       }

docs/architecture/ink-compat.md

@@ -16,7 +16,7 @@
 
 ## Package topology
 
-```
+```text
 packages/ink-compat/
   src/
     components/      // Ink-compatible component wrappers

packages/core/src/renderer/renderToDrawlist/boxBorder.ts

@@ -126,14 +126,22 @@ function renderBorderFrame(
       // Top edge (fallback to horizontal cap when missing a vertical side).
       const leftCap = sides.left ? glyphs.TL : glyphs.H;
       const rightCap = sides.right ? glyphs.TR : glyphs.H;
-      builder.drawText(x0, y0, `${leftCap}${glyphs.H.repeat(innerW)}${rightCap}`, style);
+      if (rect.w <= 1) {
+        builder.drawText(x0, y0, glyphs.H, style);
+      } else {
+        builder.drawText(x0, y0, `${leftCap}${glyphs.H.repeat(innerW)}${rightCap}`, style);
+      }
     }
 
     if (sides.bottom) {
       // Bottom edge (fallback to horizontal cap when missing a vertical side).
       const leftCap = sides.left ? glyphs.BL : glyphs.H;
       const rightCap = sides.right ? glyphs.BR : glyphs.H;
-      builder.drawText(x0, y1, `${leftCap}${glyphs.H.repeat(innerW)}${rightCap}`, style);
+      if (rect.w <= 1) {
+        builder.drawText(x0, y1, glyphs.H, style);
+      } else {
+        builder.drawText(x0, y1, `${leftCap}${glyphs.H.repeat(innerW)}${rightCap}`, style);
+      }
     }
   } else {
     if (sides.top) {

packages/core/src/renderer/renderToDrawlist/widgets/renderTextWidgets.ts

@@ -349,7 +349,7 @@ export function renderTextWidgets(
           builder.popClip();
         }
 
-        if (cursorInfo && cursorMeta.focused) {
+        if (!transform && cursorInfo && cursorMeta.focused) {
           let remaining = cursorOffset;
           let cursorLine = 0;
           for (let i = 0; i < visibleCount; i++) {
@@ -374,10 +374,6 @@ export function renderTextWidgets(
       }
 
       const transformedText = transformLine(text, 0);
-      const cursorX = Math.min(
-        overflowW,
-        measureTextCells(transformedText.slice(0, Math.min(cursorOffset, transformedText.length))),
-      );
 
       // Avoid measuring in the common ASCII case.
       const fits =
@@ -386,7 +382,13 @@ export function renderTextWidgets(
 
       if (fits) {
         builder.drawText(rect.x, rect.y, transformedText, style);
-        if (cursorInfo && cursorMeta.focused) {
+        if (!transform && cursorInfo && cursorMeta.focused) {
+          const cursorX = Math.min(
+            overflowW,
+            measureTextCells(
+              transformedText.slice(0, Math.min(cursorOffset, transformedText.length)),
+            ),
+          );
           resolvedCursor = {
             x: rect.x + cursorX,
             y: rect.y,
@@ -421,7 +423,13 @@ export function renderTextWidgets(
       } else {
         builder.drawText(rect.x, rect.y, displayText, style);
       }
-      if (cursorInfo && cursorMeta.focused) {
+      if (!transform && cursorInfo && cursorMeta.focused) {
+        const cursorX = Math.min(
+          overflowW,
+          measureTextCells(
+            transformedText.slice(0, Math.min(cursorOffset, transformedText.length)),
+          ),
+        );
         resolvedCursor = {
           x: rect.x + cursorX,
           y: rect.y,

packages/core/src/testing/renderer.ts

@@ -452,6 +452,7 @@ export function createTestRenderer(opts: TestRendererOptions = {}): TestRenderer
   const defaultTick = opts.tick ?? 0;
   const trace = opts.trace;
   const defaultTraceDetail = opts.traceDetail === true;
+  let warnedTraceDetailWithoutTrace = false;
   let renderId = 0;
 
   const render = (vnode: VNode, renderOpts: TestRenderOptions = {}): TestRenderResult => {
@@ -463,6 +464,12 @@ export function createTestRenderer(opts: TestRendererOptions = {}): TestRenderer
     const tick = renderOpts.tick ?? defaultTick;
     const theme = renderOpts.theme ?? rendererTheme;
     const traceDetail = renderOpts.traceDetail ?? defaultTraceDetail;
+    if (traceDetail && !trace && !warnedTraceDetailWithoutTrace) {
+      warnedTraceDetailWithoutTrace = true;
+      console.warn(
+        "[core/testing] createTestRenderer: traceDetail=true has no effect without a trace callback.",
+      );
+    }
 
     const commitStartedAt = Date.now();
     const committed = commitVNodeTree(prevRoot, vnode, { allocator });

packages/ink-compat/src/__tests__/apps/counter.test.tsx

@@ -46,51 +46,56 @@ const Counter: React.FC = () => {
   );
 };
 
+function readCount(frame: string): number {
+  const match = frame.match(/Count:\s*(\d+)/);
+  assert.ok(match, "count line should exist");
+  return Number.parseInt(match[1]!, 10);
+}
+
 test("counter: renders initial state", () => {
   const { lastFrame } = render(React.createElement(Counter));
   const frame = lastFrame();
   assert.ok(frame.includes("Counter App"), "should show title");
   assert.ok(frame.includes("Count:"), "should show count label");
-  assert.ok(frame.includes("0"), "should show initial count 0");
+  assert.equal(readCount(frame), 0, "should show initial count 0");
 });
 
 test("counter: up arrow increments", () => {
   const { lastFrame, stdin } = render(React.createElement(Counter));
   stdin.write("\u001b[A"); // up arrow
-  const frame = lastFrame();
-  assert.ok(frame.includes("1"), "count should be 1 after up arrow");
+  assert.equal(readCount(lastFrame()), 1, "count should be 1 after up arrow");
 });
 
 test("counter: k key increments", () => {
   const { lastFrame, stdin } = render(React.createElement(Counter));
   stdin.write("k");
-  assert.ok(lastFrame().includes("1"), "count should be 1 after k");
+  assert.equal(readCount(lastFrame()), 1, "count should be 1 after k");
   stdin.write("k");
-  assert.ok(lastFrame().includes("2"), "count should be 2 after second k");
+  assert.equal(readCount(lastFrame()), 2, "count should be 2 after second k");
 });
 
 test("counter: down arrow decrements", () => {
   const { lastFrame, stdin } = render(React.createElement(Counter));
   stdin.write("k"); // go to 1
   stdin.write("k"); // go to 2
   stdin.write("\u001b[B"); // down arrow → 1
-  assert.ok(lastFrame().includes("1"), "count should be 1 after decrement");
+  assert.equal(readCount(lastFrame()), 1, "count should be 1 after decrement");
 });
 
 test("counter: does not go below zero", () => {
   const { lastFrame, stdin } = render(React.createElement(Counter));
   stdin.write("\u001b[B"); // down arrow at 0
-  assert.ok(lastFrame().includes("0"), "count should stay at 0");
+  assert.equal(readCount(lastFrame()), 0, "count should stay at 0");
 });
 
 test("counter: r resets to zero", () => {
   const { lastFrame, stdin } = render(React.createElement(Counter));
   stdin.write("k");
   stdin.write("k");
   stdin.write("k");
-  assert.ok(lastFrame().includes("3"), "count should be 3");
+  assert.equal(readCount(lastFrame()), 3, "count should be 3");
   stdin.write("r");
-  assert.ok(lastFrame().includes("0"), "count should reset to 0");
+  assert.equal(readCount(lastFrame()), 0, "count should reset to 0");
 });
 
 test("counter: renders border", () => {

packages/ink-compat/src/__tests__/integration/basic.test.ts

@@ -199,11 +199,11 @@ test("newline renders multi-line text", () => {
 });
 
 test("useInput handles simulated key press", () => {
-  const seen: Array<{ input: string; up: boolean; ctrl: boolean }> = [];
+  const seen: Array<{ input: string; up: boolean; ctrl: boolean; escape: boolean }> = [];
 
   function App(): React.ReactElement {
     useInput((input, key) => {
-      seen.push({ input, up: key.upArrow, ctrl: key.ctrl });
+      seen.push({ input, up: key.upArrow, ctrl: key.ctrl, escape: key.escape });
     });
     return React.createElement(Text, null, "Input");
   }
@@ -212,10 +212,12 @@ test("useInput handles simulated key press", () => {
   result.stdin.write("\u001b[A");
   result.stdin.write("q");
   result.stdin.write("\u0001");
+  result.stdin.write("\u001b");
 
-  assert.deepEqual(seen[0], { input: "", up: true, ctrl: false });
-  assert.deepEqual(seen[1], { input: "q", up: false, ctrl: false });
-  assert.deepEqual(seen[2], { input: "a", up: false, ctrl: true });
+  assert.deepEqual(seen[0], { input: "", up: true, ctrl: false, escape: false });
+  assert.deepEqual(seen[1], { input: "q", up: false, ctrl: false, escape: false });
+  assert.deepEqual(seen[2], { input: "a", up: false, ctrl: true, escape: false });
+  assert.deepEqual(seen[3], { input: "", up: false, ctrl: false, escape: true });
 });
 
 test("useInput parses kitty keyboard CSI-u sequences", async () => {

packages/ink-compat/src/__tests__/reconciler/hostConfig.test.ts

@@ -75,9 +75,11 @@ test("commit update updates node props and text", () => {
   const node = rootNode.children[0]!;
 
   commitSync(root, React.createElement("ink-text", { color: "blue" }, "New"));
+  const nodeAfter = rootNode.children[0]!;
 
-  assert.equal(node.props["color"], "blue");
-  assert.equal(node.children[0]?.textContent, "New");
+  assert.strictEqual(node, nodeAfter, "should be same instance (in-place update)");
+  assert.equal(nodeAfter.props["color"], "blue");
+  assert.equal(nodeAfter.children[0]?.textContent, "New");
 });
 
 test("prepareUpdate performs shallow comparison without children/ref", () => {

packages/ink-compat/src/__tests__/reconciler/types.test.ts

@@ -71,3 +71,44 @@ test("insertBefore appends when target is missing", () => {
 
   assert.deepEqual(parent.children, [childA, childB]);
 });
+
+test("appendChild moves existing child without duplication", () => {
+  const parent = createHostNode("ink-box", {});
+  const childA = createHostNode("ink-text", { id: "a" });
+  const childB = createHostNode("ink-text", { id: "b" });
+
+  appendChild(parent, childA);
+  appendChild(parent, childB);
+  appendChild(parent, childA);
+
+  assert.deepEqual(parent.children, [childB, childA]);
+  assert.equal(parent.children.filter((child) => child === childA).length, 1);
+});
+
+test("insertBefore moves existing child without duplication", () => {
+  const parent = createHostNode("ink-box", {});
+  const childA = createHostNode("ink-text", { id: "a" });
+  const childB = createHostNode("ink-text", { id: "b" });
+  const childC = createHostNode("ink-text", { id: "c" });
+
+  appendChild(parent, childA);
+  appendChild(parent, childB);
+  appendChild(parent, childC);
+  insertBefore(parent, childC, childA);
+
+  assert.deepEqual(parent.children, [childC, childA, childB]);
+  assert.equal(parent.children.filter((child) => child === childC).length, 1);
+});
+
+test("appendChild detaches from previous non-container parent", () => {
+  const parentA = createHostNode("ink-box", { id: "a" });
+  const parentB = createHostNode("ink-box", { id: "b" });
+  const child = createHostNode("ink-text", { id: "x" });
+
+  appendChild(parentA, child);
+  appendChild(parentB, child);
+
+  assert.deepEqual(parentA.children, []);
+  assert.deepEqual(parentB.children, [child]);
+  assert.equal(child.parent, parentB);
+});

packages/ink-compat/src/__tests__/runtime/newApis.test.ts

@@ -26,7 +26,7 @@ test("export surface includes kitty flags/modifiers and useCursor", () => {
   assert.equal(kittyModifiers.ctrl, 4);
 });
 
-test("useIsScreenReaderEnabled reads context flag", () => {
+test("useIsScreenReaderEnabled reads context flag", async () => {
   const rootNode = createHostContainer();
   const root = reconciler.createContainer(
     rootNode,
@@ -80,12 +80,18 @@ test("useIsScreenReaderEnabled reads context flag", () => {
     reconciler.flushSyncWork?.();
     reconciler.flushPassiveEffects?.();
   } else {
-    reconciler.updateContainer(
-      React.createElement(InkContext.Provider, { value: mockContext }, React.createElement(Probe)),
-      root,
-      null,
-      () => {},
-    );
+    await new Promise<void>((resolve) => {
+      reconciler.updateContainer(
+        React.createElement(
+          InkContext.Provider,
+          { value: mockContext },
+          React.createElement(Probe),
+        ),
+        root,
+        null,
+        () => resolve(),
+      );
+    });
   }
 
   assert.equal(seen, true);