feat(ux): added text wrapping capabilities to markdown tables (google-gemini#18240)

Co-authored-by: jacob314 <jacob314@gmail.com>

Author: devr0306

package-lock.json

@@ -64,7 +64,7 @@
     "pre-commit": "node scripts/pre-commit.js"
   },
   "overrides": {
-    "ink": "npm:@jrichman/ink@6.4.8",
+    "ink": "npm:@jrichman/ink@6.4.10",
     "wrap-ansi": "9.0.2",
     "cliui": {
       "wrap-ansi": "7.0.0"
@@ -126,7 +126,7 @@
     "yargs": "^17.7.2"
   },
   "dependencies": {
-    "ink": "npm:@jrichman/ink@6.4.8",
+    "ink": "npm:@jrichman/ink@6.4.10",
     "latest-version": "^9.0.0",
     "proper-lockfile": "^4.1.2",
     "simple-git": "^3.28.0"

package.json

@@ -47,7 +47,7 @@
     "fzf": "^0.5.2",
     "glob": "^12.0.0",
     "highlight.js": "^11.11.1",
-    "ink": "npm:@jrichman/ink@6.4.8",
+    "ink": "npm:@jrichman/ink@6.4.10",
     "ink-gradient": "^3.0.0",
     "ink-spinner": "^5.0.0",
     "latest-version": "^9.0.0",

packages/cli/package.json

@@ -61,4 +61,257 @@ describe('TableRenderer', () => {
     expect(output).toContain('Data 3.4');
     expect(output).toMatchSnapshot();
   });
+
+  it('wraps long cell content correctly', () => {
+    const headers = ['Col 1', 'Col 2', 'Col 3'];
+    const rows = [
+      [
+        'Short',
+        'This is a very long cell content that should wrap to multiple lines',
+        'Short',
+      ],
+    ];
+    const terminalWidth = 50;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('This is a very');
+    expect(output).toContain('long cell');
+    expect(output).toMatchSnapshot();
+  });
+
+  it('wraps all long columns correctly', () => {
+    const headers = ['Col 1', 'Col 2', 'Col 3'];
+    const rows = [
+      [
+        'This is a very long text that needs wrapping in column 1',
+        'This is also a very long text that needs wrapping in column 2',
+        'And this is the third long text that needs wrapping in column 3',
+      ],
+    ];
+    const terminalWidth = 60;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('wrapping in');
+    expect(output).toMatchSnapshot();
+  });
+
+  it('wraps mixed long and short columns correctly', () => {
+    const headers = ['Short', 'Long', 'Medium'];
+    const rows = [
+      [
+        'Tiny',
+        'This is a very long text that definitely needs to wrap to the next line',
+        'Not so long',
+      ],
+    ];
+    const terminalWidth = 50;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('Tiny');
+    expect(output).toContain('definitely needs');
+    expect(output).toMatchSnapshot();
+  });
+
+  // The snapshot looks weird but checked on VS Code terminal and it looks fine
+  it('wraps columns with punctuation correctly', () => {
+    const headers = ['Punctuation 1', 'Punctuation 2', 'Punctuation 3'];
+    const rows = [
+      [
+        'Start. Stop. Comma, separated. Exclamation! Question? hyphen-ated',
+        'Semi; colon: Pipe| Slash/ Backslash\\',
+        'At@ Hash# Dollar$ Percent% Caret^ Ampersand& Asterisk*',
+      ],
+    ];
+    const terminalWidth = 60;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const output = lastFrame();
+    expect(output).toContain('Start. Stop.');
+    expect(output).toMatchSnapshot();
+  });
+
+  it('strips bold markers from headers and renders them correctly', () => {
+    const headers = ['**Bold Header**', 'Normal Header', '**Another Bold**'];
+    const rows = [['Data 1', 'Data 2', 'Data 3']];
+    const terminalWidth = 50;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const output = lastFrame();
+    // The output should NOT contain the literal '**'
+    expect(output).not.toContain('**Bold Header**');
+    expect(output).toContain('Bold Header');
+    expect(output).toMatchSnapshot();
+  });
+
+  it('handles wrapped bold headers without showing markers', () => {
+    const headers = [
+      '**Very Long Bold Header That Will Wrap**',
+      'Short',
+      '**Another Long Header**',
+    ];
+    const rows = [['Data 1', 'Data 2', 'Data 3']];
+    const terminalWidth = 40;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+    );
+
+    const output = lastFrame();
+    // Markers should be gone
+    expect(output).not.toContain('**');
+    expect(output).toContain('Very Long');
+    expect(output).toMatchSnapshot();
+  });
+
+  it('renders a complex table with mixed content lengths correctly', () => {
+    const headers = [
+      'Comprehensive Architectural Specification for the Distributed Infrastructure Layer',
+      'Implementation Details for the High-Throughput Asynchronous Message Processing Pipeline with Extended Scalability Features and Redundancy Protocols',
+      'Longitudinal Performance Analysis Across Multi-Regional Cloud Deployment Clusters',
+      'Strategic Security Framework for Mitigating Sophisticated Cross-Site Scripting Vulnerabilities',
+      'Key',
+      'Status',
+      'Version',
+      'Owner',
+    ];
+    const rows = [
+      [
+        'The primary architecture utilizes a decoupled microservices approach, leveraging container orchestration for scalability and fault tolerance in high-load scenarios.\n\nThis layer provides the fundamental building blocks for service discovery, load balancing, and inter-service communication via highly efficient protocol buffers.\n\nAdvanced telemetry and logging integrations allow for real-time monitoring of system health and rapid identification of bottlenecks within the service mesh.',
+        'Each message is processed through a series of specialized workers that handle data transformation, validation, and persistent storage using a persistent queue.\n\nThe pipeline features built-in retry mechanisms with exponential backoff to ensure message delivery integrity even during transient network or service failures.\n\nHorizontal autoscaling is triggered automatically based on the depth of the processing queue, ensuring consistent performance during unexpected traffic spikes.',
+        'Historical data indicates a significant reduction in tail latency when utilizing edge computing nodes closer to the geographic location of the end-user base.\n\nMonitoring tools have captured a steady increase in throughput efficiency since the introduction of the vectorized query engine in the primary data warehouse.\n\nResource utilization metrics demonstrate that the transition to serverless compute for intermittent tasks has resulted in a thirty percent cost optimization.',
+        'A multi-layered defense strategy incorporates content security policies, input sanitization libraries, and regular automated penetration testing routines.\n\nDevelopers are required to undergo mandatory security training focusing on the OWASP Top Ten to ensure that security is integrated into the initial design phase.\n\nThe implementation of a robust Identity and Access Management system ensures that the principle of least privilege is strictly enforced across all environments.',
+        'INF',
+        'Active',
+        'v2.4',
+        'J. Doe',
+      ],
+    ];
+
+    const terminalWidth = 160;
+
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+      { width: terminalWidth },
+    );
+
+    const output = lastFrame();
+
+    expect(output).toContain('Comprehensive Architectural');
+    expect(output).toContain('protocol buffers');
+    expect(output).toContain('exponential backoff');
+    expect(output).toContain('vectorized query engine');
+    expect(output).toContain('OWASP Top Ten');
+    expect(output).toContain('INF');
+    expect(output).toContain('Active');
+    expect(output).toContain('v2.4');
+    // "J. Doe" might wrap due to column width constraints
+    expect(output).toContain('J.');
+    expect(output).toContain('Doe');
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it.each([
+    {
+      name: 'handles non-ASCII characters (emojis and Asian scripts) correctly',
+      headers: ['Emoji 😃', 'Asian 汉字', 'Mixed 🚀 Text'],
+      rows: [
+        ['Start 🌟 End', '你好世界', 'Rocket 🚀 Man'],
+        ['Thumbs 👍 Up', 'こんにちは', 'Fire 🔥'],
+      ],
+      terminalWidth: 60,
+      expected: ['Emoji 😃', 'Asian 汉字', '你好世界'],
+    },
+    {
+      name: 'renders a table with only emojis and text correctly',
+      headers: ['Happy 😀', 'Rocket 🚀', 'Heart ❤️'],
+      rows: [
+        ['Smile 😃', 'Fire 🔥', 'Love 💖'],
+        ['Cool 😎', 'Star ⭐', 'Blue 💙'],
+      ],
+      terminalWidth: 60,
+      expected: ['Happy 😀', 'Smile 😃', 'Fire 🔥'],
+    },
+    {
+      name: 'renders a table with only Asian characters and text correctly',
+      headers: ['Chinese 中文', 'Japanese 日本語', 'Korean 한국어'],
+      rows: [
+        ['你好', 'こんにちは', '안녕하세요'],
+        ['世界', '世界', '세계'],
+      ],
+      terminalWidth: 60,
+      expected: ['Chinese 中文', '你好', 'こんにちは'],
+    },
+    {
+      name: 'renders a table with mixed emojis, Asian characters, and text correctly',
+      headers: ['Mixed 😃 中文', 'Complex 🚀 日本語', 'Text 📝 한국어'],
+      rows: [
+        ['你好 😃', 'こんにちは 🚀', '안녕하세요 📝'],
+        ['World 🌍', 'Code 💻', 'Pizza 🍕'],
+      ],
+      terminalWidth: 80,
+      expected: ['Mixed 😃 中文', '你好 😃', 'こんにちは 🚀'],
+    },
+  ])('$name', ({ headers, rows, terminalWidth, expected }) => {
+    const { lastFrame } = renderWithProviders(
+      <TableRenderer
+        headers={headers}
+        rows={rows}
+        terminalWidth={terminalWidth}
+      />,
+      { width: terminalWidth },
+    );
+
+    const output = lastFrame();
+    expected.forEach((text) => {
+      expect(output).toContain(text);
+    });
+    expect(output).toMatchSnapshot();
+  });
 });