| import { useMemo, useState } from 'react'; |
| import type { JobTimings, JobTokenUsageSummary } from '../../../shared/types/api'; |
| import { useI18n } from '../../../shared/i18n/index'; |
|
|
| function formatDuration(ms: number): string { |
| if (ms >= 1000) { |
| return `${(ms / 1000).toFixed(1)}s`; |
| } |
| return `${Math.round(ms)}ms`; |
| } |
|
|
| function formatTokens(value: number): string { |
| if (value >= 1_000_000) return `${(value / 1_000_000).toFixed(2)}M`; |
| if (value >= 1_000) return `${(value / 1_000).toFixed(value >= 10_000 ? 1 : 2)}K`; |
| return String(Math.round(value)); |
| } |
|
|
| interface TimingPanelProps { |
| timings?: JobTimings; |
| submittedAt?: string | null; |
| finishedAt?: string | null; |
| tokenUsage?: JobTokenUsageSummary; |
| } |
|
|
| export function TimingPanel({ timings, submittedAt, finishedAt, tokenUsage }: TimingPanelProps) { |
| const { t } = useI18n(); |
| const [isOpen, setIsOpen] = useState(false); |
|
|
| const { total, items } = useMemo(() => { |
| const timingLabels: Array<{ key: keyof JobTimings; label: string }> = [ |
| { key: 'queue', label: t('timing.queue') }, |
| { key: 'analyze', label: t('timing.analyze') }, |
| { key: 'generate', label: t('timing.generate') }, |
| { key: 'edit', label: t('timing.edit') }, |
| { key: 'retry', label: t('timing.retry') }, |
| { key: 'render', label: t('timing.render') }, |
| { key: 'mux', label: t('timing.mux') }, |
| { key: 'store', label: t('timing.store') }, |
| ]; |
|
|
| const items = timingLabels |
| .map(({ key, label }) => ({ key, label, value: timings?.[key] })) |
| .filter((item): item is { key: keyof JobTimings; label: string; value: number } => typeof item.value === 'number'); |
|
|
| const submittedMs = submittedAt ? Date.parse(submittedAt) : Number.NaN; |
| const finishedMs = finishedAt ? Date.parse(finishedAt) : Number.NaN; |
| const endToEndTotal = Number.isFinite(submittedMs) && Number.isFinite(finishedMs) |
| ? Math.max(0, finishedMs - submittedMs) |
| : undefined; |
| const measuredTotal = timings?.total; |
| const totalIsMeasured = typeof measuredTotal === 'number'; |
| const total = totalIsMeasured |
| ? measuredTotal |
| : typeof endToEndTotal === 'number' |
| ? endToEndTotal |
| : items.reduce((sum, item) => sum + item.value, 0); |
|
|
| const rows: Array<{ key: keyof JobTimings | 'overhead'; label: string; value: number }> = [...items]; |
| if (totalIsMeasured) { |
| const measured = items.reduce((sum, item) => sum + item.value, 0); |
| const overhead = Math.max(0, total - measured); |
| if (overhead >= 1) { |
| rows.push({ key: 'overhead', label: t('timing.overhead'), value: overhead }); |
| } |
| } |
|
|
| return { total, items: rows }; |
| }, [finishedAt, submittedAt, t, timings]); |
|
|
| const tokenTotals = tokenUsage?.totals; |
| const hasMeasuredTokens = Boolean(tokenTotals && tokenTotals.measuredCalls > 0); |
| const measuredTotalTokens = tokenTotals |
| ? tokenTotals.totalTokens || tokenTotals.promptTokens + tokenTotals.completionTokens |
| : 0; |
| const hasTokenCalls = Boolean(tokenUsage?.calls.length); |
|
|
| if (!items.length && !Number.isFinite(total) && !hasTokenCalls) { |
| return null; |
| } |
|
|
| return ( |
| <div className="fixed left-4 bottom-4 z-40"> |
| <div className="relative"> |
| <div |
| className={`absolute left-0 bottom-full mb-2 w-64 rounded-2xl bg-bg-secondary/90 text-xs text-text-secondary shadow-lg shadow-black/10 border border-bg-secondary/60 backdrop-blur px-4 py-3 space-y-2 origin-bottom-left transition-all duration-200 ease-out ${ |
| isOpen |
| ? 'opacity-100 translate-y-0 scale-100 pointer-events-auto' |
| : 'opacity-0 translate-y-2 scale-95 pointer-events-none' |
| }`} |
| aria-hidden={!isOpen} |
| > |
| {items.map((item) => ( |
| <div key={item.key} className="flex items-center justify-between"> |
| <span>{item.label}</span> |
| <span className="text-text-primary font-medium">{formatDuration(item.value!)}</span> |
| </div> |
| ))} |
| {hasTokenCalls && ( |
| <> |
| <div className="border-t border-text-secondary/10 pt-2" /> |
| <div className="flex items-center justify-between"> |
| <span>{t('timing.tokensTotal')}</span> |
| <span className="text-text-primary font-medium"> |
| {hasMeasuredTokens ? formatTokens(measuredTotalTokens) : t('timing.tokensUnmeasured')} |
| </span> |
| </div> |
| {hasMeasuredTokens && ( |
| <> |
| <div className="flex items-center justify-between"> |
| <span>{t('timing.tokensInput')}</span> |
| <span className="text-text-primary font-medium">{formatTokens(tokenTotals!.promptTokens)}</span> |
| </div> |
| <div className="flex items-center justify-between"> |
| <span>{t('timing.tokensOutput')}</span> |
| <span className="text-text-primary font-medium">{formatTokens(tokenTotals!.completionTokens)}</span> |
| </div> |
| </> |
| )} |
| <div className="flex items-center justify-between"> |
| <span>{t('timing.tokensCalls')}</span> |
| <span className="text-text-primary font-medium"> |
| {tokenTotals?.measuredCalls || 0}/{tokenUsage!.calls.length} |
| </span> |
| </div> |
| {!!tokenTotals?.unmeasuredCalls && ( |
| <div className="text-[10px] leading-relaxed text-text-secondary/70"> |
| {t('timing.tokensPartial', { count: tokenTotals.unmeasuredCalls })} |
| </div> |
| )} |
| </> |
| )} |
| </div> |
|
|
| <button |
| type="button" |
| onClick={() => setIsOpen((prev) => !prev)} |
| aria-expanded={isOpen} |
| className="flex items-center gap-2 px-3 py-2 rounded-full bg-bg-secondary/80 text-xs text-text-secondary/90 shadow-lg shadow-black/10 backdrop-blur border border-bg-secondary/60 hover:text-text-primary hover:bg-bg-secondary transition-colors" |
| > |
| <span className="text-[11px] tracking-wide">{t('timing.title')}</span> |
| <span className="text-text-primary font-medium">{formatDuration(total)}</span> |
| {hasTokenCalls && ( |
| <span className="text-text-primary/80 font-medium"> |
| · {hasMeasuredTokens ? `${formatTokens(measuredTotalTokens)} tok` : t('timing.tokensUnmeasured')} |
| </span> |
| )} |
| <svg |
| className={`w-3 h-3 transition-transform ${isOpen ? 'rotate-180' : ''}`} |
| fill="none" |
| stroke="currentColor" |
| viewBox="0 0 24 24" |
| > |
| <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" /> |
| </svg> |
| </button> |
| </div> |
| </div> |
| ); |
| } |
|
|
