feat: custom telemetry configuration

ui/src/app/handler/[...stack]/page.tsx

@@ -1,5 +1,6 @@
 import { StackHandler } from "@stackframe/stack";
 
+import { TelemetrySection } from "@/components/TelemetrySection";
 import { getAuthProvider } from "@/lib/auth/config";
 
 import { BackButton } from "./BackButton";
@@ -28,6 +29,18 @@ export default async function Handler(props: unknown) {
           fullPage
           app={app!}
           routeProps={props}
+          componentProps={{
+            AccountSettings: {
+              extraItems: [
+                {
+                  id: "telemetry",
+                  title: "Telemetry",
+                  iconName: "Key",
+                  content: <TelemetrySection />,
+                },
+              ],
+            },
+          }}
         />
       </div>
     </div>

ui/src/app/workflow/[workflowId]/components/WorkflowExecutions.tsx

@@ -6,7 +6,6 @@ import { useCallback, useEffect, useState } from "react";
 import { getWorkflowApiV1WorkflowFetchWorkflowIdGet, getWorkflowRunsApiV1WorkflowWorkflowIdRunsGet } from "@/client/sdk.gen";
 import { WorkflowRunResponseSchema } from "@/client/types.gen";
 import { WorkflowRunsTable } from "@/components/workflow-runs";
-import { DISPOSITION_CODES } from "@/constants/dispositionCodes";
 import { useAuth } from '@/lib/auth';
 import { decodeFiltersFromURL, encodeFiltersToURL } from "@/lib/filters";
 import { ActiveFilter, availableAttributes, FilterAttribute } from "@/types/filters";
@@ -60,17 +59,15 @@ export function WorkflowExecutions({ workflowId, searchParams }: WorkflowExecuti
             });
 
             const workflow = response.data;
-            if (workflow?.call_disposition_codes) {
-                // Update the disposition code attribute with actual options
+            const codes = workflow?.call_disposition_codes?.disposition_codes;
+            if (codes && codes.length > 0) {
                 setConfiguredAttributes(prev => prev.map(attr => {
                     if (attr.id === 'dispositionCode') {
                         return {
                             ...attr,
                             config: {
                                 ...attr.config,
-                                options: Object.keys(workflow.call_disposition_codes || {}).length > 0
-                                                    ? Object.keys(workflow.call_disposition_codes || {})
-                                                    : [...DISPOSITION_CODES]
+                                options: codes,
                             }
                         };
                     }

ui/src/client/types.gen.ts

@@ -732,6 +732,19 @@ export type IntegrationResponse = {
 
 export type ItemKind = 'node' | 'edge' | 'workflow';
 
+export type LangfuseCredentialsRequest = {
+    host: string;
+    public_key: string;
+    secret_key: string;
+};
+
+export type LangfuseCredentialsResponse = {
+    host?: string;
+    public_key?: string;
+    secret_key?: string;
+    configured?: boolean;
+};
+
 export type LastCampaignSettingsResponse = {
     retry_config?: RetryConfigResponse | null;
     max_concurrency?: number | null;
@@ -3802,6 +3815,101 @@ export type SaveTelephonyConfigurationApiV1OrganizationsTelephonyConfigPostRespo
     200: unknown;
 };
 
+export type DeleteLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsDeleteData = {
+    body?: never;
+    headers?: {
+        authorization?: string | null;
+        'X-API-Key'?: string | null;
+    };
+    path?: never;
+    query?: never;
+    url: '/api/v1/organizations/langfuse-credentials';
+};
+
+export type DeleteLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsDeleteErrors = {
+    /**
+     * Not found
+     */
+    404: unknown;
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type DeleteLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsDeleteError = DeleteLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsDeleteErrors[keyof DeleteLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsDeleteErrors];
+
+export type DeleteLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsDeleteResponses = {
+    /**
+     * Successful Response
+     */
+    200: unknown;
+};
+
+export type GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetData = {
+    body?: never;
+    headers?: {
+        authorization?: string | null;
+        'X-API-Key'?: string | null;
+    };
+    path?: never;
+    query?: never;
+    url: '/api/v1/organizations/langfuse-credentials';
+};
+
+export type GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetErrors = {
+    /**
+     * Not found
+     */
+    404: unknown;
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetError = GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetErrors[keyof GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetErrors];
+
+export type GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetResponses = {
+    /**
+     * Successful Response
+     */
+    200: LangfuseCredentialsResponse;
+};
+
+export type GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetResponse = GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetResponses[keyof GetLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsGetResponses];
+
+export type SaveLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsPostData = {
+    body: LangfuseCredentialsRequest;
+    headers?: {
+        authorization?: string | null;
+        'X-API-Key'?: string | null;
+    };
+    path?: never;
+    query?: never;
+    url: '/api/v1/organizations/langfuse-credentials';
+};
+
+export type SaveLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsPostErrors = {
+    /**
+     * Not found
+     */
+    404: unknown;
+    /**
+     * Validation Error
+     */
+    422: HttpValidationError;
+};
+
+export type SaveLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsPostError = SaveLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsPostErrors[keyof SaveLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsPostErrors];
+
+export type SaveLangfuseCredentialsApiV1OrganizationsLangfuseCredentialsPostResponses = {
+    /**
+     * Successful Response
+     */
+    200: unknown;
+};
+
 export type GetCampaignDefaultsApiV1OrganizationsCampaignDefaultsGetData = {
     body?: never;
     headers?: {

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)
     );