Add toggle open flag and tighten collapse spacing

Author: brandonkachen

cli/src/chat.tsx

@@ -100,6 +100,7 @@ export const App = ({
   requireAuth,
   hasInvalidCredentials,
   loadedAgentsData,
+  initialToggleState,
 }: {
   initialPrompt: string | null
   agentId?: string
@@ -109,6 +110,7 @@ export const App = ({
     agents: Array<{ id: string; displayName: string }>
     agentsDir: string
   } | null
+  initialToggleState: 'open' | 'closed' | null
 }) => {
   const renderer = useRenderer()
   const { width: measuredWidth } = useTerminalDimensions()
@@ -128,6 +130,7 @@ export const App = ({
 
   const theme = chatTheme
   const markdownPalette = useMemo(() => createMarkdownPalette(theme), [theme])
+  const shouldCollapseByDefault = initialToggleState !== 'open'
 
   const [exitWarning, setExitWarning] = useState<string | null>(null)
   const exitArmedRef = useRef(false)
@@ -238,11 +241,13 @@ export const App = ({
         timestamp: new Date().toISOString(),
       }
 
-      // Set as collapsed by default
-      setCollapsedAgents((prev) => new Set([...prev, agentListId]))
+      // Set as collapsed by default unless forced open
+      if (shouldCollapseByDefault) {
+        setCollapsedAgents((prev) => new Set([...prev, agentListId]))
+      }
       setMessages([initialMessage])
     }
-  }, [loadedAgentsData, theme]) // Only run when loadedAgentsData changes
+  }, [loadedAgentsData, theme, shouldCollapseByDefault]) // Only run when loadedAgentsData changes
 
   const {
     inputValue,

cli/src/components/branch-item.tsx

@@ -150,7 +150,7 @@ export const BranchItem = ({
         gap: 0,
         flexShrink: 0,
         marginTop: 1,
-        marginBottom: 1,
+        marginBottom: 0,
       }}
     >
       <box style={{ flexDirection: 'column', gap: 0 }}>
@@ -188,7 +188,7 @@ export const BranchItem = ({
             </text>
           )}
           {!isCollapsed && (
-            <box style={{ flexDirection: 'column', gap: 1 }}>
+            <box style={{ flexDirection: 'column', gap: 0 }}>
               {content && (
                 <box
                   border
@@ -220,7 +220,7 @@ export const BranchItem = ({
                 frameColor={collapseButtonFrame}
                 textColor={collapseButtonText}
                 onPress={onToggle}
-                style={{ alignSelf: 'flex-end', marginTop: 1 }}
+                style={{ alignSelf: 'flex-end' }}
               />
             </box>
           )}

cli/src/index.tsx

@@ -37,6 +37,7 @@ type ParsedArgs = {
   initialPrompt: string | null
   agent?: string
   clearLogs: boolean
+  toggleState: 'open' | 'closed' | null
 }
 
 function parseArgs(): ParsedArgs {
@@ -51,6 +52,10 @@ function parseArgs(): ParsedArgs {
       'Specify which agent to use (e.g., "base", "ask", "file-picker")',
     )
     .option('--clear-logs', 'Remove any existing CLI log files before starting')
+    .option(
+      '--toggle <state>',
+      'Force initial toggle state (open | closed)',
+    )
     .helpOption('-h, --help', 'Show this help message')
     .argument('[prompt...]', 'Initial prompt to send to the agent')
     .allowExcessArguments(true)
@@ -63,10 +68,18 @@ function parseArgs(): ParsedArgs {
     initialPrompt: args.length > 0 ? args.join(' ') : null,
     agent: options.agent,
     clearLogs: options.clearLogs || false,
+    toggleState:
+      typeof options.toggle === 'string'
+        ? options.toggle.trim().toLowerCase() === 'open'
+          ? 'open'
+          : options.toggle.trim().toLowerCase() === 'closed'
+            ? 'closed'
+            : null
+        : null,
   }
 }
 
-const { initialPrompt, agent, clearLogs } = parseArgs()
+const { initialPrompt, agent, clearLogs, toggleState } = parseArgs()
 
 if (clearLogs) {
   clearLogFile()
@@ -122,6 +135,7 @@ const AppWithAsyncAuth = () => {
       requireAuth={requireAuth}
       hasInvalidCredentials={hasInvalidCredentials}
       loadedAgentsData={loadedAgentsData}
+      initialToggleState={toggleState}
     />
   )
 }