feat: decision tree visualization with React Flow + Dagre auto-layout

apps/web/src/app/api/traces/[id]/route.ts

@@ -38,7 +38,44 @@ export async function GET(
       return NextResponse.json({ error: "Trace not found" }, { status: 404 });
     }
 
-    return NextResponse.json({ trace }, { status: 200 });
+    // Transform data to match frontend expectations
+    const transformedTrace = {
+      ...trace,
+      decisionPoints: trace.decisionPoints.map((dp) => ({
+        id: dp.id,
+        type: dp.type,
+        chosenAction: typeof dp.chosen === "string" ? dp.chosen : JSON.stringify(dp.chosen),
+        alternatives: dp.alternatives.map((alt) => (typeof alt === "string" ? alt : JSON.stringify(alt))),
+        reasoning: dp.reasoning,
+        contextSnapshot: dp.contextSnapshot as Record<string, unknown> | null,
+        confidence: null, // Not in schema, default to null
+        timestamp: dp.timestamp.toISOString(),
+        parentSpanId: dp.parentSpanId,
+      })),
+      spans: trace.spans.map((span) => ({
+        id: span.id,
+        name: span.name,
+        type: span.type,
+        status: span.status === "COMPLETED" ? "OK" : span.status === "ERROR" ? "ERROR" : "CANCELLED",
+        startedAt: span.startedAt.toISOString(),
+        endedAt: span.endedAt?.toISOString() ?? null,
+        durationMs: span.durationMs,
+        input: span.input,
+        output: span.output,
+        metadata: (span.metadata as Record<string, unknown>) ?? {},
+        parentSpanId: span.parentSpanId,
+      })),
+      events: trace.events.map((event) => ({
+        id: event.id,
+        type: event.type,
+        name: event.name,
+        timestamp: event.timestamp.toISOString(),
+        metadata: (event.metadata as Record<string, unknown>) ?? {},
+        spanId: event.spanId,
+      })),
+    };
+
+    return NextResponse.json({ trace: transformedTrace }, { status: 200 });
   } catch (error) {
     console.error("Error retrieving trace:", error);
     return NextResponse.json({ error: "Internal server error" }, { status: 500 });

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

@@ -1,18 +1,17 @@
 import { notFound } from "next/navigation";
 import { TraceDetail } from "@/components/trace-detail";
 
-interface TraceResponse {
-  trace: {
-    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;
-  };
+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;
@@ -22,6 +21,7 @@ interface TraceResponse {
     contextSnapshot: Record<string, unknown> | null;
     confidence: number | null;
     timestamp: string;
+    parentSpanId: string | null;
   }>;
   spans: Array<{
     id: string;
@@ -34,6 +34,7 @@ interface TraceResponse {
     input: unknown;
     output: unknown;
     metadata: Record<string, unknown>;
+    parentSpanId: string | null;
   }>;
   events: Array<{
     id: string;
@@ -41,9 +42,14 @@ interface TraceResponse {
     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}`, {
@@ -76,12 +82,24 @@ export default async function TraceDetailPage({ params }: TraceDetailPageProps)
     notFound();
   }
 
+  const { trace } = data;
+
   return (
     <TraceDetail
-      trace={data.trace}
-      decisionPoints={data.decisionPoints}
-      spans={data.spans}
-      events={data.events}
+      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}
     />
   );
 }