Files
locode/src/ui/ink/StatusBar.tsx
T
2026-07-06 12:41:15 +09:00

42 lines
1.1 KiB
TypeScript

import { Box, Text } from "ink";
import { ACCENT_HEX } from "../theme.js";
import type { PermissionMode } from "../../permissions/types.js";
const MODE_LABELS: Record<PermissionMode, string> = {
default: "default",
"auto-edit": "auto-edit",
"auto-accept": "auto-accept",
};
const MODE_COLORS: Record<PermissionMode, string> = {
default: "gray",
"auto-edit": "yellow",
"auto-accept": "red",
};
interface Props {
model: string;
mode: string;
permMode: PermissionMode;
cwd: string;
}
export function StatusBar({ model, mode, permMode, cwd }: Props) {
// Show just the last segment of cwd for brevity
const shortCwd = cwd.split(/[/\\]/).pop() ?? cwd;
return (
<Box flexDirection="row" width="100%" justifyContent="space-between" paddingX={1}>
<Box gap={1}>
<Text dimColor>{model}</Text>
<Text dimColor>·</Text>
<Text dimColor>{mode}</Text>
<Text dimColor>·</Text>
<Text dimColor>{shortCwd}</Text>
<Text dimColor>·</Text>
<Text color={MODE_COLORS[permMode]}>{MODE_LABELS[permMode]}</Text>
</Box>
<Text dimColor>/perm · /help · /exit</Text>
</Box>
);
}