feat(cli): add GFM support with strikethrough, task lists, and tables

- Add remark-gfm and remark-breaks dependencies
- Add tests for strikethrough, task lists, and table rendering
- Refactor validation error blocks to inline format

Author: brandonkachen

bun.lock

@@ -44,6 +44,8 @@
     "string-width": "^7.2.0",
     "react": "^19.0.0",
     "react-reconciler": "^0.32.0",
+    "remark-breaks": "^4.0.0",
+    "remark-gfm": "^4.0.1",
     "remark-parse": "^11.0.0",
     "unified": "^11.0.0",
     "yoga-layout": "^3.2.1",

cli/package.json

@@ -152,4 +152,61 @@ describe('markdown renderer', () => {
     expect(flattenChildren(boldNode!.props.children)).toEqual(['done'])
     expect(nodes[nodes.length - 1]).toBe('```js\nconsole.log(')
   })
+
+  test('renders strikethrough text with GFM', () => {
+    const output = renderMarkdown('This is ~~deleted~~ text')
+    const nodes = flattenNodes(output)
+
+    expect(nodes[0]).toBe('This is ')
+
+    const strikethrough = nodes[1] as React.ReactElement
+    expect(strikethrough.props.attributes).toBe(TextAttributes.DIM)
+    expect(flattenChildren(strikethrough.props.children)).toEqual(['deleted'])
+
+    expect(nodes[2]).toBe(' text')
+  })
+
+  test('renders task lists with GFM', () => {
+    const output = renderMarkdown('- [ ] Todo\n- [x] Done')
+    const nodes = flattenNodes(output)
+
+    const checkboxSpans = nodes.filter(
+      (node): node is React.ReactElement =>
+        React.isValidElement(node) &&
+        node.type === 'span' &&
+        (flattenChildren(node.props.children).join('') === '[ ] ' ||
+          flattenChildren(node.props.children).join('') === '[x] '),
+    )
+
+    expect(checkboxSpans).toHaveLength(2)
+  })
+
+  test('renders tables with GFM', () => {
+    const markdown = `| Name | Age |
+| ---- | --- |
+| John | 30  |
+| Jane | 25  |`
+    const output = renderMarkdown(markdown)
+    const nodes = flattenNodes(output)
+
+    // Check that table structure is rendered (pipes and separators)
+    const textContent = nodes
+      .map((node) => {
+        if (typeof node === 'string') return node
+        if (React.isValidElement(node)) {
+          return flattenChildren(node.props.children).join('')
+        }
+        return ''
+      })
+      .join('')
+
+    expect(textContent).toContain('Name')
+    expect(textContent).toContain('Age')
+    expect(textContent).toContain('John')
+    expect(textContent).toContain('Jane')
+    expect(textContent).toContain('30')
+    expect(textContent).toContain('25')
+    expect(textContent).toContain('|')
+    expect(textContent).toContain('---')
+  })
 })

cli/src/utils/__tests__/markdown-renderer.test.tsx

@@ -59,32 +59,21 @@ export function createValidationErrorBlocks(
         .replace(/\\/g, '/')
       const filePath = agentInfo.filePath
 
-      // Simple layout: file path first, then agent ID and error
+      // Layout matching renderRepoPathInfo: agent ID, file path link, error message
       blocks.push({
         type: 'html',
         render: ({ textColor }) => (
           <box style={{ flexDirection: 'column', width: '100%' }}>
-            <box style={{ flexDirection: 'row', gap: 0, width: '100%' }}>
+            <text wrap={true} style={{ fg: textColor }}>
+              {agentId} in{' '}
               <TerminalLink
                 text={relativePathFromRoot}
-                containerStyle={{
-                  width: 'auto',
-                  flexDirection: 'row',
-                }}
-                formatLines={(text) => [text]}
-                underlineOnHover
+                color="#3b82f6"
+                inline={true}
                 onActivate={() => openFileAtPath(filePath)}
               />
-              <text style={{ fg: textColor }} wrap={false}>
-                {' '}
-                • {agentId}
-              </text>
-            </box>
-            <box style={{ paddingLeft: 2, width: '100%' }}>
-              <text style={{ fg: textColor }} wrap>
-                {errorMsg}
-              </text>
-            </box>
+              , {errorMsg}
+            </text>
           </box>
         ),
       })