@tonyclaw/agent-inspector 2.0.30 → 2.0.31

package/src/components/groups/GroupsDialog.tsx

@@ -0,0 +1,732 @@
+import { type JSX, useCallback, useEffect, useMemo, useState } from "react";
+import { Check, Copy, Download, ExternalLink, Layers, Loader2, RefreshCw } from "lucide-react";
+import { Button } from "../ui/button";
+import { Badge } from "../ui/badge";
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "../ui/dialog";
+import { cn } from "../../lib/utils";
+import { parseJsonResponse, readApiError } from "../../lib/apiClient";
+import {
+  GroupEvidenceExportResultSchema,
+  type GroupEvidenceReadResponse,
+  type GroupEvidenceExportResult,
+  type InspectorGroup,
+  type InspectorGroupEvidence,
+  type InspectorGroupExportMember,
+  type InspectorGroupMember,
+} from "../../lib/groupContract";
+import type { EvidenceReport } from "../../lib/runContract";
+import type { SessionLogSummary } from "../../lib/sessionInfoContract";
+import { getSessionPath } from "../../lib/sessionUrl";
+import { useGroupEvidence } from "../../lib/useGroupEvidence";
+import { useGroups } from "../../lib/useGroups";
+import { useCopyFeedback } from "../proxy-viewer/useCopyFeedback";
+
+type MemberStatus = InspectorGroupMember["status"];
+
+type GroupSummary = {
+  memberCount: number;
+  completedMembers: number;
+  failedMembers: number;
+  runningMembers: number;
+  missingStatusMembers: number;
+};
+
+type GroupMemberRow = {
+  member: InspectorGroupMember;
+  exportMember: InspectorGroupExportMember | null;
+};
+
+export function summarizeGroup(group: InspectorGroup): GroupSummary {
+  let completedMembers = 0;
+  let failedMembers = 0;
+  let runningMembers = 0;
+  let missingStatusMembers = 0;
+
+  for (const member of group.members) {
+    switch (member.status) {
+      case "completed":
+        completedMembers += 1;
+        break;
+      case "failed":
+      case "cancelled":
+        failedMembers += 1;
+        break;
+      case "running":
+        runningMembers += 1;
+        break;
+      case "created":
+        break;
+      case null:
+        missingStatusMembers += 1;
+        break;
+    }
+  }
+
+  return {
+    memberCount: group.members.length,
+    completedMembers,
+    failedMembers,
+    runningMembers,
+    missingStatusMembers,
+  };
+}
+
+export function buildGroupMemberRows(
+  group: InspectorGroup,
+  exportResult: GroupEvidenceExportResult | null,
+): GroupMemberRow[] {
+  if (exportResult !== null && exportResult.group.id === group.id) {
+    return exportResult.members.map((exportMember) => ({
+      member: exportMember.member,
+      exportMember,
+    }));
+  }
+
+  return group.members.map((member) => ({ member, exportMember: null }));
+}
+
+function statusClassName(status: InspectorGroup["status"] | MemberStatus): string {
+  switch (status) {
+    case "completed":
+      return "border-emerald-200 bg-emerald-50 text-emerald-700";
+    case "failed":
+    case "cancelled":
+      return "border-red-200 bg-red-50 text-red-700";
+    case "running":
+      return "border-sky-200 bg-sky-50 text-sky-700";
+    case "created":
+      return "border-zinc-200 bg-zinc-50 text-zinc-600";
+    case null:
+      return "border-zinc-200 bg-zinc-50 text-zinc-500";
+  }
+}
+
+function statusLabel(status: InspectorGroup["status"] | MemberStatus): string {
+  return status ?? "unknown";
+}
+
+function reportStatusClassName(status: EvidenceReport["status"]): string {
+  switch (status) {
+    case "PASS":
+      return "border-emerald-200 bg-emerald-50 text-emerald-700";
+    case "FAIL":
+      return "border-red-200 bg-red-50 text-red-700";
+    case "RUNNING":
+      return "border-sky-200 bg-sky-50 text-sky-700";
+    case "UNKNOWN":
+      return "border-zinc-200 bg-zinc-50 text-zinc-600";
+  }
+}
+
+function displayText(value: string | null): string {
+  if (value === null || value.trim().length === 0) return "-";
+  return value;
+}
+
+function formatNumber(value: number): string {
+  return value.toLocaleString();
+}
+
+function formatMs(value: number | null | undefined): string {
+  if (value === null || value === undefined) return "-";
+  if (value < 1000) return `${formatNumber(value)} ms`;
+  return `${(value / 1000).toFixed(1)} s`;
+}
+
+function formatTimestamp(value: string): string {
+  const millis = Date.parse(value);
+  if (!Number.isFinite(millis)) return value;
+  return new Intl.DateTimeFormat(undefined, {
+    month: "short",
+    day: "2-digit",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  }).format(new Date(millis));
+}
+
+function firstNonEmpty(...values: Array<string | null>): string {
+  for (const value of values) {
+    if (value !== null && value.trim().length > 0) return value;
+  }
+  return "-";
+}
+
+function providerModel(member: InspectorGroupMember): string {
+  const provider = member.provider;
+  const model = member.model;
+
+  if (provider !== null && provider.length > 0 && model !== null && model.length > 0) {
+    return `${provider} / ${model}`;
+  }
+  return firstNonEmpty(provider, model);
+}
+
+function selectedGroupFrom(
+  groups: InspectorGroup[],
+  selectedGroupId: string | null,
+): InspectorGroup | null {
+  if (selectedGroupId !== null) {
+    const selected = groups.find((group) => group.id === selectedGroupId);
+    if (selected !== undefined) return selected;
+  }
+  return groups[0] ?? null;
+}
+
+function latestLog(row: GroupMemberRow): SessionLogSummary | null {
+  const logs = row.exportMember?.session?.latestLogs ?? [];
+  return logs[0] ?? null;
+}
+
+function evidenceFor(
+  group: InspectorGroup,
+  exportResult: GroupEvidenceExportResult | null,
+): InspectorGroupEvidence | null {
+  if (exportResult !== null && exportResult.group.id === group.id) return exportResult.evidence;
+  return group.evidence;
+}
+
+function exportSummaryFor(
+  group: InspectorGroup,
+  exportResult: GroupEvidenceExportResult | null,
+  evidenceResponse: GroupEvidenceReadResponse | null,
+): GroupEvidenceExportResult["summary"] | null {
+  if (exportResult !== null && exportResult.group.id === group.id) return exportResult.summary;
+  if (evidenceResponse !== null && evidenceResponse.group.id === group.id) {
+    return evidenceResponse.summary;
+  }
+  return null;
+}
+
+function evidenceReportFor(
+  group: InspectorGroup,
+  exportResult: GroupEvidenceExportResult | null,
+  evidenceResponse: GroupEvidenceReadResponse | null,
+): EvidenceReport | null {
+  if (exportResult !== null && exportResult.group.id === group.id) {
+    return exportResult.jenkinsReport;
+  }
+  if (evidenceResponse !== null && evidenceResponse.group.id === group.id) {
+    return evidenceResponse.report;
+  }
+  return null;
+}
+
+export function GroupsDialog(): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const [selectedGroupId, setSelectedGroupId] = useState<string | null>(null);
+  const [exportingGroupId, setExportingGroupId] = useState<string | null>(null);
+  const [exportError, setExportError] = useState<string | null>(null);
+  const [exportResult, setExportResult] = useState<GroupEvidenceExportResult | null>(null);
+  const { groups, isLoading, error, mutate } = useGroups();
+
+  const selectedGroup = useMemo(
+    () => selectedGroupFrom(groups, selectedGroupId),
+    [groups, selectedGroupId],
+  );
+
+  useEffect(() => {
+    if (!open) return;
+    const hasSelected =
+      selectedGroupId !== null && groups.some((group) => group.id === selectedGroupId);
+    if (hasSelected) return;
+    setSelectedGroupId(groups[0]?.id ?? null);
+  }, [groups, open, selectedGroupId]);
+
+  const selectedExportResult =
+    selectedGroup !== null && exportResult !== null && exportResult.group.id === selectedGroup.id
+      ? exportResult
+      : null;
+  const {
+    evidenceResponse,
+    isLoading: evidenceLoading,
+    error: evidenceError,
+    mutate: mutateEvidence,
+  } = useGroupEvidence(selectedGroup);
+
+  const handleRefresh = useCallback(() => {
+    void mutate();
+  }, [mutate]);
+
+  const handleExport = useCallback(
+    async (group: InspectorGroup) => {
+      setExportingGroupId(group.id);
+      setExportError(null);
+
+      try {
+        const response = await fetch(`/api/groups/${encodeURIComponent(group.id)}/evidence`, {
+          method: "POST",
+          headers: { "content-type": "application/json" },
+          body: JSON.stringify({ latestLogLimit: 10 }),
+        });
+
+        if (!response.ok) {
+          setExportError(
+            await readApiError(response, `Export failed with status ${String(response.status)}`),
+          );
+          return;
+        }
+
+        const parsed = await parseJsonResponse(response, GroupEvidenceExportResultSchema);
+        setExportResult(parsed);
+        await mutate();
+        await mutateEvidence();
+      } catch (err) {
+        setExportError(err instanceof Error ? err.message : String(err));
+      } finally {
+        setExportingGroupId(null);
+      }
+    },
+    [mutate, mutateEvidence],
+  );
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="relative size-8"
+          aria-label="Evaluation groups"
+          title="Evaluation groups"
+        >
+          <Layers className="size-4" />
+          {isLoading ? (
+            <Loader2 className="absolute -right-0.5 -top-0.5 size-3 animate-spin text-muted-foreground" />
+          ) : groups.length > 0 ? (
+            <span className="absolute -right-1 -top-1 min-w-4 rounded-full bg-primary px-1 text-[10px] leading-4 text-primary-foreground">
+              {groups.length}
+            </span>
+          ) : null}
+          <span className="sr-only">Evaluation groups</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="flex max-h-[85vh] max-w-5xl flex-col overflow-hidden">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2 pr-8">
+            <Layers className="size-5 text-muted-foreground" />
+            <span>Groups</span>
+            <Badge variant="outline">{formatNumber(groups.length)}</Badge>
+          </DialogTitle>
+        </DialogHeader>
+
+        <div className="flex min-h-0 items-center justify-between gap-3 border-b border-border pb-3">
+          <p className="text-xs text-muted-foreground">
+            Evaluation batches, model runs, and exported evidence packs.
+          </p>
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="shrink-0"
+            onClick={handleRefresh}
+          >
+            <RefreshCw className="size-3.5" />
+            Refresh
+          </Button>
+        </div>
+
+        <div className="grid min-h-0 flex-1 gap-4 md:grid-cols-[260px_minmax(0,1fr)]">
+          <GroupList
+            groups={groups}
+            selectedGroupId={selectedGroup?.id ?? null}
+            isLoading={isLoading}
+            error={error}
+            onSelect={setSelectedGroupId}
+          />
+          <GroupDetails
+            group={selectedGroup}
+            exportResult={selectedExportResult}
+            evidenceResponse={evidenceResponse}
+            evidenceLoading={evidenceLoading}
+            evidenceError={evidenceError}
+            exportError={exportError}
+            exportingGroupId={exportingGroupId}
+            onExport={handleExport}
+          />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function GroupList({
+  groups,
+  selectedGroupId,
+  isLoading,
+  error,
+  onSelect,
+}: {
+  groups: InspectorGroup[];
+  selectedGroupId: string | null;
+  isLoading: boolean;
+  error: Error | undefined;
+  onSelect: (groupId: string) => void;
+}): JSX.Element {
+  if (isLoading) {
+    return (
+      <div className="flex min-h-48 items-center justify-center rounded-md border border-dashed border-border text-xs text-muted-foreground">
+        Loading groups...
+      </div>
+    );
+  }
+
+  if (error !== undefined) {
+    return (
+      <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+        {error.message}
+      </div>
+    );
+  }
+
+  if (groups.length === 0) {
+    return (
+      <div className="rounded-md border border-dashed border-border px-3 py-8 text-center text-xs text-muted-foreground">
+        No groups yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-0 overflow-y-auto pr-1">
+      <div className="space-y-2">
+        {groups.map((group) => {
+          const summary = summarizeGroup(group);
+          const selected = selectedGroupId === group.id;
+          return (
+            <button
+              key={group.id}
+              type="button"
+              onClick={() => onSelect(group.id)}
+              className={cn(
+                "w-full rounded-md border px-3 py-2 text-left text-xs transition-colors",
+                selected
+                  ? "border-primary bg-primary/5"
+                  : "border-border bg-background hover:bg-muted/50",
+              )}
+            >
+              <div className="flex min-w-0 items-center justify-between gap-2">
+                <span className="min-w-0 truncate text-sm font-medium">{group.title}</span>
+                <Badge variant="outline" className={statusClassName(group.status)}>
+                  {statusLabel(group.status)}
+                </Badge>
+              </div>
+              <div className="mt-1 flex items-center gap-2 text-muted-foreground">
+                <span>{summary.memberCount} sessions</span>
+                <span>{formatTimestamp(group.updatedAt)}</span>
+              </div>
+            </button>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+function GroupDetails({
+  group,
+  exportResult,
+  evidenceResponse,
+  evidenceLoading,
+  evidenceError,
+  exportError,
+  exportingGroupId,
+  onExport,
+}: {
+  group: InspectorGroup | null;
+  exportResult: GroupEvidenceExportResult | null;
+  evidenceResponse: GroupEvidenceReadResponse | null;
+  evidenceLoading: boolean;
+  evidenceError: Error | undefined;
+  exportError: string | null;
+  exportingGroupId: string | null;
+  onExport: (group: InspectorGroup) => Promise<void>;
+}): JSX.Element {
+  if (group === null) {
+    return (
+      <div className="flex min-h-48 items-center justify-center rounded-md border border-dashed border-border text-xs text-muted-foreground">
+        Select a group to inspect.
+      </div>
+    );
+  }
+
+  const summary = summarizeGroup(group);
+  const exportedSummary = exportSummaryFor(group, exportResult, evidenceResponse);
+  const evidenceReport = evidenceReportFor(group, exportResult, evidenceResponse);
+  const evidence = evidenceFor(group, exportResult);
+  const rows = buildGroupMemberRows(group, exportResult);
+  const isExporting = exportingGroupId === group.id;
+
+  return (
+    <div className="min-h-0 overflow-y-auto pr-1">
+      <div className="space-y-4">
+        <div className="flex min-w-0 flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
+          <div className="min-w-0 space-y-1">
+            <div className="flex min-w-0 flex-wrap items-center gap-2">
+              <h3 className="min-w-0 truncate text-base font-semibold">{group.title}</h3>
+              <Badge variant="outline" className={statusClassName(group.status)}>
+                {statusLabel(group.status)}
+              </Badge>
+              <Badge variant="outline">{group.kind}</Badge>
+            </div>
+            <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
+              <span>{displayText(group.project)}</span>
+              <span>updated {formatTimestamp(group.updatedAt)}</span>
+            </div>
+          </div>
+          <Button
+            type="button"
+            variant="default"
+            size="sm"
+            className="shrink-0"
+            disabled={isExporting}
+            onClick={() => void onExport(group)}
+          >
+            {isExporting ? (
+              <Loader2 className="size-3.5 animate-spin" />
+            ) : (
+              <Download className="size-3.5" />
+            )}
+            Export evidence
+          </Button>
+        </div>
+
+        {group.task !== null && group.task.trim().length > 0 && (
+          <p className="rounded-md border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
+            {group.task}
+          </p>
+        )}
+
+        <div className="grid gap-2 sm:grid-cols-4">
+          <SummaryStat label="Members" value={summary.memberCount} />
+          <SummaryStat label="Done" value={summary.completedMembers} />
+          <SummaryStat label="Failed" value={summary.failedMembers} />
+          <SummaryStat label="Running" value={summary.runningMembers} />
+        </div>
+
+        {exportedSummary !== null && (
+          <div className="grid gap-2 sm:grid-cols-4">
+            <SummaryStat label="Requests" value={exportedSummary.requestCount} />
+            <SummaryStat label="Errors" value={exportedSummary.errorCount} />
+            <SummaryStat label="Tokens" value={exportedSummary.tokenUsage.total} />
+            <SummaryStat label="Missing" value={exportedSummary.missingSessions} />
+          </div>
+        )}
+
+        <EvidenceReportCard
+          report={evidenceReport}
+          loading={evidenceLoading}
+          error={evidenceError}
+          hasEvidence={evidence !== null}
+        />
+
+        <EvidencePaths evidence={evidence} />
+
+        {exportError !== null && (
+          <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+            {exportError}
+          </div>
+        )}
+
+        <MemberTable rows={rows} />
+      </div>
+    </div>
+  );
+}
+
+function SummaryStat({ label, value }: { label: string; value: number }): JSX.Element {
+  return (
+    <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+      <div className="text-[11px] font-medium uppercase text-muted-foreground">{label}</div>
+      <div className="mt-1 font-mono text-sm font-semibold">{formatNumber(value)}</div>
+    </div>
+  );
+}
+
+function EvidenceReportCard({
+  report,
+  loading,
+  error,
+  hasEvidence,
+}: {
+  report: EvidenceReport | null;
+  loading: boolean;
+  error: Error | undefined;
+  hasEvidence: boolean;
+}): JSX.Element | null {
+  const { copied, copy } = useCopyFeedback(report?.markdown ?? null);
+
+  if (report === null && !loading && error === undefined) return null;
+
+  if (loading) {
+    return (
+      <div className="flex items-center gap-2 rounded-md border border-border bg-muted/20 px-3 py-2 text-xs text-muted-foreground">
+        <Loader2 className="size-3.5 animate-spin" />
+        Loading evidence report...
+      </div>
+    );
+  }
+
+  if (error !== undefined && hasEvidence) {
+    return (
+      <div className="rounded-md border border-red-200 bg-red-50 px-3 py-2 text-xs text-red-700">
+        Failed to load evidence report: {error.message}
+      </div>
+    );
+  }
+
+  if (report === null) return null;
+
+  return (
+    <div className="rounded-md border border-border bg-muted/20 px-3 py-2">
+      <div className="flex min-w-0 items-center justify-between gap-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <span className="text-xs font-semibold">Evidence report</span>
+          <Badge variant="outline" className={reportStatusClassName(report.status)}>
+            {report.status}
+          </Badge>
+        </div>
+        <Button
+          type="button"
+          variant="ghost"
+          size="icon"
+          className="size-7 shrink-0"
+          aria-label={copied ? "Copied evidence report" : "Copy evidence report"}
+          onClick={copy}
+        >
+          {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+        </Button>
+      </div>
+      <p className="mt-1 text-xs text-muted-foreground">{report.summary}</p>
+    </div>
+  );
+}
+
+function EvidencePaths({ evidence }: { evidence: InspectorGroupEvidence | null }): JSX.Element {
+  if (evidence === null) {
+    return (
+      <div className="rounded-md border border-dashed border-border px-3 py-2 text-xs text-muted-foreground">
+        No evidence pack exported yet.
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2 rounded-md border border-border bg-muted/20 px-3 py-2">
+      <div className="flex items-center justify-between gap-2">
+        <span className="text-xs font-semibold">Evidence paths</span>
+        <span className="text-[11px] text-muted-foreground">
+          {formatTimestamp(evidence.exportedAt)}
+        </span>
+      </div>
+      <div className="grid gap-2">
+        <CopyPathRow label="JSON" value={evidence.jsonPath} />
+        <CopyPathRow label="Markdown" value={evidence.markdownPath} />
+        <CopyPathRow label="HTML" value={evidence.htmlPath} />
+      </div>
+    </div>
+  );
+}
+
+function CopyPathRow({ label, value }: { label: string; value: string }): JSX.Element {
+  const { copied, copy } = useCopyFeedback(value);
+  return (
+    <div className="flex min-w-0 items-center gap-2 rounded-md border border-border bg-background px-2 py-1.5">
+      <span className="w-16 shrink-0 text-[11px] font-medium text-muted-foreground">{label}</span>
+      <code className="min-w-0 flex-1 truncate font-mono text-xs">{value}</code>
+      <Button
+        type="button"
+        variant="ghost"
+        size="icon"
+        className="size-7 shrink-0"
+        aria-label={copied ? `Copied ${label} path` : `Copy ${label} path`}
+        onClick={copy}
+      >
+        {copied ? <Check className="size-3.5 text-emerald-500" /> : <Copy className="size-3.5" />}
+      </Button>
+    </div>
+  );
+}
+
+function MemberTable({ rows }: { rows: GroupMemberRow[] }): JSX.Element {
+  if (rows.length === 0) {
+    return (
+      <div className="rounded-md border border-dashed border-border px-3 py-8 text-center text-xs text-muted-foreground">
+        No sessions attached.
+      </div>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-md border border-border">
+      <div className="border-b border-border bg-muted/30 px-3 py-2 text-xs font-semibold">
+        Members
+      </div>
+      <div className="overflow-x-auto">
+        <table className="w-full min-w-[760px] text-left text-xs">
+          <thead className="border-b border-border bg-muted/20 text-muted-foreground">
+            <tr>
+              <th className="px-3 py-2 font-medium">Session</th>
+              <th className="px-3 py-2 font-medium">Provider / Model</th>
+              <th className="px-3 py-2 font-medium">Status</th>
+              <th className="px-3 py-2 font-medium">Requests</th>
+              <th className="px-3 py-2 font-medium">Errors</th>
+              <th className="px-3 py-2 font-medium">First chunk</th>
+              <th className="px-3 py-2 font-medium">Tokens</th>
+            </tr>
+          </thead>
+          <tbody>
+            {rows.map((row) => (
+              <MemberRow key={row.member.id} row={row} />
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  );
+}
+
+function MemberRow({ row }: { row: GroupMemberRow }): JSX.Element {
+  const member = row.member;
+  const session = row.exportMember?.session ?? null;
+  const log = latestLog(row);
+  const sessionPath = session?.inspectorPath ?? getSessionPath(member.sessionId);
+  const requests = session?.requestCount ?? null;
+  const errors = session?.errorCount ?? null;
+  const tokens = session?.tokenUsage.total ?? null;
+  const firstChunkMs = log?.firstChunkMs ?? null;
+
+  return (
+    <tr className="border-b border-border last:border-0">
+      <td className="max-w-56 px-3 py-2">
+        <div className="flex min-w-0 items-center gap-2">
+          <a
+            href={sessionPath}
+            target="_blank"
+            rel="noreferrer"
+            className="min-w-0 truncate font-mono text-xs text-primary hover:underline"
+          >
+            {firstNonEmpty(member.label, member.sessionId)}
+          </a>
+          <ExternalLink className="size-3 shrink-0 text-muted-foreground" />
+        </div>
+        <div className="mt-0.5 truncate text-[11px] text-muted-foreground">
+          {displayText(member.agent)}
+        </div>
+      </td>
+      <td className="max-w-52 px-3 py-2">
+        <span className="block truncate">{providerModel(member)}</span>
+      </td>
+      <td className="px-3 py-2">
+        <Badge variant="outline" className={statusClassName(member.status)}>
+          {statusLabel(member.status)}
+        </Badge>
+      </td>
+      <td className="px-3 py-2 font-mono">{requests === null ? "-" : formatNumber(requests)}</td>
+      <td className="px-3 py-2 font-mono">{errors === null ? "-" : formatNumber(errors)}</td>
+      <td className="px-3 py-2 font-mono">{formatMs(firstChunkMs)}</td>
+      <td className="px-3 py-2 font-mono">{tokens === null ? "-" : formatNumber(tokens)}</td>
+    </tr>
+  );
+}