api monitors

frontend/src/pages/Settings/Integration.tsx

@@ -14,6 +14,7 @@ import SelectDropdown from '../../components/form/SelectDropdown';
 import { useToast } from '../../components/ui/toast/ToastContainer';
 import Alert from '../../components/ui/alert/Alert';
 import { fetchAPI } from '../../services/api';
+import ApiStatusMonitor from '../../components/debug/ApiStatusMonitor';
 
 // OpenAI Icon SVG
 const OpenAIIcon = () => (
@@ -1165,6 +1166,16 @@ export default function Integration() {
           />
         </>
       )}
+
+      {/* API Status Monitor - Only shows when debug toggle is enabled */}
+      <ApiStatusMonitor
+        title="System"
+        endpoints={[
+          { name: 'Get Integration Settings', method: 'GET', endpoint: '/v1/system/settings/integrations/openai/' },
+          { name: 'Get Image Generation Settings', method: 'GET', endpoint: '/v1/system/integrations/image_generation/' },
+          { name: 'Get System Status', method: 'GET', endpoint: '/v1/system/status/' },
+        ]}
+      />
     </>
   );
 }