feat(ux): update cell border color and created test file for table rendering (#17798)

packages/cli/src/ui/utils/TableRenderer.test.tsx

@@ -0,0 +1,34 @@
+/**
+ * @license
+ * Copyright 2025 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { describe, it, expect } from 'vitest';
+import { TableRenderer } from './TableRenderer.js';
+import { renderWithProviders } from '../../test-utils/render.js';
+
+describe('TableRenderer', () => {
+  it('renders a 3x3 table correctly', () => {
+    const headers = ['Header 1', 'Header 2', 'Header 3'];
+    const rows = [
+      ['Row 1, Col 1', 'Row 1, Col 2', 'Row 1, Col 3'],
+      ['Row 2, Col 1', 'Row 2, Col 2', 'Row 2, Col 3'],
+      ['Row 3, Col 1', 'Row 3, Col 2', 'Row 3, Col 3'],
+    ];
+    const terminalWidth = 80;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('Header 1');
+    expect(output).toContain('Row 1, Col 1');
+    expect(output).toContain('Row 3, Col 3');
+    expect(output).toMatchSnapshot();
+  });
+});

packages/cli/src/ui/utils/TableRenderer.tsx

@@ -124,14 +124,16 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
 
     return (
       <Text color={theme.text.primary}>
-        │{' '}
+        <Text color={theme.border.default}>│</Text>{' '}
         {renderedCells.map((cell, index) => (
           <React.Fragment key={index}>
             {cell}
-            {index < renderedCells.length - 1 ? ' │ ' : ''}
+            {index < renderedCells.length - 1 && (
+              <Text color={theme.border.default}>{' │ '}</Text>
+            )}
           </React.Fragment>
         ))}{' '}
-        │
+        <Text color={theme.border.default}>│</Text>
       </Text>
     );
   };

packages/cli/src/ui/utils/__snapshots__/TableRenderer.test.tsx.snap

@@ -30,6 +30,18 @@ exports[`TableRenderer > handles rows with missing cells 1`] = `
 "
 `;
 
+exports[`TableRenderer > renders a 3x3 table correctly 1`] = `
+"
+┌──────────────┬──────────────┬──────────────┐
+│ Header 1     │ Header 2     │ Header 3     │
+├──────────────┼──────────────┼──────────────┤
+│ Row 1, Col 1 │ Row 1, Col 2 │ Row 1, Col 3 │
+│ Row 2, Col 1 │ Row 2, Col 2 │ Row 2, Col 3 │
+│ Row 3, Col 1 │ Row 3, Col 2 │ Row 3, Col 3 │
+└──────────────┴──────────────┴──────────────┘
+"
+`;
+
 exports[`TableRenderer > renders a simple table correctly 1`] = `
 "
 ┌─────────┬──────────┬──────────┐