@oh-my-pi/omp-stats 18.3.4 → 18.4.0

package/src/client/traces/AggregatesPanel.tsx

@@ -1,88 +1,69 @@
 /**
- * Collapsible per-tool duration aggregates for one trace, sorted by total
- * time descending (as produced by the server).
+ * Per-tool duration aggregates for one trace (sortable; server order is total
+ * time descending).
  */
 
-import { ChevronDown, ChevronRight } from "lucide-react";
-import { useMemo, useState } from "react";
 import { formatDurationMs, formatInteger } from "../data/formatters";
 import type { TraceToolStat } from "../types";
-import { DataTable } from "../ui/DataTable";
+import { Badge, Card, type Column, MeterCell, Table } from "../ui";
 
 export interface AggregatesPanelProps {
 	toolStats: TraceToolStat[];
+	index?: number;
 }
 
-export function AggregatesPanel({ toolStats }: AggregatesPanelProps) {
-	const [open, setOpen] = useState(false);
-
-	const columns = useMemo(
-		() => [
-			{ key: "tool", header: "Tool", render: (item: TraceToolStat) => item.tool },
-			{ key: "calls", header: "Calls", numeric: true, render: (item: TraceToolStat) => formatInteger(item.calls) },
-			{
-				key: "errors",
-				header: "Errors",
-				numeric: true,
-				render: (item: TraceToolStat) => formatInteger(item.errors),
-			},
-			{
-				key: "total",
-				header: "Total",
-				numeric: true,
-				render: (item: TraceToolStat) => formatDurationMs(item.totalMs),
-			},
-			{
-				key: "avg",
-				header: "Avg",
-				numeric: true,
-				render: (item: TraceToolStat) => formatDurationMs(item.calls > 0 ? item.totalMs / item.calls : 0),
-			},
-			{ key: "max", header: "Max", numeric: true, render: (item: TraceToolStat) => formatDurationMs(item.maxMs) },
-		],
-		[],
-	);
-
+export function AggregatesPanel({ toolStats, index }: AggregatesPanelProps) {
 	if (toolStats.length === 0) return null;
-
-	return (
-		<div className="stats-panel">
-			<button
-				type="button"
-				onClick={() => setOpen(prev => !prev)}
-				aria-expanded={open}
-				style={{
-					display: "flex",
-					alignItems: "center",
-					gap: 6,
-					width: "100%",
-					background: "none",
-					border: "none",
-					padding: "10px 14px",
-					cursor: "pointer",
-					textAlign: "left",
-				}}
-			>
-				{open ? (
-					<ChevronDown size={14} className="stats-text-muted" aria-hidden="true" />
+	const maxTotal = Math.max(...toolStats.map(stat => stat.totalMs));
+	const columns: Column<TraceToolStat>[] = [
+		{ key: "tool", header: "Tool", render: row => <span className="mono">{row.tool}</span>, sort: row => row.tool },
+		{
+			key: "calls",
+			header: "Calls",
+			align: "right",
+			render: row => <span className="num">{formatInteger(row.calls)}</span>,
+			sort: row => row.calls,
+		},
+		{
+			key: "errors",
+			header: "Errors",
+			align: "right",
+			render: row =>
+				row.errors > 0 ? (
+					<Badge tone="bad">{formatInteger(row.errors)} failed</Badge>
 				) : (
-					<ChevronRight size={14} className="stats-text-muted" aria-hidden="true" />
-				)}
-				<span className="stats-panel-title">Tool Aggregates</span>
-				<span className="stats-text-muted" style={{ fontSize: 11 }}>
-					{toolStats.length} tools
-				</span>
-			</button>
-			{open && (
-				<div className="stats-panel-body">
-					<DataTable
-						columns={columns}
-						data={toolStats}
-						keyExtractor={item => item.tool}
-						emptyText="No tool calls"
-					/>
-				</div>
-			)}
-		</div>
+					<span className="num dim">0</span>
+				),
+			sort: row => row.errors,
+		},
+		{
+			key: "total",
+			header: "Total",
+			align: "right",
+			width: 200,
+			render: row => (
+				<MeterCell value={row.totalMs} max={maxTotal} display={formatDurationMs(row.totalMs)} color="var(--warn)" />
+			),
+			sort: row => row.totalMs,
+		},
+		{
+			key: "avg",
+			header: "Avg",
+			align: "right",
+			render: row => <span className="num">{formatDurationMs(row.calls > 0 ? row.totalMs / row.calls : 0)}</span>,
+			sort: row => (row.calls > 0 ? row.totalMs / row.calls : 0),
+		},
+		{
+			key: "max",
+			header: "Max",
+			align: "right",
+			render: row => <span className="num">{formatDurationMs(row.maxMs)}</span>,
+			sort: row => row.maxMs,
+		},
+	];
+	return (
+		<Card title="Tool aggregates" description={`${toolStats.length} tools, by total time`} flush index={index}>
+			<Table columns={columns} rows={toolStats} rowKey={row => row.tool} dense limit={12} />
+		</Card>
 	);
 }

package/src/client/traces/Minimap.tsx

@@ -5,10 +5,9 @@
 
 import { useCallback, useEffect, useRef, useState } from "react";
 import type { TraceSpanKind, TraceTrack } from "../types";
-import { useSystemTheme } from "../useSystemTheme";
 import type { TimelineViewport } from "./TimelineCanvas";
 import type { TraceScale } from "./time-scale";
-import { TRACE_THEMES } from "./trace-colors";
+import { useTraceTheme } from "./trace-colors";
 
 export interface MinimapProps {
 	tracks: TraceTrack[];
@@ -25,8 +24,7 @@ const MIN_WINDOW_U = 10;
 type DragMode = "move" | "left" | "right" | "create";
 
 export function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapProps) {
-	const theme = useSystemTheme();
-	const colors = TRACE_THEMES[theme];
+	const colors = useTraceTheme();
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 	const [width, setWidth] = useState(800);
 	const dragRef = useRef<{ mode: DragMode; startX: number; startViewport: TimelineViewport } | null>(null);
@@ -80,14 +78,14 @@ export function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapPr
 		// Viewport brush.
 		const vx0 = toX(viewport.u0);
 		const vx1 = toX(viewport.u1);
-		ctx.fillStyle = theme === "dark" ? "rgba(255,255,255,0.08)" : "rgba(0,0,0,0.06)";
+		ctx.fillStyle = colors.brush;
 		ctx.fillRect(vx0, 0, vx1 - vx0, HEIGHT);
 		ctx.strokeStyle = colors.selection;
 		ctx.strokeRect(vx0 + 0.5, 0.5, vx1 - vx0 - 1, HEIGHT - 1);
 		ctx.fillStyle = colors.selection;
 		ctx.fillRect(vx0, 0, 2, HEIGHT);
 		ctx.fillRect(vx1 - 2, 0, 2, HEIGHT);
-	}, [tracks, scale, viewport, colors, theme, width, toX]);
+	}, [tracks, scale, viewport, colors, width, toX]);
 
 	const handlePointerDown = (event: React.PointerEvent<HTMLCanvasElement>) => {
 		const rect = event.currentTarget.getBoundingClientRect();
@@ -145,15 +143,8 @@ export function Minimap({ tracks, scale, viewport, onViewportChange }: MinimapPr
 			ref={canvasRef}
 			width={Math.floor(width * devicePixelRatio)}
 			height={Math.floor(HEIGHT * devicePixelRatio)}
-			style={{
-				width: "100%",
-				height: HEIGHT,
-				display: "block",
-				cursor: "crosshair",
-				borderRadius: 4,
-				border: "1px solid var(--border)",
-				touchAction: "none",
-			}}
+			className="traces-minimap"
+			style={{ height: HEIGHT }}
 			role="slider"
 			aria-label="Timeline overview brush"
 			aria-valuemin={0}

package/src/client/traces/SpanDrawer.tsx

@@ -4,14 +4,12 @@
  * + text blocks, tool args/result, user text, subagent task text.
  */
 
-import { Check, Copy, X } from "lucide-react";
-import { useEffect, useRef, useState } from "react";
+import { Check, Copy } from "lucide-react";
+import { type ReactNode, useEffect, useRef, useState } from "react";
 import { getSessionEntryDetail } from "../api";
 import { formatDurationMs, formatInteger } from "../data/formatters";
 import type { TraceSpan, TraceTrack } from "../types";
-import { JsonBlock } from "../ui/JsonBlock";
-import { Skeleton } from "../ui/Skeleton";
-import { StatusPill } from "../ui/StatusPill";
+import { Badge, Drawer, ErrorState, JsonBlock, KeyValues, Skeleton } from "../ui";
 
 export interface SpanDrawerProps {
 	span: TraceSpan | null;
@@ -67,22 +65,19 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 	const [loading, setLoading] = useState(false);
 	const [error, setError] = useState<Error | null>(null);
 	const [copied, setCopied] = useState(false);
-	const closeButtonRef = useRef<HTMLButtonElement>(null);
-	const previousActiveElement = useRef<HTMLElement | null>(null);
+	const copyResetRef = useRef<number>(0);
 
 	useEffect(() => {
 		setEntry(null);
 		setError(null);
 		setCopied(false);
+		setLoading(false);
 		if (!span || !track || !span.entryId) return;
-		previousActiveElement.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		setLoading(true);
 		const controller = new AbortController();
 		getSessionEntryDetail(track.file, span.entryId, controller.signal)
 			.then(data => {
-				if (controller.signal.aborted) return;
-				setEntry(data.entry);
-				setTimeout(() => closeButtonRef.current?.focus(), 50);
+				if (!controller.signal.aborted) setEntry(data.entry);
 			})
 			.catch(err => {
 				if (controller.signal.aborted) return;
@@ -94,29 +89,16 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 		return () => controller.abort();
 	}, [span, track]);
 
-	useEffect(() => {
-		if (!span) return;
-		const handleKeyDown = (event: KeyboardEvent) => {
-			if (event.key === "Escape") onClose();
-		};
-		window.addEventListener("keydown", handleKeyDown);
-		return () => {
-			window.removeEventListener("keydown", handleKeyDown);
-			previousActiveElement.current?.focus();
-		};
-	}, [span, onClose]);
+	useEffect(() => () => window.clearTimeout(copyResetRef.current), []);
 
 	if (!span) return null;
 
-	const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
-		if (event.target === event.currentTarget) onClose();
-	};
-
 	const handleCopy = async () => {
 		try {
 			await navigator.clipboard.writeText(JSON.stringify(entry ?? span, null, 2));
 			setCopied(true);
-			setTimeout(() => setCopied(false), 1500);
+			window.clearTimeout(copyResetRef.current);
+			copyResetRef.current = window.setTimeout(() => setCopied(false), 1500);
 		} catch {
 			// Clipboard unavailable (permissions); leave the button state as-is.
 		}
@@ -127,183 +109,135 @@ export function SpanDrawer({ span, track, onClose, onOpenChildTrack }: SpanDrawe
 	const msg = view.message;
 	const usage = msg?.usage;
 
+	const metrics: Array<{ key: string; label: ReactNode; value: ReactNode }> = [
+		{
+			key: "duration",
+			label: "Duration",
+			value: (
+				<span className="num">
+					{formatDurationMs(span.end - span.start)}
+					{span.unterminated && <span className="muted"> · unterminated</span>}
+				</span>
+			),
+		},
+		{ key: "start", label: "Start", value: <span className="num">{new Date(span.start).toLocaleTimeString()}</span> },
+		{ key: "track", label: "Track", value: <span className="mono">{track?.label ?? "-"}</span> },
+	];
+	if (span.kind === "model") {
+		metrics.push(
+			{
+				key: "tokens",
+				label: "Tokens",
+				value: <span className="num">{formatInteger(span.tokens ?? 0)}</span>,
+			},
+			{ key: "cost", label: "Cost", value: <span className="num">${(span.cost ?? 0).toFixed(4)}</span> },
+			{ key: "ttft", label: "TTFT", value: <span className="num">{formatDurationMs(span.ttft ?? null)}</span> },
+			{ key: "model", label: "Model", value: <span className="mono">{msg?.model ?? span.model ?? "-"}</span> },
+		);
+		if (usage)
+			metrics.push({
+				key: "split",
+				label: "Input / output / cached",
+				value: (
+					<span className="num">
+						{formatInteger(usage.input ?? 0)} / {formatInteger(usage.output ?? 0)} /{" "}
+						{formatInteger(usage.cacheRead ?? 0)}
+					</span>
+				),
+			});
+		if (msg?.provider)
+			metrics.push({ key: "provider", label: "Provider", value: <span className="mono">{msg.provider}</span> });
+		if (msg?.stopReason)
+			metrics.push({ key: "stop", label: "Stop reason", value: <span className="mono">{msg.stopReason}</span> });
+	}
+
 	return (
-		<div className="stats-drawer-overlay" onClick={handleOverlayClick} role="presentation">
-			<div className="stats-drawer" role="dialog" aria-modal="true" aria-label="Span details">
-				<div className="stats-drawer-header">
-					<div className="stats-drawer-header-left">
-						<h2 className="stats-drawer-title truncate" style={{ maxWidth: 320 }}>
-							{span.label}
-						</h2>
-						<StatusPill variant={span.isError ? "danger" : "success"}>{span.kind}</StatusPill>
+		<Drawer
+			open
+			onClose={onClose}
+			title={span.label}
+			subtitle={
+				<span className="row" style={{ gap: 6 }}>
+					<Badge tone={span.isError ? "bad" : "neutral"}>
+						{span.isError ? `${span.kind} · error` : span.kind}
+					</Badge>
+				</span>
+			}
+			actions={
+				<button
+					type="button"
+					className="btn"
+					data-variant="ghost"
+					data-icon="true"
+					onClick={handleCopy}
+					aria-label="Copy raw JSON"
+					title="Copy raw JSON"
+				>
+					{copied ? <Check size={15} /> : <Copy size={15} />}
+				</button>
+			}
+		>
+			<div className="stack traces-drawer">
+				<KeyValues items={metrics} />
+
+				{msg?.errorMessage && (
+					<div className="stack" style={{ gap: 6 }}>
+						<div className="section-label tone-bad">Error message</div>
+						<pre className="code-block traces-pre">{msg.errorMessage}</pre>
 					</div>
-					<div style={{ display: "flex", gap: 8 }}>
-						<button
-							type="button"
-							onClick={handleCopy}
-							className="stats-drawer-close-btn"
-							aria-label="Copy raw JSON"
-							title="Copy raw JSON"
-						>
-							{copied ? <Check size={16} /> : <Copy size={16} />}
-						</button>
-						<button
-							ref={closeButtonRef}
-							type="button"
-							onClick={onClose}
-							className="stats-drawer-close-btn"
-							aria-label="Close span details"
-						>
-							<X size={18} />
-						</button>
-					</div>
-				</div>
-
-				<div className="stats-drawer-body">
-					<div className="stats-drawer-content">
-						<div className="stats-drawer-metrics-grid">
-							<div className="stats-drawer-metric-card">
-								<div className="stats-drawer-metric-label">Duration</div>
-								<div className="stats-drawer-metric-value">{formatDurationMs(span.end - span.start)}</div>
-								{span.unterminated && <div className="stats-drawer-metric-sub">unterminated</div>}
-							</div>
-							<div className="stats-drawer-metric-card">
-								<div className="stats-drawer-metric-label">Start</div>
-								<div className="stats-drawer-metric-value" style={{ fontSize: 13 }}>
-									{new Date(span.start).toLocaleTimeString()}
-								</div>
-							</div>
-							{span.kind === "model" && (
-								<>
-									<div className="stats-drawer-metric-card">
-										<div className="stats-drawer-metric-label">Tokens</div>
-										<div className="stats-drawer-metric-value">{formatInteger(span.tokens ?? 0)}</div>
-										{usage && (
-											<div className="stats-drawer-metric-sub">
-												{formatInteger(usage.input ?? 0)} in · {formatInteger(usage.output ?? 0)} out ·{" "}
-												{formatInteger(usage.cacheRead ?? 0)} cached
-											</div>
-										)}
-									</div>
-									<div className="stats-drawer-metric-card">
-										<div className="stats-drawer-metric-label">Cost</div>
-										<div className="stats-drawer-metric-value">${(span.cost ?? 0).toFixed(4)}</div>
-									</div>
-									<div className="stats-drawer-metric-card">
-										<div className="stats-drawer-metric-label">TTFT</div>
-										<div className="stats-drawer-metric-value">{formatDurationMs(span.ttft ?? null)}</div>
-									</div>
-									<div className="stats-drawer-metric-card">
-										<div className="stats-drawer-metric-label">Model</div>
-										<div className="stats-drawer-metric-value" style={{ fontSize: 12 }}>
-											{msg?.model ?? span.model ?? "-"}
-										</div>
-										{msg?.provider && <div className="stats-drawer-metric-sub">{msg.provider}</div>}
-										{msg?.stopReason && <div className="stats-drawer-metric-sub">stop: {msg.stopReason}</div>}
-									</div>
-								</>
-							)}
-						</div>
-
-						{msg?.errorMessage && (
-							<div className="stats-drawer-error-block">
-								<div className="stats-drawer-error-label">Error Message</div>
-								<div className="stats-drawer-error-text">{msg.errorMessage}</div>
-							</div>
+				)}
+
+				{span.kind === "subagent" && (
+					<div className="stack" style={{ gap: 8 }}>
+						{span.detail && (
+							<>
+								<div className="section-label">Task</div>
+								<pre className="code-block traces-pre">{span.detail}</pre>
+							</>
 						)}
-
-						{span.kind === "subagent" && (
+						{span.childTrackId && onOpenChildTrack && (
 							<div>
-								{span.detail && (
-									<pre
-										style={{
-											whiteSpace: "pre-wrap",
-											wordBreak: "break-word",
-											fontSize: 12,
-											background: "var(--surface-2)",
-											borderRadius: 6,
-											padding: 10,
-										}}
-									>
-										{span.detail}
-									</pre>
-								)}
-								{span.childTrackId && onOpenChildTrack && (
-									<button
-										type="button"
-										className="stats-segmented-control-btn"
-										style={{ marginTop: 8, border: "1px solid var(--border)", borderRadius: 6 }}
-										onClick={() => onOpenChildTrack(span.childTrackId ?? "")}
-									>
-										Open child track {span.childTrackId}
-									</button>
-								)}
-							</div>
-						)}
-
-						{span.kind === "tool" && span.detail && (
-							<div>
-								<div className="stats-drawer-metric-label">Args</div>
-								<pre
-									style={{
-										whiteSpace: "pre-wrap",
-										wordBreak: "break-word",
-										fontSize: 12,
-										background: "var(--surface-2)",
-										borderRadius: 6,
-										padding: 10,
-									}}
+								<button
+									type="button"
+									className="btn"
+									data-size="sm"
+									onClick={() => onOpenChildTrack(span.childTrackId ?? "")}
 								>
-									{span.detail}
-								</pre>
-							</div>
-						)}
-
-						{loading && (
-							<div>
-								<Skeleton variant="rect" width="100%" height={80} className="mb-4" />
-								<Skeleton variant="rect" width="100%" height={160} />
-							</div>
-						)}
-						{error && (
-							<div className="stats-drawer-error">
-								<p className="stats-drawer-error-title">Failed to load entry</p>
-								<p className="stats-drawer-error-message">{error.message}</p>
+									Open child track <span className="mono">{span.childTrackId}</span>
+								</button>
 							</div>
 						)}
+					</div>
+				)}
 
-						{!loading &&
-							entry !== null &&
-							textBlocks(msg?.content).map((block, index) => (
-								<div key={`${block.kind}-${index}`}>
-									<div className="stats-drawer-metric-label" style={{ textTransform: "capitalize" }}>
-										{block.kind}
-									</div>
-									<pre
-										style={{
-											whiteSpace: "pre-wrap",
-											wordBreak: "break-word",
-											fontSize: 12,
-											background: "var(--surface-2)",
-											borderRadius: 6,
-											padding: 10,
-											maxHeight: 360,
-											overflowY: "auto",
-										}}
-									>
-										{block.text}
-									</pre>
-								</div>
-							))}
+				{span.kind === "tool" && span.detail && (
+					<div className="stack" style={{ gap: 6 }}>
+						<div className="section-label">Args</div>
+						<pre className="code-block traces-pre">{span.detail}</pre>
+					</div>
+				)}
 
-						{!loading && entry !== null && (
-							<div className="stats-drawer-json-blocks">
-								<JsonBlock data={entry} title="Raw Entry" initialCollapsed={true} />
-							</div>
-						)}
+				{loading && (
+					<div className="stack">
+						<Skeleton height={80} />
+						<Skeleton height={160} />
 					</div>
-				</div>
+				)}
+				{error && <ErrorState error={`Failed to load entry: ${error.message}`} />}
+
+				{!loading &&
+					entry !== null &&
+					textBlocks(msg?.content).map((block, index) => (
+						<div key={`${block.kind}-${index}`} className="stack" style={{ gap: 6 }}>
+							<div className="section-label">{block.kind === "thinking" ? "Thinking" : "Text"}</div>
+							<pre className="code-block traces-pre" data-scroll="true">
+								{block.text}
+							</pre>
+						</div>
+					))}
+
+				{!loading && entry !== null && <JsonBlock data={entry} title="Raw entry" initialCollapsed={true} />}
 			</div>
-		</div>
+		</Drawer>
 	);
 }

package/src/client/traces/SummaryStrip.tsx

@@ -1,37 +1,34 @@
 /**
- * Headline chips for one trace: wall/model/tool/idle time, turns, requests,
- * tool calls, agents, tokens, cost.
+ * Headline tiles for one trace: wall time split into model/tool/idle, then
+ * turns, requests, tool calls, agents, tokens, cost.
  */
 
-import { formatCompact, formatDurationMs, formatEstimatedCost, formatInteger } from "../data/formatters";
+import { formatCompact, formatElapsed, formatEstimatedCost, formatInteger, formatPercent } from "../data/formatters";
 import type { TraceSummary } from "../types";
+import { Stat, StatGrid } from "../ui";
 
 export interface SummaryStripProps {
 	summary: TraceSummary;
 }
 
 export function SummaryStrip({ summary }: SummaryStripProps) {
-	const chips: Array<{ label: string; value: string }> = [
-		{ label: "Wall", value: formatDurationMs(summary.wallMs) },
-		{ label: "Model", value: formatDurationMs(summary.modelMs) },
-		{ label: "Tools", value: formatDurationMs(summary.toolMs) },
-		{ label: "Idle", value: formatDurationMs(summary.idleMs) },
-		{ label: "Turns", value: formatInteger(summary.turns) },
-		{ label: "Requests", value: formatInteger(summary.requests) },
-		{ label: "Tool Calls", value: formatInteger(summary.toolCalls) },
-		{ label: "Agents", value: formatInteger(summary.subagents) },
-		{ label: "Tokens", value: formatCompact(summary.totalTokens) },
-		{ label: "Cost", value: formatEstimatedCost(summary.costTotal, summary.unpricedRequests) },
-	];
-
+	const share = (ms: number) => (summary.wallMs > 0 ? `${formatPercent(ms / summary.wallMs)} of wall` : undefined);
 	return (
-		<div className="stats-trace-summary">
-			{chips.map(chip => (
-				<div key={chip.label} className="stats-trace-summary-cell">
-					<span className="stats-trace-summary-label">{chip.label}</span>
-					<span className="stats-trace-summary-value">{chip.value}</span>
-				</div>
-			))}
-		</div>
+		<StatGrid min={112}>
+			<Stat size="sm" label="Wall time" value={formatElapsed(summary.wallMs)} />
+			<Stat size="sm" label="Model time" value={formatElapsed(summary.modelMs)} hint={share(summary.modelMs)} />
+			<Stat size="sm" label="Tool time" value={formatElapsed(summary.toolMs)} hint={share(summary.toolMs)} />
+			<Stat size="sm" label="Idle" value={formatElapsed(summary.idleMs)} hint={share(summary.idleMs)} />
+			<Stat size="sm" label="Turns" value={formatInteger(summary.turns)} />
+			<Stat
+				size="sm"
+				label="Requests"
+				value={formatInteger(summary.requests)}
+				hint={`${formatInteger(summary.toolCalls)} tool calls`}
+			/>
+			<Stat size="sm" label="Agents" value={formatInteger(summary.subagents)} />
+			<Stat size="sm" label="Tokens" value={formatCompact(summary.totalTokens)} />
+			<Stat size="sm" label="Cost" value={formatEstimatedCost(summary.costTotal, summary.unpricedRequests)} />
+		</StatGrid>
 	);
 }