fix: strip ANSI from TUI test frames so FORCE_COLOR cannot break assertions (#2207)

Ink writes styling as escape sequences inside the styled run, so an
accelerator underline splits the word it decorates: `<Text underline>I</Text>nfo`
reaches the frame buffer with escapes between `I` and `nfo`, and a plain
`toContain("Info")` fails against a component that is rendering correctly.
Chalk only emits color when it detects a TTY, so CI stays green and the six
failures land only on a developer whose shell exports FORCE_COLOR.

Add `__tests__/helpers/renderTui.tsx` — ink-testing-library's `render` with
`lastFrame()` and `frames` ANSI-stripped — and point all 16 renderer test
files at it. `frames` is a getter reading through to the live array, since
Ink appends to it as the component re-renders; the raw bytes stay reachable
as `stdout.lastFrame()`.

Pinning FORCE_COLOR=0 would turn the six green while hiding the class: any
future assertion on styled text has the same problem, and the suite would
stop covering the styled path at all.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01MFp2LVH7UJST5i8bDBJghw
Signed-off-by: cliffhall <cliff@futurescale.com>

clients/tui/__tests__/App.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 
 type RenderResult = ReturnType<typeof render>;
 

clients/tui/__tests__/AuthTab.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { OAuthConnectionState } from "@inspector/core/auth/types.js";
 import type { InspectorClient } from "@inspector/core/mcp/index.js";
 

clients/tui/__tests__/DetailsModal.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import { Text } from "ink";
 
 // ScrollView: passthrough so `content` mounts and the imperative ref API

clients/tui/__tests__/HistoryTab.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { MessageEntry } from "@inspector/core/mcp/index.js";
 
 // MUST mock ink-scroll-view: the real ScrollView renders a placeholder minimap

clients/tui/__tests__/InfoTab.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 
 // MUST mock ink-scroll-view: the real ScrollView renders a placeholder minimap
 // in the non-TTY test env and never mounts its children. This passthrough

clients/tui/__tests__/NotificationsTab.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 
 // MUST mock ink-scroll-view: the real ScrollView renders a placeholder minimap
 // in the non-TTY test env and never mounts its children. This passthrough

clients/tui/__tests__/PromptTestModal.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi, afterEach } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { InspectorClient } from "@inspector/core/mcp/index.js";
 import { AuthRecoveryRequiredError } from "@inspector/core/auth/challenge.js";
 import type { Prompt } from "@modelcontextprotocol/client";

clients/tui/__tests__/PromptsTab.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { InspectorClient } from "@inspector/core/mcp/index.js";
 import type { Prompt } from "@modelcontextprotocol/client";
 

clients/tui/__tests__/RequestsTab.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { FetchRequestEntry } from "@inspector/core/mcp/index.js";
 
 // MUST mock ink-scroll-view: the real ScrollView renders a placeholder minimap

clients/tui/__tests__/ResourceTestModal.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi, afterEach } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { InspectorClient } from "@inspector/core/mcp/index.js";
 import { AuthRecoveryRequiredError } from "@inspector/core/auth/challenge.js";
 

clients/tui/__tests__/ResourcesTab.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { InspectorClient } from "@inspector/core/mcp/index.js";
 import type { Resource } from "@modelcontextprotocol/client";
 

clients/tui/__tests__/SelectableItem.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import { SelectableItem } from "../src/components/SelectableItem.js";
 
 describe("SelectableItem", () => {

clients/tui/__tests__/Tabs.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import { Tabs } from "../src/components/Tabs.js";
 
 const noop = () => {};

clients/tui/__tests__/ToolTestModal.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi, afterEach } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { InspectorClient } from "@inspector/core/mcp/index.js";
 import type { Tool } from "@modelcontextprotocol/client";
 

clients/tui/__tests__/ToolsTab.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect, vi } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import type { Tool } from "@modelcontextprotocol/client";
 
 // MUST mock ink-scroll-view: the real ScrollView renders a placeholder minimap

clients/tui/__tests__/helpers/renderTui.tsx

@@ -0,0 +1,38 @@
+// A drop-in replacement for ink-testing-library's `render` that strips ANSI
+// styling from every frame the tests read back.
+//
+// Ink writes styling as escape sequences *inside* the styled run, so an
+// accelerator underline splits the word it decorates: `<Text underline>I</Text>nfo`
+// reaches the frame buffer as `ESC[4mI ESC[24m nfo` (without the spaces). A plain
+// `expect(frame).toContain("Info")` then fails against a component that is
+// rendering perfectly — and only for a developer whose shell exports
+// FORCE_COLOR, since CI has no TTY and chalk emits nothing there (#2207).
+//
+// Making every assertion read a stripped frame fixes the whole class rather
+// than the six assertions that happened to trip it, and keeps the suite
+// covering the styled path instead of pinning FORCE_COLOR=0 to hide it. No test
+// asserts on escape sequences; one that needs the raw bytes can reach
+// `stdout.lastFrame()` on the returned instance, which is left untouched.
+import { render as inkRender } from "ink-testing-library";
+import stripAnsi from "strip-ansi";
+import type { ReactElement } from "react";
+
+// ink-testing-library does not export its `Instance` type.
+type Instance = ReturnType<typeof inkRender>;
+
+/** Strip ANSI styling from a frame, passing `undefined` through unchanged. */
+export const stripFrameStyling = (frame: string | undefined) =>
+  frame === undefined ? undefined : stripAnsi(frame);
+
+export const render = (tree: ReactElement): Instance => {
+  const instance = inkRender(tree);
+  return {
+    ...instance,
+    lastFrame: () => stripFrameStyling(instance.lastFrame()),
+    // Read through to the live array on each access — ink appends to it as the
+    // component re-renders, so a copy taken here would go stale.
+    get frames() {
+      return instance.frames.map(stripAnsi);
+    },
+  };
+};

clients/tui/__tests__/renderTui.test.tsx

@@ -0,0 +1,57 @@
+import React from "react";
+import { Text } from "ink";
+import { describe, expect, it } from "vitest";
+import { render, stripFrameStyling } from "./helpers/renderTui";
+
+// The escape sequences ink emits for `<Text underline>`, spelled out here so
+// the assertions hold regardless of whether the ambient environment has
+// FORCE_COLOR set — chalk emits nothing without a TTY, which is exactly why
+// #2207 never reproduced in CI.
+const ESC = "\u001B";
+const UNDERLINE_OPEN = `${ESC}[4m`;
+const UNDERLINE_CLOSE = `${ESC}[24m`;
+const SPLIT_WORD = `${UNDERLINE_OPEN}I${UNDERLINE_CLOSE}nfo`;
+
+describe("stripFrameStyling", () => {
+  it("removes styling that splits a word", () => {
+    expect(stripFrameStyling(SPLIT_WORD)).toBe("Info");
+  });
+
+  it("leaves an unstyled frame untouched", () => {
+    expect(stripFrameStyling("Info")).toBe("Info");
+  });
+
+  it("passes undefined through", () => {
+    expect(stripFrameStyling(undefined)).toBeUndefined();
+  });
+});
+
+describe("render", () => {
+  it("strips styling from lastFrame", () => {
+    const { stdout, lastFrame } = render(<Text>placeholder</Text>);
+    stdout.write(SPLIT_WORD);
+    expect(lastFrame()).toBe("Info");
+  });
+
+  it("strips styling from frames, and keeps reading the live array", () => {
+    const instance = render(<Text>placeholder</Text>);
+    const before = instance.frames.length;
+    instance.stdout.write(SPLIT_WORD);
+    expect(instance.frames).toHaveLength(before + 1);
+    expect(instance.frames.at(-1)).toBe("Info");
+  });
+
+  it("leaves the raw bytes reachable through stdout", () => {
+    const instance = render(<Text>placeholder</Text>);
+    instance.stdout.write(SPLIT_WORD);
+    expect(instance.stdout.lastFrame()).toBe(SPLIT_WORD);
+  });
+
+  it("still exposes the rest of the ink-testing-library instance", () => {
+    const { rerender, lastFrame, unmount } = render(<Text>first</Text>);
+    expect(lastFrame()).toContain("first");
+    rerender(<Text>second</Text>);
+    expect(lastFrame()).toContain("second");
+    unmount();
+  });
+});

clients/tui/__tests__/useSelectableList.test.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { describe, it, expect } from "vitest";
-import { render } from "ink-testing-library";
+import { render } from "./helpers/renderTui";
 import { Text, useInput } from "ink";
 import {
   useSelectableList,