feat: add worker sync events

Add a worker sync event so that runtime updates on one worker can propagate across other workers using pubsub for multi worker deployments

ui/src/app/files/DocumentUpload.tsx

@@ -18,7 +18,7 @@ interface DocumentUploadProps {
 }
 
 const MAX_FILE_SIZE = 5 * 1024 * 1024; // 5MB
-const ACCEPTED_FILE_TYPES = ['.pdf', '.docx', '.doc', '.txt'];
+const ACCEPTED_FILE_TYPES = ['.pdf', '.docx', '.doc', '.txt', '.json'];
 
 export default function DocumentUpload({ onUploadSuccess }: DocumentUploadProps) {
   const [uploading, setUploading] = useState(false);

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

@@ -1,6 +1,5 @@
 import { StackHandler } from "@stackframe/stack";
 
-import { TelemetrySection } from "@/components/TelemetrySection";
 import { getAuthProvider } from "@/lib/auth/config";
 
 import { BackButton } from "./BackButton";
@@ -29,18 +28,6 @@ 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/settings/page.tsx

@@ -0,0 +1,37 @@
+"use client";
+
+import { TelemetrySection } from "@/components/TelemetrySection";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+export default function SettingsPage() {
+  return (
+    <div className="flex justify-center py-12 px-4">
+      <div className="w-full max-w-2xl space-y-6">
+        <div>
+          <h1 className="text-2xl font-bold">Platform Settings</h1>
+          <p className="text-muted-foreground">
+            Manage your platform configuration and integrations.
+          </p>
+        </div>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Telemetry</CardTitle>
+            <CardDescription>
+              Configure Langfuse tracing for your voice agent calls.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <TelemetrySection />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

ui/src/components/TelemetrySection.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 
 import {
@@ -12,8 +12,10 @@ 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";
+import { useAuth } from "@/lib/auth";
 
 export function TelemetrySection() {
+  const { user, loading: authLoading } = useAuth();
   const [credentials, setCredentials] = useState<LangfuseCredentialsResponse>({
     host: "",
     public_key: "",
@@ -22,10 +24,15 @@ export function TelemetrySection() {
   });
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
+  const hasFetched = useRef(false);
 
   useEffect(() => {
+    if (authLoading || !user || hasFetched.current) {
+      return;
+    }
+    hasFetched.current = true;
     fetchCredentials();
-  }, []);
+  }, [authLoading, user]);
 
   async function fetchCredentials() {
     try {

ui/src/components/layout/AppSidebar.tsx

@@ -398,6 +398,10 @@ export function AppSidebar() {
                     </div>
                   </DropdownMenuLabel>
                   <DropdownMenuSeparator />
+                  <DropdownMenuItem onClick={() => router.push("/settings")} className="cursor-pointer">
+                    <Settings className="mr-2 h-4 w-4" />
+                    Platform Settings
+                  </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => logout()} className="cursor-pointer">
                     <LogOut className="mr-2 h-4 w-4" />
                     Sign out
@@ -443,6 +447,10 @@ export function AppSidebar() {
                     <Settings className="mr-2 h-4 w-4" />
                     Account settings
                   </DropdownMenuItem>
+                  <DropdownMenuItem onClick={() => router.push("/settings")} className="cursor-pointer">
+                    <Settings className="mr-2 h-4 w-4" />
+                    Platform Settings
+                  </DropdownMenuItem>
                   <DropdownMenuItem onClick={() => router.push("/usage")} className="cursor-pointer">
                     <CircleDollarSign className="mr-2 h-4 w-4" />
                     Usage