feat: gate Teams Integrations tab behind enableTeamsBridge feature flag

Off by default. Cloud-ui pipes the LaunchDarkly value through
useConsoleFeatureFlags; without it the tab and its content are
not rendered.

Also: disable Save when enabled with incomplete fields, consolidate
isEditing into editedState, fix dark-mode classes on read-only fields,
document proto fields including bare-key divergence on bot_app_secret_ref.

Author: birdayz

.gitignore

@@ -20,3 +20,4 @@ requests.txt
 build
 
 .cursor
+.claude/worktrees/

backend/pkg/protogen/redpanda/api/dataplane/v1alpha3/ai_agent.pb.go

@@ -16,6 +16,7 @@ export const FEATURE_FLAGS = {
   enableNewPipelineLogs: false,
   enablePipelineDiagrams: false,
   enableConnectSlashMenu: false,
+  enableTeamsBridge: false,
 };
 
 // Cloud-managed tag keys for service account integration

frontend/src/components/constants.ts

@@ -14,6 +14,7 @@ import { getRouteApi, useNavigate } from '@tanstack/react-router';
 const routeApi = getRouteApi('/agents/$id/');
 
 import { Tabs, TabsContent, TabsList, TabsTrigger } from 'components/redpanda-ui/components/tabs';
+import { isFeatureFlagEnabled } from 'config';
 import { AlertCircle, FileText, Loader2, Network, Plug, Search, Settings } from 'lucide-react';
 import { useEffect } from 'react';
 import { useGetAIAgentQuery } from 'react-query/api/ai-agent';
@@ -80,6 +81,8 @@ export const AIAgentDetailsPage = () => {
     return null;
   }
 
+  const showTeamsBridge = isFeatureFlagEnabled('enableTeamsBridge');
+
   return (
     <div className="flex flex-col gap-4 pb-1">
       <AIAgentDetailsHeader />
@@ -92,12 +95,14 @@ export const AIAgentDetailsPage = () => {
               Configuration
             </div>
           </TabsTrigger>
-          <TabsTrigger className="gap-2" value="integrations">
-            <div className="flex items-center gap-2">
-              <Plug className="h-4 w-4" />
-              Integrations
-            </div>
-          </TabsTrigger>
+          {showTeamsBridge && (
+            <TabsTrigger className="gap-2" value="integrations">
+              <div className="flex items-center gap-2">
+                <Plug className="h-4 w-4" />
+                Integrations
+              </div>
+            </TabsTrigger>
+          )}
           <TabsTrigger className="gap-2" value="agent-card">
             <div className="flex items-center gap-2">
               <Network className="h-4 w-4" />
@@ -119,9 +124,11 @@ export const AIAgentDetailsPage = () => {
         <TabsContent value="configuration">
           <AIAgentConfigurationTab />
         </TabsContent>
-        <TabsContent value="integrations">
-          <AIAgentIntegrationsTab />
-        </TabsContent>
+        {showTeamsBridge && (
+          <TabsContent value="integrations">
+            <AIAgentIntegrationsTab />
+          </TabsContent>
+        )}
         <TabsContent value="agent-card">
           <AIAgentCardTab />
         </TabsContent>

frontend/src/components/pages/agents/details/ai-agent-details-page.tsx

@@ -57,8 +57,8 @@ export const AIAgentIntegrationsTab = () => {
   const { mutateAsync: updateAIAgent, isPending: isUpdatePending } = useUpdateAIAgentMutation();
   const { data: secretsData } = useListSecretsQuery();
 
-  const [isEditing, setIsEditing] = useState(false);
   const [editedState, setEditedState] = useState<TeamsBridgeState | null>(null);
+  const isEditing = editedState !== null;
 
   const agent = aiAgentData?.aiAgent;
 
@@ -86,6 +86,10 @@ export const AIAgentIntegrationsTab = () => {
     setEditedState({ ...displayState, ...updates });
   };
 
+  const isSaveDisabled =
+    isUpdatePending ||
+    (displayState.enabled && !(displayState.botAppId && displayState.botTenantId && displayState.botAppSecretName));
+
   const handleSave = async () => {
     if (!id) {
       return;
@@ -117,7 +121,6 @@ export const AIAgentIntegrationsTab = () => {
         {
           onSuccess: () => {
             toast.success('Teams integration updated');
-            setIsEditing(false);
             setEditedState(null);
           },
           onError: (error) => {
@@ -131,7 +134,6 @@ export const AIAgentIntegrationsTab = () => {
   };
 
   const handleCancel = () => {
-    setIsEditing(false);
     setEditedState(null);
   };
 
@@ -150,7 +152,7 @@ export const AIAgentIntegrationsTab = () => {
           <div className="flex gap-2">
             {isEditing ? (
               <>
-                <Button disabled={isUpdatePending} onClick={handleSave} variant="primary">
+                <Button disabled={isSaveDisabled} onClick={handleSave} variant="primary">
                   <Save className="h-4 w-4" />
                   {isUpdatePending ? 'Saving...' : 'Save Changes'}
                 </Button>
@@ -159,7 +161,7 @@ export const AIAgentIntegrationsTab = () => {
                 </Button>
               </>
             ) : (
-              <Button onClick={() => setIsEditing(true)} variant="primary">
+              <Button onClick={() => setEditedState(displayState)} variant="primary">
                 <Edit className="h-4 w-4" />
                 Edit Configuration
               </Button>
@@ -196,7 +198,7 @@ export const AIAgentIntegrationsTab = () => {
                   value={displayState.botAppId}
                 />
               ) : (
-                <div className="flex h-10 items-center rounded-md border border-gray-200 bg-gray-50 px-3 py-2">
+                <div className="flex h-10 items-center rounded-md border border-border bg-muted px-3 py-2">
                   <Text className="truncate">{displayState.botAppId || '-'}</Text>
                 </div>
               )}
@@ -212,7 +214,7 @@ export const AIAgentIntegrationsTab = () => {
                   value={displayState.botTenantId}
                 />
               ) : (
-                <div className="flex h-10 items-center rounded-md border border-gray-200 bg-gray-50 px-3 py-2">
+                <div className="flex h-10 items-center rounded-md border border-border bg-muted px-3 py-2">
                   <Text className="truncate">{displayState.botTenantId || '-'}</Text>
                 </div>
               )}
@@ -234,7 +236,7 @@ export const AIAgentIntegrationsTab = () => {
                 />
               </div>
             ) : (
-              <div className="flex h-10 items-center rounded-md border border-gray-200 bg-gray-50 px-3 py-2">
+              <div className="flex h-10 items-center rounded-md border border-border bg-muted px-3 py-2">
                 <Text className="truncate">{displayState.botAppSecretName || '-'}</Text>
               </div>
             )}

frontend/src/components/pages/agents/details/ai-agent-integrations-tab.tsx

@@ -639,26 +639,39 @@ export const AIAgent_StateSchema: GenEnum<AIAgent_State> = /*@__PURE__*/
 
 /**
  * Microsoft Teams bridge configuration for connecting an AI agent to Teams.
+ * Each agent gets its own Azure Bot registration; the bridge validates
+ * inbound Bot Framework JWTs against the per-agent bot_app_id as audience.
  *
  * @generated from message redpanda.api.dataplane.v1alpha3.AIAgentTeamsBridge
  */
 export type AIAgentTeamsBridge = Message<"redpanda.api.dataplane.v1alpha3.AIAgentTeamsBridge"> & {
   /**
+   * Whether the Teams bridge is active for this agent.
+   *
    * @generated from field: bool enabled = 1;
    */
   enabled: boolean;
 
   /**
+   * Azure Bot registration Application (client) ID.
+   *
    * @generated from field: string bot_app_id = 2;
    */
   botAppId: string;
 
   /**
+   * AAD tenant ID the bot registration lives in.
+   *
    * @generated from field: string bot_tenant_id = 3;
    */
   botTenantId: string;
 
   /**
+   * Bare secret key in the Redpanda secret store (e.g. "TEAMS_BOT_SECRET").
+   * Unlike provider api_key fields which use ${secrets.NAME} template syntax,
+   * this is a plain identifier — the bridge resolves it directly via the
+   * tenant-scoped secret store prefix.
+   *
    * @generated from field: string bot_app_secret_ref = 4;
    */
   botAppSecretRef: string;

frontend/src/protogen/redpanda/api/dataplane/v1alpha3/ai_agent_pb.ts

@@ -181,15 +181,26 @@ components:
         - service_account
       type: object
     AIAgentTeamsBridge:
-      description: Microsoft Teams bridge configuration for connecting an AI agent to Teams.
+      description: |-
+        Microsoft Teams bridge configuration for connecting an AI agent to Teams.
+        Each agent gets its own Azure Bot registration; the bridge validates
+        inbound Bot Framework JWTs against the per-agent bot_app_id as audience.
       properties:
         bot_app_id:
+          description: Azure Bot registration Application (client) ID.
           type: string
         bot_app_secret_ref:
+          description: |-
+            Bare secret key in the Redpanda secret store (e.g. "TEAMS_BOT_SECRET").
+            Unlike provider api_key fields which use ${secrets.NAME} template syntax,
+            this is a plain identifier — the bridge resolves it directly via the
+            tenant-scoped secret store prefix.
           type: string
         bot_tenant_id:
+          description: AAD tenant ID the bot registration lives in.
           type: string
         enabled:
+          description: Whether the Teams bridge is active for this agent.
           type: boolean
       type: object
     AIAgentUpdate:

proto/gen/openapi/openapi.v1alpha3.json

@@ -303,10 +303,19 @@ message AIAgent {
 }
 
 // Microsoft Teams bridge configuration for connecting an AI agent to Teams.
+// Each agent gets its own Azure Bot registration; the bridge validates
+// inbound Bot Framework JWTs against the per-agent bot_app_id as audience.
 message AIAgentTeamsBridge {
+  // Whether the Teams bridge is active for this agent.
   bool enabled = 1;
+  // Azure Bot registration Application (client) ID.
   string bot_app_id = 2;
+  // AAD tenant ID the bot registration lives in.
   string bot_tenant_id = 3;
+  // Bare secret key in the Redpanda secret store (e.g. "TEAMS_BOT_SECRET").
+  // Unlike provider api_key fields which use ${secrets.NAME} template syntax,
+  // this is a plain identifier — the bridge resolves it directly via the
+  // tenant-scoped secret store prefix.
   string bot_app_secret_ref = 4 [
     (buf.validate.field).ignore = IGNORE_IF_ZERO_VALUE,
     (buf.validate.field).string.pattern = "^[A-Za-z_][A-Za-z0-9_]*$"