fix: clean up agent toggle ui

Author: brandonkachen

cli/src/chat.tsx

@@ -254,12 +254,15 @@ export const App = ({
           ? theme.chromeText
           : theme.agentResponseCount
 
+    const logoColor =
+      resolvedThemeName === 'dark' ? '#4ade80' : '#15803d'
+
     const buildBlocks = (listId: string): ContentBlock[] => {
       const result: ContentBlock[] = [
         {
           type: 'text',
           content: '\n\n' + LOGO_BLOCK,
-          color: theme.agentToggleExpandedBg,
+          color: logoColor,
         },
       ]
 

cli/src/components/branch-item.tsx

@@ -90,6 +90,9 @@ export const BranchItem = ({
         ? `${statusLabel} ${statusIndicator}`
         : `${statusIndicator} ${statusLabel}`
       : null
+  const showCollapsedPreview =
+    (isStreaming && !!streamingPreview) ||
+    (!isStreaming && !!finishedPreview)
 
   const isTextRenderable = (value: ReactNode): boolean => {
     if (value === null || value === undefined || typeof value === 'boolean') {
@@ -188,6 +191,7 @@ export const BranchItem = ({
         flexShrink: 0,
         marginTop: 1,
         marginBottom: 0,
+        paddingBottom: 0,
         width: '100%',
       }}
     >
@@ -211,8 +215,8 @@ export const BranchItem = ({
             style={{
               flexDirection: 'column',
               gap: 0,
-              paddingLeft: 1,
-              paddingRight: 1,
+              paddingLeft: 0,
+              paddingRight: 0,
               paddingTop: 0,
               paddingBottom: 0,
               width: '100%',
@@ -235,7 +239,7 @@ export const BranchItem = ({
             paddingLeft: 1,
             paddingRight: 1,
             paddingTop: 0,
-            paddingBottom: 0,
+            paddingBottom: isCollapsed && !showCollapsedPreview ? 0 : 1,
             width: '100%',
           }}
           onMouseDown={onToggle}
@@ -262,13 +266,13 @@ export const BranchItem = ({
         </box>
 
         {isCollapsed ? (
-          (isStreaming && streamingPreview) || (!isStreaming && finishedPreview) ? (
+          showCollapsedPreview ? (
             <box
               style={{
-                paddingLeft: 1,
-                paddingRight: 1,
+                paddingLeft: 0,
+                paddingRight: 0,
                 paddingTop: 0,
-              paddingBottom: 1,
+                paddingBottom: 1,
               }}
             >
               <text
@@ -286,9 +290,9 @@ export const BranchItem = ({
           <box
             style={{
               flexDirection: 'column',
-              gap: 1,
-              paddingLeft: 1,
-              paddingRight: 1,
+              gap: 0,
+              paddingLeft: 0,
+              paddingRight: 0,
               paddingTop: 0,
               paddingBottom: 0,
             }}
@@ -301,7 +305,9 @@ export const BranchItem = ({
                   marginBottom: content ? 1 : 0,
                 }}
               >
-                <text {...(headerFg ? { fg: headerFg } : undefined)}>Prompt</text>
+                <text {...(headerFg ? { fg: headerFg } : undefined)}>
+                  Prompt
+                </text>
                 <text
                   fg={resolveFg(theme.agentText)}
                   style={{ wrapMode: 'word' }}
@@ -320,18 +326,26 @@ export const BranchItem = ({
               </box>
             )}
             {renderExpandedContent(content)}
-            <box style={{ alignSelf: 'flex-end', marginTop: content ? 0 : 1 }}>
+            <box
+              style={{
+                alignSelf: 'flex-end',
+                marginTop: content ? 0 : 1,
+                paddingRight: 1,
+                paddingBottom: 0,
+                marginBottom: 0,
+              }}
+            >
               <RaisedPill
                 segments={[{ text: 'Collapse', fg: collapseButtonText }]}
                 frameColor={collapseButtonFrame}
                 textColor={collapseButtonText}
-                padding={0}
                 onPress={onToggle}
               />
             </box>
           </box>
         )}
       </box>
+      {!isCollapsed ? <box style={{ height: 1 }} /> : null}
     </box>
   )
 }

cli/src/components/raised-pill.tsx

@@ -27,7 +27,7 @@ export const RaisedPill = ({
   frameColor,
   textColor,
   fillColor,
-  padding = 1,
+  padding = 2,
   onPress,
   style,
 }: RaisedPillProps): React.ReactNode => {

cli/src/components/tool-item.tsx

@@ -114,8 +114,8 @@ export const ToolItem = ({
       <box
         style={{
           flexDirection: 'row',
-          paddingLeft: 1,
-          paddingRight: 1,
+          paddingLeft: 0,
+          paddingRight: 0,
           paddingTop: 0,
           paddingBottom: 0,
         }}
@@ -139,8 +139,8 @@ export const ToolItem = ({
         style={{
           flexDirection: 'row',
           gap: 0,
-          paddingLeft: 1,
-          paddingRight: 1,
+          paddingLeft: 0,
+          paddingRight: 0,
           paddingTop: 0,
           paddingBottom: 0,
         }}
@@ -189,8 +189,8 @@ export const ToolItem = ({
         style={{
           flexDirection: 'row',
           alignItems: 'center',
-          paddingLeft: 1,
-          paddingRight: 1,
+          paddingLeft: 0,
+          paddingRight: 0,
           paddingTop: 0,
           paddingBottom: 0,
         }}

cli/src/utils/theme-system.ts

@@ -517,6 +517,8 @@ const MAC_TERMINAL_THEME_OVERRIDES: Record<'dark' | 'light', Partial<ChatTheme>>
     agentToggleHeaderText: '#0f172a',
     agentToggleText: '#0f172a',
     chromeText: '#0f172a',
+    inputFg: '#000000',
+    inputFocusedFg: '#000000',
     inputPlaceholder: '#64748b',
     markdown: {
       inlineCodeFg: '#0f62fe',