/** * ToolBreakdownItem - Single tool breakdown item display. */ import React from 'react'; import { formatTokens } from '../utils/formatting'; import type { ToolTokenBreakdown } from '@renderer/types/contextInjection'; interface ToolBreakdownItemProps { tool: ToolTokenBreakdown;} export const ToolBreakdownItem = ({ tool,}: Readonly<ToolBreakdownItemProps>): React.ReactElement => { return ( <div className="flex items-center gap-2 py-0.5 text-xs"> <span style={{ color: 'var(--color-text-muted)' }}>{tool.toolName}</span> <span style={{ color: 'var(--color-text-muted)', opacity: 0.7 }}> ~{formatTokens(tool.tokenCount)} </span> {tool.isError && ( <span className="rounded px-1 py-0.5" style={{ backgroundColor: 'var(--color-error-subtle)', color: 'var(--color-error)', fontSize: '10px', }} > error </span> )} </div> );};
/**
* ToolBreakdownItem - Single tool breakdown item display.
*/
import React from 'react';
import { formatTokens } from '../utils/formatting';
import type { ToolTokenBreakdown } from '@renderer/types/contextInjection';
interface ToolBreakdownItemProps {
tool: ToolTokenBreakdown;
}
export const ToolBreakdownItem = ({
tool,
}: Readonly<ToolBreakdownItemProps>): React.ReactElement => {
return (
<div className="flex items-center gap-2 py-0.5 text-xs">
<span style={{ color: 'var(--color-text-muted)' }}>{tool.toolName}</span>
<span style={{ color: 'var(--color-text-muted)', opacity: 0.7 }}>
~{formatTokens(tool.tokenCount)}
</span>
{tool.isError && (
<span
className="rounded px-1 py-0.5"
style={{
backgroundColor: 'var(--color-error-subtle)',
color: 'var(--color-error)',
fontSize: '10px',
}}
>
error
</span>
)}
</div>
);
};