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

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

packages/cli/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/src/ui/utils/TableRenderer.test.tsx

@@ -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();
+  });
 });

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

@@ -4,10 +4,19 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Text, Box } from 'ink';
+import {
+  type StyledChar,
+  toStyledCharacters,
+  styledCharsToString,
+  styledCharsWidth,
+  wordBreakStyledChars,
+  wrapStyledChars,
+  widestLineFromStyledChars,
+} from 'ink';
 import { theme } from '../semantic-colors.js';
-import { RenderInline, getPlainTextLength } from './InlineMarkdownRenderer.js';
+import { RenderInline } from './InlineMarkdownRenderer.js';
 
 interface TableRendererProps {
   headers: string[];
@@ -15,6 +24,26 @@ interface TableRendererProps {
   terminalWidth: number;
 }
 
+const MIN_COLUMN_WIDTH = 5;
+const COLUMN_PADDING = 2;
+const TABLE_MARGIN = 2;
+
+const calculateWidths = (text: string) => {
+  const styledChars = toStyledCharacters(text);
+  const contentWidth = styledCharsWidth(styledChars);
+
+  const words: StyledChar[][] = wordBreakStyledChars(styledChars);
+  const maxWordWidth = widestLineFromStyledChars(words);
+
+  return { contentWidth, maxWordWidth };
+};
+
+// Used to reduce redundant parsing and cache the widths for each line
+interface ProcessedLine {
+  text: string;
+  width: number;
+}
+
 /**
  * Custom table renderer for markdown tables
  * We implement our own instead of using ink-table due to module compatibility issues
@@ -24,89 +53,146 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
   rows,
   terminalWidth,
 }) => {
-  // Calculate column widths using actual display width after markdown processing
-  const columnWidths = headers.map((header, index) => {
-    const headerWidth = getPlainTextLength(header);
-    const maxRowWidth = Math.max(
-      ...rows.map((row) => getPlainTextLength(row[index] || '')),
+  // Clean headers: remove bold markers since we already render headers as bold
+  // and having them can break wrapping when the markers are split across lines.
+  const cleanedHeaders = useMemo(
+    () => headers.map((header) => header.replace(/\*\*(.*?)\*\*/g, '$1')),
+    [headers],
+  );
+
+  const { wrappedHeaders, wrappedRows, adjustedWidths } = useMemo(() => {
+    // --- Define Constraints per Column ---
+    const constraints = cleanedHeaders.map((header, colIndex) => {
+      let { contentWidth: maxContentWidth, maxWordWidth } =
+        calculateWidths(header);
+
+      rows.forEach((row) => {
+        const cell = row[colIndex] || '';
+        const { contentWidth: cellWidth, maxWordWidth: cellWordWidth } =
+          calculateWidths(cell);
+
+        maxContentWidth = Math.max(maxContentWidth, cellWidth);
+        maxWordWidth = Math.max(maxWordWidth, cellWordWidth);
+      });
+
+      const minWidth = maxWordWidth;
+      const maxWidth = Math.max(minWidth, maxContentWidth);
+
+      return { minWidth, maxWidth };
+    });
+
+    // --- Calculate Available Space ---
+    // Fixed overhead: borders (n+1) + padding (2n)
+    const fixedOverhead =
+      cleanedHeaders.length + 1 + cleanedHeaders.length * COLUMN_PADDING;
+    const availableWidth = Math.max(
+      0,
+      terminalWidth - fixedOverhead - TABLE_MARGIN,
     );
-    return Math.max(headerWidth, maxRowWidth) + 2; // Add padding
-  });
 
-  // Ensure table fits within terminal width
-  // We calculate scale based on content width vs available width (terminal - borders)
-  // First, extract content widths by removing the 2-char padding.
-  const contentWidths = columnWidths.map((width) => Math.max(0, width - 2));
-  const totalContentWidth = contentWidths.reduce(
-    (sum, width) => sum + width,
-    0,
-  );
+    // --- Allocation Algorithm ---
+    const totalMinWidth = constraints.reduce((sum, c) => sum + c.minWidth, 0);
+    let finalContentWidths: number[];
 
-  // Fixed overhead includes padding (2 per column) and separators (1 per column + 1 final).
-  const fixedOverhead = headers.length * 2 + (headers.length + 1);
+    if (totalMinWidth > availableWidth) {
+      // We must scale all the columns except the ones that are very short(<=5 characters)
+      const shortColumns = constraints.filter(
+        (c) => c.maxWidth <= MIN_COLUMN_WIDTH,
+      );
+      const totalShortColumnWidth = shortColumns.reduce(
+        (sum, c) => sum + c.minWidth,
+        0,
+      );
 
-  // Subtract 1 from available width to avoid edge-case wrapping on some terminals
-  const availableWidth = Math.max(0, terminalWidth - fixedOverhead - 1);
+      const finalTotalShortColumnWidth =
+        totalShortColumnWidth >= availableWidth ? 0 : totalShortColumnWidth;
 
-  const scaleFactor =
-    totalContentWidth > availableWidth ? availableWidth / totalContentWidth : 1;
-  const adjustedWidths = contentWidths.map(
-    (width) => Math.floor(width * scaleFactor) + 2,
-  );
-
-  // Helper function to render a cell with proper width
-  const renderCell = (
-    content: string,
-    width: number,
-    isHeader = false,
-  ): React.ReactNode => {
-    const contentWidth = Math.max(0, width - 2);
-    const displayWidth = getPlainTextLength(content);
-
-    let cellContent = content;
-    if (displayWidth > contentWidth) {
-      if (contentWidth <= 3) {
-        // Just truncate by character count
-        cellContent = content.substring(
-          0,
-          Math.min(content.length, contentWidth),
-        );
-      } else {
-        // Truncate preserving markdown formatting using binary search
-        let left = 0;
-        let right = content.length;
-        let bestTruncated = content;
-
-        // Binary search to find the optimal truncation point
-        while (left <= right) {
-          const mid = Math.floor((left + right) / 2);
-          const candidate = content.substring(0, mid);
-          const candidateWidth = getPlainTextLength(candidate);
-
-          if (candidateWidth <= contentWidth - 1) {
-            bestTruncated = candidate;
-            left = mid + 1;
-          } else {
-            right = mid - 1;
-          }
+      const scale =
+        (availableWidth - finalTotalShortColumnWidth) /
+        (totalMinWidth - finalTotalShortColumnWidth);
+      finalContentWidths = constraints.map((c) => {
+        if (c.maxWidth <= MIN_COLUMN_WIDTH && finalTotalShortColumnWidth > 0) {
+          return c.minWidth;
         }
+        return Math.floor(c.minWidth * scale);
+      });
+    } else {
+      const surplus = availableWidth - totalMinWidth;
+      const totalGrowthNeed = constraints.reduce(
+        (sum, c) => sum + (c.maxWidth - c.minWidth),
+        0,
+      );
 
-        cellContent = bestTruncated + '…';
+      if (totalGrowthNeed === 0) {
+        finalContentWidths = constraints.map((c) => c.minWidth);
+      } else {
+        finalContentWidths = constraints.map((c) => {
+          const growthNeed = c.maxWidth - c.minWidth;
+          const share = growthNeed / totalGrowthNeed;
+          const extra = Math.floor(surplus * share);
+          return Math.min(c.maxWidth, c.minWidth + extra);
+        });
       }
     }
 
-    // Calculate exact padding needed
-    const actualDisplayWidth = getPlainTextLength(cellContent);
-    const paddingNeeded = Math.max(0, contentWidth - actualDisplayWidth);
+    // --- Pre-wrap and Optimize Widths ---
+    const actualColumnWidths = new Array(cleanedHeaders.length).fill(0);
+
+    const wrapAndProcessRow = (row: string[]) => {
+      const rowResult: ProcessedLine[][] = [];
+      row.forEach((cell, colIndex) => {
+        const allocatedWidth = finalContentWidths[colIndex];
+        const contentWidth = Math.max(1, allocatedWidth);
+
+        const contentStyledChars = toStyledCharacters(cell);
+        const wrappedStyledLines = wrapStyledChars(
+          contentStyledChars,
+          contentWidth,
+        );
+
+        const maxLineWidth = widestLineFromStyledChars(wrappedStyledLines);
+        actualColumnWidths[colIndex] = Math.max(
+          actualColumnWidths[colIndex],
+          maxLineWidth,
+        );
+
+        const lines = wrappedStyledLines.map((line) => ({
+          text: styledCharsToString(line),
+          width: styledCharsWidth(line),
+        }));
+        rowResult.push(lines);
+      });
+      return rowResult;
+    };
+
+    const wrappedHeaders = wrapAndProcessRow(cleanedHeaders);
+    const wrappedRows = rows.map((row) => wrapAndProcessRow(row));
+
+    // Use the TIGHTEST widths that fit the wrapped content + padding
+    const adjustedWidths = actualColumnWidths.map((w) => w + COLUMN_PADDING);
+
+    return { wrappedHeaders, wrappedRows, adjustedWidths };
+  }, [cleanedHeaders, rows, terminalWidth]);
+
+  // Helper function to render a cell with proper width
+  const renderCell = (
+    content: ProcessedLine,
+    width: number,
+    isHeader = false,
+  ): React.ReactNode => {
+    const contentWidth = Math.max(0, width - COLUMN_PADDING);
+    // Use pre-calculated width to avoid re-parsing
+    const displayWidth = content.width;
+    const paddingNeeded = Math.max(0, contentWidth - displayWidth);
 
     return (
       <Text>
         {isHeader ? (
           <Text bold color={theme.text.link}>
-            <RenderInline text={cellContent} />
+            <RenderInline text={content.text} />
           </Text>
         ) : (
-          <RenderInline text={cellContent} />
+          <RenderInline text={content.text} />
         )}
         {' '.repeat(paddingNeeded)}
       </Text>
@@ -128,11 +214,14 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
     return <Text color={theme.border.default}>{border}</Text>;
   };
 
-  // Helper function to render a table row
-  const renderRow = (cells: string[], isHeader = false): React.ReactNode => {
+  // Helper function to render a single visual line of a row
+  const renderVisualRow = (
+    cells: ProcessedLine[],
+    isHeader = false,
+  ): React.ReactNode => {
     const renderedCells = cells.map((cell, index) => {
       const width = adjustedWidths[index] || 0;
-      return renderCell(cell || '', width, isHeader);
+      return renderCell(cell, width, isHeader);
     });
 
     return (
@@ -151,21 +240,46 @@ export const TableRenderer: React.FC<TableRendererProps> = ({
     );
   };
 
+  // Handles the wrapping logic for a logical data row
+  const renderDataRow = (
+    wrappedCells: ProcessedLine[][],
+    rowIndex?: number,
+    isHeader = false,
+  ): React.ReactNode => {
+    const key = isHeader ? 'header' : `${rowIndex}`;
+    const maxHeight = Math.max(...wrappedCells.map((lines) => lines.length), 1);
+
+    const visualRows: React.ReactNode[] = [];
+    for (let i = 0; i < maxHeight; i++) {
+      const visualRowCells = wrappedCells.map(
+        (lines) => lines[i] || { text: '', width: 0 },
+      );
+      visualRows.push(
+        <React.Fragment key={`${key}-${i}`}>
+          {renderVisualRow(visualRowCells, isHeader)}
+        </React.Fragment>,
+      );
+    }
+
+    return <React.Fragment key={rowIndex}>{visualRows}</React.Fragment>;
+  };
+
   return (
     <Box flexDirection="column" marginY={1}>
       {/* Top border */}
       {renderBorder('top')}
 
-      {/* Header row */}
-      {renderRow(headers, true)}
+      {/* 
+      Header row
+      Keep the rowIndex as -1 to differentiate from data rows
+      */}
+      {renderDataRow(wrappedHeaders, -1, true)}
 
       {/* Middle border */}
       {renderBorder('middle')}
 
       {/* Data rows */}
-      {rows.map((row, index) => (
-        <React.Fragment key={index}>{renderRow(row)}</React.Fragment>
-      ))}
+      {wrappedRows.map((row, index) => renderDataRow(row, index))}
 
       {/* Bottom border */}
       {renderBorder('bottom')}

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

@@ -1,5 +1,63 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`TableRenderer > 'handles non-ASCII characters (emojis …' 1`] = `
+"
+┌──────────────┬────────────┬───────────────┐
+│ Emoji 😃     │ Asian 汉字 │ Mixed 🚀 Text │
+├──────────────┼────────────┼───────────────┤
+│ Start 🌟 End │ 你好世界   │ Rocket 🚀 Man │
+│ Thumbs 👍 Up │ こんにちは │ Fire 🔥       │
+└──────────────┴────────────┴───────────────┘
+"
+`;
+
+exports[`TableRenderer > 'renders a table with mixed emojis, As…' 1`] = `
+"
+┌───────────────┬───────────────────┬────────────────┐
+│ Mixed 😃 中文 │ Complex 🚀 日本語 │ Text 📝 한국어 │
+├───────────────┼───────────────────┼────────────────┤
+│ 你好 😃       │ こんにちは 🚀     │ 안녕하세요 📝  │
+│ World 🌍      │ Code 💻           │ Pizza 🍕       │
+└───────────────┴───────────────────┴────────────────┘
+"
+`;
+
+exports[`TableRenderer > 'renders a table with only Asian chara…' 1`] = `
+"
+┌──────────────┬─────────────────┬───────────────┐
+│ Chinese 中文 │ Japanese 日本語 │ Korean 한국어 │
+├──────────────┼─────────────────┼───────────────┤
+│ 你好         │ こんにちは      │ 안녕하세요    │
+│ 世界         │ 世界            │ 세계          │
+└──────────────┴─────────────────┴───────────────┘
+"
+`;
+
+exports[`TableRenderer > 'renders a table with only emojis and …' 1`] = `
+"
+┌──────────┬───────────┬──────────┐
+│ Happy 😀 │ Rocket 🚀 │ Heart ❤️ │
+├──────────┼───────────┼──────────┤
+│ Smile 😃 │ Fire 🔥   │ Love 💖  │
+│ Cool 😎  │ Star ⭐   │ Blue 💙  │
+└──────────┴───────────┴──────────┘
+"
+`;
+
+exports[`TableRenderer > handles wrapped bold headers without showing markers 1`] = `
+"
+┌─────────────┬───────┬─────────┐
+│ Very Long   │ Short │ Another │
+│ Bold Header │       │ Long    │
+│ That Will   │       │ Header  │
+│ Wrap        │       │         │
+├─────────────┼───────┼─────────┤
+│ Data 1      │ Data  │ Data 3  │
+│             │ 2     │         │
+└─────────────┴───────┴─────────┘
+"
+`;
+
 exports[`TableRenderer > renders a 3x3 table correctly 1`] = `
 "
 ┌──────────────┬──────────────┬──────────────┐
@@ -12,14 +70,117 @@ exports[`TableRenderer > renders a 3x3 table correctly 1`] = `
 "
 `;
 
-exports[`TableRenderer > renders a table with long headers and 4 columns correctly 1`] = `
+exports[`TableRenderer > renders a complex table with mixed content lengths correctly 1`] = `
 "
-┌──────────────────┬──────────────────┬───────────────────┬──────────────────┐
-│ Very Long Colum… │ Very Long Colum… │ Very Long Column… │ Very Long Colum… │
-├──────────────────┼──────────────────┼───────────────────┼──────────────────┤
-│ Data 1.1         │ Data 1.2         │ Data 1.3          │ Data 1.4         │
-│ Data 2.1         │ Data 2.2         │ Data 2.3          │ Data 2.4         │
-│ Data 3.1         │ Data 3.2         │ Data 3.3          │ Data 3.4         │
-└──────────────────┴──────────────────┴───────────────────┴──────────────────┘
+┌─────────────────────────────┬──────────────────────────────┬─────────────────────────────┬──────────────────────────────┬─────┬────────┬─────────┬───────┐
+│ Comprehensive Architectural │ Implementation Details for   │ Longitudinal Performance    │ Strategic Security Framework │ Key │ Status │ Version │ Owner │
+│ Specification for the       │ the High-Throughput          │ Analysis Across             │ for Mitigating Sophisticated │     │        │         │       │
+│ Distributed Infrastructure  │ Asynchronous Message         │ Multi-Regional Cloud        │ Cross-Site Scripting         │     │        │         │       │
+│ Layer                       │ Processing Pipeline with     │ Deployment Clusters         │ Vulnerabilities              │     │        │         │       │
+│                             │ Extended Scalability         │                             │                              │     │        │         │       │
+│                             │ Features and Redundancy      │                             │                              │     │        │         │       │
+│                             │ Protocols                    │                             │                              │     │        │         │       │
+├─────────────────────────────┼──────────────────────────────┼─────────────────────────────┼──────────────────────────────┼─────┼────────┼─────────┼───────┤
+│ The primary architecture    │ Each message is processed    │ Historical data indicates a │ A multi-layered defense      │ INF │ Active │ v2.4    │ J.    │
+│ utilizes a decoupled        │ through a series of          │ significant reduction in    │ strategy incorporates        │     │        │         │ Doe   │
+│ microservices approach,     │ specialized workers that     │ tail latency when utilizing │ content security policies,   │     │        │         │       │
+│ leveraging container        │ handle data transformation,  │ edge computing nodes closer │ input sanitization           │     │        │         │       │
+│ orchestration for           │ validation, and persistent   │ to the geographic location  │ libraries, and regular       │     │        │         │       │
+│ scalability and fault       │ storage using a persistent   │ of the end-user base.       │ automated penetration        │     │        │         │       │
+│ tolerance in high-load      │ queue.                       │                             │ testing routines.            │     │        │         │       │
+│ scenarios.                  │                              │ Monitoring tools have       │                              │     │        │         │       │
+│                             │ The pipeline features        │ captured a steady increase  │ Developers are required to   │     │        │         │       │
+│ This layer provides the     │ built-in retry mechanisms    │ in throughput efficiency    │ undergo mandatory security   │     │        │         │       │
+│ fundamental building blocks │ with exponential backoff to  │ since the introduction of   │ training focusing on the     │     │        │         │       │
+│ for service discovery, load │ ensure message delivery      │ the vectorized query engine │ OWASP Top Ten to ensure that │     │        │         │       │
+│ balancing, and              │ integrity even during        │ in the primary data         │ security is integrated into  │     │        │         │       │
+│ inter-service communication │ transient network or service │ warehouse.                  │ the initial design phase.    │     │        │         │       │
+│ via highly efficient        │ failures.                    │                             │                              │     │        │         │       │
+│ protocol buffers.           │                              │ Resource utilization        │ The implementation of a      │     │        │         │       │
+│                             │ Horizontal autoscaling is    │ metrics demonstrate that    │ robust Identity and Access   │     │        │         │       │
+│ Advanced telemetry and      │ triggered automatically      │ the transition to           │ Management system ensures    │     │        │         │       │
+│ logging integrations allow  │ based on the depth of the    │ serverless compute for      │ that the principle of least  │     │        │         │       │
+│ for real-time monitoring of │ processing queue, ensuring   │ intermittent tasks has      │ privilege is strictly        │     │        │         │       │
+│ system health and rapid     │ consistent performance       │ resulted in a thirty        │ enforced across all          │     │        │         │       │
+│ identification of           │ during unexpected traffic    │ percent cost optimization.  │ environments.                │     │        │         │       │
+│ bottlenecks within the      │ spikes.                      │                             │                              │     │        │         │       │
+│ service mesh.               │                              │                             │                              │     │        │         │       │
+└─────────────────────────────┴──────────────────────────────┴─────────────────────────────┴──────────────────────────────┴─────┴────────┴─────────┴───────┘
+"
+`;
+
+exports[`TableRenderer > renders a table with long headers and 4 columns correctly 1`] = `
+"
+┌───────────────┬───────────────┬──────────────────┬──────────────────┐
+│ Very Long     │ Very Long     │ Very Long Column │ Very Long Column │
+│ Column Header │ Column Header │ Header Three     │ Header Four      │
+│ One           │ Two           │                  │                  │
+├───────────────┼───────────────┼──────────────────┼──────────────────┤
+│ Data 1.1      │ Data 1.2      │ Data 1.3         │ Data 1.4         │
+│ Data 2.1      │ Data 2.2      │ Data 2.3         │ Data 2.4         │
+│ Data 3.1      │ Data 3.2      │ Data 3.3         │ Data 3.4         │
+└───────────────┴───────────────┴──────────────────┴──────────────────┘
+"
+`;
+
+exports[`TableRenderer > strips bold markers from headers and renders them correctly 1`] = `
+"
+┌─────────────┬───────────────┬──────────────┐
+│ Bold Header │ Normal Header │ Another Bold │
+├─────────────┼───────────────┼──────────────┤
+│ Data 1      │ Data 2        │ Data 3       │
+└─────────────┴───────────────┴──────────────┘
+"
+`;
+
+exports[`TableRenderer > wraps all long columns correctly 1`] = `
+"
+┌────────────────┬────────────────┬─────────────────┐
+│ Col 1          │ Col 2          │ Col 3           │
+├────────────────┼────────────────┼─────────────────┤
+│ This is a very │ This is also a │ And this is the │
+│ long text that │ very long text │ third long text │
+│ needs wrapping │ that needs     │ that needs      │
+│ in column 1    │ wrapping in    │ wrapping in     │
+│                │ column 2       │ column 3        │
+└────────────────┴────────────────┴─────────────────┘
+"
+`;
+
+exports[`TableRenderer > wraps columns with punctuation correctly 1`] = `
+"
+┌───────────────────┬───────────────┬─────────────────┐
+│ Punctuation 1     │ Punctuation 2 │ Punctuation 3   │
+├───────────────────┼───────────────┼─────────────────┤
+│ Start. Stop.      │ Semi; colon:  │ At@ Hash#       │
+│ Comma, separated. │ Pipe| Slash/  │ Dollar$         │
+│ Exclamation!      │ Backslash\\    │ Percent% Caret^ │
+│ Question?         │               │ Ampersand&      │
+│ hyphen-ated       │               │ Asterisk*       │
+└───────────────────┴───────────────┴─────────────────┘
+"
+`;
+
+exports[`TableRenderer > wraps long cell content correctly 1`] = `
+"
+┌───────┬─────────────────────────────┬───────┐
+│ Col 1 │ Col 2                       │ Col 3 │
+├───────┼─────────────────────────────┼───────┤
+│ Short │ This is a very long cell    │ Short │
+│       │ content that should wrap to │       │
+│       │ multiple lines              │       │
+└───────┴─────────────────────────────┴───────┘
+"
+`;
+
+exports[`TableRenderer > wraps mixed long and short columns correctly 1`] = `
+"
+┌───────┬──────────────────────────┬────────┐
+│ Short │ Long                     │ Medium │
+├───────┼──────────────────────────┼────────┤
+│ Tiny  │ This is a very long text │ Not so │
+│       │ that definitely needs to │ long   │
+│       │ wrap to the next line    │        │
+└───────┴──────────────────────────┴────────┘
 "
 `;