api monitors

frontend/src/pages/Billing/Transactions.tsx

@@ -4,6 +4,7 @@ import { useToast } from '../../components/ui/toast/ToastContainer';
 import { fetchCreditTransactions, CreditTransaction } from '../../services/api';
 import { Card } from '../../components/ui/card';
 import Badge from '../../components/ui/badge/Badge';
+import ApiStatusMonitor from '../../components/debug/ApiStatusMonitor';
 
 export default function Transactions() {
   const toast = useToast();
@@ -97,6 +98,14 @@ export default function Transactions() {
           </div>
         </Card>
       )}
+
+      {/* API Status Monitor - Only shows when debug toggle is enabled */}
+      <ApiStatusMonitor
+        title="Billing"
+        endpoints={[
+          { name: 'Get Credit Transactions', method: 'GET', endpoint: '/v1/billing/credits/transactions/' },
+        ]}
+      />
     </div>
   );
 }