diff --git a/integration-tests/plan-mode.test.ts b/integration-tests/plan-mode.test.ts
index 784bb890a0..f71006a36c 100644
--- a/integration-tests/plan-mode.test.ts
+++ b/integration-tests/plan-mode.test.ts
@@ -62,7 +62,7 @@ describe('Plan Mode', () => {
     });
   });
 
-  it('should allow write_file only in the plans directory in plan mode', async () => {
+  it.skip('should allow write_file only in the plans directory in plan mode', async () => {
     await rig.setup(
       'should allow write_file only in the plans directory in plan mode',
       {
diff --git a/packages/cli/src/ui/utils/TableRenderer.test.tsx b/packages/cli/src/ui/utils/TableRenderer.test.tsx
index 9d22d5d301..e9d84e6649 100644
--- a/packages/cli/src/ui/utils/TableRenderer.test.tsx
+++ b/packages/cli/src/ui/utils/TableRenderer.test.tsx
@@ -17,20 +17,21 @@ describe('TableRenderer', () => {
     ];
     const terminalWidth = 80;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     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();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -48,13 +49,14 @@ describe('TableRenderer', () => {
     ];
     const terminalWidth = 80;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
@@ -62,7 +64,7 @@ describe('TableRenderer', () => {
     // We just check for some of the content.
     expect(output).toContain('Data 1.1');
     expect(output).toContain('Data 3.4');
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -77,19 +79,20 @@ describe('TableRenderer', () => {
     ];
     const terminalWidth = 50;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
     expect(output).toContain('This is a very');
     expect(output).toContain('long cell');
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -104,18 +107,19 @@ describe('TableRenderer', () => {
     ];
     const terminalWidth = 60;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
     expect(output).toContain('wrapping in');
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -130,19 +134,20 @@ describe('TableRenderer', () => {
     ];
     const terminalWidth = 50;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
     expect(output).toContain('Tiny');
     expect(output).toContain('definitely needs');
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -158,18 +163,19 @@ describe('TableRenderer', () => {
     ];
     const terminalWidth = 60;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
     expect(output).toContain('Start. Stop.');
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -178,20 +184,21 @@ describe('TableRenderer', () => {
     const rows = [['Data 1', 'Data 2', 'Data 3']];
     const terminalWidth = 50;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
     // The output should NOT contain the literal '**'
     expect(output).not.toContain('**Bold Header**');
     expect(output).toContain('Bold Header');
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -204,20 +211,21 @@ describe('TableRenderer', () => {
     const rows = [['Data 1', 'Data 2', 'Data 3']];
     const terminalWidth = 40;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
     // Markers should be gone
     expect(output).not.toContain('**');
     expect(output).toContain('Very Long');
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -247,7 +255,7 @@ describe('TableRenderer', () => {
 
     const terminalWidth = 160;
 
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
@@ -255,6 +263,7 @@ describe('TableRenderer', () => {
       />,
       { width: terminalWidth },
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
@@ -271,7 +280,7 @@ describe('TableRenderer', () => {
     expect(output).toContain('J.');
     expect(output).toContain('Doe');
 
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -317,7 +326,7 @@ describe('TableRenderer', () => {
       expected: ['Mixed 😃 中文', '你好 😃', 'こんにちは 🚀'],
     },
   ])('$name', async ({ headers, rows, terminalWidth, expected }) => {
-    const { lastFrame, waitUntilReady, unmount } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
@@ -325,13 +334,14 @@ describe('TableRenderer', () => {
       />,
       { width: terminalWidth },
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
     expected.forEach((text) => {
       expect(output).toContain(text);
     });
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
     unmount();
   });
 
@@ -351,19 +361,21 @@ describe('TableRenderer', () => {
   ])('$name', async ({ headers, rows, expected }) => {
     const terminalWidth = 50;
 
-    const { lastFrame, waitUntilReady } = renderWithProviders(
+    const renderResult = renderWithProviders(
       <TableRenderer
         headers={headers}
         rows={rows}
         terminalWidth={terminalWidth}
       />,
     );
+    const { lastFrame, waitUntilReady, unmount } = renderResult;
     await waitUntilReady();
 
     const output = lastFrame();
     expected.forEach((text) => {
       expect(output).toContain(text);
     });
-    expect(output).toMatchSnapshot();
+    await expect(renderResult).toMatchSvgSnapshot();
+    unmount();
   });
 });
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-handles-non-ASCII-characters-emojis-.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-handles-non-ASCII-characters-emojis-.snap.svg
new file mode 100644
index 0000000000..d9612cce33
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-handles-non-ASCII-characters-emojis-.snap.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="560" height="139" viewBox="0 0 560 139">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="560" height="139" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="405" lengthAdjust="spacingAndGlyphs">┌──────────────┬────────────┬───────────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="63" lengthAdjust="spacingAndGlyphs">Emoji 😃</text>
+    <text x="117" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="144" y="36" fill="#89b4fa" textLength="90" lengthAdjust="spacingAndGlyphs">Asian 汉字</text>
+    <text x="234" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="261" y="36" fill="#89b4fa" textLength="108" lengthAdjust="spacingAndGlyphs">Mixed 🚀 Text</text>
+    <text x="378" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="405" lengthAdjust="spacingAndGlyphs">├──────────────┼────────────┼───────────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs"> Start 🌟 End</text>
+    <text x="117" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="144" y="70" fill="#ffffff" textLength="90" lengthAdjust="spacingAndGlyphs">你好世界  </text>
+    <text x="234" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="261" y="70" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Rocket 🚀 Man </text>
+    <text x="378" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="87" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs"> Thumbs 👍 Up</text>
+    <text x="117" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="144" y="87" fill="#ffffff" textLength="90" lengthAdjust="spacingAndGlyphs">こんにちは</text>
+    <text x="234" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="261" y="87" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Fire 🔥       </text>
+    <text x="378" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="405" lengthAdjust="spacingAndGlyphs">└──────────────┴────────────┴───────────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-handles-wrapped-bold-headers-without-showing-markers.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-handles-wrapped-bold-headers-without-showing-markers.snap.svg
new file mode 100644
index 0000000000..0118d133cf
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-handles-wrapped-bold-headers-without-showing-markers.snap.svg
@@ -0,0 +1,47 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="190" viewBox="0 0 920 190">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="190" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="297" lengthAdjust="spacingAndGlyphs">┌─────────────┬───────┬─────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="81" lengthAdjust="spacingAndGlyphs">Very Long</text>
+    <text x="117" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="144" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Short</text>
+    <text x="189" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="216" y="36" fill="#89b4fa" textLength="63" lengthAdjust="spacingAndGlyphs">Another</text>
+    <text x="288" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="53" fill="#89b4fa" textLength="99" lengthAdjust="spacingAndGlyphs">Bold Header</text>
+    <text x="117" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="189" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="216" y="53" fill="#89b4fa" textLength="36" lengthAdjust="spacingAndGlyphs">Long</text>
+    <text x="288" y="53" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="70" fill="#89b4fa" textLength="81" lengthAdjust="spacingAndGlyphs">That Will</text>
+    <text x="117" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="189" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="216" y="70" fill="#89b4fa" textLength="54" lengthAdjust="spacingAndGlyphs">Header</text>
+    <text x="288" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="87" fill="#89b4fa" textLength="36" lengthAdjust="spacingAndGlyphs">Wrap</text>
+    <text x="117" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="189" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="297" lengthAdjust="spacingAndGlyphs">├─────────────┼───────┼─────────┤</text>
+    <text x="0" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="121" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs"> Data 1     </text>
+    <text x="117" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="144" y="121" fill="#ffffff" textLength="45" lengthAdjust="spacingAndGlyphs">Data </text>
+    <text x="189" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="216" y="121" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">Data 3  </text>
+    <text x="288" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="117" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="144" y="138" fill="#ffffff" textLength="45" lengthAdjust="spacingAndGlyphs">2    </text>
+    <text x="189" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="155" fill="#333333" textLength="297" lengthAdjust="spacingAndGlyphs">└─────────────┴───────┴─────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-3x3-table-correctly.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-3x3-table-correctly.snap.svg
new file mode 100644
index 0000000000..84e4d856f6
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-3x3-table-correctly.snap.svg
@@ -0,0 +1,39 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="156" viewBox="0 0 920 156">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="156" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="414" lengthAdjust="spacingAndGlyphs">┌──────────────┬──────────────┬──────────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="72" lengthAdjust="spacingAndGlyphs">Header 1</text>
+    <text x="126" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="36" fill="#89b4fa" textLength="72" lengthAdjust="spacingAndGlyphs">Header 2</text>
+    <text x="261" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="36" fill="#89b4fa" textLength="72" lengthAdjust="spacingAndGlyphs">Header 3</text>
+    <text x="405" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="414" lengthAdjust="spacingAndGlyphs">├──────────────┼──────────────┼──────────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs"> Row 1, Col 1</text>
+    <text x="126" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="70" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs">Row 1, Col 2</text>
+    <text x="261" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="70" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Row 1, Col 3 </text>
+    <text x="405" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="87" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs"> Row 2, Col 1</text>
+    <text x="126" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="87" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs">Row 2, Col 2</text>
+    <text x="261" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="87" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Row 2, Col 3 </text>
+    <text x="405" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="104" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs"> Row 3, Col 1</text>
+    <text x="126" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="104" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs">Row 3, Col 2</text>
+    <text x="261" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="104" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Row 3, Col 3 </text>
+    <text x="405" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="121" fill="#333333" textLength="414" lengthAdjust="spacingAndGlyphs">└──────────────┴──────────────┴──────────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-complex-table-with-mixed-content-lengths-correctly.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-complex-table-with-mixed-content-lengths-correctly.snap.svg
new file mode 100644
index 0000000000..95654cb4d8
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-complex-table-with-mixed-content-lengths-correctly.snap.svg
@@ -0,0 +1,401 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1460" height="615" viewBox="0 0 1460 615">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="1460" height="615" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="1404" lengthAdjust="spacingAndGlyphs">┌─────────────────────────────┬──────────────────────────────┬─────────────────────────────┬──────────────────────────────┬─────┬────────┬─────────┬───────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="243" lengthAdjust="spacingAndGlyphs">Comprehensive Architectural</text>
+    <text x="261" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="36" fill="#89b4fa" textLength="234" lengthAdjust="spacingAndGlyphs">Implementation Details for</text>
+    <text x="540" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="36" fill="#89b4fa" textLength="216" lengthAdjust="spacingAndGlyphs">Longitudinal Performance</text>
+    <text x="810" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="36" fill="#89b4fa" textLength="252" lengthAdjust="spacingAndGlyphs">Strategic Security Framework</text>
+    <text x="1089" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1116" y="36" fill="#89b4fa" textLength="27" lengthAdjust="spacingAndGlyphs">Key</text>
+    <text x="1143" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1170" y="36" fill="#89b4fa" textLength="54" lengthAdjust="spacingAndGlyphs">Status</text>
+    <text x="1224" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1251" y="36" fill="#89b4fa" textLength="63" lengthAdjust="spacingAndGlyphs">Version</text>
+    <text x="1314" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1341" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Owner</text>
+    <text x="1395" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="53" fill="#89b4fa" textLength="189" lengthAdjust="spacingAndGlyphs">Specification for the</text>
+    <text x="261" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="53" fill="#89b4fa" textLength="171" lengthAdjust="spacingAndGlyphs">the High-Throughput</text>
+    <text x="540" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="53" fill="#89b4fa" textLength="135" lengthAdjust="spacingAndGlyphs">Analysis Across</text>
+    <text x="810" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="53" fill="#89b4fa" textLength="252" lengthAdjust="spacingAndGlyphs">for Mitigating Sophisticated</text>
+    <text x="1089" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="53" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="70" fill="#89b4fa" textLength="234" lengthAdjust="spacingAndGlyphs">Distributed Infrastructure</text>
+    <text x="261" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="70" fill="#89b4fa" textLength="180" lengthAdjust="spacingAndGlyphs">Asynchronous Message</text>
+    <text x="540" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="70" fill="#89b4fa" textLength="180" lengthAdjust="spacingAndGlyphs">Multi-Regional Cloud</text>
+    <text x="810" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="70" fill="#89b4fa" textLength="180" lengthAdjust="spacingAndGlyphs">Cross-Site Scripting</text>
+    <text x="1089" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="87" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Layer</text>
+    <text x="261" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="87" fill="#89b4fa" textLength="216" lengthAdjust="spacingAndGlyphs">Processing Pipeline with</text>
+    <text x="540" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="87" fill="#89b4fa" textLength="171" lengthAdjust="spacingAndGlyphs">Deployment Clusters</text>
+    <text x="810" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="87" fill="#89b4fa" textLength="135" lengthAdjust="spacingAndGlyphs">Vulnerabilities</text>
+    <text x="1089" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="261" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="104" fill="#89b4fa" textLength="180" lengthAdjust="spacingAndGlyphs">Extended Scalability</text>
+    <text x="540" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="810" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1089" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="261" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="121" fill="#89b4fa" textLength="207" lengthAdjust="spacingAndGlyphs">Features and Redundancy</text>
+    <text x="540" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="810" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1089" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="261" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="138" fill="#89b4fa" textLength="81" lengthAdjust="spacingAndGlyphs">Protocols</text>
+    <text x="540" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="810" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1089" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="155" fill="#333333" textLength="1404" lengthAdjust="spacingAndGlyphs">├─────────────────────────────┼──────────────────────────────┼─────────────────────────────┼──────────────────────────────┼─────┼────────┼─────────┼───────┤</text>
+    <text x="0" y="172" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="172" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> The primary architecture   </text>
+    <text x="261" y="172" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="172" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">Each message is processed   </text>
+    <text x="540" y="172" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="172" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Historical data indicates a</text>
+    <text x="810" y="172" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="172" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">A multi-layered defense     </text>
+    <text x="1089" y="172" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1116" y="172" fill="#ffffff" textLength="27" lengthAdjust="spacingAndGlyphs">INF</text>
+    <text x="1143" y="172" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1170" y="172" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">Active</text>
+    <text x="1224" y="172" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1251" y="172" fill="#ffffff" textLength="63" lengthAdjust="spacingAndGlyphs">v2.4   </text>
+    <text x="1314" y="172" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1341" y="172" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">J.    </text>
+    <text x="1395" y="172" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="189" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="189" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> utilizes a decoupled       </text>
+    <text x="261" y="189" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="189" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">through a series of         </text>
+    <text x="540" y="189" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="189" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">significant reduction in   </text>
+    <text x="810" y="189" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="189" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">strategy incorporates       </text>
+    <text x="1089" y="189" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="189" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="189" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="189" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1341" y="189" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">Doe   </text>
+    <text x="1395" y="189" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="206" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="206" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> microservices approach,    </text>
+    <text x="261" y="206" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="206" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">specialized workers that    </text>
+    <text x="540" y="206" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="206" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">tail latency when utilizing</text>
+    <text x="810" y="206" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="206" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">content security policies,  </text>
+    <text x="1089" y="206" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="206" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="206" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="206" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="206" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="223" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="223" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> leveraging container       </text>
+    <text x="261" y="223" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="223" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">handle data transformation, </text>
+    <text x="540" y="223" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="223" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">edge computing nodes closer</text>
+    <text x="810" y="223" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="223" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">input sanitization          </text>
+    <text x="1089" y="223" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="223" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="223" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="223" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="223" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="240" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="240" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> orchestration for          </text>
+    <text x="261" y="240" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="240" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">validation, and persistent  </text>
+    <text x="540" y="240" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="240" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">to the geographic location </text>
+    <text x="810" y="240" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="240" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">libraries, and regular      </text>
+    <text x="1089" y="240" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="240" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="240" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="240" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="240" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="257" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="257" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> scalability and fault      </text>
+    <text x="261" y="257" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="257" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">storage using a persistent  </text>
+    <text x="540" y="257" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="257" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">of the end-user base.      </text>
+    <text x="810" y="257" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="257" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">automated penetration       </text>
+    <text x="1089" y="257" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="257" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="257" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="257" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="257" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="274" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="274" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> tolerance in high-load     </text>
+    <text x="261" y="274" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="274" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">queue.                      </text>
+    <text x="540" y="274" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="810" y="274" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="274" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">testing routines.           </text>
+    <text x="1089" y="274" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="274" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="274" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="274" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="274" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="291" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="291" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> scenarios.                 </text>
+    <text x="261" y="291" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="540" y="291" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="291" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Monitoring tools have      </text>
+    <text x="810" y="291" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1089" y="291" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="291" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="291" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="291" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="291" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="308" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="261" y="308" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="308" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">The pipeline features       </text>
+    <text x="540" y="308" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="308" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">captured a steady increase </text>
+    <text x="810" y="308" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="308" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">Developers are required to  </text>
+    <text x="1089" y="308" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="308" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="308" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="308" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="308" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="325" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="325" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> This layer provides the    </text>
+    <text x="261" y="325" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="325" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">built-in retry mechanisms   </text>
+    <text x="540" y="325" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="325" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">in throughput efficiency   </text>
+    <text x="810" y="325" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="325" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">undergo mandatory security  </text>
+    <text x="1089" y="325" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="325" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="325" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="325" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="325" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="342" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="342" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> fundamental building blocks</text>
+    <text x="261" y="342" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="342" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">with exponential backoff to </text>
+    <text x="540" y="342" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="342" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">since the introduction of  </text>
+    <text x="810" y="342" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="342" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">training focusing on the    </text>
+    <text x="1089" y="342" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="342" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="342" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="342" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="342" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="359" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="359" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> for service discovery, load</text>
+    <text x="261" y="359" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="359" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">ensure message delivery     </text>
+    <text x="540" y="359" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="359" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">the vectorized query engine</text>
+    <text x="810" y="359" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="359" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">OWASP Top Ten to ensure that</text>
+    <text x="1089" y="359" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="359" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="359" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="359" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="359" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="376" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="376" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> balancing, and             </text>
+    <text x="261" y="376" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="376" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">integrity even during       </text>
+    <text x="540" y="376" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="376" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">in the primary data        </text>
+    <text x="810" y="376" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="376" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">security is integrated into </text>
+    <text x="1089" y="376" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="376" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="376" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="376" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="376" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="393" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="393" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> inter-service communication</text>
+    <text x="261" y="393" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="393" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">transient network or service</text>
+    <text x="540" y="393" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="393" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">warehouse.                 </text>
+    <text x="810" y="393" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="393" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">the initial design phase.   </text>
+    <text x="1089" y="393" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="393" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="393" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="393" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="393" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="410" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="410" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> via highly efficient       </text>
+    <text x="261" y="410" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="410" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">failures.                   </text>
+    <text x="540" y="410" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="810" y="410" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1089" y="410" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="410" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="410" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="410" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="410" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="427" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="427" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> protocol buffers.          </text>
+    <text x="261" y="427" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="540" y="427" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="427" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">Resource utilization       </text>
+    <text x="810" y="427" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="427" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">The implementation of a     </text>
+    <text x="1089" y="427" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="427" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="427" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="427" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="427" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="444" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="261" y="444" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="444" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">Horizontal autoscaling is   </text>
+    <text x="540" y="444" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="444" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">metrics demonstrate that   </text>
+    <text x="810" y="444" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="444" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">robust Identity and Access  </text>
+    <text x="1089" y="444" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="444" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="444" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="444" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="444" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="461" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="461" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> Advanced telemetry and     </text>
+    <text x="261" y="461" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="461" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">triggered automatically     </text>
+    <text x="540" y="461" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="461" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">the transition to          </text>
+    <text x="810" y="461" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="461" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">Management system ensures   </text>
+    <text x="1089" y="461" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="461" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="461" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="461" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="461" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="478" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="478" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> logging integrations allow </text>
+    <text x="261" y="478" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="478" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">based on the depth of the   </text>
+    <text x="540" y="478" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="478" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">serverless compute for     </text>
+    <text x="810" y="478" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="478" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">that the principle of least </text>
+    <text x="1089" y="478" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="478" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="478" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="478" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="478" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="495" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="495" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> for real-time monitoring of</text>
+    <text x="261" y="495" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="495" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">processing queue, ensuring  </text>
+    <text x="540" y="495" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="495" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">intermittent tasks has     </text>
+    <text x="810" y="495" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="495" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">privilege is strictly       </text>
+    <text x="1089" y="495" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="495" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="495" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="495" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="495" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="512" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="512" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> system health and rapid    </text>
+    <text x="261" y="512" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="512" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">consistent performance      </text>
+    <text x="540" y="512" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="512" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">resulted in a thirty       </text>
+    <text x="810" y="512" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="512" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">enforced across all         </text>
+    <text x="1089" y="512" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="512" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="512" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="512" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="512" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="529" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="529" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> identification of          </text>
+    <text x="261" y="529" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="529" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">during unexpected traffic   </text>
+    <text x="540" y="529" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="567" y="529" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">percent cost optimization. </text>
+    <text x="810" y="529" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="837" y="529" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">environments.               </text>
+    <text x="1089" y="529" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="529" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="529" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="529" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="529" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="546" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="546" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> bottlenecks within the     </text>
+    <text x="261" y="546" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="546" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs">spikes.                     </text>
+    <text x="540" y="546" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="810" y="546" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1089" y="546" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="546" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="546" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="546" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="546" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="563" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="563" fill="#ffffff" textLength="252" lengthAdjust="spacingAndGlyphs"> service mesh.              </text>
+    <text x="261" y="563" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="540" y="563" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="810" y="563" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1089" y="563" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1143" y="563" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1224" y="563" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1314" y="563" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="1395" y="563" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="580" fill="#333333" textLength="1404" lengthAdjust="spacingAndGlyphs">└─────────────────────────────┴──────────────────────────────┴─────────────────────────────┴──────────────────────────────┴─────┴────────┴─────────┴───────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-long-headers-and-4-columns-correctly.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-long-headers-and-4-columns-correctly.snap.svg
new file mode 100644
index 0000000000..b4d6353c3c
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-long-headers-and-4-columns-correctly.snap.svg
@@ -0,0 +1,63 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="190" viewBox="0 0 920 190">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="190" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="639" lengthAdjust="spacingAndGlyphs">┌───────────────┬───────────────┬──────────────────┬──────────────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="81" lengthAdjust="spacingAndGlyphs">Very Long</text>
+    <text x="135" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="162" y="36" fill="#89b4fa" textLength="81" lengthAdjust="spacingAndGlyphs">Very Long</text>
+    <text x="279" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="306" y="36" fill="#89b4fa" textLength="144" lengthAdjust="spacingAndGlyphs">Very Long Column</text>
+    <text x="450" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="477" y="36" fill="#89b4fa" textLength="144" lengthAdjust="spacingAndGlyphs">Very Long Column</text>
+    <text x="630" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="53" fill="#89b4fa" textLength="117" lengthAdjust="spacingAndGlyphs">Column Header</text>
+    <text x="135" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="162" y="53" fill="#89b4fa" textLength="117" lengthAdjust="spacingAndGlyphs">Column Header</text>
+    <text x="279" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="306" y="53" fill="#89b4fa" textLength="108" lengthAdjust="spacingAndGlyphs">Header Three</text>
+    <text x="450" y="53" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="477" y="53" fill="#89b4fa" textLength="99" lengthAdjust="spacingAndGlyphs">Header Four</text>
+    <text x="630" y="53" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="70" fill="#89b4fa" textLength="27" lengthAdjust="spacingAndGlyphs">One</text>
+    <text x="135" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="162" y="70" fill="#89b4fa" textLength="27" lengthAdjust="spacingAndGlyphs">Two</text>
+    <text x="279" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="450" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="630" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="639" lengthAdjust="spacingAndGlyphs">├───────────────┼───────────────┼──────────────────┼──────────────────┤</text>
+    <text x="0" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="104" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs"> Data 1.1     </text>
+    <text x="135" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="162" y="104" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Data 1.2     </text>
+    <text x="279" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="306" y="104" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">Data 1.3        </text>
+    <text x="450" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="477" y="104" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs">Data 1.4         </text>
+    <text x="630" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="121" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs"> Data 2.1     </text>
+    <text x="135" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="162" y="121" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Data 2.2     </text>
+    <text x="279" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="306" y="121" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">Data 2.3        </text>
+    <text x="450" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="477" y="121" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs">Data 2.4         </text>
+    <text x="630" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="138" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs"> Data 3.1     </text>
+    <text x="135" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="162" y="138" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Data 3.2     </text>
+    <text x="279" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="306" y="138" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">Data 3.3        </text>
+    <text x="450" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="477" y="138" fill="#ffffff" textLength="153" lengthAdjust="spacingAndGlyphs">Data 3.4         </text>
+    <text x="630" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="155" fill="#333333" textLength="639" lengthAdjust="spacingAndGlyphs">└───────────────┴───────────────┴──────────────────┴──────────────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-mixed-emojis-As-.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-mixed-emojis-As-.snap.svg
new file mode 100644
index 0000000000..707bf53f43
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-mixed-emojis-As-.snap.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="740" height="139" viewBox="0 0 740 139">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="740" height="139" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="486" lengthAdjust="spacingAndGlyphs">┌───────────────┬───────────────────┬────────────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="108" lengthAdjust="spacingAndGlyphs">Mixed 😃 中文</text>
+    <text x="126" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="36" fill="#89b4fa" textLength="144" lengthAdjust="spacingAndGlyphs">Complex 🚀 日本語</text>
+    <text x="297" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="36" fill="#89b4fa" textLength="117" lengthAdjust="spacingAndGlyphs">Text 📝 한국어</text>
+    <text x="450" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="486" lengthAdjust="spacingAndGlyphs">├───────────────┼───────────────────┼────────────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs"> 你好 😃      </text>
+    <text x="126" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="70" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">こんにちは 🚀    </text>
+    <text x="297" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="70" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">안녕하세요 📝  </text>
+    <text x="450" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="87" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs"> World 🌍     </text>
+    <text x="126" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="87" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">Code 💻          </text>
+    <text x="297" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="87" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">Pizza 🍕       </text>
+    <text x="450" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="486" lengthAdjust="spacingAndGlyphs">└───────────────┴───────────────────┴────────────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-only-Asian-chara-.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-only-Asian-chara-.snap.svg
new file mode 100644
index 0000000000..0f51eba244
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-only-Asian-chara-.snap.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="560" height="139" viewBox="0 0 560 139">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="560" height="139" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="450" lengthAdjust="spacingAndGlyphs">┌──────────────┬─────────────────┬───────────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="108" lengthAdjust="spacingAndGlyphs">Chinese 中文</text>
+    <text x="126" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="36" fill="#89b4fa" textLength="135" lengthAdjust="spacingAndGlyphs">Japanese 日本語</text>
+    <text x="288" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="315" y="36" fill="#89b4fa" textLength="117" lengthAdjust="spacingAndGlyphs">Korean 한국어</text>
+    <text x="441" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="450" lengthAdjust="spacingAndGlyphs">├──────────────┼─────────────────┼───────────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs"> 你好        </text>
+    <text x="126" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="70" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs">こんにちは     </text>
+    <text x="288" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="315" y="70" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">안녕하세요    </text>
+    <text x="441" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="87" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs"> 世界        </text>
+    <text x="126" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="153" y="87" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs">世界           </text>
+    <text x="288" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="315" y="87" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">세계          </text>
+    <text x="441" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="450" lengthAdjust="spacingAndGlyphs">└──────────────┴─────────────────┴───────────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-only-emojis-and-.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-only-emojis-and-.snap.svg
new file mode 100644
index 0000000000..1a849696dd
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-a-table-with-only-emojis-and-.snap.svg
@@ -0,0 +1,32 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="560" height="139" viewBox="0 0 560 139">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="560" height="139" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="315" lengthAdjust="spacingAndGlyphs">┌──────────┬───────────┬──────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="63" lengthAdjust="spacingAndGlyphs">Happy 😀</text>
+    <text x="81" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="108" y="36" fill="#89b4fa" textLength="72" lengthAdjust="spacingAndGlyphs">Rocket 🚀</text>
+    <text x="180" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="207" y="36" fill="#89b4fa" textLength="63" lengthAdjust="spacingAndGlyphs">Heart ❤️</text>
+    <text x="279" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="315" lengthAdjust="spacingAndGlyphs">├──────────┼───────────┼──────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs"> Smile 😃</text>
+    <text x="81" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="108" y="70" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">Fire 🔥  </text>
+    <text x="180" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="207" y="70" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">Love 💖  </text>
+    <text x="279" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="87" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs"> Cool 😎 </text>
+    <text x="81" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="108" y="87" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">Star ⭐  </text>
+    <text x="180" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="207" y="87" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">Blue 💙  </text>
+    <text x="279" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="315" lengthAdjust="spacingAndGlyphs">└──────────┴───────────┴──────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-correctly-when-headers-are-em-.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-correctly-when-headers-are-em-.snap.svg
new file mode 100644
index 0000000000..2cc7b1cadd
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-correctly-when-headers-are-em-.snap.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="122" viewBox="0 0 920 122">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="122" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="171" lengthAdjust="spacingAndGlyphs">┌────────┬────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="72" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="162" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="171" lengthAdjust="spacingAndGlyphs">├────────┼────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="63" lengthAdjust="spacingAndGlyphs"> Data 1</text>
+    <text x="72" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="99" y="70" fill="#ffffff" textLength="63" lengthAdjust="spacingAndGlyphs">Data 2 </text>
+    <text x="162" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="171" lengthAdjust="spacingAndGlyphs">└────────┴────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-correctly-when-there-are-more-.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-correctly-when-there-are-more-.snap.svg
new file mode 100644
index 0000000000..452bb1fb12
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-renders-correctly-when-there-are-more-.snap.svg
@@ -0,0 +1,24 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="122" viewBox="0 0 920 122">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="122" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="306" lengthAdjust="spacingAndGlyphs">┌──────────┬──────────┬──────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="72" lengthAdjust="spacingAndGlyphs">Header 1</text>
+    <text x="90" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="117" y="36" fill="#89b4fa" textLength="72" lengthAdjust="spacingAndGlyphs">Header 2</text>
+    <text x="189" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="216" y="36" fill="#89b4fa" textLength="72" lengthAdjust="spacingAndGlyphs">Header 3</text>
+    <text x="297" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="306" lengthAdjust="spacingAndGlyphs">├──────────┼──────────┼──────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="81" lengthAdjust="spacingAndGlyphs"> Data 1  </text>
+    <text x="90" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="117" y="70" fill="#ffffff" textLength="72" lengthAdjust="spacingAndGlyphs">Data 2  </text>
+    <text x="189" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="297" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="306" lengthAdjust="spacingAndGlyphs">└──────────┴──────────┴──────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-strips-bold-markers-from-headers-and-renders-them-correctly.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-strips-bold-markers-from-headers-and-renders-them-correctly.snap.svg
new file mode 100644
index 0000000000..6de776060b
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-strips-bold-markers-from-headers-and-renders-them-correctly.snap.svg
@@ -0,0 +1,25 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="122" viewBox="0 0 920 122">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="122" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="414" lengthAdjust="spacingAndGlyphs">┌─────────────┬───────────────┬──────────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="99" lengthAdjust="spacingAndGlyphs">Bold Header</text>
+    <text x="117" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="144" y="36" fill="#89b4fa" textLength="117" lengthAdjust="spacingAndGlyphs">Normal Header</text>
+    <text x="261" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="36" fill="#89b4fa" textLength="108" lengthAdjust="spacingAndGlyphs">Another Bold</text>
+    <text x="405" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="414" lengthAdjust="spacingAndGlyphs">├─────────────┼───────────────┼──────────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="108" lengthAdjust="spacingAndGlyphs"> Data 1     </text>
+    <text x="117" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="144" y="70" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Data 2       </text>
+    <text x="261" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="288" y="70" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Data 3       </text>
+    <text x="405" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="414" lengthAdjust="spacingAndGlyphs">└─────────────┴───────────────┴──────────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-all-long-columns-correctly.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-all-long-columns-correctly.snap.svg
new file mode 100644
index 0000000000..4b459cfea0
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-all-long-columns-correctly.snap.svg
@@ -0,0 +1,52 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="190" viewBox="0 0 920 190">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="190" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="477" lengthAdjust="spacingAndGlyphs">┌────────────────┬────────────────┬─────────────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Col 1</text>
+    <text x="144" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="171" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Col 2</text>
+    <text x="297" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Col 3</text>
+    <text x="468" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="477" lengthAdjust="spacingAndGlyphs">├────────────────┼────────────────┼─────────────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs"> This is a very</text>
+    <text x="144" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="171" y="70" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">This is also a</text>
+    <text x="297" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="70" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">And this is the </text>
+    <text x="468" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="87" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs"> long text that</text>
+    <text x="144" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="171" y="87" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">very long text</text>
+    <text x="297" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="87" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">third long text </text>
+    <text x="468" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="104" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs"> needs wrapping</text>
+    <text x="144" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="171" y="104" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">that needs    </text>
+    <text x="297" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="104" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">that needs      </text>
+    <text x="468" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="121" fill="#ffffff" textLength="135" lengthAdjust="spacingAndGlyphs"> in column 1   </text>
+    <text x="144" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="171" y="121" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">wrapping in   </text>
+    <text x="297" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="121" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">wrapping in     </text>
+    <text x="468" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="144" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="171" y="138" fill="#ffffff" textLength="126" lengthAdjust="spacingAndGlyphs">column 2      </text>
+    <text x="297" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="324" y="138" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">column 3        </text>
+    <text x="468" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="155" fill="#333333" textLength="477" lengthAdjust="spacingAndGlyphs">└────────────────┴────────────────┴─────────────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-columns-with-punctuation-correctly.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-columns-with-punctuation-correctly.snap.svg
new file mode 100644
index 0000000000..7173ce475f
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-columns-with-punctuation-correctly.snap.svg
@@ -0,0 +1,51 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="190" viewBox="0 0 920 190">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="190" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="495" lengthAdjust="spacingAndGlyphs">┌───────────────────┬───────────────┬─────────────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="117" lengthAdjust="spacingAndGlyphs">Punctuation 1</text>
+    <text x="171" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="198" y="36" fill="#89b4fa" textLength="117" lengthAdjust="spacingAndGlyphs">Punctuation 2</text>
+    <text x="315" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="342" y="36" fill="#89b4fa" textLength="117" lengthAdjust="spacingAndGlyphs">Punctuation 3</text>
+    <text x="486" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="495" lengthAdjust="spacingAndGlyphs">├───────────────────┼───────────────┼─────────────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs"> Start. Stop.     </text>
+    <text x="171" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="198" y="70" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Semi; colon: </text>
+    <text x="315" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="342" y="70" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">At@ Hash#       </text>
+    <text x="486" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="87" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs"> Comma, separated.</text>
+    <text x="171" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="198" y="87" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Pipe| Slash/ </text>
+    <text x="315" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="342" y="87" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">Dollar$         </text>
+    <text x="486" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="104" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs"> Exclamation!     </text>
+    <text x="171" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="198" y="104" fill="#ffffff" textLength="117" lengthAdjust="spacingAndGlyphs">Backslash\   </text>
+    <text x="315" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="342" y="104" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">Percent% Caret^ </text>
+    <text x="486" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="121" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs"> Question?        </text>
+    <text x="171" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="315" y="121" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="342" y="121" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">Ampersand&amp;      </text>
+    <text x="486" y="121" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="138" fill="#ffffff" textLength="162" lengthAdjust="spacingAndGlyphs"> hyphen-ated      </text>
+    <text x="171" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="315" y="138" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="342" y="138" fill="#ffffff" textLength="144" lengthAdjust="spacingAndGlyphs">Asterisk*       </text>
+    <text x="486" y="138" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="155" fill="#333333" textLength="495" lengthAdjust="spacingAndGlyphs">└───────────────────┴───────────────┴─────────────────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-long-cell-content-correctly.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-long-cell-content-correctly.snap.svg
new file mode 100644
index 0000000000..7f7b67a7dd
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-long-cell-content-correctly.snap.svg
@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="156" viewBox="0 0 920 156">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="156" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="423" lengthAdjust="spacingAndGlyphs">┌───────┬─────────────────────────────┬───────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Col 1</text>
+    <text x="63" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="90" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Col 2</text>
+    <text x="333" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="360" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Col 3</text>
+    <text x="414" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="423" lengthAdjust="spacingAndGlyphs">├───────┼─────────────────────────────┼───────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs"> Short</text>
+    <text x="63" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="90" y="70" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">This is a very long cell   </text>
+    <text x="333" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="360" y="70" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs">Short </text>
+    <text x="414" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="63" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="90" y="87" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">content that should wrap to</text>
+    <text x="333" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="414" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="63" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="90" y="104" fill="#ffffff" textLength="243" lengthAdjust="spacingAndGlyphs">multiple lines             </text>
+    <text x="333" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="414" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="121" fill="#333333" textLength="423" lengthAdjust="spacingAndGlyphs">└───────┴─────────────────────────────┴───────┘</text>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-mixed-long-and-short-columns-correctly.snap.svg b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-mixed-long-and-short-columns-correctly.snap.svg
new file mode 100644
index 0000000000..3ff0542a26
--- /dev/null
+++ b/packages/cli/src/ui/utils/__snapshots__/TableRenderer-TableRenderer-wraps-mixed-long-and-short-columns-correctly.snap.svg
@@ -0,0 +1,36 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="920" height="156" viewBox="0 0 920 156">
+  <style>
+    text { font-family: Consolas, "Courier New", monospace; font-size: 14px; dominant-baseline: text-before-edge; white-space: pre; }
+  </style>
+  <rect width="920" height="156" fill="#000000" />
+  <g transform="translate(10, 10)">
+    <text x="0" y="19" fill="#333333" textLength="405" lengthAdjust="spacingAndGlyphs">┌───────┬──────────────────────────┬────────┐</text>
+    <text x="0" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="18" y="36" fill="#89b4fa" textLength="45" lengthAdjust="spacingAndGlyphs">Short</text>
+    <text x="63" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="90" y="36" fill="#89b4fa" textLength="36" lengthAdjust="spacingAndGlyphs">Long</text>
+    <text x="306" y="36" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="333" y="36" fill="#89b4fa" textLength="54" lengthAdjust="spacingAndGlyphs">Medium</text>
+    <text x="396" y="36" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="53" fill="#333333" textLength="405" lengthAdjust="spacingAndGlyphs">├───────┼──────────────────────────┼────────┤</text>
+    <text x="0" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="9" y="70" fill="#ffffff" textLength="54" lengthAdjust="spacingAndGlyphs"> Tiny </text>
+    <text x="63" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="90" y="70" fill="#ffffff" textLength="216" lengthAdjust="spacingAndGlyphs">This is a very long text</text>
+    <text x="306" y="70" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="333" y="70" fill="#ffffff" textLength="63" lengthAdjust="spacingAndGlyphs">Not so </text>
+    <text x="396" y="70" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="63" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="90" y="87" fill="#ffffff" textLength="216" lengthAdjust="spacingAndGlyphs">that definitely needs to</text>
+    <text x="306" y="87" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="333" y="87" fill="#ffffff" textLength="63" lengthAdjust="spacingAndGlyphs">long   </text>
+    <text x="396" y="87" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="63" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="90" y="104" fill="#ffffff" textLength="216" lengthAdjust="spacingAndGlyphs">wrap to the next line   </text>
+    <text x="306" y="104" fill="#333333" textLength="27" lengthAdjust="spacingAndGlyphs"> │ </text>
+    <text x="396" y="104" fill="#333333" textLength="9" lengthAdjust="spacingAndGlyphs">│</text>
+    <text x="0" y="121" fill="#333333" textLength="405" lengthAdjust="spacingAndGlyphs">└───────┴──────────────────────────┴────────┘</text>
+  </g>
+</svg>
\ No newline at end of file