chore: update documentation

ui/src/app/workflow/[workflowId]/components/workflow-tester/EmbeddedVoiceTester.tsx

@@ -148,6 +148,7 @@ export function EmbeddedVoiceTester({
                 error={apiKeyError}
                 errorCode={apiKeyErrorCode}
                 onNavigateToBilling={() => router.push("/billing")}
+                onNavigateToDevelopers={() => router.push("/api-keys")}
                 onNavigateToModelConfig={() => router.push("/model-configurations")}
             />
 

ui/src/app/workflow/[workflowId]/run/[runId]/components/ApiKeyErrorDialog.tsx

@@ -1,14 +1,17 @@
-import { AlertCircle, CreditCard, Key } from "lucide-react";
+import { AlertCircle, CreditCard, ExternalLink, Key } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "@/components/ui/dialog";
 
+const SERVICE_KEYS_DOCS_URL = "https://docs.dograh.com/configurations/api-keys#service-keys";
+
 interface ApiKeyErrorDialogProps {
     open: boolean;
     onOpenChange: (open: boolean) => void;
     error: string | null;
     errorCode: string | null;
     onNavigateToBilling: () => void;
+    onNavigateToDevelopers: () => void;
     onNavigateToModelConfig: () => void;
 }
 
@@ -18,15 +21,29 @@ export const ApiKeyErrorDialog = ({
     error,
     errorCode,
     onNavigateToBilling,
+    onNavigateToDevelopers,
     onNavigateToModelConfig,
 }: ApiKeyErrorDialogProps) => {
     const isBillingCreditsError = errorCode === 'insufficient_credits';
+    const isServiceKeyOrgMismatch = errorCode === 'service_key_org_mismatch';
     const isQuotaError = isBillingCreditsError || errorCode === 'quota_exceeded';
 
-    const title = isQuotaError ? "Insufficient Credits" : "API Configuration Error";
+    const title = isQuotaError
+        ? "Insufficient Credits"
+        : isServiceKeyOrgMismatch
+            ? "Service Token Account Mismatch"
+            : "API Configuration Error";
     const icon = isQuotaError ? <CreditCard className="h-5 w-5 text-orange-500" /> : <Key className="h-5 w-5 text-red-500" />;
-    const buttonText = isBillingCreditsError ? "Go to Billing" : "Go to Model Configurations";
-    const onNavigate = isBillingCreditsError ? onNavigateToBilling : onNavigateToModelConfig;
+    const buttonText = isBillingCreditsError
+        ? "Go to Billing"
+        : isServiceKeyOrgMismatch
+            ? "Go to Developers"
+            : "Go to Model Configurations";
+    const onNavigate = isBillingCreditsError
+        ? onNavigateToBilling
+        : isServiceKeyOrgMismatch
+            ? onNavigateToDevelopers
+            : onNavigateToModelConfig;
 
     return (
         <Dialog open={open} onOpenChange={onOpenChange}>
@@ -46,6 +63,16 @@ export const ApiKeyErrorDialog = ({
                                         Purchase credits from Billing to continue using Dograh-managed models.
                                     </p>
                                 )}
+                                {isServiceKeyOrgMismatch && (
+                                    <a
+                                        href={SERVICE_KEYS_DOCS_URL}
+                                        target="_blank"
+                                        rel="noopener noreferrer"
+                                        className="inline-flex items-center gap-0.5 text-muted-foreground underline"
+                                    >
+                                        Learn more <ExternalLink className="h-3 w-3" />
+                                    </a>
+                                )}
                             </div>
                         </div>
                     </DialogDescription>

ui/src/app/workflow/[workflowId]/run/[runId]/hooks/useWebSocketRTC.tsx

@@ -33,6 +33,7 @@ const HANDLED_SERVICE_ERROR_TYPES = new Set([
     'quota_exceeded',
     'insufficient_credits',
     'invalid_service_key',
+    'service_key_org_mismatch',
     'quota_check_failed',
 ]);
 

ui/src/app/workflow/[workflowId]/run/[runId]/page.tsx

@@ -408,10 +408,6 @@ function RunMetricsSection({
             </CardHeader>
             <CardContent className="grid gap-3 sm:grid-cols-2 xl:grid-cols-3">
                 <MetricCard label="Duration" value={formatDuration(costInfo?.call_duration_seconds)} />
-                <MetricCard
-                    label="Token Usage"
-                    value={costInfo?.dograh_token_usage != null ? costInfo.dograh_token_usage.toLocaleString() : 'N/A'}
-                />
                 <MetricCard label="User Turns" value={String(metrics.userTurns)} />
                 <MetricCard label="Bot Turns" value={String(metrics.botTurns)} />
                 <MetricCard label="Tool Calls" value={String(metrics.toolCalls)} />