Files
agentlens/apps/web/src/app/dashboard/traces/[id]/page.tsx

106 lines
2.3 KiB
TypeScript

import { notFound } from "next/navigation";
import { TraceDetail } from "@/components/trace-detail";
interface TraceData {
id: string;
name: string;
status: "RUNNING" | "COMPLETED" | "ERROR";
startedAt: string;
endedAt: string | null;
durationMs: number | null;
tags: string[];
metadata: Record<string, unknown>;
costUsd: number | null;
totalCost: number | null;
decisionPoints: Array<{
id: string;
type: string;
chosenAction: string;
alternatives: string[];
reasoning: string | null;
contextSnapshot: Record<string, unknown> | null;
confidence: number | null;
timestamp: string;
parentSpanId: string | null;
}>;
spans: Array<{
id: string;
name: string;
type: string;
status: "OK" | "ERROR" | "CANCELLED";
startedAt: string;
endedAt: string | null;
durationMs: number | null;
input: unknown;
output: unknown;
metadata: Record<string, unknown>;
parentSpanId: string | null;
}>;
events: Array<{
id: string;
type: string;
name: string;
timestamp: string;
metadata: Record<string, unknown>;
spanId: string | null;
}>;
}
interface TraceResponse {
trace: TraceData;
}
async function getTrace(id: string): Promise<TraceResponse | null> {
try {
const res = await fetch(`http://localhost:3000/api/traces/${id}`, {
cache: "no-store",
});
if (!res.ok) {
if (res.status === 404) {
return null;
}
throw new Error(`Failed to fetch trace: ${res.status}`);
}
return res.json();
} catch (error) {
console.error("Error fetching trace:", error);
return null;
}
}
interface TraceDetailPageProps {
params: Promise<{ id: string }>;
}
export default async function TraceDetailPage({ params }: TraceDetailPageProps) {
const { id } = await params;
const data = await getTrace(id);
if (!data) {
notFound();
}
const { trace } = data;
return (
<TraceDetail
trace={{
id: trace.id,
name: trace.name,
status: trace.status,
startedAt: trace.startedAt,
endedAt: trace.endedAt,
durationMs: trace.durationMs,
tags: trace.tags,
metadata: trace.metadata,
costUsd: trace.costUsd ?? trace.totalCost,
}}
decisionPoints={trace.decisionPoints}
spans={trace.spans}
events={trace.events}
/>
);
}