refactor: move validation errors from global banner to per-message popover

- Remove global validation error banner from app.tsx and chat.tsx
- Add ValidationErrorPopover component that attaches to user messages
- Add [!] button to user messages with validation errors
- Refactor validation error formatting and display logic
- Add validationErrors field to ChatMessage type
- Create validation-error-helpers utility for filtering network errors
- Update use-send-message to attach errors to user messages instead of creating error messages

Note: This changes the UX for displaying validation errors but introduces
a regression where initial startup validation errors are no longer visible.
This will be addressed in a follow-up commit.

Author: brandonkachen

cli/src/app.tsx

@@ -20,7 +20,6 @@ import { NetworkError, RETRYABLE_ERROR_CODES } from '@codebuff/sdk'
 import type { AuthStatus } from './utils/status-indicator-state'
 import { getProjectRoot } from './project-files'
 import { useChatStore } from './state/chat-store'
-import { createValidationErrorBlocks } from './utils/create-validation-error-blocks'
 import { openFileAtPath } from './utils/open-file'
 
 import type { MultilineInputHandle } from './components/multiline-input'
@@ -198,33 +197,13 @@ export const App = ({
             />
           </box>
         ) : null}
-        {validationErrors.length > 0 && (
-          <box style={{ flexDirection: 'column', gap: 0 }}>
-            {createValidationErrorBlocks({
-              errors: validationErrors,
-              loadedAgentsData,
-              availableWidth: separatorWidth,
-            }).map((block, idx) => {
-              if (block.type === 'html') {
-                return (
-                  <box key={`validation-error-${idx}`}>
-                    {block.render({ textColor: theme.foreground, theme })}
-                  </box>
-                )
-              }
-              return null
-            })}
-          </box>
-        )}
       </box>
     )
   }, [
     loadedAgentsData,
     logoBlock,
     theme,
     isAgentListCollapsed,
-    validationErrors,
-    separatorWidth,
   ])
 
   // Derive auth reachability + retrying state inline from authQuery error

cli/src/chat.tsx

@@ -37,7 +37,7 @@ import { useSuggestionMenuHandlers } from './hooks/use-suggestion-menu-handlers'
 import { useTerminalDimensions } from './hooks/use-terminal-dimensions'
 import { useTheme } from './hooks/use-theme'
 import { useTimeout } from './hooks/use-timeout'
-import { useValidationBanner } from './hooks/use-validation-banner'
+
 import { useChatStore } from './state/chat-store'
 import { useFeedbackStore } from './state/feedback-store'
 import { createChatScrollAcceleration } from './utils/chat-scroll-accel'
@@ -651,6 +651,7 @@ export const Chat = ({
     resumeQueue,
     continueChat,
     continueChatId,
+    onOpenFeedback: () => handleOpenFeedbackForMessage(null),
   })
 
   sendMessageRef.current = sendMessage
@@ -720,16 +721,30 @@ export const Chat = ({
   }, [cursorPosition])
 
   const handleOpenFeedbackForMessage = useCallback(
-    (id: string | null) => {
+    (
+      id: string | null,
+      options?: {
+        category?: string
+        footerMessage?: string
+        errors?: Array<{ id: string; message: string }>
+      },
+    ) => {
       saveCurrentInput(inputValueRef.current, cursorPositionRef.current)
-      openFeedbackForMessage(id)
+      openFeedbackForMessage(id, options)
     },
     [saveCurrentInput, openFeedbackForMessage],
   )
 
   const handleMessageFeedback = useCallback(
-    (id: string) => {
-      handleOpenFeedbackForMessage(id)
+    (
+      id: string,
+      options?: {
+        category?: string
+        footerMessage?: string
+        errors?: Array<{ id: string; message: string }>
+      },
+    ) => {
+      handleOpenFeedbackForMessage(id, options)
     },
     [handleOpenFeedbackForMessage],
   )
@@ -945,11 +960,6 @@ export const Chat = ({
       [handleOpenFeedbackForLatestMessage, feedbackMode],
     ),
   )
-  const validationBanner = useValidationBanner({
-    liveValidationErrors: validationErrors,
-    loadedAgentsData,
-    theme,
-  })
 
   return (
     <box
@@ -1036,6 +1046,7 @@ export const Chat = ({
           backgroundColor: 'transparent',
         }}
       >
+
         {shouldShowStatusLine && (
           <StatusBar
             statusMessage={statusMessage}
@@ -1081,8 +1092,6 @@ export const Chat = ({
           handleSubmit={handleSubmit}
         />
       </box>
-
-      {validationBanner}
     </box>
   )
 }

cli/src/components/feedback-container.tsx

@@ -26,6 +26,8 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
     feedbackCursor,
     feedbackCategory,
     feedbackMessageId,
+    feedbackFooterMessage,
+    errors,
     setFeedbackText,
     setFeedbackCursor,
     setFeedbackCategory,
@@ -40,6 +42,8 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
       feedbackCursor: state.feedbackCursor,
       feedbackCategory: state.feedbackCategory,
       feedbackMessageId: state.feedbackMessageId,
+      feedbackFooterMessage: state.feedbackFooterMessage,
+      errors: state.errors,
       setFeedbackText: state.setFeedbackText,
       setFeedbackCursor: state.setFeedbackCursor,
       setFeedbackCategory: state.setFeedbackCategory,
@@ -106,6 +110,7 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
           text,
           category: feedbackCategory,
           type: feedbackMessageId ? 'message' : 'general',
+          errors,
         },
         runState,
       },
@@ -127,6 +132,7 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
     feedbackText,
     feedbackMessageId,
     feedbackCategory,
+    errors,
     buildMessageContext,
     agentMode,
     sessionCreditsUsed,
@@ -176,6 +182,7 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
       onCategoryChange={setFeedbackCategory}
       inputRef={inputRef}
       width={width}
+      footerMessage={feedbackFooterMessage}
     />
   )
 }

cli/src/components/feedback-input-mode.tsx

@@ -142,6 +142,7 @@ interface FeedbackInputModeProps {
   onClear: () => void
   inputRef?: React.MutableRefObject<any>
   width: number
+  footerMessage?: string | null
 }
 
 export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
@@ -156,6 +157,7 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
   onClear,
   inputRef: externalInputRef,
   width,
+  footerMessage,
 }) => {
   const theme = useTheme()
   const internalInputRef = useRef<MultilineInputHandle | null>(null)
@@ -215,21 +217,23 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
           flexDirection: 'row',
           alignItems: 'center',
           justifyContent: 'space-between',
+          marginTop: 1,
         }}
       >
-        <text style={{ wrapMode: 'none' }}>
+        <text style={{ wrapMode: 'none', marginLeft: 1, marginRight: 1 }}>
           <span fg={theme.secondary}>
-            Share feedback — thanks for helping us improve!
+            Share your feedback — thanks for helping us improve!
           </span>
         </text>
         <box
+          style={{ paddingRight: 1 }}
           onMouseDown={onCancel}
           onMouseOver={() => setCloseButtonHovered(true)}
           onMouseOut={() => setCloseButtonHovered(false)}
         >
           <text style={{ wrapMode: 'none' }} selectable={false}>
-            <span fg={closeButtonHovered ? theme.foreground : theme.muted}>
-              X
+            <span fg={closeButtonHovered ? theme.foreground : theme.secondary}>
+              [x]
             </span>
           </text>
         </box>
@@ -308,7 +312,9 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
         }}
       >
         <text style={{ wrapMode: 'none' }}>
-          <span fg={theme.muted}>Session details are auto-attached</span>
+          <span fg={theme.muted}>
+            {footerMessage || 'Session details are auto-attached'}
+          </span>
         </text>
         <Button
           onClick={() => {