124 lines
3.1 KiB
TypeScript
124 lines
3.1 KiB
TypeScript
// Import useInput from vendored Ink for bracketed paste support
|
||
import { Box, Text, useInput } from "ink";
|
||
import { useState } from "react";
|
||
import { colors } from "./colors";
|
||
|
||
interface ToolsetOption {
|
||
id: "codex" | "default";
|
||
label: string;
|
||
description: string;
|
||
tools: string[];
|
||
}
|
||
|
||
const toolsets: ToolsetOption[] = [
|
||
{
|
||
id: "codex",
|
||
label: "Codex Tools",
|
||
description: "OpenAI-style tools optimized for GPT models",
|
||
tools: [
|
||
"shell_command",
|
||
"shell",
|
||
"read_file",
|
||
"list_dir",
|
||
"grep_files",
|
||
"apply_patch",
|
||
],
|
||
},
|
||
{
|
||
id: "default",
|
||
label: "Default Tools",
|
||
description: "Anthropic-style tools optimized for Claude models",
|
||
tools: [
|
||
"Bash",
|
||
"BashOutput",
|
||
"Edit",
|
||
"Glob",
|
||
"Grep",
|
||
"LS",
|
||
"MultiEdit",
|
||
"Read",
|
||
"TodoWrite",
|
||
"Write",
|
||
],
|
||
},
|
||
];
|
||
|
||
interface ToolsetSelectorProps {
|
||
currentToolset?: "codex" | "default";
|
||
onSelect: (toolsetId: "codex" | "default") => void;
|
||
onCancel: () => void;
|
||
}
|
||
|
||
export function ToolsetSelector({
|
||
currentToolset,
|
||
onSelect,
|
||
onCancel,
|
||
}: ToolsetSelectorProps) {
|
||
const [selectedIndex, setSelectedIndex] = useState(0);
|
||
|
||
useInput((_input, key) => {
|
||
if (key.upArrow) {
|
||
setSelectedIndex((prev) => Math.max(0, prev - 1));
|
||
} else if (key.downArrow) {
|
||
setSelectedIndex((prev) => Math.min(toolsets.length - 1, prev + 1));
|
||
} else if (key.return) {
|
||
const selectedToolset = toolsets[selectedIndex];
|
||
if (selectedToolset) {
|
||
onSelect(selectedToolset.id);
|
||
}
|
||
} else if (key.escape) {
|
||
onCancel();
|
||
}
|
||
});
|
||
|
||
return (
|
||
<Box flexDirection="column" gap={1}>
|
||
<Box>
|
||
<Text bold color={colors.selector.title}>
|
||
Select Toolset (↑↓ to navigate, Enter to select, ESC to cancel)
|
||
</Text>
|
||
</Box>
|
||
|
||
<Box flexDirection="column">
|
||
{toolsets.map((toolset, index) => {
|
||
const isSelected = index === selectedIndex;
|
||
const isCurrent = toolset.id === currentToolset;
|
||
|
||
return (
|
||
<Box key={toolset.id} flexDirection="column">
|
||
<Box flexDirection="row" gap={1}>
|
||
<Text
|
||
color={
|
||
isSelected ? colors.selector.itemHighlighted : undefined
|
||
}
|
||
>
|
||
{isSelected ? "›" : " "}
|
||
</Text>
|
||
<Box flexDirection="column">
|
||
<Box flexDirection="row">
|
||
<Text
|
||
bold={isSelected}
|
||
color={
|
||
isSelected ? colors.selector.itemHighlighted : undefined
|
||
}
|
||
>
|
||
{toolset.label}
|
||
{isCurrent && (
|
||
<Text color={colors.selector.itemCurrent}>
|
||
{" "}
|
||
(current)
|
||
</Text>
|
||
)}
|
||
</Text>
|
||
</Box>
|
||
<Text dimColor> {toolset.description}</Text>
|
||
</Box>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
})}
|
||
</Box>
|
||
</Box>
|
||
);
|
||
}
|