63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
import { DollarSign } from 'lucide-react';
|
|
|
|
import { ReportSection } from '../ReportSection';
|
|
|
|
import type { ReportCostAnalysis } from '@renderer/types/sessionReport';
|
|
|
|
const fmt = (v: number) => `$${v.toFixed(4)}`;
|
|
|
|
interface CostSectionProps {
|
|
data: ReportCostAnalysis;
|
|
}
|
|
|
|
export const CostSection = ({ data }: CostSectionProps) => {
|
|
const modelEntries = Object.entries(data.costByModel).sort((a, b) => b[1] - a[1]);
|
|
|
|
return (
|
|
<ReportSection title="Cost Analysis" icon={DollarSign}>
|
|
<div className="mb-4 text-2xl font-bold text-text">{fmt(data.totalSessionCostUsd)}</div>
|
|
|
|
<div className="mb-4 grid grid-cols-2 gap-3 sm:grid-cols-4">
|
|
<div>
|
|
<div className="text-xs text-text-muted">Parent Cost</div>
|
|
<div className="text-sm font-medium text-text">{fmt(data.parentCostUsd)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-text-muted">Subagent Cost</div>
|
|
<div className="text-sm font-medium text-text">{fmt(data.subagentCostUsd)}</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-text-muted">Per Commit</div>
|
|
<div className="text-sm font-medium text-text">
|
|
{data.costPerCommit != null ? fmt(data.costPerCommit) : 'N/A'}
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div className="text-xs text-text-muted">Per Line Changed</div>
|
|
<div className="text-sm font-medium text-text">
|
|
{data.costPerLineChanged != null ? `$${data.costPerLineChanged.toFixed(6)}` : 'N/A'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{modelEntries.length > 0 && (
|
|
<table className="w-full text-xs">
|
|
<thead>
|
|
<tr className="border-b border-border text-left text-text-muted">
|
|
<th className="pb-2 pr-4">Model</th>
|
|
<th className="pb-2 pr-4 text-right">Cost</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{modelEntries.map(([model, cost]) => (
|
|
<tr key={model} className="border-border/50 border-b">
|
|
<td className="py-1.5 pr-4 text-text">{model}</td>
|
|
<td className="py-1.5 pr-4 text-right text-text">{fmt(cost)}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
)}
|
|
</ReportSection>
|
|
);
|
|
};
|