fix: turn agent/tool orange when active

Author: brandonkachen

cli/src/components/branch-item.tsx

@@ -50,8 +50,7 @@ export const BranchItem = ({
   const toggleTextColor =
     (isStreaming ? theme.agentToggleHeaderText : theme.agentToggleText) ??
     theme.agentToggleText
-  const statusSymbol = isStreaming ? '●' : ' '
-  const toggleLabel = `${isCollapsed ? '▸' : '▾'} ${statusSymbol} `
+  const toggleLabel = `${isCollapsed ? '▸' : '▾'} `
 
   const isTextRenderable = (value: ReactNode): boolean => {
     if (
@@ -193,22 +192,43 @@ export const BranchItem = ({
               {finishedPreview}
             </text>
           )}
-          {!isCollapsed && content && (
-            <box
-              border
-              borderStyle="single"
-              borderColor={cornerColor}
-              customBorderChars={borderCharsWithoutVertical}
-              style={{
-                flexDirection: 'column',
-                gap: 0,
-                paddingLeft: 1,
-                paddingRight: 1,
-                paddingTop: 0,
-                paddingBottom: 0,
-              }}
-            >
-              {renderExpandedContent(content)}
+          {!isCollapsed && (
+            <box style={{ flexDirection: 'column', gap: 1 }}>
+              {content && (
+                <box
+                  border
+                  borderStyle="single"
+                  borderColor={cornerColor}
+                  customBorderChars={borderCharsWithoutVertical}
+                  style={{
+                    flexDirection: 'column',
+                    gap: 0,
+                    paddingLeft: 1,
+                    paddingRight: 1,
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                  }}
+                >
+                  {renderExpandedContent(content)}
+                </box>
+              )}
+              <box
+                style={{
+                  alignSelf: 'flex-end',
+                  backgroundColor: theme.agentFocusedBg,
+                  paddingLeft: 1,
+                  paddingRight: 1,
+                  paddingTop: 0,
+                  paddingBottom: 0,
+                }}
+                onMouseDown={onToggle}
+              >
+                <text wrap={false}>
+                  <span fg={toggleTextColor} attributes={TextAttributes.BOLD}>
+                    Collapse
+                  </span>
+                </text>
+              </box>
             </box>
           )}
         </box>

cli/src/components/message-block.tsx

@@ -104,9 +104,11 @@ export const MessageBlock = ({
     const inputContent = `\`\`\`json\n${JSON.stringify(toolBlock.input, null, 2)}\n\`\`\``
     const codeBlockLang =
       toolBlock.toolName === 'run_terminal_command' ? '' : 'yaml'
-    const resultContent = toolBlock.output
-      ? `\n\n**Result:**\n\`\`\`${codeBlockLang}\n${toolBlock.output}\n\`\`\``
-      : ''
+    const shouldRenderResult = toolBlock.toolName !== 'end_turn'
+    const resultContent =
+      shouldRenderResult && toolBlock.output
+        ? `\n\n**Result:**\n\`\`\`${codeBlockLang}\n${toolBlock.output}\n\`\`\``
+        : ''
     const fullContent = inputContent + resultContent
 
     const lines = fullContent

cli/src/utils/theme-system.ts

@@ -743,7 +743,7 @@ const DEFAULT_CHAT_THEMES: Record<ThemeName, ChatTheme> = {
     agentResponseCount: '#9ca3af',
     agentFocusedBg: '#334155',
     agentContentText: '#ffffff',
-    agentToggleHeaderBg: '#16a34a',
+    agentToggleHeaderBg: '#f97316',
     agentToggleHeaderText: '#ffffff',
     agentToggleText: '#ffffff',
     agentContentBg: '#000000',
@@ -796,7 +796,7 @@ const DEFAULT_CHAT_THEMES: Record<ThemeName, ChatTheme> = {
     agentResponseCount: '#6b7280',
     agentFocusedBg: '#f3f4f6',
     agentContentText: '#111827',
-    agentToggleHeaderBg: '#059669',
+    agentToggleHeaderBg: '#ea580c',
     agentToggleHeaderText: '#ffffff',
     agentToggleText: '#ffffff',
     agentContentBg: '#ffffff',