William Valentin
63 lines
1.5 KiB
TypeScript
63 lines
1.5 KiB
TypeScript
import React, { memo } from 'react';
|
|
import { Box, Text } from 'ink';
|
|
|
|
export interface StatusBarProps {
|
|
sessionId: string;
|
|
messageCount: number;
|
|
model: string;
|
|
tokenUsage?: {
|
|
input: number;
|
|
output: number;
|
|
};
|
|
isStreaming?: boolean;
|
|
}
|
|
|
|
function formatTokens(n: number): string {
|
|
if (n >= 1000) {
|
|
return `${(n / 1000).toFixed(1)}k`;
|
|
}
|
|
return String(n);
|
|
}
|
|
|
|
export const StatusBar = memo(function StatusBar({
|
|
sessionId,
|
|
messageCount,
|
|
model,
|
|
tokenUsage,
|
|
isStreaming,
|
|
}: StatusBarProps): React.ReactElement {
|
|
// Extract short model name (e.g., "claude-opus-4-5-20251101" -> "opus-4.5")
|
|
const shortModel = model
|
|
.replace('claude-', '')
|
|
.replace(/-\d{8}$/, '')
|
|
.replace('-4-5', '-4.5');
|
|
|
|
return (
|
|
<Box borderStyle="single" borderColor="gray" paddingX={1}>
|
|
<Box flexGrow={1}>
|
|
<Text color="cyan">Flynn</Text>
|
|
{isStreaming && (
|
|
<>
|
|
<Text color="gray"> | </Text>
|
|
<Text color="yellow">streaming...</Text>
|
|
</>
|
|
)}
|
|
</Box>
|
|
<Box>
|
|
<Text color="gray">Model: </Text>
|
|
<Text color="green">{shortModel}</Text>
|
|
<Text color="gray"> | </Text>
|
|
<Text color="gray">Msgs: </Text>
|
|
<Text>{messageCount}</Text>
|
|
{tokenUsage && (
|
|
<>
|
|
<Text color="gray"> | </Text>
|
|
<Text color="gray">Tokens: </Text>
|
|
<Text>{formatTokens(tokenUsage.input)}/{formatTokens(tokenUsage.output)}</Text>
|
|
</>
|
|
)}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
});
|