ST-1216: Insights sprint-widget — token KPI-kaartjes & per-job tabel (#114)
* feat(ST-vmc7vpps): lib/insights/token-stats.ts — sprint KPI + per-job query SQL-queries voor totale tokens/kosten (KPI) en per-job tabel met ModelPrice JOIN. Guard op lege sprintId. Tests voor empty guard, KPI-mapping en null token-data. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-vmc7vpps): TokenUsageCard — KPI-kaartjes + sorteerbare per-job tabel Client-component met drie KPI-strips (totaal tokens, kosten USD, gem. per job) en sorteerbare tabel op kosten of duur. Nulls als '—', MD3-tokens, geen hardcoded kleuren. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * feat(ST-vmc7vpps): insights page — TokenUsageCard integreren Voeg getTokenStats + TokenUsageCard imports toe aan insights/page.tsx. tokenStats apart awaiten na activeSprints (kan niet in dezelfde Promise.all). TokenUsageCard-sectie toegevoegd na AgentThroughputCard. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Janpeter Visser
GitHub
parent
b147f813d4
commit
a2c8bd41af
4 changed files with 318 additions and 0 deletions
109
app/(app)/insights/components/token-usage.tsx
Normal file
109
app/(app)/insights/components/token-usage.tsx
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
'use client'
|
||||
|
||||
import { useState, useMemo } from 'react'
|
||||
import type { TokenKpi, TokenJobRow } from '@/lib/insights/token-stats'
|
||||
|
||||
export interface TokenUsageCardProps {
|
||||
kpi: TokenKpi
|
||||
jobs: TokenJobRow[]
|
||||
}
|
||||
|
||||
type SortKey = 'cost' | 'duration'
|
||||
|
||||
function fmt(n: number | null, decimals = 0): string {
|
||||
if (n === null) return '—'
|
||||
return n.toLocaleString(undefined, { minimumFractionDigits: decimals, maximumFractionDigits: decimals })
|
||||
}
|
||||
|
||||
function fmtCost(n: number | null): string {
|
||||
if (n === null) return '—'
|
||||
return '$' + n.toFixed(4)
|
||||
}
|
||||
|
||||
function jobLabel(job: TokenJobRow): string {
|
||||
const label = job.taskTitle ?? job.ideaCode ?? job.jobId
|
||||
return label.length > 40 ? label.slice(0, 37) + '…' : label
|
||||
}
|
||||
|
||||
export function TokenUsageCard({ kpi, jobs }: TokenUsageCardProps) {
|
||||
const [sortKey, setSortKey] = useState<SortKey>('cost')
|
||||
|
||||
const sorted = useMemo(() => {
|
||||
return [...jobs].sort((a, b) => {
|
||||
if (sortKey === 'cost') return (b.costUsd ?? -Infinity) - (a.costUsd ?? -Infinity)
|
||||
return (b.durationSeconds ?? -Infinity) - (a.durationSeconds ?? -Infinity)
|
||||
})
|
||||
}, [jobs, sortKey])
|
||||
|
||||
if (kpi.jobCount === 0) {
|
||||
return <p className="text-muted-foreground">Geen token-data</p>
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* KPI strip */}
|
||||
<div className="flex gap-6">
|
||||
<div>
|
||||
<div className="text-2xl font-semibold text-foreground">
|
||||
{kpi.totalTokens.toLocaleString()}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Totaal tokens</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold text-foreground">
|
||||
${kpi.totalCostUsd.toFixed(4)}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Kosten (USD)</div>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-2xl font-semibold text-foreground">
|
||||
{kpi.avgCostPerJob ? '$' + kpi.avgCostPerJob.toFixed(4) : '—'}
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">Gem. per job</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sortable table */}
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-border bg-muted text-muted-foreground text-xs uppercase tracking-wide">
|
||||
<th className="py-2 pr-3 text-left font-medium">Taak</th>
|
||||
<th className="py-2 pr-3 text-left font-medium">Model</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">Input</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">Output</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">Cache-R</th>
|
||||
<th className="py-2 pr-3 text-right font-medium">Cache-W</th>
|
||||
<th
|
||||
className={`py-2 pr-3 text-right font-medium cursor-pointer select-none ${sortKey === 'cost' ? 'text-primary' : ''}`}
|
||||
onClick={() => setSortKey('cost')}
|
||||
>
|
||||
Kosten (USD) {sortKey === 'cost' ? '▾' : ''}
|
||||
</th>
|
||||
<th
|
||||
className={`py-2 text-right font-medium cursor-pointer select-none ${sortKey === 'duration' ? 'text-primary' : ''}`}
|
||||
onClick={() => setSortKey('duration')}
|
||||
>
|
||||
Duur (s) {sortKey === 'duration' ? '▾' : ''}
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sorted.map(job => (
|
||||
<tr key={job.jobId} className="border-b border-border last:border-0">
|
||||
<td className="py-2 pr-3 text-foreground max-w-48 truncate">{jobLabel(job)}</td>
|
||||
<td className="py-2 pr-3 text-muted-foreground whitespace-nowrap">{job.modelId ?? '—'}</td>
|
||||
<td className="py-2 pr-3 text-right tabular-nums">{fmt(job.inputTokens)}</td>
|
||||
<td className="py-2 pr-3 text-right tabular-nums">{fmt(job.outputTokens)}</td>
|
||||
<td className="py-2 pr-3 text-right tabular-nums">{fmt(job.cacheReadTokens)}</td>
|
||||
<td className="py-2 pr-3 text-right tabular-nums">{fmt(job.cacheWriteTokens)}</td>
|
||||
<td className="py-2 pr-3 text-right tabular-nums">{fmtCost(job.costUsd)}</td>
|
||||
<td className="py-2 text-right tabular-nums">{fmt(job.durationSeconds, 1)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -7,6 +7,7 @@ import { getBurndownData } from '@/lib/insights/burndown'
|
|||
import { getSprintStatusBreakdown } from '@/lib/insights/sprint-status'
|
||||
import { getVerifyResultStats, getAlignmentTrend } from '@/lib/insights/verify-stats'
|
||||
import { getJobsPerDay } from '@/lib/insights/agent-throughput'
|
||||
import { getTokenStats } from '@/lib/insights/token-stats'
|
||||
import { getVelocity } from '@/lib/insights/velocity'
|
||||
import { getBacklogHealth } from '@/lib/insights/backlog-health'
|
||||
import { SprintInfoStrip } from './components/sprint-info-strip'
|
||||
|
|
@ -15,6 +16,7 @@ import { SprintStatusDonut } from './components/sprint-status-donut'
|
|||
import { PlanQualityCard } from './components/plan-quality'
|
||||
import { AlignmentTrend } from './components/alignment-trend'
|
||||
import { AgentThroughputCard } from './components/agent-throughput'
|
||||
import { TokenUsageCard } from './components/token-usage'
|
||||
import { VelocityChart } from './components/velocity-chart'
|
||||
import { BacklogHealthCard } from './components/backlog-health'
|
||||
|
||||
|
|
@ -76,6 +78,11 @@ export default async function InsightsPage({ searchParams }: InsightsPageProps)
|
|||
getBacklogHealth(userId),
|
||||
])
|
||||
|
||||
const activeSprintId = activeSprints.find(s => s.product.id === filterProductId)?.id ?? ''
|
||||
const tokenStats = await (activeSprints.length > 0 && filterProductId
|
||||
? getTokenStats(userId, activeSprintId)
|
||||
: Promise.resolve({ kpi: { totalTokens: 0, totalCostUsd: 0, avgCostPerJob: 0, jobCount: 0 }, jobs: [] }))
|
||||
|
||||
// Date.now is an impure call but used once per request — safe in a Server Component.
|
||||
// eslint-disable-next-line react-hooks/purity
|
||||
const nowMs = Date.now()
|
||||
|
|
@ -142,6 +149,12 @@ export default async function InsightsPage({ searchParams }: InsightsPageProps)
|
|||
/>
|
||||
</section>
|
||||
|
||||
{/* Token usage */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-lg font-medium text-foreground">Token gebruik</h2>
|
||||
<TokenUsageCard kpi={tokenStats.kpi} jobs={tokenStats.jobs} />
|
||||
</section>
|
||||
|
||||
{/* Velocity */}
|
||||
<section className="space-y-3">
|
||||
<h2 className="text-lg font-medium text-foreground">Velocity</h2>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue