feat(cli): initial welcome screen

Author: brandonkachen

cli/src/chat.tsx

@@ -26,6 +26,7 @@ import { useSystemThemeDetector } from './hooks/use-system-theme-detector'
 import { useChatStore } from './state/chat-store'
 import { flushAnalytics } from './utils/analytics'
 import { getUserCredentials } from './utils/auth'
+import { LOGO } from './login/constants'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
 import { formatQueuedPreview } from './utils/helpers'
 import { loadLocalAgents } from './utils/local-agent-registry'
@@ -42,6 +43,10 @@ type ChatVariant = 'ai' | 'user' | 'agent'
 const MAX_VIRTUALIZED_TOP_LEVEL = 60
 const VIRTUAL_OVERSCAN = 12
 
+const LOGO_BLOCK = LOGO.split('\n')
+  .filter((line) => line.length > 0)
+  .join('\n')
+
 type AgentMessage = {
   agentName: string
   agentType: string
@@ -137,17 +142,20 @@ export const App = ({
   const authQuery = useAuthQuery()
   const logoutMutation = useLogoutMutation()
 
-  // If requireAuth is null (checking), assume not authenticated until proven otherwise
-  const [isAuthenticated, setIsAuthenticated] = useState(
-    requireAuth === false ? true : false,
+  // If requireAuth is null (checking), defer showing auth UI until resolved
+  const initialAuthState =
+    requireAuth === false ? true : requireAuth === true ? false : null
+  const [isAuthenticated, setIsAuthenticated] = useState<boolean | null>(
+    initialAuthState,
   )
   const [user, setUser] = useState<User | null>(null)
 
   // Update authentication state when requireAuth changes
   useEffect(() => {
-    if (requireAuth !== null) {
-      setIsAuthenticated(!requireAuth)
+    if (requireAuth === null) {
+      return
     }
+    setIsAuthenticated(!requireAuth)
   }, [requireAuth])
 
   // Update authentication state based on query results
@@ -188,18 +196,44 @@ export const App = ({
   useEffect(() => {
     if (loadedAgentsData && messages.length === 0) {
       const agentListId = 'loaded-agents-list'
+      const userCredentials = getUserCredentials()
+      const greeting = userCredentials?.name?.trim().length
+        ? `Welcome back, ${userCredentials.name.trim()}!`
+        : null
+
+      const blocks: ContentBlock[] = [
+        {
+          type: 'text',
+          content: '\n\n' + LOGO_BLOCK,
+        },
+      ]
+
+      if (greeting) {
+        blocks.push({
+          type: 'text',
+          content: greeting,
+        })
+      }
+
+      blocks.push(
+        {
+          type: 'text',
+          content:
+            'Codebuff can read and write files in this repository, and run terminal commands to help you build.',
+        },
+        {
+          type: 'agent-list',
+          id: agentListId,
+          agents: loadedAgentsData.agents,
+          agentsDir: loadedAgentsData.agentsDir,
+        },
+      )
+
       const initialMessage: ChatMessage = {
         id: `system-loaded-agents-${Date.now()}`,
         variant: 'ai',
         content: '', // Content is in the block
-        blocks: [
-          {
-            type: 'agent-list',
-            id: agentListId,
-            agents: loadedAgentsData.agents,
-            agentsDir: loadedAgentsData.agentsDir,
-          },
-        ],
+        blocks,
         timestamp: new Date().toISOString(),
       }
 
@@ -298,7 +332,7 @@ export const App = ({
   )
 
   useEffect(() => {
-    if (!isAuthenticated) return
+    if (isAuthenticated !== true) return
 
     setInputFocused(true)
 
@@ -1010,7 +1044,7 @@ export const App = ({
       </box>
 
       {/* Login Modal Overlay - show when not authenticated */}
-      {!isAuthenticated && (
+      {isAuthenticated === false && (
         <LoginModal
           onLoginSuccess={handleLoginSuccess}
           theme={theme}

cli/src/components/message-block.tsx

@@ -249,45 +249,51 @@ export const MessageBlock = ({
   ): React.ReactNode {
     const TRUNCATE_LIMIT = 5
     const isCollapsed = collapsedAgents.has(agentListBlock.id)
-    const { agents, agentsDir } = agentListBlock
+    const { agents } = agentListBlock
 
-    const agentCount = agents.length
-    const shouldTruncate = agentCount > TRUNCATE_LIMIT
-    const displayAgents =
-      shouldTruncate && isCollapsed ? agents.slice(0, TRUNCATE_LIMIT) : agents
+    const sortedAgents = [...agents].sort((a, b) => {
+      const aLabel = (a.displayName || a.id).toLowerCase()
+      const bLabel = (b.displayName || b.id).toLowerCase()
+      return aLabel.localeCompare(bLabel)
+    })
 
+    const agentCount = sortedAgents.length
+    const previewAgents = sortedAgents.slice(0, TRUNCATE_LIMIT)
     const remainingCount =
-      shouldTruncate && isCollapsed ? agentCount - TRUNCATE_LIMIT : 0
+      agentCount > TRUNCATE_LIMIT ? agentCount - TRUNCATE_LIMIT : 0
+
+    const formatIdentifier = (agent: { id: string; displayName: string }) =>
+      agent.displayName && agent.displayName !== agent.id
+        ? `${agent.displayName} (${agent.id})`
+        : agent.displayName || agent.id
 
     const agentListContent = (
       <box style={{ flexDirection: 'column', gap: 0 }}>
-        {displayAgents.map((agent, idx) => {
-          const identifier =
-            agent.displayName && agent.displayName !== agent.id
-              ? `${agent.displayName} (${agent.id})`
-              : agent.displayName || agent.id
+        {sortedAgents.map((agent, idx) => {
+          const identifier = formatIdentifier(agent)
           return (
             <text key={`agent-${idx}`} wrap fg={theme.agentText}>
               {`  • ${identifier}`}
             </text>
           )
         })}
-        {remainingCount > 0 && (
-          <text
-            wrap
-            fg={theme.agentResponseCount}
-            attributes={TextAttributes.ITALIC}
-          >
-            {`  ... ${pluralize(remainingCount, 'more agent')}`}
-          </text>
-        )}
       </box>
     )
 
-    const headerText = `Loaded ${pluralize(agentCount, 'local agent')}`
+    const headerText = pluralize(agentCount, 'local agent')
+    const previewLines = previewAgents.map(
+      (agent) => `  • ${formatIdentifier(agent)}`,
+    )
     const finishedPreview =
-      shouldTruncate && isCollapsed
-        ? `${TRUNCATE_LIMIT} agents shown, ${remainingCount} more available`
+      isCollapsed
+        ? [
+            ...previewLines,
+            remainingCount > 0
+              ? `  ... ${pluralize(remainingCount, 'more agent')} available`
+              : null,
+          ]
+            .filter(Boolean)
+            .join('\n')
         : ''
 
     return (

cli/src/utils/codebuff-client.ts

@@ -1,9 +1,10 @@
 import { CodebuffClient } from '@codebuff/sdk'
 
+import { API_KEY_ENV_VAR } from '@codebuff/common/old-constants'
 import { findGitRoot } from './git'
-import { logger } from './logger'
 import { getAuthTokenDetails } from './auth'
-import { API_KEY_ENV_VAR } from '@codebuff/common/old-constants'
+import { loadAgentDefinitions } from './load-agent-definitions'
+import { logger } from './logger'
 
 let clientInstance: CodebuffClient | null = null
 
@@ -21,9 +22,11 @@ export function getCodebuffClient(): CodebuffClient | null {
 
     const gitRoot = findGitRoot()
     try {
+      const agentDefinitions = loadAgentDefinitions()
       clientInstance = new CodebuffClient({
         apiKey,
         cwd: gitRoot,
+        agentDefinitions,
       })
     } catch (error) {
       logger.error(error, 'Failed to initialize CodebuffClient')