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.

Author: birdayz

.gitignore

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

frontend/src/components/constants.ts

@@ -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/pages/agents/details/ai-agent-details-page.tsx

@@ -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-integrations-tab.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>
             )}