fix: better validation error formatting

Author: brandonkachen

cli/src/chat.tsx

@@ -53,6 +53,7 @@ import {
 } from './utils/theme-system'
 import { openFileAtPath } from './utils/open-file'
 import { formatValidationError } from './utils/validation-error-formatting'
+import { createValidationErrorBlocks } from './utils/create-validation-error-blocks'
 
 import type { User } from './utils/auth'
 import type { ToolName } from '@codebuff/sdk'
@@ -122,6 +123,7 @@ export type ChatMessage = {
   credits?: number
   completionTime?: string
   isComplete?: boolean
+  metadata?: Record<string, any>
 }
 
 export const App = ({
@@ -291,9 +293,30 @@ export const App = ({
 
       // Set as collapsed by default
       setCollapsedAgents((prev) => new Set([...prev, agentListId]))
-      setMessages([initialMessage])
+
+      const messagesToAdd: ChatMessage[] = [initialMessage]
+
+      // Add validation error message if there are errors
+      if (validationErrors.length > 0) {
+        const errorBlocks = createValidationErrorBlocks({
+          errors: validationErrors,
+          loadedAgentsData,
+        })
+
+        const validationErrorMessage: ChatMessage = {
+          id: `validation-error-${Date.now()}`,
+          variant: 'error',
+          content: '',
+          blocks: errorBlocks,
+          timestamp: new Date().toISOString(),
+        }
+
+        messagesToAdd.push(validationErrorMessage)
+      }
+
+      setMessages(messagesToAdd)
     }
-  }, [loadedAgentsData]) // Only run when loadedAgentsData changes
+  }, [loadedAgentsData, validationErrors]) // Run when loadedAgentsData or validationErrors change
 
   const {
     inputValue,
@@ -780,6 +803,7 @@ export const App = ({
     agentId,
     onBeforeMessageSend: validateAgents,
     setMainAgentStreamStartTime,
+    scrollToLatest,
   })
 
   sendMessageRef.current = sendMessage
@@ -1097,9 +1121,6 @@ export const App = ({
         flexGrow: 1,
       }}
     >
-      {/* Validation banner at the top */}
-      {renderValidationBanner()}
-
       <box
         style={{
           flexDirection: 'column',

cli/src/components/terminal-link.tsx

@@ -10,9 +10,10 @@ export interface TerminalLinkProps {
   activeColor?: string
   underlineOnHover?: boolean
   isActive?: boolean
-  onActivate?: () => void | Promise<void>
+  onActivate?: () => void | Promise<any>
   containerStyle?: Record<string, unknown>
   lineWrap?: boolean
+  inline?: boolean
 }
 
 const defaultFormatLines: FormatLinesFn = (text) => [text]
@@ -28,6 +29,7 @@ export const TerminalLink: React.FC<TerminalLinkProps> = ({
   onActivate,
   containerStyle,
   lineWrap = false,
+  inline = false,
 }) => {
   const [isHovered, setIsHovered] = useState(false)
 
@@ -44,10 +46,15 @@ export const TerminalLink: React.FC<TerminalLinkProps> = ({
 
   const handleActivate = useCallback(() => {
     if (onActivate) {
-      void onActivate()
+      onActivate()
     }
   }, [onActivate])
 
+  // For inline mode, render as a simple span (no hover/click in inline mode)
+  if (inline) {
+    return <span fg={displayColor}>{text}</span>
+  }
+
   return (
     <box
       style={{

cli/src/hooks/__tests__/use-send-message-timer.test.ts

@@ -24,6 +24,7 @@ describe('useSendMessage timer', () => {
   let mockSetIsStreaming: ReturnType<typeof mock>
   let mockSetCanProcessQueue: ReturnType<typeof mock>
   let mockSetMainAgentStreamStartTime: ReturnType<typeof mock>
+  let mockScrollToLatest: ReturnType<typeof mock>
   let inputRef: React.MutableRefObject<any>
   let activeSubagentsRef: React.MutableRefObject<Set<string>>
   let isChainInProgressRef: React.MutableRefObject<boolean>
@@ -60,6 +61,7 @@ describe('useSendMessage timer', () => {
     mockSetIsStreaming = mock(() => {})
     mockSetCanProcessQueue = mock(() => {})
     mockSetMainAgentStreamStartTime = mock(() => {})
+    mockScrollToLatest = mock(() => {})
     inputRef = { current: { focus: mock(() => {}) } }
     activeSubagentsRef = { current: new Set() }
     isChainInProgressRef = { current: false }
@@ -101,6 +103,7 @@ describe('useSendMessage timer', () => {
         setCanProcessQueue: mockSetCanProcessQueue,
         abortControllerRef,
         setMainAgentStreamStartTime: mockSetMainAgentStreamStartTime,
+        scrollToLatest: mockScrollToLatest,
       }),
     )
 
@@ -157,6 +160,7 @@ describe('useSendMessage timer', () => {
         setCanProcessQueue: mockSetCanProcessQueue,
         abortControllerRef,
         setMainAgentStreamStartTime: mockSetMainAgentStreamStartTime,
+        scrollToLatest: mockScrollToLatest,
       }),
     )
 
@@ -205,6 +209,7 @@ describe('useSendMessage timer', () => {
         setCanProcessQueue: mockSetCanProcessQueue,
         abortControllerRef,
         setMainAgentStreamStartTime: mockSetMainAgentStreamStartTime,
+        scrollToLatest: mockScrollToLatest,
       }),
     )
 

cli/src/hooks/use-agent-validation.ts

@@ -10,10 +10,15 @@ export type ValidationError = {
   message: string
 }
 
+export type ValidationCheckResult = {
+  success: boolean
+  errors: ValidationError[]
+}
+
 type UseAgentValidationResult = {
   validationErrors: ValidationError[]
   isValidating: boolean
-  validate: () => Promise<boolean>
+  validate: () => Promise<ValidationCheckResult>
 }
 
 /**
@@ -28,8 +33,8 @@ export const useAgentValidation = (
   const [isValidating, setIsValidating] = useState(false)
 
   // Validate agents and update state
-  // Returns true if validation passes, false if it fails
-  const validate = useCallback(async (): Promise<boolean> => {
+  // Returns validation result with success status and any errors
+  const validate = useCallback(async (): Promise<ValidationCheckResult> => {
     setIsValidating(true)
 
     try {
@@ -46,20 +51,20 @@ export const useAgentValidation = (
       if (validationResult.success) {
         logger.debug('Agent validation passed')
         setValidationErrors([])
-        return true
+        return { success: true, errors: [] }
       } else {
         logger.debug(
           { errorCount: validationResult.validationErrors.length },
           'Agent validation found errors',
         )
         setValidationErrors(validationResult.validationErrors)
-        return false
+        return { success: false, errors: validationResult.validationErrors }
       }
     } catch (error) {
       logger.error({ error }, 'Agent validation failed with exception')
       // Don't update validation errors on exception - keep previous state
-      // Return false to block message sending on validation errors
-      return false
+      // Return failure to block message sending on validation errors
+      return { success: false, errors: [] }
     } finally {
       setIsValidating(false)
     }

cli/src/hooks/use-message-renderer.tsx

@@ -272,7 +272,7 @@ export const useMessageRenderer = (
       const isUser = message.variant === 'user'
       const isError = message.variant === 'error'
       const lineColor = isError ? 'red' : isAi ? theme.aiLine : theme.userLine
-      const textColor = isError ? 'red' : isAi ? theme.messageAiText : theme.messageUserText
+      const textColor = isError ? theme.messageAiText : isAi ? theme.messageAiText : theme.messageUserText
       const timestampColor = isError ? 'red' : isAi ? theme.timestampAi : theme.timestampUser
       const estimatedMessageWidth = availableWidth
       const codeBlockWidth = Math.max(10, estimatedMessageWidth - 8)

cli/src/hooks/use-send-message.ts

@@ -5,6 +5,8 @@ import { shouldHideAgent } from '../utils/constants'
 import { formatTimestamp } from '../utils/helpers'
 import { loadAgentDefinitions } from '../utils/load-agent-definitions'
 import { logger } from '../utils/logger'
+import { getLoadedAgentsData } from '../utils/local-agent-registry'
+import { createValidationErrorBlocks } from '../utils/create-validation-error-blocks'
 
 import type { ChatMessage, ContentBlock } from '../chat'
 import type { AgentDefinition, ToolName } from '@codebuff/sdk'
@@ -97,8 +99,9 @@ interface UseSendMessageOptions {
   setCanProcessQueue: (can: boolean) => void
   abortControllerRef: React.MutableRefObject<AbortController | null>
   agentId?: string
-  onBeforeMessageSend?: () => Promise<boolean>
+  onBeforeMessageSend?: () => Promise<{ success: boolean; errors: Array<{ id: string; message: string }> }>
   setMainAgentStreamStartTime: (time: number | null) => void
+  scrollToLatest: () => void
 }
 
 export const useSendMessage = ({
@@ -121,6 +124,7 @@ export const useSendMessage = ({
   agentId,
   onBeforeMessageSend,
   setMainAgentStreamStartTime,
+  scrollToLatest,
 }: UseSendMessageOptions) => {
   const previousRunStateRef = useRef<any>(null)
   const spawnAgentsMapRef = useRef<
@@ -247,19 +251,49 @@ export const useSendMessage = ({
 
   const sendMessage = useCallback(
     async (content: string, params: { agentMode: 'FAST' | 'MAX' }) => {
+      const { agentMode } = params
+      const timestamp = formatTimestamp()
+
+      // Add user message to UI first
+      const userMessage: ChatMessage = {
+        id: `user-${Date.now()}`,
+        variant: 'user',
+        content,
+        timestamp,
+      }
+
+      applyMessageUpdate((prev) => {
+        const newMessages = [...prev, userMessage]
+        if (newMessages.length > 100) {
+          return newMessages.slice(-100)
+        }
+        return newMessages
+      })
+      await yieldToEventLoop()
+
+      // Scroll to bottom after user message appears
+      setTimeout(() => scrollToLatest(), 0)
+
       // Validate agents before sending message (blocking)
       if (onBeforeMessageSend) {
         try {
-          const validationPassed = await onBeforeMessageSend()
+          const validationResult = await onBeforeMessageSend()
 
-          if (!validationPassed) {
+          if (!validationResult.success) {
             logger.warn('Message send blocked due to agent validation errors')
 
-            // Add an error message to the chat
+            // Create validation error blocks with clickable file paths
+            const loadedAgentsData = getLoadedAgentsData()
+            const errorBlocks = createValidationErrorBlocks({
+              errors: validationResult.errors,
+              loadedAgentsData,
+            })
+
             const errorMessage: ChatMessage = {
               id: `error-${Date.now()}`,
               variant: 'error',
-              content: 'Cannot send message: Please fix agent validation errors first. Check the validation errors displayed above.',
+              content: '',
+              blocks: errorBlocks,
               timestamp: formatTimestamp(),
             }
 
@@ -271,11 +305,10 @@ export const useSendMessage = ({
         } catch (error) {
           logger.error({ error }, 'Validation before message send failed with exception')
 
-          // Add an error message to the chat
           const errorMessage: ChatMessage = {
             id: `error-${Date.now()}`,
             variant: 'error',
-            content: 'Cannot send message: Agent validation failed unexpectedly.',
+            content: '⚠️ Agent validation failed unexpectedly. Please try again.',
             timestamp: formatTimestamp(),
           }
 
@@ -286,24 +319,6 @@ export const useSendMessage = ({
         }
       }
 
-      const { agentMode } = params
-      const timestamp = formatTimestamp()
-      const userMessage: ChatMessage = {
-        id: `user-${Date.now()}`,
-        variant: 'user',
-        content,
-        timestamp,
-      }
-
-      applyMessageUpdate((prev) => {
-        const newMessages = [...prev, userMessage]
-        if (newMessages.length > 100) {
-          return newMessages.slice(-100)
-        }
-        return newMessages
-      })
-      await yieldToEventLoop()
-
       setFocusedAgentId(null)
       setInputFocused(true)
       inputRef.current?.focus()
@@ -1414,6 +1429,7 @@ export const useSendMessage = ({
       removeActiveSubagent,
       onBeforeMessageSend,
       setMainAgentStreamStartTime,
+      scrollToLatest,
     ],
   )