fix(tui): address review findings for spacing PR

秦奇 · qwencoder · 秦奇 · commit 6bf2aa4de699 · 2026-06-11T16:55:54.000+08:00
- Add useIsScreenReaderEnabled() guard in UserMessage to skip
  decorative half-block characters for screen reader users
- Add width &lt;= 0 guard to prevent RangeError on narrow terminals
- Remove unused HalfLinePaddedBox component (dead code)
- Cache supportsTrueColor() result at module scope
- Add unit tests for interpolateColor, subtleBandColor,
  supportsTrueColor

Generated with AI

Co-authored-by: Qwen-Coder &lt;qwen-coder@alibabacloud.com&gt;
diff --git a/packages/cli/src/ui/components/messages/ConversationMessages.tsx b/packages/cli/src/ui/components/messages/ConversationMessages.tsx
@@ -5,7 +5,7 @@
  */
 
 import type React from 'react';
-import { Box, Text } from 'ink';
+import { Box, Text, useIsScreenReaderEnabled } from 'ink';
 import stringWidth from 'string-width';
 import {
   MarkdownDisplay,
@@ -192,6 +192,8 @@ const ContinuationMarkdownMessage: React.FC<
 };
 
 export const UserMessage: React.FC<UserMessageProps> = ({ text, width }) => {
+  const isScreenReaderEnabled = useIsScreenReaderEnabled();
+
   const fallback = (
     <PrefixedTextMessage
       text={text}
@@ -203,7 +205,12 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text, width }) => {
     />
   );
 
-  if (width === undefined || !supportsTrueColor()) {
+  if (
+    width === undefined ||
+    width <= 0 ||
+    isScreenReaderEnabled ||
+    !supportsTrueColor()
+  ) {
     return fallback;
   }
 
@@ -221,8 +228,8 @@ export const UserMessage: React.FC<UserMessageProps> = ({ text, width }) => {
       <Text color={bandColor}>{'▄'.repeat(width)}</Text>
       {lines.map((line, i) => {
         const linePrefix = i === 0 ? prefix : '  ';
-        const contentWidth = stringWidth(linePrefix + line);
-        const pad = Math.max(0, width - contentWidth);
+        const lineWidth = stringWidth(linePrefix + line);
+        const pad = Math.max(0, width - lineWidth);
         return (
           <Text
             key={i}
diff --git a/packages/cli/src/ui/components/shared/HalfLinePaddedBox.tsx b/packages/cli/src/ui/components/shared/HalfLinePaddedBox.tsx
diff --git a/packages/cli/src/ui/themes/color-utils.test.ts b/packages/cli/src/ui/themes/color-utils.test.ts
@@ -6,6 +6,9 @@
 
 import { describe, it, expect } from 'vitest';
 import {
+  interpolateColor,
+  subtleBandColor,
+  supportsTrueColor,
   isValidColor,
   resolveColor,
   CSS_NAME_TO_HEX_MAP,
@@ -218,4 +221,69 @@ describe('Color Utils', () => {
       }
     });
   });
+
+  describe('interpolateColor', () => {
+    it('returns color1 when factor <= 0', () => {
+      expect(interpolateColor('#000000', '#ffffff', 0)).toBe('#000000');
+      expect(interpolateColor('#000000', '#ffffff', -1)).toBe('#000000');
+    });
+
+    it('returns color2 when factor >= 1', () => {
+      expect(interpolateColor('#000000', '#ffffff', 1)).toBe('#ffffff');
+      expect(interpolateColor('#000000', '#ffffff', 2)).toBe('#ffffff');
+    });
+
+    it('blends two hex colors at 50%', () => {
+      expect(interpolateColor('#000000', '#ffffff', 0.5)).toBe('#808080');
+    });
+
+    it('blends with a small factor', () => {
+      const result = interpolateColor('#000000', '#ffffff', 0.06);
+      expect(result).toMatch(/^#[0-9a-f]{6}$/);
+      expect(result).not.toBe('#000000');
+    });
+
+    it('handles 3-digit hex shorthand', () => {
+      expect(interpolateColor('#000', '#fff', 0.5)).toBe('#808080');
+    });
+
+    it('handles Ink color names', () => {
+      expect(interpolateColor('black', 'white', 0.5)).toBe('#808080');
+    });
+
+    it('returns empty string for unparseable input', () => {
+      expect(interpolateColor('notacolor', '#ffffff', 0.5)).toBe('');
+      expect(interpolateColor('#ffffff', 'notacolor', 0.5)).toBe('');
+    });
+  });
+
+  describe('subtleBandColor', () => {
+    it('shifts dark background toward white', () => {
+      const result = subtleBandColor('#000000');
+      expect(result).toMatch(/^#[0-9a-f]{6}$/);
+      expect(result).not.toBe('#000000');
+      const r = parseInt(result.slice(1, 3), 16);
+      expect(r).toBeGreaterThan(0);
+      expect(r).toBeLessThan(30);
+    });
+
+    it('shifts light background toward black', () => {
+      const result = subtleBandColor('#ffffff');
+      expect(result).toMatch(/^#[0-9a-f]{6}$/);
+      expect(result).not.toBe('#ffffff');
+      const r = parseInt(result.slice(1, 3), 16);
+      expect(r).toBeGreaterThan(225);
+      expect(r).toBeLessThan(255);
+    });
+
+    it('returns empty string for unparseable input', () => {
+      expect(subtleBandColor('notacolor')).toBe('');
+    });
+  });
+
+  describe('supportsTrueColor', () => {
+    it('returns a boolean', () => {
+      expect(typeof supportsTrueColor()).toBe('boolean');
+    });
+  });
 });
diff --git a/packages/cli/src/ui/themes/color-utils.ts b/packages/cli/src/ui/themes/color-utils.ts
@@ -328,19 +328,22 @@ export function subtleBandColor(bgColor: string, factor = 0.06): string {
 
 /**
  * Detects whether the terminal supports 24-bit (true) color, required for the
- * blended half-line background band.
+ * blended half-line background band. Result is cached at module scope since
+ * terminal color capability does not change during the process lifetime.
  */
+let _supportsTrueColor: boolean | undefined;
 export function supportsTrueColor(): boolean {
+  if (_supportsTrueColor !== undefined) return _supportsTrueColor;
   const colorterm = process.env['COLORTERM'];
   if (
     colorterm === 'truecolor' ||
     colorterm === '24bit' ||
     colorterm === 'kmscon'
   ) {
-    return true;
+    return (_supportsTrueColor = true);
   }
   if (process.stdout.getColorDepth && process.stdout.getColorDepth() >= 24) {
-    return true;
+    return (_supportsTrueColor = true);
   }
-  return false;
+  return (_supportsTrueColor = false);
 }
