fix(cli): improve text rendering and user message styling

- Make user message vertical line extend full height with calculated line count
- Italicize user input text for better visual distinction
- Fix markdown paragraph spacing (single newlines instead of double)
- Add spacing between consecutive text blocks to prevent bleeding
- Update userLine colors for better visibility in both themes

Author: brandonkachen

cli/src/components/message-block.tsx

@@ -448,10 +448,11 @@ export const MessageBlock = ({
                 : rawContent
               const prevBlock = idx > 0 ? blocks[idx - 1] : null
               const marginTop =
-                prevBlock &&
-                (prevBlock.type === 'tool' || prevBlock.type === 'agent')
-                  ? 0
-                  : 0
+                prevBlock && prevBlock.type === 'text'
+                  ? 1
+                  : prevBlock && (prevBlock.type === 'tool' || prevBlock.type === 'agent')
+                    ? 0
+                    : 0
               const blockTextColor = block.color ?? textColor
             return (
               <text key={renderKey} style={{ fg: blockTextColor, marginTop }}>
@@ -497,6 +498,7 @@ export const MessageBlock = ({
             <text
               key={`message-content-${messageId}`}
               style={{ fg: textColor }}
+              attributes={isUser ? TextAttributes.ITALIC : undefined}
             >
               {displayContent}
             </text>

cli/src/hooks/use-message-renderer.tsx

@@ -280,6 +280,11 @@ export const useMessageRenderer = (
       const hasAgentChildren = agentChildren.length > 0
       const showVerticalLine = isUser
 
+      // Calculate height for vertical line
+      const contentLines = message.content ? message.content.split('\n').length : 1
+      const verticalLineHeight = Math.max(1, contentLines + 1) // +1 for timestamp
+      const verticalLineText = Array(verticalLineHeight).fill('│').join('\n')
+
       return (
         <box
           key={message.id}
@@ -307,16 +312,14 @@ export const useMessageRenderer = (
                 }}
               >
                 <box
-                  border
-                  borderStyle="single"
-                  borderColor={lineColor}
-                  customBorderChars={verticalLineBorderChars}
                   style={{
                     width: 1,
-                    marginTop: 0,
-                    marginBottom: 0,
+                    flexShrink: 0,
+                    flexDirection: 'column',
                   }}
-                />
+                >
+                  <text fg={lineColor}>{verticalLineText}</text>
+                </box>
                 <box
                   style={{
                     backgroundColor: 'transparent',

cli/src/utils/markdown-renderer.tsx

@@ -87,7 +87,7 @@ function nodeToPlainText(node: Content | Root): string {
 
     case 'paragraph':
       return (
-        (node as Paragraph).children.map(nodeToPlainText).join('') + '\n\n'
+        (node as Paragraph).children.map(nodeToPlainText).join('') + '\n'
       )
 
     case 'text':
@@ -100,7 +100,7 @@ function nodeToPlainText(node: Content | Root): string {
       const heading = node as Heading
       const prefix = '#'.repeat(Math.max(1, Math.min(heading.depth, 6)))
       const content = heading.children.map(nodeToPlainText).join('')
-      return `${prefix} ${content}\n\n`
+      return `${prefix} ${content}\n`
     }
 
     case 'list': {
@@ -115,7 +115,7 @@ function nodeToPlainText(node: Content | Root): string {
               .trimEnd()
             return marker + text
           })
-          .join('\n') + '\n\n'
+          .join('\n') + '\n'
       )
     }
 
@@ -129,13 +129,13 @@ function nodeToPlainText(node: Content | Root): string {
       const content = blockquote.children
         .map((child) => nodeToPlainText(child).replace(/^/gm, '> '))
         .join('')
-      return `${content}\n\n`
+      return `${content}\n`
     }
 
     case 'code': {
       const code = node as Code
       const header = code.lang ? `\`\`\`${code.lang}\n` : '```\n'
-      return `${header}${code.value}\n\`\`\`\n\n`
+      return `${header}${code.value}\n\`\`\`\n`
     }
 
     default:

cli/src/utils/theme-system.ts

@@ -66,7 +66,7 @@ const BASE_THEMES: Record<'dark' | 'light', ChatTheme> = {
     accentText: '#facc15',
     panelBg: 'transparent',
     aiLine: '#34d399',
-    userLine: '#38bdf8',
+    userLine: '#0ea5e9',
     timestampAi: '#4ade80',
     timestampUser: '#60a5fa',
     messageAiText: '#9aa5ce',
@@ -124,7 +124,7 @@ const BASE_THEMES: Record<'dark' | 'light', ChatTheme> = {
     accentText: '#f59e0b',
     panelBg: 'transparent',
     aiLine: '#059669',
-    userLine: '#3b82f6',
+    userLine: '#0284c7',
     timestampAi: '#047857',
     timestampUser: '#2563eb',
     messageAiText: '#9aa5ce',