improve CLI rendering: faster loading indicators, better markdown

parsing, and null safety

- Reduce loading indicator threshold from 1000ms to 50ms for more
responsive feedback - Enable breaks in markdown-it to preserve newlines
in code content - Add indented code block detection for consistent
handling - Improve tool renderer null safety and refined newline
trimming logic - Add comprehensive null checks in XML stream parser to
prevent crashes

🤖 Generated with Codebuff Co-Authored-By: Codebuff
<noreply@codebuff.com>

Author: brandonkachen

npm-app/src/display/markdown-renderer.ts

@@ -67,7 +67,7 @@ export class MarkdownStreamRenderer {
     '●•·',
     '•··',
   ]
-  private readonly indicatorThresholdMs = 1000
+  private readonly indicatorThresholdMs = 50
   private readonly indicatorUpdateMs = 150
 
   constructor(opts: MarkdownStreamRendererOptions = {}) {
@@ -80,7 +80,7 @@ export class MarkdownStreamRenderer {
     // Initialize markdown-it with terminal renderer
     this.md = new MarkdownIt({
       html: false,
-      breaks: false,
+      breaks: true, // Enable breaks to preserve newlines in code-like content
       linkify: false,
       typographer: false,
       highlight: this.syntaxHighlight
@@ -219,6 +219,11 @@ export class MarkdownStreamRenderer {
       return 'code-fence'
     }
 
+    // Indented code block (4+ spaces)
+    if (line.match(/^    /) && trimmed.length > 0) {
+      return 'code-fence' // Treat as code-fence for consistent handling
+    }
+
     // Heading
     if (trimmed.match(/^#+\s/)) {
       return 'heading'
@@ -291,9 +296,14 @@ export class MarkdownStreamRenderer {
         )
 
       case 'code-fence':
+        // Handle fenced code blocks
         if (block.metadata?.fenceMarker) {
           return currentLine.trim() === block.metadata.fenceMarker
         }
+        // Handle indented code blocks - complete when next line isn't indented
+        if (!block.metadata?.fenceMarker) {
+          return !nextLine?.match(/^    /) && trimmedNext !== ''
+        }
         return false
 
       case 'list':
@@ -636,9 +646,9 @@ export class MarkdownStreamRenderer {
         )
           rightNL++
 
-        // Don't add extra newlines - rely on cleanup to normalize spacing
-        const needLeft = 0
-        const needRight = 0
+        // Add padding: ensure at least one blank line before and after code blocks
+        const needLeft = leftNL < 2 ? 2 - leftNL : 0
+        const needRight = rightNL < 2 ? 2 - rightNL : 0
 
         return `${'\n'.repeat(needLeft)}${block}${'\n'.repeat(needRight)}`
       },
@@ -647,15 +657,6 @@ export class MarkdownStreamRenderer {
     rendered = rendered.replace(/^   \x1b\[0m\* /gm, '   \x1b[0m• ')
     rendered = rendered.replace(/^   \x1b\[0m(\d+) /gm, '   \x1b[0m$1. ')
 
-    // Normalize spacing around code blocks to ensure consistent single blank lines
-    // Pattern: paragraph\n\n\ncode -> paragraph\n\ncode (single blank line before)
-    rendered = rendered.replace(
-      /(\x1b\[0m\n)\n+(\x1b\[0m\n\x1b\[48;5;236m)/g,
-      '$1\n$2',
-    )
-    // Pattern: code\n\n\nparagraph -> code\n\nparagraph (single blank line after)
-    rendered = rendered.replace(/(\x1b\[0m\n)\n+(\x1b\[0m[^0])/g, '$1\n$2')
-
     // Preserve spacing around agent completion messages (lines with dashes)
     // First, protect agent completion messages from normalization
     const protectedLines: string[] = []
@@ -681,7 +682,7 @@ export class MarkdownStreamRenderer {
     protectionIndex = 0
     rendered = rendered.replace(
       /__PROTECTED_AGENT_MESSAGE_(\d+)__/g,
-      () => protectedLines[protectionIndex++],
+      (_, idx) => protectedLines[+idx] ?? '',
     )
 
     return rendered

npm-app/src/utils/tool-renderers.ts

@@ -97,7 +97,11 @@ export const defaultToolCallRenderer: ToolCallRenderer = {
   },
 
   onParamChunk: (content, paramName, toolName) => {
-    if (toolStart && content.startsWith('\n')) content = content.slice(1)
+    if (content == null || content === '') return null
+    // Only trim the first newline if there are multiple leading newlines
+    if (toolStart && content.startsWith('\n\n')) {
+      content = content.slice(1)
+    }
     toolStart = false
     return gray(content)
   },

npm-app/src/utils/xml-stream-parser.ts

@@ -81,10 +81,15 @@ export function createXMLStreamParser(
 
   // Set up event handlers
   parser.on('tagopen', (tag) => {
-    inToolCallTag = true
+    if (tag.name === toolXmlName) {
+      inToolCallTag = true
+    }
   })
 
   parser.on('text', (data) => {
+    if (!data || typeof data.contents !== 'string') {
+      return
+    }
     if (!inToolCallTag) {
       const outs = ensureRenderer().write(data.contents)
       for (const out of outs) {
@@ -133,7 +138,11 @@ export function createXMLStreamParser(
 
       // handle tool params
       const stringValue =
-        typeof value === 'string' ? value : JSON.stringify(value)
+        value == null
+          ? ''
+          : typeof value === 'string'
+            ? value
+            : JSON.stringify(value) ?? ''
       if (key === endsAgentStepParam) {
         continue
       }
@@ -144,7 +153,7 @@ export function createXMLStreamParser(
           const output = toolRenderer.onParamEnd(
             currentParam,
             toolName,
-            result[currentParam],
+            result[currentParam] ?? '',
           )
           if (typeof output === 'string') {
             parser.push(output)
@@ -172,7 +181,7 @@ export function createXMLStreamParser(
           }
         }
       }
-      if (toolRenderer.onParamChunk) {
+      if (toolRenderer.onParamChunk && stringValue !== '') {
         const output = toolRenderer.onParamChunk(stringValue, key, toolName)
         if (typeof output === 'string') {
           parser.push(output)
@@ -187,9 +196,11 @@ export function createXMLStreamParser(
           const output = toolRenderer.onParamEnd(
             key,
             toolName,
-            typeof result[key] === 'string'
-              ? result[key]
-              : JSON.stringify(result[key]),
+            result[key] == null
+              ? ''
+              : typeof result[key] === 'string'
+                ? result[key]
+                : JSON.stringify(result[key]) ?? '',
           )
           if (typeof output === 'string') {
             parser.push(output)
@@ -205,7 +216,7 @@ export function createXMLStreamParser(
     params = Object.fromEntries(
       Object.entries(result).map(([k, v]) => [
         k,
-        typeof v === 'string' ? v : JSON.stringify(v),
+        v == null ? '' : typeof v === 'string' ? v : JSON.stringify(v) ?? '',
       ]),
     )
   })
@@ -222,7 +233,7 @@ export function createXMLStreamParser(
         const output = toolRenderer.onParamEnd(
           currentParam,
           toolName,
-          params[currentParam],
+          params[currentParam] ?? '',
         )
         if (typeof output === 'string') {
           parser.push(output)