refactor: improve readability of feedback code

- Fix indentation in feedback-store.ts
- Simplify symbol selection logic in feedback-icon-button.tsx
- Extract message context building helper in feedback-container.tsx
- Rename functions/variables for clarity in feedback-input-mode.tsx
- Simplify keyboard handler logic

Author: brandonkachen

cli/src/components/feedback-container.tsx

@@ -61,44 +61,56 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
 
   const previousFeedbackModeRef = useRef(feedbackMode)
 
+  const buildMessageContext = useCallback(
+    (targetMessageId: string | null) => {
+      const target = targetMessageId
+        ? messages.find((m: ChatMessage) => m.id === targetMessageId)
+        : null
+
+      const targetIndex = target ? messages.indexOf(target) : messages.length - 1
+      const startIndex = Math.max(0, targetIndex - 9)
+      const recentMessages = messages
+        .slice(startIndex, targetIndex + 1)
+        .map((m: ChatMessage) => ({
+          type: m.variant,
+          id: m.id,
+          ...(m.completionTime && { completionTime: m.completionTime }),
+          ...(m.credits && { credits: m.credits }),
+        }))
+
+      return { target, recentMessages }
+    },
+    [messages],
+  )
+
   const handleFeedbackSubmit = useCallback(() => {
     const text = feedbackText.trim()
     if (!text) {
       return
     }
 
-    const target = feedbackMessageId
-      ? messages.find((m: ChatMessage) => m.id === feedbackMessageId)
-      : null
-
-    const targetIndex = target ? messages.indexOf(target) : messages.length - 1
-    const startIndex = Math.max(0, targetIndex - 9)
-    const recent = messages
-      .slice(startIndex, targetIndex + 1)
-      .map((m: ChatMessage) => ({
-        type: m.variant,
-        id: m.id,
-        ...(m.completionTime && { completionTime: m.completionTime }),
-        ...(m.credits && { credits: m.credits }),
-      }))
-
-    logger.info({
-      eventId: AnalyticsEvent.FEEDBACK_SUBMITTED,
-      source: 'cli',
-      messageId: target?.id || null,
-      variant: target?.variant || null,
-      completionTime: target?.completionTime || null,
-      credits: target?.credits || null,
-      agentMode,
-      sessionCreditsUsed,
-      recentMessages: recent,
-      feedback: {
-        text,
-        category: feedbackCategory,
-        type: feedbackMessageId ? 'message' : 'general',
+    const { target, recentMessages } = buildMessageContext(feedbackMessageId)
+
+    logger.info(
+      {
+        eventId: AnalyticsEvent.FEEDBACK_SUBMITTED,
+        source: 'cli',
+        messageId: target?.id || null,
+        variant: target?.variant || null,
+        completionTime: target?.completionTime || null,
+        credits: target?.credits || null,
+        agentMode,
+        sessionCreditsUsed,
+        recentMessages,
+        feedback: {
+          text,
+          category: feedbackCategory,
+          type: feedbackMessageId ? 'message' : 'general',
+        },
+        runState,
       },
-      runState,
-    }, 'User submitted feedback')
+      'User submitted feedback',
+    )
 
     if (feedbackMessageId) {
       markMessageFeedbackSubmitted(feedbackMessageId, feedbackCategory)
@@ -115,7 +127,7 @@ export const FeedbackContainer: React.FC<FeedbackContainerProps> = ({
     feedbackText,
     feedbackMessageId,
     feedbackCategory,
-    messages,
+    buildMessageContext,
     agentMode,
     sessionCreditsUsed,
     runState,

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

@@ -53,17 +53,11 @@ export const FeedbackIconButton: React.FC<FeedbackIconButtonProps> = ({
     hover.scheduleClose()
   }
 
-  // Determine which symbol to show based on selected category
-  const getSymbol = () => {
-    if (selectedCategory === 'good_result') {
-      return '▲▽' // Good selected - filled up, outlined down
-    } else if (selectedCategory === 'bad_result') {
-      return '△▼' // Bad selected - outlined up, filled down
-    }
-    return '△▽' // Default - both outlined
+  const symbolsByCategory: Record<string, string> = {
+    good_result: '▲▽', // Good selected - filled up, outlined down
+    bad_result: '△▼', // Bad selected - outlined up, filled down
   }
-
-  const textCollapsed = `${getSymbol()}`
+  const textCollapsed = symbolsByCategory[selectedCategory || ''] || '△▽'
   const textExpanded = '[how was this?]'
 
   return (

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

@@ -56,15 +56,15 @@ const FEEDBACK_CONTAINER_HORIZONTAL_INSET = 4 // border + padding on each side
 const CATEGORY_BUTTON_EXTRA_WIDTH = 6 // indicator + padding + border
 const CATEGORY_BUTTON_GAP_WIDTH = 1
 
-const getCategoryRowWidth = (labels: readonly string[]): number =>
+const calculateCategoryRowWidth = (labels: readonly string[]): number =>
   labels.reduce((total, label, idx) => {
     const buttonWidth = label.length + CATEGORY_BUTTON_EXTRA_WIDTH
-    const gap = idx === 0 ? 0 : CATEGORY_BUTTON_GAP_WIDTH
-    return total + buttonWidth + gap
+    const gapWidth = idx === 0 ? 0 : CATEGORY_BUTTON_GAP_WIDTH
+    return total + buttonWidth + gapWidth
   }, 0)
 
-const FULL_CATEGORY_ROW_WIDTH = getCategoryRowWidth(
-  CATEGORY_OPTIONS.map((option) => option.label),
+const FULL_CATEGORY_ROW_WIDTH = calculateCategoryRowWidth(
+  CATEGORY_OPTIONS.map((opt) => opt.label),
 )
 
 interface FeedbackTextSectionProps {
@@ -162,20 +162,18 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
   const inputRef = externalInputRef || internalInputRef
   const canSubmit = value.trim().length > 0
   const [closeButtonHovered, setCloseButtonHovered] = useState(false)
-  const availableCategoryWidth = Math.max(
+  const availableWidth = Math.max(
     0,
     width - FEEDBACK_CONTAINER_HORIZONTAL_INSET,
   )
-  const shouldUseShortLabels =
-    FULL_CATEGORY_ROW_WIDTH > availableCategoryWidth
+  const shouldUseShortLabels = FULL_CATEGORY_ROW_WIDTH > availableWidth
 
   // Handle keyboard shortcuts
   useKeyboard(
     useCallback(
       (key) => {
         const isCtrlC = key.ctrl && key.name === 'c'
         const isEscape = key.name === 'escape'
-        const isCtrlEnter = false // handled via onKeyIntercept
 
         if (!isCtrlC && !isEscape) return
 
@@ -189,13 +187,8 @@ export const FeedbackInputMode: React.FC<FeedbackInputModeProps> = ({
         if (isEscape) {
           onCancel()
         } else if (isCtrlC) {
-          if (value.length === 0) {
-            onCancel()
-          } else {
-            onClear()
-          }
+          value.length === 0 ? onCancel() : onClear()
         }
-        // Ctrl+Enter handled via onKeyIntercept
       },
       [value, onCancel, onClear, onSubmit, canSubmit],
     ),

cli/src/state/feedback-store.ts

@@ -91,7 +91,7 @@ export const useFeedbackStore = create<FeedbackStore>()(
     markMessageFeedbackSubmitted: (messageId, category) =>
       set((state) => {
         state.messagesWithFeedback.add(messageId)
-          state.messageFeedbackCategories.set(messageId, category)
+        state.messageFeedbackCategories.set(messageId, category)
       }),
 
     resetFeedbackForm: () =>