feat: custom telemetry configuration

ui/src/components/TelemetrySection.tsx

@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { toast } from "sonner";
+
+import {
+  deleteLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsDelete,
+  getLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGet,
+  saveLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsPost,
+} from "@/client/sdk.gen";
+import type { LangfuseCredentialsResponse } from "@/client/types.gen";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+export function TelemetrySection() {
+  const [credentials, setCredentials] = useState<LangfuseCredentialsResponse>({
+    host: "",
+    public_key: "",
+    secret_key: "",
+    configured: false,
+  });
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    fetchCredentials();
+  }, []);
+
+  async function fetchCredentials() {
+    try {
+      const { data } = await getLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGet();
+      if (data) {
+        setCredentials(data);
+      }
+    } catch {
+      // No credentials configured yet — that's fine
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleSave(e: React.FormEvent) {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      const { error } = await saveLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsPost({
+        body: {
+          host: credentials.host ?? "",
+          public_key: credentials.public_key ?? "",
+          secret_key: credentials.secret_key ?? "",
+        },
+      });
+      if (error) {
+        throw new Error("Failed to save");
+      }
+      toast.success("Telemetry credentials saved");
+      await fetchCredentials();
+    } catch {
+      toast.error("Failed to save telemetry credentials");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleDelete() {
+    setSaving(true);
+    try {
+      await deleteLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsDelete();
+      setCredentials({ host: "", public_key: "", secret_key: "", configured: false });
+      toast.success("Telemetry credentials removed");
+    } catch {
+      toast.error("Failed to remove telemetry credentials");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (loading) {
+    return <p className="text-sm text-muted-foreground">Loading...</p>;
+  }
+
+  return (
+    <form onSubmit={handleSave} className="space-y-4">
+      <p className="text-sm text-muted-foreground">
+        Connect your Langfuse project to receive call tracing data.
+      </p>
+      <div className="space-y-2">
+        <Label htmlFor="langfuse-host">Host</Label>
+        <Input
+          id="langfuse-host"
+          placeholder="https://cloud.langfuse.com"
+          value={credentials.host}
+          onChange={(e) => setCredentials({ ...credentials, host: e.target.value })}
+          required
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="langfuse-public-key">Public Key</Label>
+        <Input
+          id="langfuse-public-key"
+          placeholder="pk-lf-..."
+          value={credentials.public_key}
+          onChange={(e) => setCredentials({ ...credentials, public_key: e.target.value })}
+          required
+        />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="langfuse-secret-key">Secret Key</Label>
+        <Input
+          id="langfuse-secret-key"
+          type="password"
+          placeholder="sk-lf-..."
+          value={credentials.secret_key}
+          onChange={(e) => setCredentials({ ...credentials, secret_key: e.target.value })}
+          required
+        />
+      </div>
+      <div className="flex gap-2">
+        <Button type="submit" disabled={saving}>
+          {saving ? "Saving..." : "Save"}
+        </Button>
+        {credentials.configured && (
+          <Button type="button" variant="destructive" disabled={saving} onClick={handleDelete}>
+            Remove
+          </Button>
+        )}
+      </div>
+    </form>
+  );
+}

ui/src/components/workflow-runs/CampaignRuns.tsx

@@ -3,7 +3,7 @@
 import { useRouter } from "next/navigation";
 import { useCallback, useEffect, useState } from "react";
 
-import { getCampaignRunsApiV1CampaignCampaignIdRunsGet } from "@/client/sdk.gen";
+import { getCampaignRunsApiV1CampaignCampaignIdRunsGet, getWorkflowApiV1WorkflowFetchWorkflowIdGet } from "@/client/sdk.gen";
 import { WorkflowRunResponseSchema } from "@/client/types.gen";
 import { WorkflowRunsTable } from "@/components/workflow-runs";
 import { useAuth } from "@/lib/auth";
@@ -49,6 +49,40 @@ export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignR
         return searchParams ? decodeFiltersFromURL(searchParams, availableAttributes) : [];
     });
 
+    const [configuredAttributes, setConfiguredAttributes] = useState<FilterAttribute[]>(availableAttributes);
+
+    // Load disposition codes from workflow configuration
+    const loadDispositionCodes = useCallback(async () => {
+        if (!isAuthenticated) return;
+        try {
+            const response = await getWorkflowApiV1WorkflowFetchWorkflowIdGet({
+                path: { workflow_id: workflowId },
+            });
+
+            const workflow = response.data;
+            const codes = workflow?.call_disposition_codes?.disposition_codes;
+                setConfiguredAttributes(prev => prev.map(attr => {
+                    if (attr.id === 'dispositionCode') {
+                        return {
+                            ...attr,
+                            config: {
+                                ...attr.config,
+                                options: codes,
+                            }
+                        };
+                    }
+                    return attr;
+                }));
+            }
+        } catch (err) {
+            console.error("Failed to load disposition codes:", err);
+        }
+    }, [workflowId, isAuthenticated]);
+
+    useEffect(() => {
+        loadDispositionCodes();
+    }, [loadDispositionCodes]);
+
     const fetchCampaignRuns = useCallback(async (
         page: number,
         filters?: ActiveFilter[],
@@ -176,7 +210,7 @@ export function CampaignRuns({ campaignId, workflowId, searchParams }: CampaignR
     }, [fetchCampaignRuns, currentPage, appliedFilters, sortBy, sortOrder]);
 
     // Use a subset of filter attributes relevant for campaigns
-    const campaignFilterAttributes: FilterAttribute[] = availableAttributes.filter(
+    const campaignFilterAttributes: FilterAttribute[] = configuredAttributes.filter(
         attr => ['dateRange', 'dispositionCode', 'duration', 'status', 'tokenUsage'].includes(attr.id)
     );