fix: add production support for cluster-specific AI Gateway URLs

frontend/src/config.ts

@@ -119,6 +119,7 @@ export type SetConfigArguments = {
   fetch?: WindowOrWorkerGlobalScope['fetch'];
   jwt?: string;
   clusterId?: string;
+  aiGatewayUrl?: string;
   urlOverride?: {
     rest?: string;
     ws?: string;
@@ -147,6 +148,7 @@ export type Breadcrumb = {
 
 type Config = {
   controlplaneUrl: string;
+  aiGatewayUrl?: string;
   dataplaneTransport?: Transport;
   restBasePath: string;
   grpcBasePath: string;

frontend/src/hooks/use-ai-gateway-transport.ts

@@ -1,29 +1,57 @@
 import type { Transport } from '@connectrpc/connect';
 import { createConnectTransport } from '@connectrpc/connect-web';
-import { addBearerTokenInterceptor } from 'config';
+import { addBearerTokenInterceptor, config, isEmbedded } from 'config';
 import { protobufRegistry } from 'protobuf-registry';
 import { useMemo } from 'react';
 
 /**
  * Custom hook to create and memoize a Connect transport for AI Gateway API calls
  *
- * Uses base path: /.redpanda/api/
- * Connect Query will append the service path: redpanda.api.aigateway.v1.GatewayService/ListGateways
- * Full path becomes: /.redpanda/api/redpanda.api.aigateway.v1.GatewayService/ListGateways
+ * In Development:
+ *   - Uses base path: /.redpanda/api/
+ *   - Dev server proxies to: https://ai-gateway.{clusterId}.clusters.ign.rdpa.co
  *
- * Dev server proxies /.redpanda/api/redpanda.api.aigateway.v1 to:
- *   https://ai-gateway.${CLUSTER_ID}.clusters.ign.rdpa.co
+ * In Production (Embedded):
+ *   - Uses config.aiGatewayUrl set by cloud-ui parent app (from REACT_APP_AI_GATEWAY_URL env var)
+ *   - Appends /.redpanda/api to the base URL
+ *
+ * In Production (Standalone):
+ *   - Uses relative path /.redpanda/api (backend handles routing)
  *
  * @returns Transport instance configured for AI Gateway communication
  */
 export const useAIGatewayTransport = (): Transport => {
   const aiGatewayTransport = useMemo(() => {
-    // Use /.redpanda/api/ base path (AI Gateway's Connect RPC endpoint prefix)
-    // Dev server will proxy to the correct AI Gateway based on cluster ID
-    const baseUrl = '/.redpanda/api';
+    // In development, use relative path and rely on dev server proxy
+    if (process.env.NODE_ENV === 'development') {
+      return createConnectTransport({
+        baseUrl: '/.redpanda/api',
+        interceptors: [addBearerTokenInterceptor],
+        jsonOptions: {
+          registry: protobufRegistry,
+        },
+      });
+    }
+
+    // In production embedded mode (cloud-ui), use AI Gateway URL from config
+    if (isEmbedded() && config.aiGatewayUrl) {
+      // Ensure URL ends with /.redpanda/api
+      const baseUrl = config.aiGatewayUrl.endsWith('/.redpanda/api')
+        ? config.aiGatewayUrl
+        : `${config.aiGatewayUrl}/.redpanda/api`;
+
+      return createConnectTransport({
+        baseUrl,
+        interceptors: [addBearerTokenInterceptor],
+        jsonOptions: {
+          registry: protobufRegistry,
+        },
+      });
+    }
 
+    // Fallback to relative path for standalone mode
     return createConnectTransport({
-      baseUrl,
+      baseUrl: '/.redpanda/api',
       interceptors: [addBearerTokenInterceptor],
       jsonOptions: {
         registry: protobufRegistry,