fix: improve message block spacing and layout

Comprehensive improvements to message block spacing and alignment:

Layout improvements:
- Use parent container gap: 1 for consistent spacing between all blocks
- Remove all conditional margin logic from tool groups and text blocks
- Remove paddingBottom from tool-call-item titles
- Changes AI message metadata alignment from flex-start to flex-end
- Reorders credit display to show credits before completion time

Code quality:
- Add hasTextContent() helper function for cleaner type checking
- Change text content to always use .trim() instead of trimTrailingNewlines
- Skip rendering empty text blocks to prevent phantom spacing

Result: Consistent single-line spacing between all message blocks during
both streaming and completed states, with improved visual alignment.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

Author: brandonkachen

cli/src/components/message-block.tsx

@@ -582,10 +582,7 @@ export const MessageBlock = memo(
                   style={{
                     flexDirection: 'column',
                     gap: 0,
-                    // Avoid double spacing with the agent header, which already
-                    // adds bottom padding. Only add top margin if this group is
-                    // not the first rendered child.
-                    marginTop: nodes.length === 0 ? 0 : 1,
+                    marginTop: 0,
                     marginBottom: hasRenderableAfter ? 1 : 0,
                   }}
                 >
@@ -802,7 +799,7 @@ export const MessageBlock = memo(
                 style={{
                   flexDirection: 'column',
                   gap: 0,
-                  marginTop: 1,
+                  marginTop: 0,
                   marginBottom: hasRenderableAfter ? 1 : 0,
                 }}
               >
@@ -851,7 +848,7 @@ export const MessageBlock = memo(
                   wrapMode: 'none',
                   marginTop: 0,
                   marginBottom: 0,
-                  alignSelf: 'flex-start',
+                  alignSelf: 'flex-end',
                 }}
               >
                 <ElapsedTimer
@@ -868,11 +865,11 @@ export const MessageBlock = memo(
                   fg: theme.secondary,
                   marginTop: 0,
                   marginBottom: 0,
-                  alignSelf: 'flex-start',
+                  alignSelf: 'flex-end',
                 }}
               >
+                {credits && `${credits} credits • `}
                 {completionTime}
-                {credits && ` • ${credits} credits`}
               </text>
             )}
           </>

cli/src/components/tools/tool-call-item.tsx

@@ -194,7 +194,7 @@ export const ToolCallItem = ({
             paddingLeft: 0,
             paddingRight: 0,
             paddingTop: 0,
-            paddingBottom: isCollapsed ? 0 : dense ? 0 : 1,
+            paddingBottom: 0,
             width: '100%',
           }}
           onMouseDown={onToggle}