feat(markdown): improve table rendering with markdown support

- Add visible length calculation for markdown-formatted text
- Implement proper truncation and wrapping of markdown content
- Support inline markdown parsing in table cells
- Export previously internal TextSegment interface and parse function

Author: moazbuilds

src/cli/tui/routes/workflow/components/shared/log-line.tsx

@@ -80,7 +80,7 @@ export interface LogLineProps {
 /**
  * Styled text segment from inline markdown parsing
  */
-interface TextSegment {
+export interface TextSegment {
   text: string
   bold?: boolean
   code?: boolean
@@ -90,7 +90,7 @@ interface TextSegment {
  * Parse inline markdown and return styled segments
  * Handles **bold** and `code` patterns
  */
-function parseInlineMarkdown(text: string): TextSegment[] {
+export function parseInlineMarkdown(text: string): TextSegment[] {
   const segments: TextSegment[] = []
   const regex = /(\*\*([^*]+)\*\*|`([^`]+)`)/g
   let lastIndex = 0

src/cli/tui/routes/workflow/components/shared/log-table.tsx

@@ -12,6 +12,7 @@ import { useTerminalDimensions } from "@opentui/solid"
 import { useTheme } from "@tui/shared/context/theme"
 import { useUIState } from "../../context/ui-state"
 import { parseMarkdownTable, renderBoxTable } from "./markdown-table"
+import { parseInlineMarkdown } from "./log-line"
 
 export interface LogTableProps {
   /** Raw markdown table lines */
@@ -20,6 +21,32 @@ export interface LogTableProps {
   maxWidth?: number
 }
 
+// Box-drawing characters for detecting borders
+const BORDER_CHARS = new Set(['┌', '┐', '└', '┘', '┬', '┴', '├', '┤', '┼', '─', '│'])
+
+/**
+ * Parse a line into border and content segments for styling
+ */
+function parseLineSegments(line: string): { text: string; isBorder: boolean }[] {
+  const segments: { text: string; isBorder: boolean }[] = []
+  let current = ''
+  let isBorder = false
+
+  for (const char of line) {
+    const charIsBorder = BORDER_CHARS.has(char)
+    if (charIsBorder !== isBorder && current) {
+      segments.push({ text: current, isBorder })
+      current = ''
+    }
+    isBorder = charIsBorder
+    current += char
+  }
+  if (current) {
+    segments.push({ text: current, isBorder })
+  }
+  return segments
+}
+
 /**
  * Renders a markdown table with box-drawing characters
  */
@@ -50,16 +77,46 @@ export function LogTable(props: LogTableProps) {
     <box flexDirection="column">
       <For each={renderedLines()}>
         {(line, index) => {
+          const segments = parseLineSegments(line)
           // First line (header row after top border) gets bold
           const isHeaderRow = () => index() === 1 && renderedLines().length > 3
 
           return (
-            <text
-              fg={themeCtx.theme.text}
-              attributes={isHeaderRow() ? TextAttributes.BOLD : TextAttributes.NONE}
-            >
-              {line}
-            </text>
+            <box flexDirection="row">
+              <For each={segments}>
+                {(segment) => {
+                  // For border segments, render as-is
+                  if (segment.isBorder) {
+                    return (
+                      <text
+                        fg={themeCtx.theme.textMuted}
+                        attributes={TextAttributes.NONE}
+                      >
+                        {segment.text}
+                      </text>
+                    )
+                  }
+                  // For content segments, parse inline markdown
+                  const inlineSegments = parseInlineMarkdown(segment.text)
+                  return (
+                    <For each={inlineSegments}>
+                      {(inline) => (
+                        <text
+                          fg={inline.code ? themeCtx.theme.purple : themeCtx.theme.text}
+                          attributes={
+                            (isHeaderRow() || inline.bold)
+                              ? TextAttributes.BOLD
+                              : TextAttributes.NONE
+                          }
+                        >
+                          {inline.text}
+                        </text>
+                      )}
+                    </For>
+                  )
+                }}
+              </For>
+            </box>
           )
         }}
       </For>
@@ -93,52 +150,47 @@ export function LogTableStyled(props: LogTableProps & { borderColor?: number })
     return renderBoxTable(parsed, maxWidth())
   })
 
-  // Detect which parts of a line are borders vs content
-  const parseLine = (line: string) => {
-    const segments: { text: string; isBorder: boolean }[] = []
-    let current = ''
-    let isBorder = false
-    const borderChars = new Set(['┌', '┐', '└', '┘', '┬', '┴', '├', '┤', '┼', '─', '│'])
-
-    for (const char of line) {
-      const charIsBorder = borderChars.has(char)
-      if (charIsBorder !== isBorder && current) {
-        segments.push({ text: current, isBorder })
-        current = ''
-      }
-      isBorder = charIsBorder
-      current += char
-    }
-    if (current) {
-      segments.push({ text: current, isBorder })
-    }
-    return segments
-  }
-
   return (
     <box flexDirection="column">
       <For each={renderedLines()}>
         {(line, index) => {
-          const segments = parseLine(line)
+          const segments = parseLineSegments(line)
           const isHeaderRow = () => index() === 1 && renderedLines().length > 3
 
           return (
             <box flexDirection="row">
               <For each={segments}>
-                {(segment) => (
-                  <text
-                    fg={segment.isBorder
-                      ? (props.borderColor ?? themeCtx.theme.textMuted)
-                      : themeCtx.theme.text
-                    }
-                    attributes={isHeaderRow() && !segment.isBorder
-                      ? TextAttributes.BOLD
-                      : TextAttributes.NONE
-                    }
-                  >
-                    {segment.text}
-                  </text>
-                )}
+                {(segment) => {
+                  // For border segments, render as-is
+                  if (segment.isBorder) {
+                    return (
+                      <text
+                        fg={props.borderColor ?? themeCtx.theme.textMuted}
+                        attributes={TextAttributes.NONE}
+                      >
+                        {segment.text}
+                      </text>
+                    )
+                  }
+                  // For content segments, parse inline markdown
+                  const inlineSegments = parseInlineMarkdown(segment.text)
+                  return (
+                    <For each={inlineSegments}>
+                      {(inline) => (
+                        <text
+                          fg={inline.code ? themeCtx.theme.purple : themeCtx.theme.text}
+                          attributes={
+                            (isHeaderRow() || inline.bold)
+                              ? TextAttributes.BOLD
+                              : TextAttributes.NONE
+                          }
+                        >
+                          {inline.text}
+                        </text>
+                      )}
+                    </For>
+                  )
+                }}
               </For>
             </box>
           )

src/cli/tui/routes/workflow/components/shared/markdown-table.ts

@@ -141,22 +141,60 @@ export function parseMarkdownTable(lines: string[]): ParsedTable | null {
   }
 }
 
+/**
+ * Calculate the visible length of text after stripping inline markdown
+ * Removes **bold** and `code` markers from length calculation
+ */
+function visibleLength(text: string): number {
+  // Remove **bold** markers (but keep the content)
+  let stripped = text.replace(/\*\*([^*]+)\*\*/g, '$1')
+  // Remove `code` markers (but keep the content)
+  stripped = stripped.replace(/`([^`]+)`/g, '$1')
+  return stripped.length
+}
+
+/**
+ * Strip inline markdown markers from text
+ */
+function stripInlineMarkdown(text: string): string {
+  let stripped = text.replace(/\*\*([^*]+)\*\*/g, '$1')
+  stripped = stripped.replace(/`([^`]+)`/g, '$1')
+  return stripped
+}
+
+/**
+ * Truncate text to a visible width, stripping markdown if needed
+ * Returns plain text truncated to the specified visible width
+ */
+function truncateToVisibleWidth(text: string, width: number): string {
+  // First strip markdown to get clean text for truncation
+  const stripped = stripInlineMarkdown(text)
+  if (stripped.length <= width) {
+    return stripped
+  }
+  // Truncate and add ellipsis indicator if there's room
+  if (width > 3) {
+    return stripped.slice(0, width - 1) + '…'
+  }
+  return stripped.slice(0, width)
+}
+
 /**
  * Calculate the width needed for each column
  */
 function calculateColumnWidths(headers: string[], rows: string[][], columnCount: number): number[] {
   const widths: number[] = new Array(columnCount).fill(0)
 
-  // Check header widths
+  // Check header widths (use visible length)
   headers.forEach((h, i) => {
-    widths[i] = Math.max(widths[i], h.length)
+    widths[i] = Math.max(widths[i], visibleLength(h))
   })
 
-  // Check row widths
+  // Check row widths (use visible length)
   rows.forEach(row => {
     row.forEach((cell, i) => {
       if (i < columnCount) {
-        widths[i] = Math.max(widths[i], cell.length)
+        widths[i] = Math.max(widths[i], visibleLength(cell))
       }
     })
   })
@@ -167,10 +205,16 @@ function calculateColumnWidths(headers: string[], rows: string[][], columnCount:
 
 /**
  * Pad a string according to alignment
+ * Note: text may contain markdown markers, so we use visible length for padding
  */
 function padCell(text: string, width: number, align: ColumnAlignment): string {
-  const padding = width - text.length
-  if (padding <= 0) return text.slice(0, width)
+  const textVisibleLen = visibleLength(text)
+  const padding = width - textVisibleLen
+
+  // If text is too long, truncate it properly (handles markdown)
+  if (padding < 0) {
+    return truncateToVisibleWidth(text, width)
+  }
 
   switch (align) {
     case 'center': {
@@ -186,36 +230,51 @@ function padCell(text: string, width: number, align: ColumnAlignment): string {
   }
 }
 
+/**
+ * Break a long word into chunks that fit within width
+ * Strips markdown to avoid breaking mid-marker
+ */
+function breakLongWord(word: string, width: number): string[] {
+  const stripped = stripInlineMarkdown(word)
+  const chunks: string[] = []
+  for (let i = 0; i < stripped.length; i += width) {
+    chunks.push(stripped.slice(i, i + width))
+  }
+  return chunks.length > 0 ? chunks : [stripped]
+}
+
 /**
  * Wrap text to fit within a given width
+ * Uses visible length (excluding markdown markers) for width calculations
  */
 function wrapText(text: string, width: number): string[] {
   if (width <= 0) return [text]
-  if (text.length <= width) return [text]
+  if (visibleLength(text) <= width) return [text]
 
   const lines: string[] = []
   const words = text.split(' ')
   let currentLine = ''
 
   for (const word of words) {
+    const wordVisibleLen = visibleLength(word)
+    const currentLineVisibleLen = visibleLength(currentLine)
+
     if (currentLine.length === 0) {
-      // First word - if too long, break it
-      if (word.length > width) {
-        for (let i = 0; i < word.length; i += width) {
-          lines.push(word.slice(i, i + width))
-        }
+      // First word - if too long, break it into chunks
+      if (wordVisibleLen > width) {
+        const chunks = breakLongWord(word, width)
+        lines.push(...chunks)
       } else {
         currentLine = word
       }
-    } else if (currentLine.length + 1 + word.length <= width) {
+    } else if (currentLineVisibleLen + 1 + wordVisibleLen <= width) {
       currentLine += ' ' + word
     } else {
       lines.push(currentLine)
       // Handle word longer than width
-      if (word.length > width) {
-        for (let i = 0; i < word.length; i += width) {
-          lines.push(word.slice(i, i + width))
-        }
+      if (wordVisibleLen > width) {
+        const chunks = breakLongWord(word, width)
+        lines.push(...chunks)
         currentLine = ''
       } else {
         currentLine = word