Use Ink cursor without rendered composer cursor fallback

Co-authored-by: Autohand Evolve <code-noreply@autohand.ai>

Author: igorcosta

src/ui/ink/InputLine.tsx

@@ -3,7 +3,7 @@
  * Copyright 2025 Autohand AI LLC
  * SPDX-License-Identifier: Apache-2.0
  */
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useMemo, useRef } from 'react';
 import { Box, Text, useCursor, type DOMElement } from 'ink';
 import { useTheme } from '../theme/ThemeContext.js';
 import { buildMultiLineRenderState } from '../inputPrompt.js';
@@ -38,23 +38,6 @@ function getAbsoluteInkPosition(
   return { left, top };
 }
 
-function renderHardwareCursorFallback(line: string, cursorColumn: number): string {
-  if (cursorColumn < 0 || cursorColumn >= line.length) {
-    return line;
-  }
-
-  // Some terminals let Ink hide the hardware cursor after redraws, so keep a
-  // visible cursor cell without dropping the character at the cursor offset.
-  const rightBorder = line.slice(-1);
-  const beforeRightBorder = line.slice(0, -1);
-  const shiftedContent = beforeRightBorder.slice(
-    cursorColumn,
-    Math.max(cursorColumn, beforeRightBorder.length - 1)
-  );
-
-  return `${beforeRightBorder.slice(0, cursorColumn)}█${shiftedContent}${rightBorder}`;
-}
-
 export interface InputLineProps {
   value: string;
   cursorOffset: number;
@@ -84,7 +67,6 @@ function InputLineComponent({
   const { theme } = useTheme();
   const rootRef = useRef<DOMElement>(null);
   const { setCursorPosition } = useCursor();
-  const [cursorVisible, setCursorVisible] = useState(true);
 
   const borderToken = borderStyle === 'plan'
     ? 'warning'
@@ -120,25 +102,6 @@ function InputLineComponent({
     };
   }, [value, cursorOffset, width, borderStyle, placeholderText, nextPromptSuggestion, inlineGhostSuffix]);
 
-  useEffect(() => {
-    if (!isActive) {
-      setCursorVisible(true);
-      return;
-    }
-
-    const timer = setInterval(() => {
-      setCursorVisible((visible) => !visible);
-    }, 530);
-
-    return () => {
-      clearInterval(timer);
-    };
-  }, [isActive]);
-
-  useEffect(() => {
-    setCursorVisible(true);
-  }, [value, cursorOffset]);
-
   const cursorPosition = (() => {
     if (!isActive) {
       return undefined;
@@ -153,18 +116,6 @@ function InputLineComponent({
 
   setCursorPosition(cursorPosition);
 
-  const renderedLines = useMemo(() => {
-    if (!isActive || !cursorVisible) {
-      return displayData.plainLines;
-    }
-
-    return displayData.plainLines.map((line, index) => (
-      index === displayData.cursorRow
-        ? renderHardwareCursorFallback(line, displayData.cursorColumn)
-        : line
-    ));
-  }, [cursorVisible, displayData.cursorColumn, displayData.cursorRow, displayData.plainLines, isActive]);
-
   const renderContentLine = (line: string, index: number) => {
     return (
       <Text key={index}>
@@ -186,7 +137,7 @@ function InputLineComponent({
   return (
     <Box ref={rootRef} flexDirection="column">
       <Text>{theme.fgBg(borderToken, 'userMessageBg', borders.top)}</Text>
-      {renderedLines.map(renderContentLine)}
+      {displayData.plainLines.map(renderContentLine)}
       <Text>{theme.fgBg(borderToken, 'userMessageBg', borders.bottom)}</Text>
     </Box>
   );

tests/tuistory/built-cli.tuistory.test.ts

@@ -57,6 +57,26 @@ function expectCursorAfterTypedText(screen: string, typedText: string): void {
   expect(cursorColumn, screen).toBeGreaterThanOrEqual(textColumn + typedText.length);
 }
 
+async function waitForInkCursorSequenceAfterTypedText(session: Session, typedText: string): Promise<void> {
+  const deadline = Date.now() + 2_000;
+  const cursorColumn = typedText.length + 4;
+  const expectedSequence = `\u001b[${cursorColumn}G\u001b[?25h`;
+  let rawTail = '';
+
+  while (Date.now() < deadline) {
+    await session.waitIdle({ timeout: 15 }).catch(() => undefined);
+    rawTail = session.getRawOutput().slice(-2_000);
+
+    if (rawTail.includes(expectedSequence)) {
+      return;
+    }
+
+    await new Promise((resolve) => setTimeout(resolve, 25));
+  }
+
+  expect(rawTail).toContain(expectedSequence);
+}
+
 function composerLineIncludes(screen: string, text: string): boolean {
   return screen.split('\n').some((line) => line.includes('│❯') && line.includes(text));
 }
@@ -144,7 +164,7 @@ describe('interactive built CLI Tuistory tests', () => {
     await exitInteractive(session);
   });
 
-  it('keeps the real terminal cursor at the typed prompt position while composing', async () => {
+  it('keeps only the real terminal cursor at the typed prompt position while composing', async () => {
     const session = await launchInteractive({
       config: {
         ui: {
@@ -162,12 +182,22 @@ describe('interactive built CLI Tuistory tests', () => {
       const screen = await session.text({
         timeout: 2_000,
         waitFor: (text) => composerLineIncludes(text, typedPrefix),
-        showCursor: true,
         trimEnd: true,
       });
 
       expect(screen).toContain(typedPrefix);
-      expectCursorAfterTypedText(screen, typedPrefix);
+      expect(screen).not.toContain(CURSOR_CHAR);
+
+      await waitForInkCursorSequenceAfterTypedText(session, typedPrefix);
+
+      const cursorScreen = await session.text({
+        immediate: true,
+        showCursor: true,
+        trimEnd: true,
+      });
+      if (cursorScreen.includes(CURSOR_CHAR)) {
+        expectCursorAfterTypedText(cursorScreen, typedPrefix);
+      }
     }
 
     await exitInteractive(session);

tests/ui/ink/AgentUI.test.ts

@@ -27,7 +27,7 @@ import { ThemeProvider } from '../../../src/ui/theme/ThemeContext.js';
 import { getPromptBlockWidth } from '../../../src/ui/inputPrompt.js';
 
 function stripAnsi(value: string): string {
-  return value.replace(/\u001b\[[0-9;?]*[ -/]*[@-~]/g, '').replace(/█/g, '');
+  return value.replace(/\u001b\[[0-9;?]*[ -/]*[@-~]/g, '');
 }
 
 function setStdoutColumns(stdout: { columns: number; rows?: number }, columns: number): void {

tests/ui/ink/InputLine.test.tsx

@@ -15,7 +15,7 @@ import { ThemeProvider } from '../../../src/ui/theme/ThemeContext.js';
 import { initTheme } from '../../../src/ui/theme/index.js';
 
 function stripAnsi(value: string): string {
-  return value.replace(/\u001b\[[0-9;]*[A-Za-z]/g, '').replace(/█/g, '');
+  return value.replace(/\u001b\[[0-9;]*[A-Za-z]/g, '');
 }
 
 function renderInputLine(value: string) {
@@ -176,15 +176,16 @@ describe('InputLine themed variants', () => {
     expect(source).toContain("theme.fgBg(borderToken, 'userMessageBg', borders.bottom)");
   });
 
-  it('uses Ink cursor positioning with a rendered fallback cursor instead of inverse text', () => {
+  it('uses Ink cursor positioning without rendering a competing cursor glyph', () => {
     const source = readFileSync(
       path.resolve(process.cwd(), 'src/ui/ink/InputLine.tsx'),
       'utf8'
     );
 
     expect(source).toContain('useCursor');
     expect(source).toContain('setCursorPosition');
-    expect(source).toContain('renderHardwareCursorFallback');
+    expect(source).not.toContain('renderHardwareCursorFallback');
+    expect(source).not.toContain('█');
     expect(source).not.toContain('<Text inverse>');
   });