Tool call trace

import {
  Badge,
  Card,
  CardContent,
  CardHeader,
  CardTitle,
  Empty,
  EmptyDescription,
  EmptyHeader,
  EmptyTitle,
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@paxeer/core";

export interface ToolCall {
  id: string;
  name: string;
  status: "ok" | "running" | "error";
  latencyMs: number;
  input: string;
}

export function ToolCallTrace({
  calls = [
    { id: "c1", name: "market.book", status: "ok", latencyMs: 42, input: "ETH-USD" },
    { id: "c2", name: "risk.check", status: "running", latencyMs: 110, input: "clip=1.5" },
    { id: "c3", name: "wallet.quote", status: "error", latencyMs: 18, input: "USDC" },
  ],
}: {
  calls?: ToolCall[];
}) {
  return (
    <Card className="gap-0 py-0 overflow-hidden" data-slot="tool-call-trace">
      <CardHeader className="border-b border-outline-variant px-3 py-2">
        <CardTitle className="text-[length:var(--md-sys-typescale-label-large-size)]">
          Tool call trace
        </CardTitle>
      </CardHeader>
      <CardContent className="p-0">
        {calls.length === 0 ? (
          <Empty className="p-6">
            <EmptyHeader>
              <EmptyTitle>No tool calls</EmptyTitle>
              <EmptyDescription>This run has not invoked tools yet.</EmptyDescription>
            </EmptyHeader>
          </Empty>
        ) : (
          <Table>
            <TableHeader>
              <TableRow>
                <TableHead>Tool</TableHead>
                <TableHead>Input</TableHead>
                <TableHead>Status</TableHead>
                <TableHead>Latency</TableHead>
              </TableRow>
            </TableHeader>
            <TableBody>
              {calls.map((call) => (
                <TableRow key={call.id}>
                  <TableCell className="font-[family-name:var(--md-ref-typeface-mono)]">
                    {call.name}
                  </TableCell>
                  <TableCell className="text-on-surface-variant">{call.input}</TableCell>
                  <TableCell>
                    <Badge
                      variant={
                        call.status === "error"
                          ? "destructive"
                          : call.status === "running"
                            ? "default"
                            : "secondary"
                      }
                    >
                      {call.status}
                    </Badge>
                  </TableCell>
                  <TableCell className="font-[family-name:var(--md-ref-typeface-mono)]">
                    {call.latencyMs}ms
                  </TableCell>
                </TableRow>
              ))}
            </TableBody>
          </Table>
        )}
      </CardContent>
    </Card>
  );
}