claude-code-best/src/components/AgentProgressLine.tsx
2026-05-01 21:39:30 +08:00

99 lines
2.5 KiB
TypeScript

import * as React from 'react';
import { Box, Text } from '@anthropic/ink';
import { formatNumber } from '../utils/format.js';
import type { Theme } from '../utils/theme.js';
type Props = {
agentType: string;
description?: string;
name?: string;
descriptionColor?: keyof Theme;
taskDescription?: string;
toolUseCount: number;
tokens: number | null;
color?: keyof Theme;
isLast: boolean;
isResolved: boolean;
isError: boolean;
isAsync?: boolean;
shouldAnimate: boolean;
lastToolInfo?: string | null;
hideType?: boolean;
};
export function AgentProgressLine({
agentType,
description,
name,
descriptionColor,
taskDescription,
toolUseCount,
tokens,
color,
isLast,
isResolved,
isError: _isError,
isAsync = false,
shouldAnimate: _shouldAnimate,
lastToolInfo,
hideType = false,
}: Props): React.ReactNode {
const treeChar = isLast ? '└─' : '├─';
const isBackgrounded = isAsync && isResolved;
// Determine the status text
const getStatusText = (): string => {
if (!isResolved) {
return lastToolInfo || 'Initializing…';
}
if (isBackgrounded) {
return taskDescription ?? 'Running in the background';
}
return 'Done';
};
return (
<Box flexDirection="column">
<Box paddingLeft={3}>
<Text dimColor>{treeChar} </Text>
<Text dimColor={!isResolved}>
{hideType ? (
<>
<Text bold>{name ?? description ?? agentType}</Text>
{name && description && <Text dimColor>: {description}</Text>}
</>
) : (
<>
<Text bold backgroundColor={color} color={color ? 'inverseText' : undefined}>
{agentType}
</Text>
{description && (
<>
{' ('}
<Text backgroundColor={descriptionColor} color={descriptionColor ? 'inverseText' : undefined}>
{description}
</Text>
{')'}
</>
)}
</>
)}
{!isBackgrounded && (
<>
{' · '}
{toolUseCount} tool {toolUseCount === 1 ? 'use' : 'uses'}
{tokens !== null && <> · {formatNumber(tokens)} tokens</>}
</>
)}
</Text>
</Box>
{!isBackgrounded && (
<Box paddingLeft={3} flexDirection="row">
<Text dimColor>{isLast ? ' ⎿ ' : '│ ⎿ '}</Text>
<Text dimColor>{getStatusText()}</Text>
</Box>
)}
</Box>
);
}