From 387c53aaef1cc3889642e1ce07352dcccc98f1ed Mon Sep 17 00:00:00 2001
From: Ishaan Jaff <ishaan@berri.ai>
Date: Wed, 30 Sep 2026 00:40:12 -0700
Subject: [PATCH] feat(ui): add tracing setup card

---
 .../view_logs/TraceView/TracingSetupCard.tsx  | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 ui/litellm-dashboard/src/components/view_logs/TraceView/TracingSetupCard.tsx

diff --git a/ui/litellm-dashboard/src/components/view_logs/TraceView/TracingSetupCard.tsx b/ui/litellm-dashboard/src/components/view_logs/TraceView/TracingSetupCard.tsx
new file mode 100644
index 00000000000..1c8b4a646f8
--- /dev/null
+++ b/ui/litellm-dashboard/src/components/view_logs/TraceView/TracingSetupCard.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import { Info } from "lucide-react";
+
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+export const TRACING_SETUP_SNIPPET = `# proxy config
+general_settings:
+  tracing:
+    store: clickhouse   # + CLICKHOUSE_URL env var
+# your agent app
+export LANGSMITH_TRACING=true LANGSMITH_TRACING_MODE=otel
+export OTEL_EXPORTER_OTLP_ENDPOINT=<proxy url>
+export OTEL_EXPORTER_OTLP_HEADERS="Authorization=Bearer <litellm key>"`;
+
+/** Shown when GET /v1/traces answers 501 (agent tracing not configured on this proxy). */
+export function TracingSetupCard({ detail }: { detail?: string }) {
+  return (
+    <Alert className="mb-4" data-testid="tracing-setup-card">
+      <Info />
+      <AlertTitle>Agent tracing is not enabled</AlertTitle>
+      <AlertDescription>
+        <p>
+          Point your agent&apos;s OpenTelemetry exporter at this proxy to see agent runs here, joined to their LLM
+          request logs.{detail ? ` (${detail})` : ""}
+        </p>
+        <pre className="mt-2 w-full overflow-x-auto rounded-md border bg-muted px-3 py-2 font-mono text-xs text-foreground">
+          {TRACING_SETUP_SNIPPET}
+        </pre>
+      </AlertDescription>
+    </Alert>
+  );
+}