deubg master status page

frontend/src/App.tsx

@@ -79,7 +79,7 @@ const ModuleSettings = lazy(() => import("./pages/Settings/Modules"));
 const AISettings = lazy(() => import("./pages/Settings/AI"));
 const Plans = lazy(() => import("./pages/Settings/Plans"));
 const Industries = lazy(() => import("./pages/Settings/Industries"));
-const Status = lazy(() => import("./pages/Settings/Status"));
+const MasterStatus = lazy(() => import("./pages/Settings/MasterStatus"));
 const ApiMonitor = lazy(() => import("./pages/Settings/ApiMonitor"));
 const DebugStatus = lazy(() => import("./pages/Settings/DebugStatus"));
 const Integration = lazy(() => import("./pages/Settings/Integration"));
@@ -427,7 +427,7 @@ export default function App() {
             } />
             <Route path="/settings/status" element={
               <Suspense fallback={null}>
-                  <Status />
+                  <MasterStatus />
                 </Suspense>
             } />
             <Route path="/settings/api-monitor" element={

frontend/src/components/common/DebugSiteSelector.tsx

@@ -0,0 +1,171 @@
+/**
+ * Site Selector Component for Debug Pages
+ * Displays site switcher without sector selector - used exclusively for debug/status pages
+ */
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router';
+import { Dropdown } from '../ui/dropdown/Dropdown';
+import { DropdownItem } from '../ui/dropdown/DropdownItem';
+import { fetchSites, Site, setActiveSite as apiSetActiveSite } from '../../services/api';
+import { useToast } from '../ui/toast/ToastContainer';
+import { useSiteStore } from '../../store/siteStore';
+import { useAuthStore } from '../../store/authStore';
+import Button from '../ui/button/Button';
+
+export default function DebugSiteSelector() {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
+  const { user, refreshUser, isAuthenticated } = useAuthStore();
+  
+  // Site switcher state
+  const [sitesOpen, setSitesOpen] = useState(false);
+  const [sites, setSites] = useState<Site[]>([]);
+  const [sitesLoading, setSitesLoading] = useState(true);
+  const siteButtonRef = useRef<HTMLButtonElement>(null);
+  const noSitesAvailable = !sitesLoading && sites.length === 0;
+
+  // Load sites
+  useEffect(() => {
+    if (isAuthenticated && user) {
+      refreshUser().catch((error) => {
+        console.debug('DebugSiteSelector: Failed to refresh user (non-critical):', error);
+      });
+    }
+  }, [isAuthenticated]);
+
+  useEffect(() => {
+    loadSites();
+    if (!activeSite) {
+      loadActiveSite();
+    }
+  }, [user?.account?.id]);
+
+  const loadSites = async () => {
+    try {
+      setSitesLoading(true);
+      const response = await fetchSites();
+      const activeSites = (response.results || []).filter(site => site.is_active);
+      setSites(activeSites);
+    } catch (error: any) {
+      console.error('Failed to load sites:', error);
+      toast.error(`Failed to load sites: ${error.message}`);
+    } finally {
+      setSitesLoading(false);
+    }
+  };
+
+  const handleSiteSelect = async (siteId: number) => {
+    try {
+      await apiSetActiveSite(siteId);
+      const selectedSite = sites.find(s => s.id === siteId);
+      if (selectedSite) {
+        setActiveSite(selectedSite);
+        toast.success(`Switched to "${selectedSite.name}"`);
+      }
+      setSitesOpen(false);
+    } catch (error: any) {
+      toast.error(`Failed to switch site: ${error.message}`);
+    }
+  };
+
+  const handleCreateSite = () => navigate('/sites');
+
+  if (sitesLoading && sites.length === 0) {
+    return (
+      <div className="text-sm text-gray-500 dark:text-gray-400">
+        Loading sites...
+      </div>
+    );
+  }
+
+  if (noSitesAvailable) {
+    return (
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+        <span>No active sites yet. Create a site to unlock planner and writer modules.</span>
+        <Button size="sm" variant="primary" onClick={handleCreateSite}>
+          Create Site
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="relative inline-block">
+      <button
+        ref={siteButtonRef}
+        onClick={() => setSitesOpen(!sitesOpen)}
+        className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors dropdown-toggle"
+        aria-label="Switch site"
+        disabled={sitesLoading || sites.length === 0}
+      >
+        <span className="flex items-center gap-2">
+          <svg
+            className="w-4 h-4 text-brand-500 dark:text-brand-400"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+            />
+          </svg>
+          <span className="max-w-[150px] truncate">
+            {sitesLoading ? 'Loading...' : activeSite?.name || 'Select Site'}
+          </span>
+        </span>
+        <svg
+          className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sitesOpen ? 'rotate-180' : ''}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            d="M19 9l-7 7-7-7"
+          />
+        </svg>
+      </button>
+
+      <Dropdown
+        isOpen={sitesOpen}
+        onClose={() => setSitesOpen(false)}
+        anchorRef={siteButtonRef}
+        placement="bottom-left"
+        className="w-64 p-2"
+      >
+        {sites.map((site) => (
+          <DropdownItem
+            key={site.id}
+            onItemClick={() => handleSiteSelect(site.id)}
+            className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+              activeSite?.id === site.id
+                ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+                : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+            }`}
+          >
+            <span className="flex-1">{site.name}</span>
+            {activeSite?.id === site.id && (
+              <svg
+                className="w-4 h-4 text-brand-600 dark:text-brand-400"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fillRule="evenodd"
+                  d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                  clipRule="evenodd"
+                />
+              </svg>
+            )}
+          </DropdownItem>
+        ))}
+      </Dropdown>
+    </div>
+  );
+}

frontend/src/components/common/SiteSelector.tsx

@@ -0,0 +1,320 @@
+/**
+ * Combined Site and Sector Selector Component
+ * Displays both site switcher and sector selector side by side with accent colors
+ */
+import { useState, useEffect, useRef } from 'react';
+import { useNavigate } from 'react-router';
+import { Dropdown } from '../ui/dropdown/Dropdown';
+import { DropdownItem } from '../ui/dropdown/DropdownItem';
+import { fetchSites, Site, setActiveSite as apiSetActiveSite } from '../../services/api';
+import { useToast } from '../ui/toast/ToastContainer';
+import { useSiteStore } from '../../store/siteStore';
+import { useSectorStore } from '../../store/sectorStore';
+import { useAuthStore } from '../../store/authStore';
+import Button from '../ui/button/Button';
+
+interface SiteAndSectorSelectorProps {
+  hideSectorSelector?: boolean;
+}
+
+export default function SiteAndSectorSelector({
+  hideSectorSelector = false,
+}: SiteAndSectorSelectorProps) {
+  const toast = useToast();
+  const navigate = useNavigate();
+  const { activeSite, setActiveSite, loadActiveSite } = useSiteStore();
+  const { activeSector, sectors, setActiveSector, loading: sectorsLoading } = useSectorStore();
+  const { user, refreshUser, isAuthenticated } = useAuthStore();
+  
+  // Site switcher state
+  const [sitesOpen, setSitesOpen] = useState(false);
+  const [sites, setSites] = useState<Site[]>([]);
+  const [sitesLoading, setSitesLoading] = useState(true);
+  const siteButtonRef = useRef<HTMLButtonElement>(null);
+  
+  // Sector selector state
+  const [sectorsOpen, setSectorsOpen] = useState(false);
+  const sectorButtonRef = useRef<HTMLButtonElement>(null);
+  const noSitesAvailable = !sitesLoading && sites.length === 0;
+
+  // Load sites
+  useEffect(() => {
+    if (isAuthenticated && user) {
+      refreshUser().catch((error) => {
+        console.debug('SiteAndSectorSelector: Failed to refresh user (non-critical):', error);
+      });
+    }
+  }, [isAuthenticated]);
+
+  useEffect(() => {
+    loadSites();
+    if (!activeSite) {
+      loadActiveSite();
+    }
+  }, [user?.account?.id]);
+
+  const loadSites = async () => {
+    try {
+      setSitesLoading(true);
+      const response = await fetchSites();
+      const activeSites = (response.results || []).filter(site => site.is_active);
+      setSites(activeSites);
+    } catch (error: any) {
+      console.error('Failed to load sites:', error);
+      toast.error(`Failed to load sites: ${error.message}`);
+    } finally {
+      setSitesLoading(false);
+    }
+  };
+
+  const handleSiteSelect = async (siteId: number) => {
+    try {
+      await apiSetActiveSite(siteId);
+      const selectedSite = sites.find(s => s.id === siteId);
+      if (selectedSite) {
+        setActiveSite(selectedSite);
+        toast.success(`Switched to "${selectedSite.name}"`);
+      }
+      setSitesOpen(false);
+    } catch (error: any) {
+      toast.error(`Failed to switch site: ${error.message}`);
+    }
+  };
+
+  const handleSectorSelect = (sectorId: number | null) => {
+    if (sectorId === null) {
+      setActiveSector(null);
+      setSectorsOpen(false);
+    } else {
+      const sector = sectors.find(s => s.id === sectorId);
+      if (sector) {
+        setActiveSector(sector);
+        setSectorsOpen(false);
+      }
+    }
+  };
+
+  const handleCreateSite = () => navigate('/sites');
+
+  if (sitesLoading && sites.length === 0) {
+    return (
+      <div className="text-sm text-gray-500 dark:text-gray-400">
+        Loading sites...
+      </div>
+    );
+  }
+
+  if (noSitesAvailable) {
+    return (
+      <div className="flex flex-col sm:flex-row sm:items-center gap-2 text-sm text-gray-600 dark:text-gray-300">
+        <span>No active sites yet. Create a site to unlock planner and writer modules.</span>
+        <Button size="sm" variant="primary" onClick={handleCreateSite}>
+          Create Site
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      {/* Site Switcher */}
+      <div className="relative inline-block">
+        <button
+          ref={siteButtonRef}
+          onClick={() => setSitesOpen(!sitesOpen)}
+          className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors dropdown-toggle"
+          aria-label="Switch site"
+          disabled={sitesLoading || sites.length === 0}
+        >
+          <span className="flex items-center gap-2">
+            <svg
+              className="w-4 h-4 text-brand-500 dark:text-brand-400"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+              />
+            </svg>
+            <span className="max-w-[150px] truncate">
+              {sitesLoading ? 'Loading...' : activeSite?.name || 'Select Site'}
+            </span>
+          </span>
+          <svg
+            className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sitesOpen ? 'rotate-180' : ''}`}
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        </button>
+
+        <Dropdown
+          isOpen={sitesOpen}
+          onClose={() => setSitesOpen(false)}
+          anchorRef={siteButtonRef}
+          placement="bottom-left"
+          className="w-64 p-2"
+        >
+          {sites.map((site) => (
+            <DropdownItem
+              key={site.id}
+              onItemClick={() => handleSiteSelect(site.id)}
+              className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+                activeSite?.id === site.id
+                  ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+                  : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+              }`}
+            >
+              <span className="flex-1">{site.name}</span>
+              {activeSite?.id === site.id && (
+                <svg
+                  className="w-4 h-4 text-brand-600 dark:text-brand-400"
+                  fill="currentColor"
+                  viewBox="0 0 20 20"
+                >
+                  <path
+                    fillRule="evenodd"
+                    d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                    clipRule="evenodd"
+                  />
+                </svg>
+              )}
+            </DropdownItem>
+          ))}
+        </Dropdown>
+      </div>
+
+      {/* Sector Selector */}
+      {!hideSectorSelector && (
+        <div className="relative inline-block">
+          {!activeSite ? (
+            <div className="px-3 py-2 text-xs font-medium text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 rounded-lg">
+              Select a site to choose sectors
+            </div>
+          ) : sectorsLoading ? (
+            <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 border border-brand-200 rounded-lg">
+              Loading sectors...
+            </div>
+          ) : sectors.length === 0 ? (
+            <div className="px-3 py-2 text-sm text-gray-500 dark:text-gray-400 border border-dashed border-gray-300 rounded-lg">
+              This site has no sectors yet.
+            </div>
+          ) : (
+            <>
+              <button
+                ref={sectorButtonRef}
+                onClick={() => setSectorsOpen(!sectorsOpen)}
+                className="flex items-center gap-2 px-3 py-2 text-sm font-medium text-gray-700 bg-white border border-brand-200 rounded-lg hover:bg-brand-50 hover:border-brand-300 dark:bg-gray-800 dark:text-gray-300 dark:border-brand-700/50 dark:hover:bg-brand-500/10 dark:hover:border-brand-600/50 transition-colors dropdown-toggle"
+                aria-label="Select sector"
+                disabled={sectorsLoading || sectors.length === 0}
+              >
+                <span className="flex items-center gap-2">
+                  <svg
+                    className="w-4 h-4 text-brand-500 dark:text-brand-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path
+                      strokeLinecap="round"
+                      strokeLinejoin="round"
+                      strokeWidth={2}
+                      d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"
+                    />
+                  </svg>
+                  <span className="max-w-[150px] truncate">
+                    {activeSector?.name || 'All Sectors'}
+                  </span>
+                </span>
+                <svg
+                  className={`w-4 h-4 text-brand-500 dark:text-brand-400 transition-transform ${sectorsOpen ? 'rotate-180' : ''}`}
+                  fill="none"
+                  stroke="currentColor"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M19 9l-7 7-7-7"
+                  />
+                </svg>
+              </button>
+
+              <Dropdown
+                isOpen={sectorsOpen}
+                onClose={() => setSectorsOpen(false)}
+                anchorRef={sectorButtonRef}
+                placement="bottom-right"
+                className="w-64 p-2 overflow-y-auto max-h-[300px]"
+              >
+                {/* "All Sectors" option */}
+                <DropdownItem
+                  onItemClick={() => handleSectorSelect(null)}
+                  className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+                    !activeSector
+                      ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+                      : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+                  }`}
+                >
+                  <span className="flex-1">All Sectors</span>
+                  {!activeSector && (
+                    <svg
+                      className="w-4 h-4 text-brand-600 dark:text-brand-400"
+                      fill="currentColor"
+                      viewBox="0 0 20 20"
+                    >
+                      <path
+                        fillRule="evenodd"
+                        d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                        clipRule="evenodd"
+                      />
+                    </svg>
+                  )}
+                </DropdownItem>
+                {sectors.map((sector) => (
+                  <DropdownItem
+                    key={sector.id}
+                    onItemClick={() => handleSectorSelect(sector.id)}
+                    className={`flex items-center gap-3 px-3 py-2 font-medium rounded-lg text-sm text-left ${
+                      activeSector?.id === sector.id
+                        ? "bg-brand-50 text-brand-700 dark:bg-brand-500/20 dark:text-brand-300"
+                        : "text-gray-700 hover:bg-gray-100 hover:text-gray-700 dark:text-gray-400 dark:hover:bg-white/5 dark:hover:text-gray-300"
+                    }`}
+                  >
+                    <span className="flex-1">{sector.name}</span>
+                    {activeSector?.id === sector.id && (
+                      <svg
+                        className="w-4 h-4 text-brand-600 dark:text-brand-400"
+                        fill="currentColor"
+                        viewBox="0 0 20 20"
+                      >
+                        <path
+                          fillRule="evenodd"
+                          d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+                          clipRule="evenodd"
+                        />
+                      </svg>
+                    )}
+                  </DropdownItem>
+                ))}
+              </Dropdown>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+

frontend/src/pages/Settings/DebugStatus.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, useRef } from "react";
 import { AlertTriangle } from "lucide-react";
 import PageMeta from "../../components/common/PageMeta";
 import ComponentCard from "../../components/common/ComponentCard";
-import SiteAndSectorSelector from "../../components/common/SiteAndSectorSelector";
+import DebugSiteSelector from "../../components/common/DebugSiteSelector";
 import WordPressIntegrationDebug from "./WordPressIntegrationDebug";
 import { API_BASE_URL, fetchAPI } from "../../services/api";
 import { useSiteStore } from "../../store/siteStore";
@@ -694,9 +694,24 @@ export default function DebugStatus() {
           </button>
         </div>
 
-        {/* Site Selector */}
+        {/* Site Selector & Debug Toggle Combined */}
         <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-4">
-          <SiteAndSectorSelector hideSectorSelector={true} />
+          <div className="flex items-center justify-between">
+            <DebugSiteSelector />
+            {activeSite && (
+              <label className="flex items-center space-x-2 cursor-pointer">
+                <input
+                  type="checkbox"
+                  checked={debugEnabled}
+                  onChange={(e) => setDebugEnabled(e.target.checked)}
+                  className="rounded"
+                />
+                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                  {debugEnabled ? 'Debug Enabled' : 'Debug Disabled'}
+                </span>
+              </label>
+            )}
+          </div>
         </div>
 
         {/* No Site Selected Warning */}
@@ -714,31 +729,6 @@ export default function DebugStatus() {
           </div>
         )}
 
-        {/* Debug Toggle */}
-        {activeSite && (
-          <div className="bg-white dark:bg-gray-800 shadow rounded-lg p-4">
-            <div className="flex items-center justify-between">
-              <div>
-                <h3 className="font-medium text-gray-900 dark:text-white">System Health Debug</h3>
-                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                  Enable debug mode to run health checks for {activeSite.name}
-                </p>
-              </div>
-              <label className="flex items-center space-x-2 cursor-pointer">
-                <input
-                  type="checkbox"
-                  checked={debugEnabled}
-                  onChange={(e) => setDebugEnabled(e.target.checked)}
-                  className="rounded"
-                />
-                <span className="text-sm font-medium text-gray-700 dark:text-gray-300">
-                  {debugEnabled ? 'Enabled' : 'Disabled'}
-                </span>
-              </label>
-            </div>
-          </div>
-        )}
-
         {/* Tab Content */}
         {debugEnabled && activeSite ? (
           <>

frontend/src/pages/Settings/MasterStatus.tsx

@@ -0,0 +1,548 @@
+import { useState, useEffect, useCallback } from 'react';
+import { 
+  Activity, 
+  Zap, 
+  Database, 
+  Server, 
+  Workflow,
+  Globe,
+  CheckCircle,
+  AlertTriangle,
+  XCircle,
+  RefreshCw,
+  TrendingUp,
+  Clock,
+  Cpu,
+  HardDrive,
+  MemoryStick
+} from 'lucide-react';
+import PageMeta from '../../components/common/PageMeta';
+import DebugSiteSelector from '../../components/common/DebugSiteSelector';
+import { fetchAPI } from '../../services/api';
+import { useSiteStore } from '../../store/siteStore';
+
+// Types
+interface SystemMetrics {
+  cpu: { usage_percent: number; cores: number; status: string };
+  memory: { total_gb: number; used_gb: number; usage_percent: number; status: string };
+  disk: { total_gb: number; used_gb: number; usage_percent: number; status: string };
+}
+
+interface ServiceHealth {
+  database: { status: string; connected: boolean };
+  redis: { status: string; connected: boolean };
+  celery: { status: string; worker_count: number };
+}
+
+interface ApiGroupHealth {
+  name: string;
+  total: number;
+  healthy: number;
+  warning: number;
+  error: number;
+  percentage: number;
+  status: 'healthy' | 'warning' | 'error';
+}
+
+interface WorkflowHealth {
+  name: string;
+  steps: { name: string; status: 'healthy' | 'warning' | 'error'; message?: string }[];
+  overall: 'healthy' | 'warning' | 'error';
+}
+
+interface IntegrationHealth {
+  platform: string;
+  connected: boolean;
+  last_sync: string | null;
+  sync_enabled: boolean;
+  plugin_active: boolean;
+  status: 'healthy' | 'warning' | 'error';
+}
+
+export default function MasterStatus() {
+  const { activeSite } = useSiteStore();
+  const [loading, setLoading] = useState(true);
+  const [lastUpdate, setLastUpdate] = useState<Date>(new Date());
+  
+  // System metrics
+  const [systemMetrics, setSystemMetrics] = useState<SystemMetrics | null>(null);
+  const [serviceHealth, setServiceHealth] = useState<ServiceHealth | null>(null);
+  
+  // API health
+  const [apiHealth, setApiHealth] = useState<ApiGroupHealth[]>([]);
+  
+  // Workflow health (keywords → clusters → ideas → tasks → content → publish)
+  const [workflowHealth, setWorkflowHealth] = useState<WorkflowHealth[]>([]);
+  
+  // Integration health
+  const [integrationHealth, setIntegrationHealth] = useState<IntegrationHealth | null>(null);
+
+  // Fetch system metrics
+  const fetchSystemMetrics = useCallback(async () => {
+    try {
+      const data = await fetchAPI('/v1/system/status/');
+      setSystemMetrics(data.system);
+      setServiceHealth({
+        database: data.database,
+        redis: data.redis,
+        celery: data.celery,
+      });
+    } catch (error) {
+      console.error('Failed to fetch system metrics:', error);
+    }
+  }, []);
+
+  // Fetch API health (aggregated from API monitor)
+  const fetchApiHealth = useCallback(async () => {
+    const groups = [
+      { name: 'Auth & User', endpoints: ['/v1/auth/me/', '/v1/auth/sites/', '/v1/auth/accounts/'] },
+      { name: 'Planner', endpoints: ['/v1/planner/keywords/', '/v1/planner/clusters/', '/v1/planner/ideas/'] },
+      { name: 'Writer', endpoints: ['/v1/writer/tasks/', '/v1/writer/content/', '/v1/writer/images/'] },
+      { name: 'Integration', endpoints: ['/v1/integration/integrations/'] },
+    ];
+
+    const healthChecks: ApiGroupHealth[] = [];
+
+    for (const group of groups) {
+      let healthy = 0;
+      let warning = 0;
+      let error = 0;
+
+      for (const endpoint of group.endpoints) {
+        try {
+          const startTime = Date.now();
+          await fetchAPI(endpoint + (activeSite ? `?site=${activeSite.id}` : ''));
+          const responseTime = Date.now() - startTime;
+          
+          if (responseTime < 1000) healthy++;
+          else if (responseTime < 3000) warning++;
+          else error++;
+        } catch (e) {
+          error++;
+        }
+      }
+
+      const total = group.endpoints.length;
+      const percentage = Math.round((healthy / total) * 100);
+      
+      healthChecks.push({
+        name: group.name,
+        total,
+        healthy,
+        warning,
+        error,
+        percentage,
+        status: error > 0 ? 'error' : warning > 0 ? 'warning' : 'healthy',
+      });
+    }
+
+    setApiHealth(healthChecks);
+  }, [activeSite]);
+
+  // Check workflow health (end-to-end pipeline)
+  const checkWorkflowHealth = useCallback(async () => {
+    if (!activeSite) {
+      setWorkflowHealth([]);
+      return;
+    }
+
+    const workflows: WorkflowHealth[] = [];
+
+    // Content Generation Workflow
+    try {
+      const steps = [];
+      
+      // Step 1: Keywords exist
+      const keywords = await fetchAPI(`/v1/planner/keywords/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Keywords Imported',
+        status: keywords.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${keywords.count} keywords`,
+      });
+
+      // Step 2: Clusters exist
+      const clusters = await fetchAPI(`/v1/planner/clusters/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Content Clusters',
+        status: clusters.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${clusters.count} clusters`,
+      });
+
+      // Step 3: Ideas generated
+      const ideas = await fetchAPI(`/v1/planner/ideas/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Content Ideas',
+        status: ideas.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${ideas.count} ideas`,
+      });
+
+      // Step 4: Tasks created
+      const tasks = await fetchAPI(`/v1/writer/tasks/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Writer Tasks',
+        status: tasks.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${tasks.count} tasks`,
+      });
+
+      // Step 5: Content generated
+      const content = await fetchAPI(`/v1/writer/content/?site=${activeSite.id}`);
+      steps.push({
+        name: 'Content Generated',
+        status: content.count > 0 ? 'healthy' : 'warning' as const,
+        message: `${content.count} articles`,
+      });
+
+      const hasErrors = steps.some(s => s.status === 'error');
+      const hasWarnings = steps.some(s => s.status === 'warning');
+
+      workflows.push({
+        name: 'Content Generation Pipeline',
+        steps,
+        overall: hasErrors ? 'error' : hasWarnings ? 'warning' : 'healthy',
+      });
+    } catch (error) {
+      workflows.push({
+        name: 'Content Generation Pipeline',
+        steps: [{ name: 'Pipeline Check', status: 'error', message: 'Failed to check workflow' }],
+        overall: 'error',
+      });
+    }
+
+    setWorkflowHealth(workflows);
+  }, [activeSite]);
+
+  // Check integration health
+  const checkIntegrationHealth = useCallback(async () => {
+    if (!activeSite) {
+      setIntegrationHealth(null);
+      return;
+    }
+
+    try {
+      const integrations = await fetchAPI(`/v1/integration/integrations/?site_id=${activeSite.id}`);
+      
+      if (integrations.results && integrations.results.length > 0) {
+        const wpIntegration = integrations.results.find((i: any) => i.platform === 'wordpress');
+        
+        if (wpIntegration) {
+          const health = await fetchAPI(`/v1/integration/integrations/${wpIntegration.id}/debug-status/`);
+          
+          setIntegrationHealth({
+            platform: 'WordPress',
+            connected: wpIntegration.is_active,
+            last_sync: wpIntegration.last_sync_at,
+            sync_enabled: wpIntegration.sync_enabled,
+            plugin_active: health.health?.plugin_active || false,
+            status: wpIntegration.is_active && health.health?.plugin_active ? 'healthy' : 'warning',
+          });
+        } else {
+          setIntegrationHealth(null);
+        }
+      } else {
+        setIntegrationHealth(null);
+      }
+    } catch (error) {
+      console.error('Failed to check integration:', error);
+      setIntegrationHealth(null);
+    }
+  }, [activeSite]);
+
+  // Refresh all data
+  const refreshAll = useCallback(async () => {
+    setLoading(true);
+    await Promise.all([
+      fetchSystemMetrics(),
+      fetchApiHealth(),
+      checkWorkflowHealth(),
+      checkIntegrationHealth(),
+    ]);
+    setLastUpdate(new Date());
+    setLoading(false);
+  }, [fetchSystemMetrics, fetchApiHealth, checkWorkflowHealth, checkIntegrationHealth]);
+
+  // Initial load and auto-refresh
+  useEffect(() => {
+    refreshAll();
+    const interval = setInterval(refreshAll, 30000); // 30 seconds
+    return () => clearInterval(interval);
+  }, [refreshAll]);
+
+  // Status badge component
+  const StatusBadge = ({ status }: { status: string }) => {
+    const colors = {
+      healthy: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400',
+      warning: 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400',
+      error: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400',
+    };
+    
+    const icons = {
+      healthy: CheckCircle,
+      warning: AlertTriangle,
+      error: XCircle,
+    };
+
+    const Icon = icons[status as keyof typeof icons] || AlertTriangle;
+
+    return (
+      <div className={`inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-xs font-medium ${colors[status as keyof typeof colors]}`}>
+        <Icon className="h-3 w-3" />
+        {status.charAt(0).toUpperCase() + status.slice(1)}
+      </div>
+    );
+  };
+
+  // Progress bar component
+  const ProgressBar = ({ value, status }: { value: number; status: string }) => {
+    const colors = {
+      healthy: 'bg-green-500',
+      warning: 'bg-yellow-500',
+      error: 'bg-red-500',
+    };
+
+    return (
+      <div className="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
+        <div 
+          className={`h-2 rounded-full transition-all ${colors[status as keyof typeof colors]}`}
+          style={{ width: `${value}%` }}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <>
+      <PageMeta title="System Status - IGNY8" description="Master status dashboard" />
+      
+      <div className="space-y-6">
+        {/* Header */}
+        <div className="flex justify-between items-center">
+          <div>
+            <h1 className="text-2xl font-semibold text-gray-800 dark:text-white/90">System Status</h1>
+            <p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
+              Master dashboard showing all system health metrics
+            </p>
+          </div>
+          <div className="flex items-center gap-4">
+            <div className="text-sm text-gray-500 dark:text-gray-400">
+              <Clock className="h-4 w-4 inline mr-1" />
+              Last updated: {lastUpdate.toLocaleTimeString()}
+            </div>
+            <button
+              onClick={refreshAll}
+              disabled={loading}
+              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
+            >
+              <RefreshCw className={`h-4 w-4 ${loading ? 'animate-spin' : ''}`} />
+              Refresh
+            </button>
+          </div>
+        </div>
+
+        {/* System Resources & Services Health */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <Server className="h-5 w-5 text-blue-600" />
+            System Resources
+          </h3>
+          <div className="flex gap-6">
+            {/* Compact System Metrics (70% width) */}
+            <div className="flex-1 grid grid-cols-3 gap-4">
+              {/* CPU */}
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-1">
+                    <Cpu className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">CPU</span>
+                  </div>
+                  <StatusBadge status={systemMetrics?.cpu.status || 'warning'} />
+                </div>
+                <div className="text-lg font-bold text-gray-900 dark:text-white">
+                  {systemMetrics?.cpu.usage_percent.toFixed(1)}%
+                </div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">{systemMetrics?.cpu.cores} cores</p>
+                <ProgressBar value={systemMetrics?.cpu.usage_percent || 0} status={systemMetrics?.cpu.status || 'warning'} />
+              </div>
+
+              {/* Memory */}
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-1">
+                    <MemoryStick className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Memory</span>
+                  </div>
+                  <StatusBadge status={systemMetrics?.memory.status || 'warning'} />
+                </div>
+                <div className="text-lg font-bold text-gray-900 dark:text-white">
+                  {systemMetrics?.memory.usage_percent.toFixed(1)}%
+                </div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  {systemMetrics?.memory.used_gb.toFixed(1)}/{systemMetrics?.memory.total_gb.toFixed(1)} GB
+                </p>
+                <ProgressBar value={systemMetrics?.memory.usage_percent || 0} status={systemMetrics?.memory.status || 'warning'} />
+              </div>
+
+              {/* Disk */}
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
+                <div className="flex items-center justify-between mb-2">
+                  <div className="flex items-center gap-1">
+                    <HardDrive className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+                    <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Disk</span>
+                  </div>
+                  <StatusBadge status={systemMetrics?.disk.status || 'warning'} />
+                </div>
+                <div className="text-lg font-bold text-gray-900 dark:text-white">
+                  {systemMetrics?.disk.usage_percent.toFixed(1)}%
+                </div>
+                <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+                  {systemMetrics?.disk.used_gb.toFixed(1)}/{systemMetrics?.disk.total_gb.toFixed(1)} GB
+                </p>
+                <ProgressBar value={systemMetrics?.disk.usage_percent || 0} status={systemMetrics?.disk.status || 'warning'} />
+              </div>
+            </div>
+
+            {/* Services Stack (30% width) */}
+            <div className="w-1/3 space-y-2">
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Database className="h-4 w-4 text-blue-600" />
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">PostgreSQL</span>
+                </div>
+                <StatusBadge status={serviceHealth?.database.status || 'warning'} />
+              </div>
+
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Zap className="h-4 w-4 text-red-600" />
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Redis</span>
+                </div>
+                <StatusBadge status={serviceHealth?.redis.status || 'warning'} />
+              </div>
+
+              <div className="bg-gray-50 dark:bg-gray-700/30 rounded p-3 flex items-center justify-between">
+                <div className="flex items-center gap-2">
+                  <Activity className="h-4 w-4 text-green-600" />
+                  <span className="text-xs font-medium text-gray-700 dark:text-gray-300">Celery</span>
+                </div>
+                <div className="flex items-center gap-1">
+                  <span className="text-xs text-gray-500">{serviceHealth?.celery.worker_count || 0}w</span>
+                  <StatusBadge status={serviceHealth?.celery.status || 'warning'} />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Site Selector */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-4 border border-gray-200 dark:border-gray-700">
+          <DebugSiteSelector />
+        </div>
+
+        {/* API Health by Module */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <Zap className="h-5 w-5 text-yellow-600" />
+            API Module Health
+          </h3>
+          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+            {apiHealth.map((group) => (
+              <div key={group.name} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <div className="flex items-center justify-between mb-3">
+                  <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{group.name}</span>
+                  <StatusBadge status={group.status} />
+                </div>
+                <div className="text-3xl font-bold text-gray-900 dark:text-white mb-2">
+                  {group.percentage}%
+                </div>
+                <div className="text-xs text-gray-500 dark:text-gray-400 mb-2">
+                  {group.healthy}/{group.total} healthy
+                </div>
+                <ProgressBar value={group.percentage} status={group.status} />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        {/* Content Workflow Health */}
+        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+          <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+            <Workflow className="h-5 w-5 text-purple-600" />
+            Content Pipeline Status
+          </h3>
+          {workflowHealth.length === 0 ? (
+            <p className="text-sm text-gray-500 dark:text-gray-400">Select a site to view workflow health</p>
+          ) : (
+            <div className="space-y-4">
+              {workflowHealth.map((workflow) => (
+                <div key={workflow.name} className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                  <div className="flex items-center justify-between mb-4">
+                    <h4 className="font-medium text-gray-900 dark:text-white">{workflow.name}</h4>
+                    <StatusBadge status={workflow.overall} />
+                  </div>
+                  <div className="flex items-center gap-2">
+                    {workflow.steps.map((step, idx) => (
+                      <div key={idx} className="flex-1">
+                        <div className="flex items-center justify-between mb-1">
+                          <span className="text-xs text-gray-600 dark:text-gray-400">{step.name}</span>
+                          {step.status === 'healthy' ? (
+                            <CheckCircle className="h-3 w-3 text-green-600" />
+                          ) : step.status === 'warning' ? (
+                            <AlertTriangle className="h-3 w-3 text-yellow-600" />
+                          ) : (
+                            <XCircle className="h-3 w-3 text-red-600" />
+                          )}
+                        </div>
+                        {step.message && (
+                          <p className="text-xs text-gray-500 dark:text-gray-400">{step.message}</p>
+                        )}
+                        {idx < workflow.steps.length - 1 && (
+                          <div className="mt-2 h-1 bg-gray-200 dark:bg-gray-700 rounded">
+                            <div className={`h-1 rounded ${
+                              step.status === 'healthy' ? 'bg-green-500' : 
+                              step.status === 'warning' ? 'bg-yellow-500' : 'bg-red-500'
+                            }`} style={{ width: '100%' }} />
+                          </div>
+                        )}
+                      </div>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* WordPress Integration */}
+        {integrationHealth && (
+          <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+              <Globe className="h-5 w-5 text-blue-600" />
+              WordPress Integration
+            </h3>
+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Connection</span>
+                <StatusBadge status={integrationHealth.connected ? 'healthy' : 'error'} />
+              </div>
+              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Plugin Status</span>
+                <StatusBadge status={integrationHealth.plugin_active ? 'healthy' : 'warning'} />
+              </div>
+              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Sync Enabled</span>
+                <StatusBadge status={integrationHealth.sync_enabled ? 'healthy' : 'warning'} />
+              </div>
+              <div className="border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+                <span className="text-sm text-gray-600 dark:text-gray-400 block mb-2">Last Sync</span>
+                <span className="text-sm text-gray-900 dark:text-white">
+                  {integrationHealth.last_sync 
+                    ? new Date(integrationHealth.last_sync).toLocaleString() 
+                    : 'Never'}
+                </span>
+              </div>
+            </div>
+          </div>
+        )}
+      </div>
+    </>
+  );
+}