81 lines
2.4 KiB
TypeScript
81 lines
2.4 KiB
TypeScript
import { Box, Text, useInput } from "ink";
|
|
import { memo, useState } from "react";
|
|
import { colors } from "./colors";
|
|
|
|
type Props = {
|
|
onApprove: () => void;
|
|
onReject: () => void;
|
|
};
|
|
|
|
export const EnterPlanModeDialog = memo(({ onApprove, onReject }: Props) => {
|
|
const [selectedOption, setSelectedOption] = useState(0);
|
|
|
|
const options = [
|
|
{ label: "Yes, enter plan mode", action: onApprove },
|
|
{ label: "No, start implementing now", action: onReject },
|
|
];
|
|
|
|
useInput((input, key) => {
|
|
if (key.upArrow) {
|
|
setSelectedOption((prev) => Math.max(0, prev - 1));
|
|
} else if (key.downArrow) {
|
|
setSelectedOption((prev) => Math.min(options.length - 1, prev + 1));
|
|
} else if (key.return) {
|
|
options[selectedOption]?.action();
|
|
} else if (input === "1") {
|
|
onApprove();
|
|
} else if (input === "2") {
|
|
onReject();
|
|
}
|
|
});
|
|
|
|
return (
|
|
<Box flexDirection="column" paddingY={1}>
|
|
<Box marginBottom={1}>
|
|
<Text color={colors.approval.header} bold>
|
|
Enter plan mode?
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box marginBottom={1} flexDirection="column">
|
|
<Text>
|
|
Letta wants to enter plan mode to explore and design an implementation
|
|
approach.
|
|
</Text>
|
|
<Text> </Text>
|
|
<Text>In plan mode, Letta will:</Text>
|
|
<Text> • Explore the codebase thoroughly</Text>
|
|
<Text> • Identify existing patterns</Text>
|
|
<Text> • Design an implementation strategy</Text>
|
|
<Text> • Present a plan for your approval</Text>
|
|
<Text> </Text>
|
|
<Text dimColor>
|
|
No code changes will be made until you approve the plan.
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box flexDirection="column">
|
|
{options.map((option, index) => {
|
|
const isSelected = index === selectedOption;
|
|
const color = isSelected ? colors.approval.header : undefined;
|
|
|
|
return (
|
|
<Box key={option.label} flexDirection="row">
|
|
<Box width={2} flexShrink={0}>
|
|
<Text color={color}>{isSelected ? ">" : " "}</Text>
|
|
</Box>
|
|
<Box flexGrow={1}>
|
|
<Text color={color} bold={isSelected}>
|
|
{index + 1}. {option.label}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
});
|
|
|
|
EnterPlanModeDialog.displayName = "EnterPlanModeDialog";
|