Function ToolStatsTable

apps/vis/web/src/components/analysis/TimelineTab.tsx:153–183

({ analysis }: { analysis: Analysis })

}

function ToolStatsTable({ analysis }: { analysis: Analysis }) {
  if (analysis.toolStats.length === 0) return null;
  return (
    <section className="mt-6">
      <SectionTitle>tool usage · {analysis.toolStats.length} distinct</SectionTitle>
      <div className="mt-2 overflow-x-auto border border-border bg-surface-0">
        <table className="w-full font-mono text-[11px]">
          <thead>
            <tr className="border-b border-border text-fg-3">
              <Th align="left">tool</Th><Th>calls</Th><Th>errors</Th><Th>truncated</Th>
              <Th>avg</Th><Th>max</Th><Th>output</Th>
            </tr>
          </thead>
          <tbody>
            {analysis.toolStats.map((t) => (
              <tr key={t.name} className="border-b border-border/50">
                <td className="px-2 py-1 text-fg-0">{t.name}</td>
                <Td>{t.count}</Td>
                <Td tone={t.errorCount > 0 ? 'var(--color-sev-error)' : undefined}>{t.errorCount}</Td>
                <Td tone={t.truncatedCount > 0 ? 'var(--color-sev-warning)' : undefined}>{t.truncatedCount}</Td>
                <Td>{formatDuration(t.avgMs)}</Td>
                <Td>{formatDuration(t.maxMs)}</Td>
                <Td>{formatBytes(t.totalOutputBytes)}</Td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </section>
  );
}

function Th({ children, align = 'right' }: { children: import('react').ReactNode; align?: 'left' | 'right' }) {
  return <th className={`px-2 py-1 font-normal ${align === 'left' ? 'text-left' : 'text-right tabular'}`}>{children}</th>;