claude-code/src/components/SkillImprovementSurvey.tsx

import React, { useEffect, useRef } from 'react'
import { BLACK_CIRCLE, BULLET_OPERATOR } from '../constants/figures.js'
import { Box, Text } from '@anthropic/ink'
import type { SkillUpdate } from '../utils/hooks/skillImprovement.js'
import { normalizeFullWidthDigits } from '../utils/stringUtils.js'
import { isValidResponseInput } from './FeedbackSurvey/FeedbackSurveyView.js'
import type { FeedbackSurveyResponse } from './FeedbackSurvey/utils.js'

type Props = {
  isOpen: boolean
  skillName: string
  updates: SkillUpdate[]
  handleSelect: (selected: FeedbackSurveyResponse) => void
  inputValue: string
  setInputValue: (value: string) => void
}

export function SkillImprovementSurvey({
  isOpen,
  skillName,
  updates,
  handleSelect,
  inputValue,
  setInputValue,
}: Props): React.ReactNode {
  if (!isOpen) {
    return null
  }

  // Hide the survey if the user is typing anything other than a survey response
  if (inputValue && !isValidResponseInput(inputValue)) {
    return null
  }

  return (
    <SkillImprovementSurveyView
      skillName={skillName}
      updates={updates}
      onSelect={handleSelect}
      inputValue={inputValue}
      setInputValue={setInputValue}
    />
  )
}

type ViewProps = {
  skillName: string
  updates: SkillUpdate[]
  onSelect: (option: FeedbackSurveyResponse) => void
  inputValue: string
  setInputValue: (value: string) => void
}

// Only 1 (apply) and 0 (dismiss) are valid for this survey
const VALID_INPUTS = ['0', '1'] as const

function isValidInput(input: string): boolean {
  return (VALID_INPUTS as readonly string[]).includes(input)
}

function SkillImprovementSurveyView({
  skillName,
  updates,
  onSelect,
  inputValue,
  setInputValue,
}: ViewProps): React.ReactNode {
  const initialInputValue = useRef(inputValue)

  useEffect(() => {
    if (inputValue !== initialInputValue.current) {
      const lastChar = normalizeFullWidthDigits(inputValue.slice(-1))
      if (isValidInput(lastChar)) {
        setInputValue(inputValue.slice(0, -1))
        // Map: 1 = "good" (apply), 0 = "dismissed"
        onSelect(lastChar === '1' ? 'good' : 'dismissed')
      }
    }
  }, [inputValue, onSelect, setInputValue])

  return (
    <Box flexDirection="column" marginTop={1}>
      <Box>
        <Text color="ansi:cyan">{BLACK_CIRCLE} </Text>
        <Text bold>
          Skill improvement suggested for &quot;{skillName}&quot;
        </Text>
      </Box>

      <Box flexDirection="column" marginLeft={2}>
        {updates.map((u, i) => (
          <Text key={i} dimColor>
            {BULLET_OPERATOR} {u.change}
          </Text>
        ))}
      </Box>

      <Box marginLeft={2} marginTop={1}>
        <Box width={12}>
          <Text>
            <Text color="ansi:cyan">1</Text>: Apply
          </Text>
        </Box>
        <Box width={14}>
          <Text>
            <Text color="ansi:cyan">0</Text>: Dismiss
          </Text>
        </Box>
      </Box>
    </Box>
  )
}