feat: improve container status check triggering

- Add multiple triggers for container status checks:
  - When component mounts (tab becomes active)
  - When scripts data loads
  - Every 60 seconds via interval
- Add manual 'Refresh Container Status' button for on-demand checking
- Add console logging for debugging status check triggers
- Ensure status checks happen reliably when switching to installed scripts tab

Fixes issue where status checks weren't triggering when tab loads

Author: michelroegl-brunner

src/app/_components/InstalledScriptsTab.tsx

@@ -165,6 +165,7 @@ export function InstalledScriptsTab() {
 
   // Function to fetch container statuses
   const fetchContainerStatuses = () => {
+    console.log('Fetching container statuses...', { scriptsCount: scripts.length });
     const containersWithIds = scripts
       .filter(script => script.container_id)
       .map(script => ({
@@ -180,6 +181,7 @@ export function InstalledScriptsTab() {
         } : undefined
       }));
 
+    console.log('Containers to check:', containersWithIds.length);
     if (containersWithIds.length > 0) {
       containerStatusMutation.mutate({ containers: containersWithIds });
     }
@@ -203,6 +205,26 @@ export function InstalledScriptsTab() {
     }
   }, [scripts.length]);
 
+  // Trigger status check when component becomes visible (tab is active)
+  useEffect(() => {
+    if (scripts.length > 0) {
+      // Small delay to ensure component is fully rendered
+      const timeoutId = setTimeout(() => {
+        fetchContainerStatuses();
+      }, 100);
+      
+      return () => clearTimeout(timeoutId);
+    }
+  }, []); // Empty dependency array means this runs on mount
+
+  // Also trigger status check when scripts data loads
+  useEffect(() => {
+    if (scripts.length > 0 && !isLoading) {
+      console.log('Scripts data loaded, triggering status check');
+      fetchContainerStatuses();
+    }
+  }, [scriptsData, isLoading]);
+
   // Update scripts with container statuses
   const scriptsWithStatus = scripts.map(script => ({
     ...script,
@@ -493,6 +515,14 @@ export function InstalledScriptsTab() {
           >
             {showAutoDetectForm ? 'Cancel Auto-Detect' : '🔍 Auto-Detect LXC Containers (Must contain a tag with "community-script")'}
           </Button>
+          <Button
+            onClick={fetchContainerStatuses}
+            disabled={containerStatusMutation.isPending || scripts.length === 0}
+            variant="outline"
+            size="default"
+          >
+            {containerStatusMutation.isPending ? '🔄 Checking...' : '🔄 Refresh Container Status'}
+          </Button>
         </div>
 
         {/* Add Script Form */}