Add spacing between text and tool groups

Author: brandonkachen

cli/src/components/message-block.tsx

@@ -426,6 +426,26 @@ export const MessageBlock = memo(
       )
     }
 
+    const isRenderableTimelineBlock = (
+      block: ContentBlock | null | undefined,
+    ): boolean => {
+      if (!block) return false
+      if (block.type === 'tool') {
+        return (block as any).toolName !== 'end_turn'
+      }
+      switch (block.type) {
+        case 'text':
+        case 'html':
+        case 'agent':
+        case 'agent-list':
+        case 'plan':
+        case 'mode-divider':
+          return true
+        default:
+          return false
+      }
+    }
+
     function renderAgentListBranch(
       agentListBlock: Extract<ContentBlock, { type: 'agent-list' }>,
       keyPrefix: string,
@@ -613,25 +633,12 @@ export const MessageBlock = memo(
               Boolean,
             ) as React.ReactNode[]
             if (nonNullGroupNodes.length > 0) {
-              const isRenderableBlock = (b: ContentBlock): boolean => {
-                if (b.type === 'tool') {
-                  return (b as any).toolName !== 'end_turn'
-                }
-                switch (b.type) {
-                  case 'text':
-                  case 'html':
-                  case 'agent':
-                  case 'agent-list':
-                    return true
-                  default:
-                    return false
-                }
-              }
-
-              // Check for any subsequent renderable blocks without allocating a slice
+              const hasRenderableBefore =
+                start > 0 &&
+                isRenderableTimelineBlock(nestedBlocks[start - 1] as any)
               let hasRenderableAfter = false
               for (let i = nestedIdx; i < nestedBlocks.length; i++) {
-                if (isRenderableBlock(nestedBlocks[i] as any)) {
+                if (isRenderableTimelineBlock(nestedBlocks[i] as any)) {
                   hasRenderableAfter = true
                   break
                 }
@@ -642,7 +649,7 @@ export const MessageBlock = memo(
                   style={{
                     flexDirection: 'column',
                     gap: 0,
-                    marginTop: 0,
+                    marginTop: hasRenderableBefore ? 1 : 0,
                     marginBottom: hasRenderableAfter ? 1 : 0,
                   }}
                 >
@@ -834,21 +841,14 @@ export const MessageBlock = memo(
             Boolean,
           ) as React.ReactNode[]
           if (nonNullGroupNodes.length > 0) {
+            const hasRenderableBefore =
+              start > 0 &&
+              isRenderableTimelineBlock(sourceBlocks[start - 1] as any)
+
             // Check for any subsequent renderable blocks without allocating a slice
             let hasRenderableAfter = false
             for (let j = i; j < sourceBlocks.length; j++) {
-              const b = sourceBlocks[j] as any
-              if (b.type === 'tool') {
-                if ((b as any).toolName !== 'end_turn') {
-                  hasRenderableAfter = true
-                  break
-                }
-              } else if (
-                b.type === 'text' ||
-                b.type === 'html' ||
-                b.type === 'agent' ||
-                b.type === 'agent-list'
-              ) {
+              if (isRenderableTimelineBlock(sourceBlocks[j] as any)) {
                 hasRenderableAfter = true
                 break
               }
@@ -859,7 +859,7 @@ export const MessageBlock = memo(
                 style={{
                   flexDirection: 'column',
                   gap: 0,
-                  marginTop: 0,
+                  marginTop: hasRenderableBefore ? 1 : 0,
                   marginBottom: hasRenderableAfter ? 1 : 0,
                 }}
               >