refactor(components): reuse SelectPromptHint in ModelPicker, PlanApproval, ToolApproval

Author: remarkablemark

src/components/ModelPicker.tsx

@@ -3,7 +3,7 @@ import { Text, useInput } from 'ink';
 import { useEffect, useState } from 'react';
 
 import { ollama } from '../utils';
-import { SelectPrompt } from './SelectPrompt';
+import { SelectPrompt, SelectPromptHint } from './SelectPrompt';
 
 interface Props {
   currentModel: string;
@@ -58,9 +58,7 @@ export function ModelPicker({ currentModel, onSelect, onClose }: Props) {
       onChange={onSelect}
       onEscape={onClose}
     >
-      <Text dimColor>
-        Select a model (↑↓ + Enter to confirm, Esc to cancel)
-      </Text>
+      <SelectPromptHint message="Select a model" />
     </SelectPrompt>
   );
 }

src/components/PlanApproval.tsx

@@ -2,7 +2,7 @@ import { Box, Text } from 'ink';
 import { useCallback } from 'react';
 
 import { MODE } from '../constants';
-import { SelectPrompt } from './SelectPrompt';
+import { SelectPrompt, SelectPromptHint } from './SelectPrompt';
 
 interface Props {
   planContent: string;
@@ -42,9 +42,7 @@ export function PlanApproval({ planContent, onModeChange }: Props) {
           <Text>{planContent}</Text>
         </Box>
 
-        <Text dimColor>
-          Select execution mode (↑↓ + Enter to confirm, Esc to cancel)
-        </Text>
+        <SelectPromptHint message="Select execution mode" />
       </Box>
     </SelectPrompt>
   );

src/components/SelectPrompt.tsx

@@ -1,13 +1,17 @@
 import type { SelectProps } from '@inkjs/ui';
 import { Select } from '@inkjs/ui';
-import { Box, useInput } from 'ink';
-import type { ReactNode } from 'react';
+import { Box, Text, useInput } from 'ink';
 
 export interface SelectPromptProps extends SelectProps {
-  children?: ReactNode;
+  children?: React.ReactNode;
   onEscape?: () => void;
 }
 
+interface SelectPromptHintProps {
+  message?: string;
+  escapeLabel?: string;
+}
+
 export function SelectPrompt({
   children,
   onEscape,
@@ -27,3 +31,14 @@ export function SelectPrompt({
     </Box>
   );
 }
+
+export function SelectPromptHint({
+  message = 'Select option',
+  escapeLabel = 'cancel',
+}: SelectPromptHintProps) {
+  return (
+    <Text dimColor>
+      {message} (↑↓ + Enter to confirm, Esc to {escapeLabel})
+    </Text>
+  );
+}

src/components/ToolApproval.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 
 import { DECISION } from '../constants';
 import type { ToolCall } from '../utils/ollama';
-import { SelectPrompt } from './SelectPrompt';
+import { SelectPrompt, SelectPromptHint } from './SelectPrompt';
 
 interface Props {
   toolCall: ToolCall;
@@ -46,9 +46,7 @@ export function ToolApproval({ toolCall, onDecision }: Props) {
         </Text>
       </Box>
 
-      <Text dimColor>
-        Select approval action (↑↓ + Enter to confirm, Esc to reject)
-      </Text>
+      <SelectPromptHint message="Select approval action" escapeLabel="reject" />
     </SelectPrompt>
   );
 }