add metadata to trace view (#947)

* add metadata to trace view

* lint

Author: skull8888888

frontend/components/traces/trace-view/index.tsx

@@ -1,11 +1,12 @@
 import { get } from "lodash";
-import { AlertTriangle, ChartNoAxesGantt, ListFilter, Minus, Plus, Search, Sparkles } from "lucide-react";
+import { AlertTriangle, ChartNoAxesGantt, FileText,ListFilter, Minus, Plus, Search, Sparkles } from "lucide-react";
 import { useParams, usePathname, useRouter, useSearchParams } from "next/navigation";
 import React, { useCallback, useEffect, useMemo } from "react";
 
 import Header from "@/components/traces/trace-view/header";
 import { HumanEvaluatorSpanView } from "@/components/traces/trace-view/human-evaluator-span-view";
 import LangGraphView from "@/components/traces/trace-view/lang-graph-view";
+import Metadata from "@/components/traces/trace-view/metadata";
 import Minimap from "@/components/traces/trace-view/minimap.tsx";
 import SearchSpansInput from "@/components/traces/trace-view/search-spans-input.tsx";
 import TraceViewStoreProvider, {
@@ -436,6 +437,16 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
                     <ChartNoAxesGantt size={14} className="mr-1" />
                     <span>Timeline</span>
                   </Button>
+                  <Button
+                    onClick={() => setTab("metadata")}
+                    variant="outline"
+                    className={cn("h-6 text-xs px-1.5", {
+                      "border-primary text-primary": tab === "metadata",
+                    })}
+                  >
+                    <FileText size={14} className="mr-1" />
+                    <span>Metadata</span>
+                  </Button>
                   <Button
                     onClick={() => setTab("chat")}
                     variant="outline"
@@ -486,6 +497,7 @@ const PureTraceView = ({ traceId, spanId, onClose, propsTrace }: TraceViewProps)
                 </div>
               ) : (
                 <>
+                  {tab === "metadata" && trace && <Metadata trace={trace} />}
                   {tab === "chat" && trace && (
                     <Chat
                       trace={trace}

frontend/components/traces/trace-view/metadata.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+
+import { TraceViewTrace } from "@/components/traces/trace-view/trace-view-store";
+import CodeHighlighter from "@/components/ui/code-highlighter/index";
+
+interface MetadataProps {
+  trace: TraceViewTrace;
+}
+
+const Metadata = ({ trace }: MetadataProps) => {
+  const metadataValue = trace.metadata || "{}";
+
+  return (
+    <div className="flex flex-col h-full w-full overflow-hidden">
+      <div className="flex-1">
+        <CodeHighlighter
+          value={metadataValue}
+          readOnly={true}
+          defaultMode="json"
+          className="h-full border-none"
+          placeholder=""
+        />
+      </div>
+    </div>
+  );
+};
+
+export default Metadata;

frontend/components/traces/trace-view/trace-view-store.tsx

@@ -66,7 +66,7 @@ interface TraceViewStoreState {
   browserSession: boolean;
   langGraph: boolean;
   sessionTime?: number;
-  tab: "tree" | "timeline" | "chat";
+  tab: "tree" | "timeline" | "chat" | "metadata";
   search: string;
   zoom: number;
   treeWidth: number;