Add Swagger UI api page on Automation page

frontend/src/components/settings/SettingsFanoutSection.tsx

@@ -8,7 +8,7 @@ import {
   Suspense,
   type ReactNode,
 } from 'react';
-import { ChevronDown, Info } from 'lucide-react';
+import { BookOpen, ChevronDown, Info } from 'lucide-react';
 import { Input } from '../ui/input';
 import { Label } from '../ui/label';
 import { Button } from '../ui/button';
@@ -3312,9 +3312,17 @@ export function SettingsFanoutSection({
         </div>
       )}
 
-      <Button type="button" size="sm" onClick={() => setCreateDialogOpen(true)}>
-        Add Integration
-      </Button>
+      <div className="flex flex-wrap gap-2">
+        <Button type="button" size="sm" onClick={() => setCreateDialogOpen(true)}>
+          Add Integration
+        </Button>
+        <Button asChild size="sm" variant="secondary">
+          <a href="./docs" target="_blank" rel="noopener noreferrer">
+            <BookOpen className="mr-1.5 h-4 w-4" aria-hidden="true" />
+            API Docs
+          </a>
+        </Button>
+      </div>
 
       <CreateIntegrationDialog
         open={createDialogOpen}

frontend/src/test/fanoutSection.test.tsx

@@ -127,6 +127,18 @@ beforeEach(() => {
 });
 
 describe('SettingsFanoutSection', () => {
+  it('shows an API docs link beside the add integration button', async () => {
+    renderSection();
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: 'Add Integration' })).toBeInTheDocument();
+    });
+    const apiDocsLink = screen.getByRole('link', { name: 'API Docs' });
+
+    expect(apiDocsLink).toHaveAttribute('href', './docs');
+    expect(apiDocsLink).toHaveAttribute('target', '_blank');
+  });
+
   it('shows add integration dialog with all integration types', async () => {
     renderSection();
     const dialog = await openCreateIntegrationDialog();