@alumbwe/anvil 1.0.0

package/src/components/ask-user/components/accordion-question.tsx

@@ -0,0 +1,153 @@
+/**
+ * Accordion-style question component that can expand/collapse
+ */
+
+import React, { useCallback } from 'react'
+
+import { CustomAnswerInput } from './custom-answer-input'
+import { OptionsList } from './options-list'
+import { QuestionHeader } from './question-header'
+import { getOptionLabel } from '../constants'
+
+import type { AskUserQuestion } from '../../../types/store'
+
+/** Answer state for a single question */
+export interface AccordionAnswer {
+  selectedIndex?: number
+  selectedIndices?: Set<number>
+  isCustom?: boolean
+  customText?: string
+}
+
+export interface AccordionQuestionProps {
+  question: AskUserQuestion
+  questionIndex: number
+  totalQuestions: number
+  answer: AccordionAnswer | undefined
+  isExpanded: boolean
+  isTypingCustom: boolean
+  onToggleExpand: () => void
+  onSelectOption: (optionIndex: number) => void
+  onToggleOption: (optionIndex: number) => void
+  onSetCustomText: (text: string, cursorPosition: number) => void
+  onCustomSubmit: () => void
+  customCursorPosition: number
+  focusedOptionIndex: number | null
+  onFocusOption: (index: number | null) => void
+}
+
+export const AccordionQuestion: React.FC<AccordionQuestionProps> = ({
+  question,
+  questionIndex,
+  totalQuestions,
+  answer,
+  isExpanded,
+  isTypingCustom,
+  onToggleExpand,
+  onSelectOption,
+  onToggleOption,
+  onSetCustomText,
+  onCustomSubmit,
+  customCursorPosition,
+  focusedOptionIndex,
+  onFocusOption,
+}) => {
+  const isMultiSelect = question.multiSelect
+  const showQuestionNumber = totalQuestions > 1
+  const questionNumber = questionIndex + 1
+  const questionPrefix = showQuestionNumber ? `${questionNumber}. ` : ''
+  const optionIndent = 2 + questionPrefix.length
+
+  // Check if question has a valid answer
+  const isAnswered =
+    !!answer &&
+    ((answer.isCustom && !!answer.customText?.trim()) ||
+      (isMultiSelect && (answer.selectedIndices?.size ?? 0) > 0) ||
+      answer.selectedIndex !== undefined)
+
+  const getAnswerDisplay = (): string => {
+    if (!answer) return '(click to answer)'
+
+    if (answer.isCustom && answer.customText) {
+      const hadNewlines = /\r?\n/.test(answer.customText)
+      const flattenedText = answer.customText
+        .replace(/\r?\n/g, ' ')
+        .replace(/\s+/g, ' ')
+        .trim()
+      return `Custom: ${flattenedText}${hadNewlines ? '…' : ''}`
+    }
+
+    if (isMultiSelect && answer.selectedIndices) {
+      const selectedLabels = Array.from(answer.selectedIndices)
+        .map((idx) => getOptionLabel(question.options[idx]))
+        .filter(Boolean)
+      return selectedLabels.length > 0
+        ? selectedLabels.join(', ')
+        : '(click to answer)'
+    }
+
+    if (answer.selectedIndex !== undefined) {
+      const label = getOptionLabel(question.options[answer.selectedIndex])
+      return label || '(click to answer)'
+    }
+
+    return '(click to answer)'
+  }
+
+  const isCustomSelected = answer?.isCustom ?? false
+
+  const handlePaste = useCallback(
+    (text: string) => {
+      const currentText = answer?.customText || ''
+      const newText =
+        currentText.slice(0, customCursorPosition) +
+        text +
+        currentText.slice(customCursorPosition)
+      onSetCustomText(newText, customCursorPosition + text.length)
+    },
+    [answer?.customText, customCursorPosition, onSetCustomText],
+  )
+
+  return (
+    <box style={{ flexDirection: 'column', marginBottom: 1, width: '100%' }}>
+      {/* Question header - always visible */}
+      <QuestionHeader
+        questionText={question.question}
+        questionPrefix={questionPrefix}
+        isExpanded={isExpanded}
+        isAnswered={isAnswered}
+        answerDisplay={getAnswerDisplay()}
+        onToggleExpand={onToggleExpand}
+      />
+
+      {/* Expanded content - options */}
+      {isExpanded && (
+        <box style={{ flexDirection: 'column', width: '100%' }}>
+          <OptionsList
+            question={question}
+            answer={answer}
+            optionIndent={optionIndent}
+            focusedOptionIndex={focusedOptionIndex}
+            isTypingCustom={isTypingCustom}
+            onSelectOption={onSelectOption}
+            onToggleOption={onToggleOption}
+            onFocusOption={onFocusOption}
+          />
+
+          {/* Text input area when Custom is selected */}
+          {isCustomSelected && (
+            <CustomAnswerInput
+              value={answer?.customText || ''}
+              cursorPosition={customCursorPosition}
+              focused={isTypingCustom}
+              optionIndent={optionIndent}
+              onChange={onSetCustomText}
+              onSubmit={onCustomSubmit}
+              onPaste={handlePaste}
+            />
+          )}
+        </box>
+      )}
+    </box>
+  )
+}

package/src/components/ask-user/components/custom-answer-input.tsx

@@ -0,0 +1,66 @@
+/**
+ * Custom answer input component - MultilineInput wrapper for custom text answers
+ */
+
+import React, { memo } from 'react'
+
+import { useTheme } from '../../../hooks/use-theme'
+import { MultilineInput } from '../../multiline-input'
+
+export interface CustomAnswerInputProps {
+  value: string
+  cursorPosition: number
+  focused: boolean
+  optionIndent: number
+  onChange: (text: string, cursorPosition: number) => void
+  onSubmit: () => void
+  onPaste: (text: string) => void
+}
+
+export const CustomAnswerInput: React.FC<CustomAnswerInputProps> = memo(
+  ({
+    value,
+    cursorPosition,
+    focused,
+    optionIndent,
+    onChange,
+    onSubmit,
+    onPaste,
+  }) => {
+    const theme = useTheme()
+
+    return (
+      <box style={{ flexDirection: 'column', paddingLeft: optionIndent + 2 }}>
+        <box
+          style={{
+            borderStyle: 'single',
+            borderColor: theme.muted,
+            paddingLeft: 1,
+            paddingRight: 1,
+          }}
+        >
+        <MultilineInput
+          value={value}
+          cursorPosition={cursorPosition}
+          onChange={(inputValue) => {
+            onChange(inputValue.text, inputValue.cursorPosition)
+          }}
+          onSubmit={onSubmit}
+          onPaste={(text) => {
+            if (text) {
+              onPaste(text)
+            }
+          }}
+          focused={focused}
+          maxHeight={5}
+          minHeight={1}
+          placeholder="Type your answer..."
+          showScrollbar={true}
+        />
+        </box>
+      </box>
+    )
+  },
+)
+
+CustomAnswerInput.displayName = 'CustomAnswerInput'

package/src/components/ask-user/components/options-list.tsx

@@ -0,0 +1,133 @@
+/**
+ * Options list component that renders all question options
+ * including the Custom option button
+ */
+
+import { TextAttributes } from '@opentui/core'
+import React, { memo } from 'react'
+
+import { QuestionOption } from './question-option'
+import { useTheme } from '../../../hooks/use-theme'
+import { Button } from '../../button'
+import { CUSTOM_OPTION_INDEX, SYMBOLS } from '../constants'
+
+import type { AccordionAnswer } from './accordion-question'
+import type { AskUserQuestion } from '../../../types/store'
+
+export interface OptionsListProps {
+  question: AskUserQuestion
+  answer: AccordionAnswer | undefined
+  optionIndent: number
+  focusedOptionIndex: number | null
+  isTypingCustom: boolean
+  onSelectOption: (optionIndex: number) => void
+  onToggleOption: (optionIndex: number) => void
+  onFocusOption: (index: number | null) => void
+}
+
+export const OptionsList: React.FC<OptionsListProps> = memo(
+  ({
+    question,
+    answer,
+    optionIndent,
+    focusedOptionIndex,
+    isTypingCustom,
+    onSelectOption,
+    onToggleOption,
+    onFocusOption,
+  }) => {
+    const theme = useTheme()
+    const isMultiSelect = question.multiSelect
+
+    const isCustomSelected = answer?.isCustom ?? false
+    const isCustomFocused = focusedOptionIndex === question.options.length || isTypingCustom
+    const selectedFg = theme.name === 'dark' ? '#ffffff' : '#000000'
+    const customSymbol = isMultiSelect
+      ? isCustomSelected
+        ? SYMBOLS.CHECKBOX_CHECKED
+        : SYMBOLS.CHECKBOX_UNCHECKED
+      : isCustomSelected
+        ? SYMBOLS.SELECTED
+        : SYMBOLS.UNSELECTED
+    const customFg = isCustomFocused ? '#000000' : isCustomSelected ? selectedFg : theme.muted
+    const customAttributes = isCustomFocused || isCustomSelected ? TextAttributes.BOLD : undefined
+
+    const handleOptionSelect = (optionIndex: number) => {
+      if (isMultiSelect) {
+        onToggleOption(optionIndex)
+      } else {
+        onSelectOption(optionIndex)
+      }
+    }
+
+    const handleCustomClick = () => {
+      if (isMultiSelect) {
+        onToggleOption(CUSTOM_OPTION_INDEX)
+      } else {
+        onSelectOption(CUSTOM_OPTION_INDEX)
+      }
+    }
+
+    return (
+      <>
+        {/* Multi-select hint */}
+        {isMultiSelect && (
+          <text style={{ fg: theme.muted, paddingLeft: optionIndent }}>
+            (Select multiple options)
+          </text>
+        )}
+
+        {/* Options */}
+        {question.options.map((option, optionIndex) => {
+          const isSelected = isMultiSelect
+            ? answer?.selectedIndices?.has(optionIndex) ?? false
+            : answer?.selectedIndex === optionIndex
+
+          return (
+            <QuestionOption
+              key={optionIndex}
+              option={option}
+              indent={optionIndent}
+              isSelected={isSelected}
+              isFocused={focusedOptionIndex === optionIndex}
+              isMultiSelect={isMultiSelect}
+              onSelect={() => handleOptionSelect(optionIndex)}
+              onMouseOver={() => onFocusOption(optionIndex)}
+            />
+          )
+        })}
+
+        {/* Custom option - uses checkbox style for multi-select questions */}
+        <Button
+          onClick={handleCustomClick}
+          onMouseOver={() => onFocusOption(question.options.length)}
+          style={{
+            width: '100%',
+            flexDirection: 'column',
+            gap: 0,
+            backgroundColor: isCustomFocused ? theme.primary : undefined,
+            paddingTop: 0,
+            paddingBottom: 0,
+            paddingLeft: optionIndent,
+          }}
+        >
+          <text style={{ fg: customFg, attributes: customAttributes }}>
+            {`${customSymbol} Custom`}
+          </text>
+          {isCustomFocused && (
+            <text
+              style={{
+                fg: '#000000',
+                marginLeft: 2,
+              }}
+            >
+              Type your own answer
+            </text>
+          )}
+        </Button>
+      </>
+    )
+  },
+)
+
+OptionsList.displayName = 'OptionsList'

package/src/components/ask-user/components/question-header.tsx

@@ -0,0 +1,80 @@
+/**
+ * Question header component with expand/collapse functionality
+ * and answer preview when collapsed
+ */
+
+import { TextAttributes } from '@opentui/core'
+import React, { memo } from 'react'
+
+import { useTerminalLayout } from '../../../hooks/use-terminal-layout'
+import { useTheme } from '../../../hooks/use-theme'
+import { Button } from '../../button'
+
+// Overhead for the answer line: modal borders (~6) + marginLeft (3) + "↳ " (3) + quotes (2) + buffer (6)
+const ANSWER_LINE_OVERHEAD = 20
+
+export interface QuestionHeaderProps {
+  questionText: string
+  questionPrefix: string
+  isExpanded: boolean
+  isAnswered: boolean
+  answerDisplay: string
+  onToggleExpand: () => void
+}
+
+export const QuestionHeader: React.FC<QuestionHeaderProps> = memo(
+  ({
+    questionText,
+    questionPrefix,
+    isExpanded,
+    isAnswered,
+    answerDisplay,
+    onToggleExpand,
+  }) => {
+    const theme = useTheme()
+    const { terminalWidth } = useTerminalLayout()
+
+    // Calculate available width for the answer text and truncate with ellipsis at end
+    const availableWidth = Math.max(20, terminalWidth - ANSWER_LINE_OVERHEAD)
+    const truncatedAnswer =
+      answerDisplay.length > availableWidth
+        ? answerDisplay.slice(0, availableWidth - 1) + '…'
+        : answerDisplay
+
+    return (
+      <Button
+        onClick={onToggleExpand}
+        style={{
+          flexDirection: 'column',
+          width: '100%',
+        }}
+      >
+        <text>
+          <span fg={theme.muted}>{isExpanded ? '▼' : '▶'}</span>
+          <span
+            fg={theme.foreground}
+            attributes={isExpanded ? TextAttributes.BOLD : undefined}
+          >
+            {' '}
+            {questionPrefix}
+            {questionText}
+          </span>
+        </text>
+        {/* Answer displayed on separate line when collapsed (like User Answers style) */}
+        {!isExpanded && (
+          <text wrapMode="none" style={{ marginLeft: 3 }}>
+            <span fg={theme.primary}>↳ </span>
+            <span
+              fg={isAnswered ? theme.primary : theme.muted}
+              attributes={TextAttributes.ITALIC}
+            >
+              {isAnswered ? `"${truncatedAnswer}"` : '(click to answer)'}
+            </span>
+          </text>
+        )}
+      </Button>
+    )
+  },
+)
+
+QuestionHeader.displayName = 'QuestionHeader'

package/src/components/ask-user/components/question-option.tsx

@@ -0,0 +1,89 @@
+/**
+ * Question option component (radio button or checkbox)
+ */
+
+import { TextAttributes } from '@opentui/core'
+import React, { memo } from 'react'
+
+import { useTheme } from '../../../hooks/use-theme'
+import { Button } from '../../button'
+import { SYMBOLS } from '../constants'
+
+export interface QuestionOptionProps {
+  option: string | { label: string; description?: string }
+  indent: number
+  isSelected: boolean
+  isFocused: boolean
+  isMultiSelect?: boolean
+  onSelect: () => void
+  onMouseOver: () => void
+}
+
+export const QuestionOption: React.FC<QuestionOptionProps> = memo(
+  ({
+    option,
+    indent,
+    isSelected,
+    isFocused,
+    isMultiSelect = false,
+    onSelect,
+    onMouseOver,
+  }) => {
+    const theme = useTheme()
+
+    // Extract label and description
+    const label = typeof option === 'string' ? option : option.label
+    const description = typeof option === 'object' ? option.description : undefined
+
+    const selectedFg = theme.name === 'dark' ? '#ffffff' : '#000000'
+    const symbol = isMultiSelect
+      ? isSelected ? SYMBOLS.CHECKBOX_CHECKED : SYMBOLS.CHECKBOX_UNCHECKED
+      : isSelected ? SYMBOLS.SELECTED : SYMBOLS.UNSELECTED
+    const fg = isFocused ? '#000000' : isSelected ? selectedFg : theme.muted
+    const attributes = isFocused || isSelected ? TextAttributes.BOLD : undefined
+
+    return (
+      <Button
+        onClick={onSelect}
+        onMouseOver={onMouseOver}
+        style={{
+          flexDirection: 'column',
+          gap: 0,
+          width: '100%',
+          backgroundColor: isFocused ? theme.primary : undefined,
+          marginBottom: 0,
+          paddingTop: 0,
+          paddingBottom: 0,
+          paddingLeft: indent,
+        }}
+      >
+        <text style={{ fg, attributes }}>{`${symbol} ${label}`}</text>
+        {/* Show description on focus */}
+        {isFocused && description && (
+          <text
+            style={{
+              fg: '#000000',
+              marginLeft: 2,
+            }}
+          >
+            {description}
+          </text>
+        )}
+      </Button>
+    )
+  },
+  // Memo comparison: only re-render if these props change
+  (prev, next) => {
+    return (
+      prev.isSelected === next.isSelected &&
+      prev.isFocused === next.isFocused &&
+      prev.option === next.option &&
+      prev.indent === next.indent &&
+      prev.isMultiSelect === next.isMultiSelect &&
+      prev.onSelect === next.onSelect &&
+      prev.onMouseOver === next.onMouseOver
+    )
+  }
+)
+
+QuestionOption.displayName = 'QuestionOption'

package/src/components/ask-user/constants.ts

@@ -0,0 +1,38 @@
+/**
+ * Visual symbols used in the UI
+ */
+export const SYMBOLS = {
+  /** Selected radio button */
+  SELECTED: '●',
+
+  /** Unselected radio button */
+  UNSELECTED: '○',
+
+  /** Completed question indicator */
+  COMPLETED: '✓',
+
+  /** Current question indicator */
+  CURRENT: '●',
+
+  /** Checked checkbox (multi-select) */
+  CHECKBOX_CHECKED: '☑',
+
+  /** Unchecked checkbox (multi-select) */
+  CHECKBOX_UNCHECKED: '☐',
+} as const
+
+/** Option type - can be string or object with label/description */
+export type AskUserOption = string | { label: string; description?: string }
+
+/** Helper to extract label from an option (handles both string and object formats) */
+export const getOptionLabel = (option: AskUserOption): string => {
+  return typeof option === 'string' ? option : option?.label ?? ''
+}
+
+/** Constant for the "Custom" option index */
+export const CUSTOM_OPTION_INDEX: number = -1
+
+export const KEYBOARD_HINTS = [
+  '↑↓ navigate •',
+  'Enter select',
+] as const