gencode-ai 0.1.2 → 0.1.3

package/src/cli/components/App.tsx

@@ -28,8 +28,10 @@ import {
   PermissionAuditDisplay,
 } from './PermissionPrompt.js';
 import { TodoList } from './TodoList.js';
+import { QuestionPrompt, AnswerDisplay } from './QuestionPrompt.js';
 import { colors, icons } from './theme.js';
-import { getTodos } from '../../tools/index.js';
+import { getTodos, formatAnswersForDisplay } from '../../tools/index.js';
+import type { Question, QuestionAnswer } from '../../tools/types.js';
 import type { ProviderName } from '../../providers/index.js';
 import type { ApprovalAction, ApprovalSuggestion } from '../../permissions/types.js';
 import { gatherContextFiles, buildInitPrompt, getContextSummary } from '../../memory/index.js';
@@ -49,6 +51,11 @@ interface ConfirmState {
   resolve: (action: ApprovalAction) => void;
 }
 
+interface QuestionState {
+  questions: Question[];
+  resolve: (answers: QuestionAnswer[]) => void;
+}
+
 interface SettingsManager {
   save: (settings: { model?: string }) => Promise<void>;
   getCwd?: () => string;
@@ -235,6 +242,7 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
   const [processingStartTime, setProcessingStartTime] = useState<number | undefined>(undefined);
   const [tokenCount, setTokenCount] = useState(0);
   const [confirmState, setConfirmState] = useState<ConfirmState | null>(null);
+  const [questionState, setQuestionState] = useState<QuestionState | null>(null);
   const [showModelSelector, setShowModelSelector] = useState(false);
   const [showProviderManager, setShowProviderManager] = useState(false);
   const [currentModel, setCurrentModel] = useState(config.model);
@@ -276,6 +284,13 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         });
       });
 
+      // Set askUser callback for AskUserQuestion tool
+      agent.setAskUserCallback(async (questions) => {
+        return new Promise<QuestionAnswer[]>((resolve) => {
+          setQuestionState({ questions, resolve });
+        });
+      });
+
       // Set callback to save permission rules to settings.local.json
       if (settingsManager?.addPermissionRule) {
         agent.setSaveRuleCallback(async (tool, pattern) => {
@@ -295,6 +310,32 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
     init();
   }, [agent, resumeLatest, addHistory, permissionSettings, settingsManager]);
 
+  // Handle question answers (AskUserQuestion)
+  const handleQuestionComplete = useCallback((answers: QuestionAnswer[]) => {
+    if (questionState) {
+      // Show confirmation in history
+      addHistory({
+        type: 'info',
+        content: formatAnswersForDisplay(answers),
+      });
+      questionState.resolve(answers);
+      setQuestionState(null);
+    }
+  }, [questionState, addHistory]);
+
+  // Handle question cancel
+  const handleQuestionCancel = useCallback(() => {
+    if (questionState) {
+      // Clear pending tool display (no more spinner)
+      pendingToolRef.current = null;
+      setPendingTool(null);
+      // Add canceled message to history
+      addHistory({ type: 'info', content: 'Question canceled' });
+      questionState.resolve([]); // Return empty answers on cancel
+      setQuestionState(null);
+    }
+  }, [questionState, addHistory]);
+
   // Handle permission decision
   const handlePermissionDecision = (action: ApprovalAction) => {
     if (confirmState) {
@@ -730,6 +771,9 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
       setIsProcessing(false);
       setStreamingText('');
       streamingTextRef.current = '';
+      // Clear pending tool (stop spinner)
+      pendingToolRef.current = null;
+      setPendingTool(null);
       addHistory({ type: 'info', content: 'Interrupted' });
     }
 
@@ -837,6 +881,14 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         />
       )}
 
+      {questionState && (
+        <QuestionPrompt
+          questions={questionState.questions}
+          onComplete={handleQuestionComplete}
+          onCancel={handleQuestionCancel}
+        />
+      )}
+
       {showModelSelector && (
         <Box marginTop={1}>
           <ModelSelector
@@ -861,7 +913,7 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         </Box>
       )}
 
-      {!confirmState && !showModelSelector && !showProviderManager && (
+      {!confirmState && !questionState && !showModelSelector && !showProviderManager && (
         <Box flexDirection="column" marginTop={1}>
           <PromptInput
             key={inputKey}
@@ -875,7 +927,7 @@ export function App({ config, settingsManager, resumeLatest, permissionSettings
         </Box>
       )}
 
-      {isProcessing && !confirmState ? (
+      {isProcessing && !confirmState && !questionState ? (
         <ProgressBar startTime={processingStartTime} tokenCount={tokenCount} isThinking={isThinking} />
       ) : showCmdSuggestions && cmdSuggestions.length > 0 ? (
         <Box marginTop={1}>

package/src/cli/components/Messages.tsx

@@ -126,6 +126,11 @@ function formatToolInput(name: string, input: Record<string, unknown>): string {
       const todos = input.todos as Array<{ content: string; status: string }> || [];
       return `${todos.length} task${todos.length !== 1 ? 's' : ''}`;
     }
+    case 'AskUserQuestion': {
+      // Show collapsed JSON preview
+      const json = JSON.stringify(input);
+      return truncate(json, 60);
+    }
     default:
       return truncate(JSON.stringify(input), 40);
   }
@@ -135,6 +140,25 @@ export function ToolCall({ name, input }: ToolCallProps) {
   // Hide TodoWrite (shown in TodoList component)
   if (name === 'TodoWrite') return null;
 
+  // Special display for AskUserQuestion (Claude Code style with expand hint)
+  if (name === 'AskUserQuestion') {
+    const json = JSON.stringify(input);
+    const displayJson = truncate(json, 70);
+
+    return (
+      <Box marginTop={1} flexDirection="column">
+        <Box>
+          <Text color={colors.tool}>{icons.tool}</Text>
+          <Text> </Text>
+          <Text bold>{name}</Text>
+          <Text color={colors.textMuted}>  </Text>
+          <Text color={colors.textSecondary}>{displayJson}</Text>
+          <Text color={colors.textMuted}>  ctrl+o</Text>
+        </Box>
+      </Box>
+    );
+  }
+
   const displayInput = formatToolInput(name, input);
 
   return (
@@ -162,6 +186,25 @@ export function PendingToolCall({ name, input }: PendingToolCallProps) {
   // Hide TodoWrite (shown in TodoList component)
   if (name === 'TodoWrite') return null;
 
+  // Special display for AskUserQuestion
+  if (name === 'AskUserQuestion') {
+    const json = JSON.stringify(input);
+    const displayJson = truncate(json, 70);
+
+    return (
+      <Box marginTop={1}>
+        <Text color={colors.tool}>
+          <InkSpinner type="dots" />
+        </Text>
+        <Text> </Text>
+        <Text bold>{name}</Text>
+        <Text color={colors.textMuted}>  </Text>
+        <Text color={colors.textSecondary}>{displayJson}</Text>
+        <Text color={colors.textMuted}>  ctrl+o</Text>
+      </Box>
+    );
+  }
+
   const displayInput = formatToolInput(name, input);
 
   return (

package/src/cli/components/QuestionPrompt.tsx

@@ -0,0 +1,462 @@
+/**
+ * QuestionPrompt Component - Claude Code style structured questioning UI
+ *
+ * Matches Claude Code's AskUserQuestion UI pattern:
+ * - Progress bar with step indicators (← □ Step1 □ Step2 ✓ Submit →)
+ * - Numbered options with cursor indicator
+ * - Description on separate line
+ * - Keyboard hints at bottom
+ */
+
+import { useState, useCallback } from 'react';
+import { Box, Text, useInput } from 'ink';
+import { colors } from './theme.js';
+import type { Question, QuestionAnswer } from '../../tools/types.js';
+
+// ============================================================================
+// Types
+// ============================================================================
+
+interface QuestionPromptProps {
+  questions: Question[];
+  onComplete: (answers: QuestionAnswer[]) => void;
+  onCancel?: () => void;
+}
+
+interface OptionWithOther {
+  label: string;
+  description: string;
+  isOther?: boolean;
+}
+
+// ============================================================================
+// Progress Bar Component
+// ============================================================================
+
+interface ProgressBarProps {
+  questions: Question[];
+  currentIndex: number;
+  answers: QuestionAnswer[];
+  showSubmit?: boolean;
+}
+
+function ProgressBar({ questions, currentIndex, answers, showSubmit = true }: ProgressBarProps) {
+  const isReviewMode = currentIndex >= questions.length;
+
+  return (
+    <Box>
+      <Text color={colors.textMuted}>← </Text>
+      {questions.map((q, idx) => {
+        const isCompleted = idx < answers.length;
+        const isCurrent = idx === currentIndex;
+        const checkmark = isCompleted ? '☒' : '☐';
+
+        return (
+          <Box key={idx}>
+            {isCurrent ? (
+              <Text backgroundColor="#6366F1" color="#FFFFFF" bold>
+                {` □ ${q.header} `}
+              </Text>
+            ) : (
+              <Text color={isCompleted ? colors.textSecondary : colors.textMuted}>
+                {checkmark} {q.header}
+              </Text>
+            )}
+            <Text color={colors.textMuted}> </Text>
+          </Box>
+        );
+      })}
+      {showSubmit && (
+        <>
+          {isReviewMode ? (
+            <Text backgroundColor="#22C55E" color="#FFFFFF" bold>
+              {` ✓ Submit `}
+            </Text>
+          ) : (
+            <Text color={colors.textMuted}>✓ Submit</Text>
+          )}
+        </>
+      )}
+      <Text color={colors.textMuted}> →</Text>
+    </Box>
+  );
+}
+
+// ============================================================================
+// QuestionPrompt Component
+// ============================================================================
+
+export function QuestionPrompt({ questions, onComplete, onCancel }: QuestionPromptProps) {
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [answers, setAnswers] = useState<QuestionAnswer[]>([]);
+  const [selectedOptions, setSelectedOptions] = useState<Set<string>>(new Set());
+  const [optionIndex, setOptionIndex] = useState(0);
+  const [showOtherInput, setShowOtherInput] = useState(false);
+  const [otherInput, setOtherInput] = useState('');
+  const [isReviewMode, setIsReviewMode] = useState(false);
+  const [reviewOptionIndex, setReviewOptionIndex] = useState(0);
+
+  const currentQuestion = questions[currentQuestionIndex];
+  const showProgressBar = questions.length > 1;
+
+  // Add "Type something." option to the list
+  const optionsWithOther: OptionWithOther[] = currentQuestion
+    ? [
+        ...currentQuestion.options,
+        { label: 'Type something.', description: '', isOther: true },
+      ]
+    : [];
+
+  // Toggle option selection (for multi-select)
+  const toggleOption = useCallback(() => {
+    const option = optionsWithOther[optionIndex];
+    setSelectedOptions((prev) => {
+      const next = new Set(prev);
+      if (next.has(option.label)) {
+        next.delete(option.label);
+      } else {
+        next.add(option.label);
+      }
+      return next;
+    });
+  }, [optionIndex, optionsWithOther]);
+
+  // Finish current question and move to next or review
+  const finishQuestion = useCallback(
+    (selected: string[], customInput?: string) => {
+      const answer: QuestionAnswer = {
+        question: currentQuestion.question,
+        header: currentQuestion.header,
+        selectedOptions: selected.filter((s) => s !== 'Type something.'),
+        customInput,
+      };
+
+      const newAnswers = [...answers, answer];
+
+      if (currentQuestionIndex < questions.length - 1) {
+        // Move to next question
+        setAnswers(newAnswers);
+        setCurrentQuestionIndex((i) => i + 1);
+        setSelectedOptions(new Set());
+        setOptionIndex(0);
+        setShowOtherInput(false);
+        setOtherInput('');
+      } else {
+        // All questions answered, go to review mode (for multi-question)
+        setAnswers(newAnswers);
+        if (questions.length > 1) {
+          setIsReviewMode(true);
+          setReviewOptionIndex(0);
+        } else {
+          // Single question, complete immediately
+          onComplete(newAnswers);
+        }
+      }
+    },
+    [currentQuestion, currentQuestionIndex, questions.length, answers, onComplete]
+  );
+
+  // Handle selection (Enter key)
+  const handleSelect = useCallback(() => {
+    const option = optionsWithOther[optionIndex];
+
+    if (currentQuestion.multiSelect) {
+      if (selectedOptions.size === 0) {
+        toggleOption();
+        return;
+      }
+      if (selectedOptions.has('Type something.')) {
+        setShowOtherInput(true);
+      } else {
+        finishQuestion([...selectedOptions]);
+      }
+    } else {
+      if (option.isOther) {
+        setShowOtherInput(true);
+      } else {
+        finishQuestion([option.label]);
+      }
+    }
+  }, [
+    optionIndex,
+    optionsWithOther,
+    currentQuestion?.multiSelect,
+    selectedOptions,
+    toggleOption,
+    finishQuestion,
+  ]);
+
+  // Handle keyboard input
+  useInput((input, key) => {
+    // Review mode navigation
+    if (isReviewMode) {
+      if (key.upArrow) {
+        setReviewOptionIndex((i) => Math.max(0, i - 1));
+      } else if (key.downArrow) {
+        setReviewOptionIndex((i) => Math.min(1, i + 1));
+      } else if (key.return) {
+        if (reviewOptionIndex === 0) {
+          // Submit
+          onComplete(answers);
+        } else {
+          // Cancel
+          onCancel?.();
+        }
+      } else if (key.escape) {
+        onCancel?.();
+      }
+      return;
+    }
+
+    if (showOtherInput) {
+      if (key.return) {
+        if (otherInput.trim()) {
+          if (currentQuestion.multiSelect) {
+            const selected = [...selectedOptions].filter((s) => s !== 'Type something.');
+            finishQuestion(selected, otherInput.trim());
+          } else {
+            finishQuestion([], otherInput.trim());
+          }
+        }
+      } else if (key.escape) {
+        setShowOtherInput(false);
+        setOtherInput('');
+      } else if (key.backspace || key.delete) {
+        setOtherInput((prev) => prev.slice(0, -1));
+      } else if (input && !key.ctrl && !key.meta) {
+        setOtherInput((prev) => prev + input);
+      }
+      return;
+    }
+
+    // Navigation
+    if (key.upArrow) {
+      setOptionIndex((i) => Math.max(0, i - 1));
+    } else if (key.downArrow) {
+      setOptionIndex((i) => Math.min(optionsWithOther.length - 1, i + 1));
+    } else if (key.tab) {
+      // Tab cycles through options
+      setOptionIndex((i) => (i + 1) % optionsWithOther.length);
+    }
+
+    // Selection
+    if (key.return) {
+      handleSelect();
+    }
+
+    // Toggle (multi-select only)
+    if (input === ' ' && currentQuestion.multiSelect) {
+      toggleOption();
+    }
+
+    // Number shortcuts (1-5)
+    const num = parseInt(input, 10);
+    if (num >= 1 && num <= optionsWithOther.length) {
+      setOptionIndex(num - 1);
+      if (!currentQuestion.multiSelect) {
+        const option = optionsWithOther[num - 1];
+        if (option.isOther) {
+          setShowOtherInput(true);
+        } else {
+          finishQuestion([option.label]);
+        }
+      }
+    }
+
+    // Escape to cancel
+    if (key.escape && onCancel) {
+      onCancel();
+    }
+  });
+
+  // Review mode UI
+  if (isReviewMode) {
+    return (
+      <Box flexDirection="column" marginTop={1}>
+        {/* Progress bar */}
+        {showProgressBar && (
+          <Box marginBottom={1}>
+            <ProgressBar
+              questions={questions}
+              currentIndex={questions.length}
+              answers={answers}
+            />
+          </Box>
+        )}
+
+        {/* Review title */}
+        <Box marginBottom={1}>
+          <Text bold>Review your answers</Text>
+        </Box>
+
+        {/* Answered questions summary */}
+        <Box flexDirection="column" marginBottom={1} paddingLeft={1}>
+          {answers.map((answer, idx) => {
+            const selections = answer.customInput
+              ? [...answer.selectedOptions, answer.customInput].join(', ')
+              : answer.selectedOptions.join(', ');
+
+            return (
+              <Box key={idx} flexDirection="column" marginBottom={1}>
+                <Box>
+                  <Text color={colors.textSecondary}>● </Text>
+                  <Text bold>{answer.question}</Text>
+                </Box>
+                <Box paddingLeft={2}>
+                  <Text color={colors.primary}>→ {selections}</Text>
+                </Box>
+              </Box>
+            );
+          })}
+        </Box>
+
+        {/* Ready to submit */}
+        <Box marginBottom={1}>
+          <Text>Ready to submit your answers?</Text>
+        </Box>
+
+        {/* Submit/Cancel options */}
+        <Box flexDirection="column" paddingLeft={1}>
+          <Box>
+            <Text color={reviewOptionIndex === 0 ? colors.text : colors.textMuted}>
+              {reviewOptionIndex === 0 ? '❯ ' : '  '}
+            </Text>
+            <Text color={colors.primary} bold={reviewOptionIndex === 0}>
+              1. Submit answers
+            </Text>
+          </Box>
+          <Box>
+            <Text color={reviewOptionIndex === 1 ? colors.text : colors.textMuted}>
+              {reviewOptionIndex === 1 ? '❯ ' : '  '}
+            </Text>
+            <Text bold={reviewOptionIndex === 1}>2. Cancel</Text>
+          </Box>
+        </Box>
+
+        {/* Separator */}
+        <Box marginTop={1} marginBottom={1}>
+          <Text color={colors.textMuted}>{'─'.repeat(60)}</Text>
+        </Box>
+
+        {/* Keyboard hints */}
+        <Box>
+          <Text color={colors.textMuted}>
+            Enter to select · Tab/Arrow keys to navigate · Esc to cancel
+          </Text>
+        </Box>
+      </Box>
+    );
+  }
+
+  // Normal question mode UI
+  return (
+    <Box flexDirection="column" marginTop={1}>
+      {/* Progress bar */}
+      {showProgressBar && (
+        <Box marginBottom={1}>
+          <ProgressBar
+            questions={questions}
+            currentIndex={currentQuestionIndex}
+            answers={answers}
+          />
+        </Box>
+      )}
+
+      {/* Question text */}
+      <Box marginBottom={1}>
+        <Text bold>{currentQuestion.question}</Text>
+      </Box>
+
+      {/* Options list */}
+      <Box flexDirection="column" paddingLeft={1}>
+        {optionsWithOther.map((option, index) => {
+          const isSelected = index === optionIndex;
+          const isChecked = selectedOptions.has(option.label);
+
+          return (
+            <Box key={option.label} flexDirection="column" marginBottom={option.description ? 1 : 0}>
+              {/* Option row */}
+              <Box>
+                <Text color={isSelected ? colors.text : colors.textMuted}>
+                  {isSelected ? '❯ ' : '  '}
+                </Text>
+                <Text color={colors.textMuted}>{index + 1}. </Text>
+                {currentQuestion.multiSelect && (
+                  <Text color={colors.primary}>{isChecked ? '☒ ' : '☐ '}</Text>
+                )}
+                <Text color={colors.primary} bold>
+                  {option.label}
+                </Text>
+              </Box>
+
+              {/* Description (if exists) */}
+              {option.description && (
+                <Box paddingLeft={4}>
+                  <Text color={colors.textMuted}>{option.description}</Text>
+                </Box>
+              )}
+            </Box>
+          );
+        })}
+      </Box>
+
+      {/* Other input field */}
+      {showOtherInput && (
+        <Box marginTop={1} paddingLeft={1}>
+          <Text color={colors.textMuted}>Type your answer: </Text>
+          <Text>{otherInput}</Text>
+          <Text color={colors.primary}>▋</Text>
+        </Box>
+      )}
+
+      {/* Separator */}
+      <Box marginTop={1} marginBottom={1}>
+        <Text color={colors.textMuted}>{'─'.repeat(60)}</Text>
+      </Box>
+
+      {/* Chat about this (placeholder) */}
+      <Box marginBottom={1}>
+        <Text color={colors.textMuted}> Chat about this</Text>
+      </Box>
+
+      {/* Keyboard hints */}
+      <Box>
+        <Text color={colors.textMuted}>
+          Enter to select · Tab/Arrow keys to navigate
+          {currentQuestion.multiSelect && ' · Space to toggle'}
+          {onCancel && ' · Esc to cancel'}
+        </Text>
+      </Box>
+    </Box>
+  );
+}
+
+// ============================================================================
+// Answer Display Component (shown after completion)
+// ============================================================================
+
+interface AnswerDisplayProps {
+  answers: QuestionAnswer[];
+  compact?: boolean;
+}
+
+export function AnswerDisplay({ answers, compact = true }: AnswerDisplayProps) {
+  return (
+    <Box flexDirection="column">
+      {answers.map((answer, index) => {
+        const selections = answer.customInput
+          ? [...answer.selectedOptions, answer.customInput].join(', ')
+          : answer.selectedOptions.join(', ');
+
+        return (
+          <Box key={index}>
+            <Text color={colors.textSecondary}>● </Text>
+            <Text>{answer.question}</Text>
+            <Text color={colors.textMuted}> → </Text>
+            <Text color={colors.primary}>{selections || '(none)'}</Text>
+          </Box>
+        );
+      })}
+    </Box>
+  );
+}

package/src/cli/components/index.ts

@@ -25,3 +25,4 @@ export {
   PermissionRulesDisplay,
   PermissionAuditDisplay,
 } from './PermissionPrompt.js';
+export { QuestionPrompt, AnswerDisplay } from './QuestionPrompt.js';

package/src/cli/components/theme.ts

@@ -35,9 +35,19 @@ export const icons = {
   // UI
   thinking: '✱', // Star for thinking state
   cursor: '▋',
-  // Selection
+  // Selection (single-select)
   radio: '●', // Filled radio for selected
   radioEmpty: '○', // Empty radio for unselected
+  // Selection (multi-select)
+  checkbox: '☑', // Checked checkbox
+  checkboxEmpty: '☐', // Empty checkbox
+  // Chip/tag borders (Claude Code style headers)
+  chipLeft: '╭─',
+  chipRight: '─╮',
+  // Box drawing
+  boxTop: '╭',
+  boxBottom: '╰',
+  boxVertical: '│',
   // Tree connectors
   treeEnd: '└', // Tree end connector for tool results
 };

package/src/permissions/types.ts

@@ -227,6 +227,8 @@ export const DEFAULT_PERMISSION_CONFIG: PermissionConfig = {
     { tool: 'LSP', mode: 'auto', description: 'Language server' },
     // Internal state management - auto-approve (no side effects)
     { tool: 'TodoWrite', mode: 'auto', description: 'Task tracking' },
+    // User interaction - auto-approve (asking user questions, not dangerous)
+    { tool: 'AskUserQuestion', mode: 'auto', description: 'User questioning' },
   ],
   allowedPrompts: [],
 };