Refine CLI feedback plumbing

Author: brandonkachen

cli/src/chat.tsx

@@ -1,11 +1,11 @@
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
-import { useKeyboard } from '@opentui/react'
 import { useShallow } from 'zustand/react/shallow'
 
 import { routeUserPrompt } from './commands/router'
 import { AgentModeToggle } from './components/agent-mode-toggle'
 import { MessageWithAgents } from './components/message-with-agents'
 import { FeedbackInputMode } from './components/feedback-input-mode'
+import { FeedbackUiProvider } from './contexts/feedback-ui-context'
 import {
   MultilineInput,
   type MultilineInputHandle,
@@ -44,7 +44,7 @@ import { computeInputLayoutMetrics } from './utils/text-layout'
 import { createMarkdownPalette } from './utils/theme-system'
 import { BORDER_CHARS } from './utils/ui-constants'
 
-import type { ContentBlock } from './types/chat'
+import type { ChatMessage, ContentBlock } from './types/chat'
 import type { SendMessageFn } from './types/contracts/send-message'
 import type { User } from './utils/auth'
 import type { FileTreeNode } from '@codebuff/common/util/file'
@@ -458,6 +458,15 @@ export const Chat = ({
   const [messagesWithFeedback, setMessagesWithFeedback] = useState<Set<string>>(new Set())
   const [messageFeedbackCategories, setMessageFeedbackCategories] = useState<Map<string, string>>(new Map())
 
+  const inputValueRef = useRef(inputValue)
+  const cursorPositionRef = useRef(cursorPosition)
+  useEffect(() => {
+    inputValueRef.current = inputValue
+  }, [inputValue])
+  useEffect(() => {
+    cursorPositionRef.current = cursorPosition
+  }, [cursorPosition])
+
   const resetFeedbackForm = useCallback(() => {
     setFeedbackText('')
     setFeedbackCursor(0)
@@ -466,38 +475,33 @@ export const Chat = ({
 
   const openFeedbackForMessage = useCallback((id: string) => {
     // Save current input state
-    setSavedInputValue(inputValue)
-    setSavedCursorPosition(cursorPosition)
+    setSavedInputValue(inputValueRef.current)
+    setSavedCursorPosition(cursorPositionRef.current)
 
     // Enter feedback mode
     setFeedbackMessageId(id)
     setFeedbackMode(true)
     resetFeedbackForm()
-  }, [inputValue, cursorPosition, resetFeedbackForm])
-
-  const openFeedbackForLatestMessage = useCallback(() => {
-    const latest = [...messages]
-      .reverse()
-      .find((m) => m.variant === 'ai' && m.isComplete)
-    if (!latest) {
-      return false
-    }
-    openFeedbackForMessage(latest.id)
-    return true
-  }, [messages, openFeedbackForMessage])
+  }, [resetFeedbackForm])
 
   const handleFeedbackSubmit = useCallback(() => {
     const text = feedbackText.trim()
     if (text.length === 0) return
 
-    const target = feedbackMessageId ? messages.find((m) => m.id === feedbackMessageId) : null
-    const recent = messages.slice(Math.max(0, messages.length - 5)).map((m) => ({
+    const target = feedbackMessageId
+      ? messages.find((m) => m.id === feedbackMessageId)
+      : null
+    const summarizeMessage = (m: ChatMessage) => ({
       id: m.id,
       variant: m.variant,
       timestamp: m.timestamp,
       hasBlocks: !!m.blocks,
       contentPreview: (m.content || '').slice(0, 400),
-    }))
+    })
+    const recent =
+      feedbackMessageId && target
+        ? [summarizeMessage(target)]
+        : messages.slice(Math.max(0, messages.length - 5)).map(summarizeMessage)
 
     logger.info(
       {
@@ -582,7 +586,7 @@ export const Chat = ({
     })
 
     // Handle /feedback command
-    if (result && 'openFeedbackMode' in result && result.openFeedbackMode) {
+    if (result?.openFeedbackMode) {
       setSavedInputValue('')
       setSavedCursorPosition(0)
       setFeedbackMessageId(null) // General feedback, not tied to a message
@@ -734,24 +738,6 @@ export const Chat = ({
   const shouldShowStatusLine =
     !feedbackMode && (hasStatusIndicatorContent || shouldShowQueuePreview || !isAtBottom)
 
-  // Ctrl+F to open feedback for latest completed AI message
-  useKeyboard(
-    useCallback(
-      (key) => {
-        // Don't handle if already in feedback mode
-        if (feedbackMode) return
-
-        if (key?.ctrl && key.name === 'f') {
-          if ('preventDefault' in key && typeof key.preventDefault === 'function') {
-            key.preventDefault()
-          }
-          openFeedbackForLatestMessage()
-        }
-      },
-      [openFeedbackForLatestMessage, feedbackMode],
-    ),
-  )
-
   const validationBanner = useValidationBanner({
     liveValidationErrors: validationErrors,
     loadedAgentsData,
@@ -802,40 +788,43 @@ export const Chat = ({
       >
         {headerContent}
         {virtualizationNotice}
-        {topLevelMessages.map((message, idx) => {
-          const isLast = idx === topLevelMessages.length - 1
-          return (
-            <MessageWithAgents
-              key={message.id}
-              message={message}
-              depth={0}
-              isLastMessage={isLast}
-              theme={theme}
-              markdownPalette={markdownPalette}
-              collapsedAgents={collapsedAgents}
-              autoCollapsedAgents={autoCollapsedAgents}
-              streamingAgents={streamingAgents}
-              messageTree={messageTree}
-              messages={messages}
-              availableWidth={separatorWidth}
-              setCollapsedAgents={setCollapsedAgents}
-              addAutoCollapsedAgent={addAutoCollapsedAgent}
-              setUserOpenedAgents={setUserOpenedAgents}
-              setFocusedAgentId={setFocusedAgentId}
-              isWaitingForResponse={isWaitingForResponse}
-              timerStartTime={timerStartTime}
-              onToggleCollapsed={handleCollapseToggle}
-              onBuildFast={handleBuildFast}
-              onBuildMax={handleBuildMax}
-              onFeedback={openFeedbackForMessage}
-              feedbackOpenMessageId={feedbackMessageId}
-              feedbackMode={feedbackMode}
-              onCloseFeedback={handleFeedbackCancel}
-              messagesWithFeedback={messagesWithFeedback}
-              messageFeedbackCategories={messageFeedbackCategories}
-            />
-          )
-        })}
+        <FeedbackUiProvider
+          onFeedback={openFeedbackForMessage}
+          onClose={handleFeedbackCancel}
+          isFeedbackMode={feedbackMode}
+          openMessageId={feedbackMessageId}
+          submittedMessageIds={messagesWithFeedback}
+          categorySelections={messageFeedbackCategories}
+        >
+          {topLevelMessages.map((message, idx) => {
+            const isLast = idx === topLevelMessages.length - 1
+            return (
+              <MessageWithAgents
+                key={message.id}
+                message={message}
+                depth={0}
+                isLastMessage={isLast}
+                theme={theme}
+                markdownPalette={markdownPalette}
+                collapsedAgents={collapsedAgents}
+                autoCollapsedAgents={autoCollapsedAgents}
+                streamingAgents={streamingAgents}
+                messageTree={messageTree}
+                messages={messages}
+                availableWidth={separatorWidth}
+                setCollapsedAgents={setCollapsedAgents}
+                addAutoCollapsedAgent={addAutoCollapsedAgent}
+                setUserOpenedAgents={setUserOpenedAgents}
+                setFocusedAgentId={setFocusedAgentId}
+                isWaitingForResponse={isWaitingForResponse}
+                timerStartTime={timerStartTime}
+                onToggleCollapsed={handleCollapseToggle}
+                onBuildFast={handleBuildFast}
+                onBuildMax={handleBuildMax}
+              />
+            )
+          })}
+        </FeedbackUiProvider>
       </scrollbox>
 
       <box
@@ -987,4 +976,4 @@ export const Chat = ({
       {validationBanner}
     </box>
   )
-}
+}

cli/src/components/feedback-icon-button.tsx

@@ -4,13 +4,12 @@ import React, { useRef } from 'react'
 import { useHoverToggle } from './agent-mode-toggle'
 import { Button } from './button'
 import { useTheme } from '../hooks/use-theme'
-import { BORDER_CHARS } from '../utils/ui-constants'
 import { logger } from '../utils/logger'
 import { AnalyticsEvent } from '@codebuff/common/constants/analytics-events'
 
 interface FeedbackIconButtonProps {
-  onClick?: () => void
-  onClose?: () => void
+  onClick: () => void
+  onClose: () => void
   isOpen?: boolean
   messageId?: string
   selectedCategory?: string
@@ -26,6 +25,10 @@ export const FeedbackIconButton: React.FC<FeedbackIconButtonProps> = ({
   const theme = useTheme()
   const hover = useHoverToggle()
   const hoveredOnceRef = useRef(false)
+  const handleClick = () => {
+    const action = isOpen ? onClose : onClick
+    action()
+  }
 
   const handleMouseOver = () => {
     hover.clearCloseTimer()
@@ -65,7 +68,7 @@ export const FeedbackIconButton: React.FC<FeedbackIconButtonProps> = ({
         paddingLeft: 0,
         paddingRight: 0,
       }}
-      onClick={() => (isOpen ? onClose?.() : onClick?.())}
+      onClick={handleClick}
       onMouseOver={handleMouseOver}
       onMouseOut={handleMouseOut}
     >

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

@@ -7,6 +7,45 @@ import { Button } from './button'
 import { useTheme } from '../hooks/use-theme'
 import { BORDER_CHARS } from '../utils/ui-constants'
 
+type CategoryHighlightKey = 'success' | 'error' | 'warning' | 'info'
+
+type CategoryOption = {
+  id: 'good_result' | 'bad_result' | 'app_bug' | 'other'
+  label: string
+  highlightKey: CategoryHighlightKey
+  placeholder: string
+}
+
+const CATEGORY_OPTIONS: readonly CategoryOption[] = [
+  {
+    id: 'good_result',
+    label: 'Good result',
+    highlightKey: 'success',
+    placeholder:
+      'What did you like? (e.g., "Fast and accurate", "Great explanation")',
+  },
+  {
+    id: 'bad_result',
+    label: 'Bad result',
+    highlightKey: 'error',
+    placeholder:
+      'What went wrong? (e.g., "Incorrect changes", "Missed the requirement")',
+  },
+  {
+    id: 'app_bug',
+    label: 'App bug',
+    highlightKey: 'warning',
+    placeholder:
+      'Report a problem with Codebuff (crashes, errors, UI issues, etc.)',
+  },
+  {
+    id: 'other',
+    label: 'Other',
+    highlightKey: 'info',
+    placeholder: 'Tell us more (what happened, what you expected)...',
+  },
+] as const
+
 interface FeedbackInputModeProps {
   feedbackText: string
   feedbackCursor: number
@@ -62,13 +101,6 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
     )
   )
 
-  const categoryOptions = [
-    { id: 'good_result', label: 'Good result', highlight: theme.success, placeholder: 'What did you like? (e.g., "Fast and accurate", "Great explanation")' },
-    { id: 'bad_result', label: 'Bad result', highlight: theme.error, placeholder: 'What went wrong? (e.g., "Incorrect changes", "Missed the requirement")' },
-    { id: 'app_bug', label: 'App bug', highlight: theme.warning, placeholder: 'Report a problem with Codebuff (crashes, errors, UI issues, etc.)' },
-    { id: 'other', label: 'Other', highlight: theme.info, placeholder: 'Tell us more (what happened, what you expected)...' },
-  ] as const
-
   return (
     <box
       border
@@ -99,7 +131,8 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
 
       {/* Category buttons */}
       <box style={{ flexDirection: 'row', gap: 1, paddingTop: 0, paddingBottom: 0 }}>
-        {categoryOptions.map((option) => {
+        {CATEGORY_OPTIONS.map((option) => {
+          const optionHighlight = theme[option.highlightKey]
           const isSelected = category === option.id
           return (
             <Button
@@ -114,12 +147,13 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
                 paddingTop: 0,
                 paddingBottom: 0,
                 borderStyle: 'single',
-                borderColor: isSelected ? option.highlight : theme.border,
-                customBorderChars: BORDER_CHARS,                  backgroundColor: 'transparent',
+                borderColor: isSelected ? optionHighlight : theme.border,
+                customBorderChars: BORDER_CHARS,
+                backgroundColor: 'transparent',
               }}
             >
               <text style={{ wrapMode: 'none' }}>
-                <span fg={isSelected ? option.highlight : theme.muted}>
+                <span fg={isSelected ? optionHighlight : theme.muted}>
                   {isSelected ? '◉' : '◯'}
                 </span>
                 <span fg={isSelected ? theme.foreground : theme.secondary}>
@@ -142,11 +176,8 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
       <box style={{ paddingTop: 0, paddingBottom: 0 }}>
         <MultilineInput
           value={feedbackText}
-          onChange={(next: { text: string; cursorPosition: number; lastEditDueToNav: boolean } | ((prev: { text: string; cursorPosition: number; lastEditDueToNav: boolean }) => { text: string; cursorPosition: number; lastEditDueToNav: boolean })) => {
-            const v = typeof next === 'function'
-              ? next({ text: feedbackText, cursorPosition: feedbackCursor, lastEditDueToNav: false })
-              : next
-            onFeedbackTextChange(v.text, v.cursorPosition)
+          onChange={({ text, cursorPosition }) => {
+            onFeedbackTextChange(text, cursorPosition)
           }}
           onSubmit={onSubmit}
           onKeyIntercept={(key) => {
@@ -157,7 +188,10 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
             onFeedbackTextChange(newText, feedbackCursor + 1)
             return true
           }}
-          placeholder={categoryOptions.find(opt => opt.id === category)?.placeholder || 'Tell us more (what happened, what you expected)...'}
+          placeholder={
+            CATEGORY_OPTIONS.find((opt) => opt.id === category)?.placeholder ||
+            'Tell us more (what happened, what you expected)...'
+          }
           focused={true}
           maxHeight={5}
           minHeight={3}
@@ -185,7 +219,7 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
         gap: 2
       }}>
         <text style={{ wrapMode: 'none' }}>
-          <span fg={theme.muted}>Auto-attached: message • trace • session</span>
+          <span fg={theme.muted}>Session details are auto-attached</span>
         </text>
         <Button
           onClick={() => {