process_dashboard.jsx

/**
 * AI-Driven Process Recommendation Dashboard — V1 (Rule-Based Engine)
 *
 * Single-file React component. No build step — runs via Babel standalone.
 * All process data is fetched live from the Flask backend.
 *
 * V2 Upgrade Notes:
 *   - Engine status badge auto-switches based on /api/engine/status
 *   - "Train V2 Model" button is stubbed and ready
 *   - Confidence display works for both rule engine and ML model
 *   - API base URL is centralized in the API constant
 */

const { useState, useEffect, useRef, useCallback, useMemo } = React;

// ─── API Base URL (single source of truth) ───
// Use absolute URL if running as standalone artifact, 
// relative URL when served from Flask
const API = (typeof window !== "undefined" && 
             window.location.port === "5000") 
             ? "/api" 
             : "http://localhost:5000/api";

// ─── Theme tokens ───
const T = {
  bg0: "#06060b",
  bg1: "#0c0c14",
  bg2: "#12121e",
  bg3: "#1a1a2e",
  bg4: "#22223a",
  border: "#1e1e36",
  borderLight: "#2a2a4a",
  text: "#e2e8f0",
  textMuted: "#94a3b8",
  textDim: "#64748b",
  accent: "#818cf8",
  accentDark: "#6366f1",
  green: "#34d399",
  greenDark: "#059669",
  greenBg: "rgba(52, 211, 153, 0.10)",
  amber: "#fbbf24",
  amberDark: "#d97706",
  amberBg: "rgba(251, 191, 36, 0.10)",
  red: "#f87171",
  redDark: "#dc2626",
  redBg: "rgba(248, 113, 113, 0.10)",
  blue: "#60a5fa",
  blueBg: "rgba(96, 165, 250, 0.10)",
  purple: "#a78bfa",
  purpleBg: "rgba(167, 139, 250, 0.10)",
  radius: "10px",
  radiusSm: "6px",
  radiusXs: "4px",
  shadow: "0 4px 24px rgba(0,0,0,0.4)",
  transition: "all 0.2s ease",
  font: "'Inter', -apple-system, BlinkMacSystemFont, sans-serif",
};

// ─── Style injection for animations (cannot do with inline) ───
const INJECTED_CSS = `
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
@keyframes slideIn { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(60px); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes glow {
  0%, 100% { box-shadow: 0 0 8px rgba(129, 140, 248, 0.3); }
  50% { box-shadow: 0 0 20px rgba(129, 140, 248, 0.5); }
}
.skeleton-line {
  background: linear-gradient(90deg, #12121e 25%, #1a1a2e 50%, #12121e 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  height: 14px;
  margin: 6px 0;
}
`;

// ─── Helpers ───
const catColors = {
  system: { bg: "rgba(129, 140, 248, 0.12)", color: "#818cf8", border: "rgba(129, 140, 248, 0.25)" },
  browser: { bg: "rgba(96, 165, 250, 0.12)", color: "#60a5fa", border: "rgba(96, 165, 250, 0.25)" },
  media: { bg: "rgba(251, 191, 36, 0.12)", color: "#fbbf24", border: "rgba(251, 191, 36, 0.25)" },
  dev_tool: { bg: "rgba(52, 211, 153, 0.12)", color: "#34d399", border: "rgba(52, 211, 153, 0.25)" },
  other: { bg: "rgba(148, 163, 184, 0.08)", color: "#94a3b8", border: "rgba(148, 163, 184, 0.15)" },
};

const recColors = {
  prioritize: { bg: "rgba(52, 211, 153, 0.12)", color: "#34d399", border: "rgba(52, 211, 153, 0.3)" },
  monitor: { bg: "rgba(148, 163, 184, 0.08)", color: "#94a3b8", border: "rgba(148, 163, 184, 0.2)" },
  pause: { bg: "rgba(251, 191, 36, 0.12)", color: "#fbbf24", border: "rgba(251, 191, 36, 0.3)" },
  terminate: { bg: "rgba(248, 113, 113, 0.12)", color: "#f87171", border: "rgba(248, 113, 113, 0.3)" },
};

const barColor = (val) => val > 50 ? T.red : val > 20 ? T.amber : T.green;

function formatCat(cat) {
  return cat === "dev_tool" ? "Dev Tool" : cat.charAt(0).toUpperCase() + cat.slice(1);
}

function formatMemoryBytes(bytes) {
  if (!bytes || bytes === 0) return "0 B";
  if (bytes < 1024) return `${bytes} B`;
  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
  return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
}

function getMemoryFreeMessage(proc) {
  if (!proc.memory_bytes || proc.memory_bytes === 0) return null;
  return `Frees ${formatMemoryBytes(proc.memory_bytes)}`;
}

// V2 addition
const REC_CONFIG = {
  prioritize: { label: "Prioritize", color: "rgba(52, 211, 153, 0.12)", text: "#34d399" },
  monitor: { label: "Monitor", color: "rgba(148, 163, 184, 0.08)", text: "#94a3b8" },
  pause: { label: "Pause", color: "rgba(251, 191, 36, 0.12)", text: "#fbbf24" },
  terminate: { label: "Terminate", color: "rgba(248, 113, 113, 0.12)", text: "#f87171" },
};

// V2 addition
function RecommendationBadge({ recommendation, confidence }) {
  const cfg = REC_CONFIG[recommendation] || REC_CONFIG.monitor;
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 3 }}>
      <span style={{ 
        display: "inline-flex", alignItems: "center", gap: 4,
        padding: "3px 10px", borderRadius: 12,
        fontSize: 11, fontWeight: 600, textTransform: "capitalize",
        background: cfg.color, color: cfg.text, border: `1px solid ${cfg.text}44` 
      }}>
        {cfg.label}
      </span>
      <div style={{ display: "flex", alignItems: "center", gap: 4 }}>
        <div style={{ width: 48, height: 3, background: "rgba(255,255,255,0.05)", borderRadius: 2 }}>
          <div style={{ 
            width: `${(confidence || 0) * 100}%`, height: "100%",
            background: cfg.text, borderRadius: 2 
          }} />
        </div>
        <span style={{ fontSize: 10, color: "rgba(255,255,255,0.4)" }}>
          {((confidence || 0) * 100).toFixed(0)}%
        </span>
      </div>
    </div>
  );
}

// V2 addition
function ModelInsightsPanel({ insights }) {
  const [open, setOpen] = useState(false);
  if (!insights?.ok) return null;
  
  const importances = insights.feature_importances || {};
  const maxImp = Math.max(...Object.values(importances), 0.0001);
  
  return (
    <div style={{ 
      border: "0.5px solid rgba(255,255,255,0.1)", 
      borderRadius: "10px", marginBottom: 16,
      background: "rgba(255,255,255,0.02)",
      overflow: "hidden"
    }}>
      <button onClick={() => setOpen(o => !o)} style={{ 
        width: "100%", textAlign: "left", padding: "12px 16px",
        fontSize: 13, background: "transparent", border: "none",
        color: "#fff", cursor: "pointer", display: "flex", justifyContent: "space-between"
      }}>
        <span>
          🤖 Model Insights —{" "}
          {insights.cv_accuracy != null
            ? `CV Accuracy: ${(insights.cv_accuracy * 100).toFixed(1)}% ± ${(insights.cv_std * 100).toFixed(1)}%`
            : `Trained on ${insights.sample_count} samples (need 10+ for CV score)`}
        </span>
        <span>{open ? "▲" : "▼"}</span>
      </button>
      {open && (
        <div style={{ padding: "0 16px 16px", animation: "fadeIn 0.3s ease" }}>
          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", marginBottom: 12 }}>
            Feature importance — what drives the model's decisions
          </div>
          {Object.entries(importances)
            .sort((a, b) => b[1] - a[1])
            .map(([name, imp]) => (
              <div key={name} style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 8 }}>
                <span style={{ fontSize: 11, width: 120, color: "rgba(255,255,255,0.7)" }}>
                  {name}
                </span>
                <div style={{ flex: 1, height: 6, background: "rgba(255,255,255,0.05)", borderRadius: 3 }}>
                  <div style={{ 
                    width: `${(imp / maxImp) * 100}%`, height: "100%",
                    background: "#818cf8", borderRadius: 3 
                  }} />
                </div>
                <span style={{ fontSize: 11, color: "rgba(255,255,255,0.5)", minWidth: 36, textAlign: "right" }}>
                  {(imp * 100).toFixed(1)}%
                </span>
              </div>
            ))}
          <div style={{ fontSize: 11, color: "rgba(255,255,255,0.4)", marginTop: 12, paddingTop: 12, borderTop: "1px solid rgba(255,255,255,0.05)" }}>
            Trained on {insights.sample_count} samples · {insights.trained_at?.slice(0, 10)} {insights.trained_at?.slice(11, 16)}
          </div>
        </div>
      )}
    </div>
  );
}


// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
// Main Dashboard Component
// ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

const ProcessDashboard = () => {
  // ─── State ───
  const [processes, setProcesses] = useState([]);
  const [systemStats, setSystemStats] = useState(null);
  const [engineStatus, setEngineStatus] = useState(null);
  const [modelInsights, setModelInsights] = useState(null); // V2 addition
  const [training, setTraining] = useState(false); // V2 addition
  const [loading, setLoading] = useState(true);
  const [offline, setOffline] = useState(false);
  const [search, setSearch] = useState("");
  const [sortBy, setSortBy] = useState("composite");
  const [filterBy, setFilterBy] = useState("all");
  const [toasts, setToasts] = useState([]);
  const [confirmKill, setConfirmKill] = useState(null);
  const toastIdRef = useRef(0);
  const pollRef = useRef(null);

  // Inject CSS animations once
  useEffect(() => {
    const style = document.createElement("style");
    style.textContent = INJECTED_CSS;
    document.head.appendChild(style);
    return () => document.head.removeChild(style);
  }, []);

  // ─── Toast system ───
  const addToast = useCallback((msg, type = "success") => {
    const id = ++toastIdRef.current;
    setToasts((prev) => [...prev, { id, msg, type, leaving: false }]);
    setTimeout(() => {
      setToasts((prev) => prev.map((t) => (t.id === id ? { ...t, leaving: true } : t)));
      setTimeout(() => {
        setToasts((prev) => prev.filter((t) => t.id !== id));
      }, 300);
    }, 3500);
  }, []);

  // ─── Data fetching ───
  const fetchAll = useCallback(async () => {
    try {
      const [procRes, statsRes] = await Promise.all([
        fetch(`${API}/processes`),
        fetch(`${API}/system/stats`),
      ]);
      if (!procRes.ok || !statsRes.ok) throw new Error("Bad response");
      const procData = await procRes.json();
      const statsData = await statsRes.json();
      setProcesses(procData);
      setSystemStats(statsData);
      setOffline(false);
      if (loading) setLoading(false);
    } catch {
      setOffline(true);
      if (loading) setLoading(false);
    }
  }, [loading]);

  // V2 addition
  const fetchEngineStatus = async () => {
    try {
      const res = await fetch(`${API}/engine/status`);
      const data = await res.json();
      setEngineStatus(data);
    } catch (e) {
      console.error("Failed to fetch engine status", e);
    }
  };

  // V2 addition
  const fetchModelInsights = async () => {
    try {
      const res = await fetch(`${API}/model/insights`);
      const data = await res.json();
      setModelInsights(data);
    } catch (e) {
      console.error("Failed to fetch model insights", e);
    }
  };

  // Poll every 3 seconds
  useEffect(() => {
    fetchAll();
    fetchEngineStatus();
    fetchModelInsights();
    const poll = setInterval(() => {
      fetchAll();
      fetchEngineStatus();
    }, 3000);
    return () => clearInterval(poll);
  }, [fetchAll]);

  // V2 addition
  const handleTrain = async () => {
    setTraining(true);
    try {
      const res = await fetch(`${API}/train`, { method: "POST" });
      const data = await res.json();
      addToast(data.message, data.ok ? "success" : "error");
      if (data.ok) {
        await fetchEngineStatus();
        await fetchModelInsights();
      }
    } catch (e) {
      addToast(`Training Error: ${e.message || "Connection failed"}`, "error");
      console.error("Training Error:", e);
    } finally {
      setTraining(false);
    }
  };

  // ─── Actions ───
  const doAction = useCallback(
    async (pid, action, name) => {
      try {
        const res = await fetch(`${API}/action`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ pid, action }),
        });
        const data = await res.json();
        addToast(data.message, data.ok ? "success" : "error");
        if (data.ok) fetchAll();
      } catch {
        addToast(`Failed to ${action} process ${name}`, "error");
      }
    },
    [addToast, fetchAll]
  );

  const doLabel = useCallback(
    async (proc, label) => {
      try {
        const res = await fetch(`${API}/label`, {
          method: "POST",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({
            pid: proc.pid,
            name: proc.name,
            label,
            cpu: proc.cpu_percent,
            memory: proc.memory_percent,
            category: proc.category,
            threads: proc.num_threads,
          }),
        });
        const data = await res.json();
        if (data.ok) {
          addToast(`Labeled "${proc.name}" as ${label}`, "success");
          fetchAll();
        }
      } catch {
        addToast(`Failed to label ${proc.name}`, "error");
      }
    },
    [addToast, fetchAll]
  );

  // ─── Filtering & Sorting ───
  const filtered = useMemo(() => {
    let list = [...processes];

    // Search
    if (search) {
      const q = search.toLowerCase();
      list = list.filter(
        (p) => p.name.toLowerCase().includes(q) || String(p.pid).includes(q)
      );
    }

    // Filter
    switch (filterBy) {
      case "high":
        list = list.filter((p) => p.cpu_percent > 20 || p.memory_percent > 8);
        break;
      case "critical":
        list = list.filter((p) => p.user_label === "critical");
        break;
      case "expendable":
        list = list.filter((p) => p.user_label === "expendable");
        break;
      case "ai_pause":
        list = list.filter((p) => p.recommendation === "pause");
        break;
      case "ai_terminate":
        list = list.filter((p) => p.recommendation === "terminate");
        break;
      case "labeled":
        list = list.filter((p) => p.user_label);
        break;
    }

    // Sort
    switch (sortBy) {
      case "cpu":
        list.sort((a, b) => b.cpu_percent - a.cpu_percent);
        break;
      case "memory":
        list.sort((a, b) => b.memory_percent - a.memory_percent);
        break;
      case "name":
        list.sort((a, b) => a.name.localeCompare(b.name));
        break;
      case "recommendation":
        const order = { terminate: 0, pause: 1, monitor: 2, prioritize: 3 };
        list.sort((a, b) => (order[a.recommendation] ?? 4) - (order[b.recommendation] ?? 4));
        break;
      default: // composite — already sorted by backend
        break;
    }

    return list;
  }, [processes, search, filterBy, sortBy]);

  // ─── Recommendation counts ───
  const counts = useMemo(() => {
    const c = { prioritize: 0, monitor: 0, pause: 0, terminate: 0 };
    processes.forEach((p) => {
      if (c[p.recommendation] !== undefined) c[p.recommendation]++;
    });
    return c;
  }, [processes]);

  // ─── Styles ───
  const s = {
    container: {
      maxWidth: 1400,
      margin: "0 auto",
      padding: "20px 24px 40px",
      fontFamily: T.font,
      minHeight: "100vh",
    },
    glass: {
      background: T.bg2,
      border: `1px solid ${T.border}`,
      borderRadius: T.radius,
      backdropFilter: "blur(12px)",
    },
    card: {
      background: `linear-gradient(135deg, ${T.bg2} 0%, ${T.bg1} 100%)`,
      border: `1px solid ${T.border}`,
      borderRadius: T.radius,
      padding: "18px 20px",
      transition: T.transition,
    },
  };

  // ━━━ RENDER ━━━

  // Offline Banner
  if (offline && processes.length === 0) {
    return (
      <div style={s.container}>
        <div style={{ ...s.glass, padding: 40, textAlign: "center", marginTop: 60 }}>
          <div style={{ fontSize: 48, marginBottom: 16 }}>⚡</div>
          <h1 style={{ fontSize: 24, fontWeight: 700, color: T.text, marginBottom: 8 }}>
            Backend Offline
          </h1>
          <p style={{ color: T.textMuted, marginBottom: 24, lineHeight: 1.6 }}>
            The process monitoring backend is not running. Start it with:
          </p>
          <div
            style={{
              background: T.bg0,
              border: `1px solid ${T.border}`,
              borderRadius: T.radiusSm,
              padding: "16px 24px",
              display: "inline-block",
              textAlign: "left",
              fontFamily: "monospace",
              fontSize: 14,
              lineHeight: 2,
              color: T.green,
            }}
          >
            <div style={{ color: T.textDim }}>## Install dependencies</div>
            <div>pip install flask flask-cors psutil</div>
            <br />
            <div style={{ color: T.textDim }}>## Start the server</div>
            <div>python process_backend.py</div>
          </div>
          <p style={{ color: T.textDim, marginTop: 20, fontSize: 13 }}>
            Retrying connection every 3 seconds…
            <span style={{ display: "inline-block", animation: "spin 1s linear infinite", marginLeft: 6 }}>⟳</span>
          </p>
        </div>
      </div>
    );
  }

  // Loading skeleton
  if (loading) {
    return (
      <div style={s.container}>
        <div style={{ display: "flex", gap: 16, marginBottom: 24 }}>
          {[1, 2, 3, 4].map((i) => (
            <div key={i} style={{ ...s.card, flex: 1 }}>
              <div className="skeleton-line" style={{ width: "50%", height: 12 }} />
              <div className="skeleton-line" style={{ width: "30%", height: 24, marginTop: 10 }} />
            </div>
          ))}
        </div>
        {[1, 2, 3, 4, 5, 6].map((i) => (
          <div key={i} style={{ ...s.glass, padding: 16, marginBottom: 8 }}>
            <div className="skeleton-line" style={{ width: `${30 + i * 8}%` }} />
          </div>
        ))}
      </div>
    );
  }

  return (
    <div style={s.container}>
      {/* ─── Toast notifications ─── */}
      <div style={{ position: "fixed", top: 20, right: 20, zIndex: 9999, display: "flex", flexDirection: "column", gap: 8 }}>
        {toasts.map((t) => (
          <div
            key={t.id}
            style={{
              padding: "12px 20px",
              borderRadius: T.radiusSm,
              background: t.type === "success" ? T.greenDark : T.redDark,
              color: "#fff",
              fontSize: 13,
              fontWeight: 500,
              boxShadow: T.shadow,
              animation: t.leaving ? "slideOut 0.3s ease forwards" : "slideIn 0.3s ease",
              maxWidth: 360,
            }}
          >
            {t.type === "success" ? "✓ " : "✕ "}{t.msg}
          </div>
        ))}
      </div>

      {/* ─── Kill confirmation dialog ─── */}
      {confirmKill && (
        <div
          style={{
            position: "fixed", inset: 0, background: "rgba(0,0,0,0.6)",
            display: "flex", alignItems: "center", justifyContent: "center",
            zIndex: 9998, backdropFilter: "blur(4px)",
          }}
          onClick={() => setConfirmKill(null)}
        >
          <div
            style={{
              ...s.glass, padding: "28px 32px", maxWidth: 420, textAlign: "center",
              animation: "fadeIn 0.2s ease",
            }}
            onClick={(e) => e.stopPropagation()}
          >
            <div style={{ fontSize: 36, marginBottom: 12 }}>⚠️</div>
            <h3 style={{ fontSize: 18, fontWeight: 600, marginBottom: 8, color: T.text }}>
              Terminate Process?
            </h3>
            <p style={{ color: T.textMuted, fontSize: 14, marginBottom: 20, lineHeight: 1.5 }}>
              Are you sure you want to kill{" "}
              <strong style={{ color: T.red }}>{confirmKill.name}</strong>{" "}
              (PID: {confirmKill.pid})?
              This action cannot be undone.
              {confirmKill.memory_bytes > 0 && (
                <div style={{ 
                  marginTop: 12, padding: "8px 14px",
                  background: "rgba(52, 211, 153, 0.08)",
                  border: "1px solid rgba(52, 211, 153, 0.2)",
                  borderRadius: T.radiusXs, fontSize: 13,
                  color: T.green, fontWeight: 500
                }}>
                  ✓ Killing this process will free ~{formatMemoryBytes(confirmKill.memory_bytes)} of RAM
                </div>
              )}
            </p>
            <div style={{ display: "flex", gap: 12, justifyContent: "center" }}>
              <button
                onClick={() => setConfirmKill(null)}
                style={{
                  padding: "8px 24px", borderRadius: T.radiusSm, border: `1px solid ${T.border}`,
                  background: T.bg3, color: T.text, cursor: "pointer", fontSize: 13, fontWeight: 500,
                  fontFamily: T.font, transition: T.transition,
                }}
              >
                Cancel
              </button>
              <button
                onClick={() => { doAction(confirmKill.pid, "kill", confirmKill.name); setConfirmKill(null); }}
                style={{
                  padding: "8px 24px", borderRadius: T.radiusSm, border: "none",
                  background: `linear-gradient(135deg, ${T.redDark}, #b91c1c)`,
                  color: "#fff", cursor: "pointer", fontSize: 13, fontWeight: 600,
                  fontFamily: T.font, transition: T.transition,
                }}
              >
                Kill Process
              </button>
            </div>
          </div>
        </div>
      )}

      {/* ─── Offline warning banner (when some data exists) ─── */}
      {offline && (
        <div style={{
          background: "rgba(248, 113, 113, 0.08)", border: `1px solid rgba(248, 113, 113, 0.2)`,
          borderRadius: T.radiusSm, padding: "10px 16px", marginBottom: 16,
          display: "flex", alignItems: "center", gap: 8, fontSize: 13, color: T.red,
        }}>
          <span style={{ fontSize: 16 }}>⚡</span>
          Backend connection lost — displaying last known data. Retrying…
        </div>
      )}

      {/* ═══════════════ HEADER ═══════════════ */}
      <header style={{ marginBottom: 24, animation: "fadeIn 0.4s ease" }}>
        <div style={{ display: "flex", alignItems: "flex-start", justifyContent: "space-between", flexWrap: "wrap", gap: 12 }}>
          <div>
            <h1 style={{ fontSize: 28, fontWeight: 800, color: T.text, letterSpacing: "-0.5px", margin: 0 }}>
              Process Manager
            </h1>
            <p style={{ color: T.textDim, fontSize: 13, marginTop: 4 }}>
              {processes.length} processes monitored
              {engineStatus ? ` · ${engineStatus.engine === "rule_based" ? "Rule Engine" : "ML Model"}` : ""}
            </p>
          </div>
          {/* Engine Badge */}
          {engineStatus && (
            <div
              style={{
                display: "inline-flex", alignItems: "center", gap: 6,
                padding: "6px 14px", borderRadius: 20, fontSize: 12, fontWeight: 600, letterSpacing: "0.3px",
                // V2: when engine is ml_random_forest, use green colors
                background: engineStatus.engine === "ml_random_forest" ? T.greenBg : T.amberBg,
                color: engineStatus.engine === "ml_random_forest" ? T.green : T.amber,
                border: `1px solid ${engineStatus.engine === "ml_random_forest" ? "rgba(52,211,153,0.25)" : "rgba(251,191,36,0.25)"}`,
                animation: "glow 3s ease-in-out infinite",
              }}
            >
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: "currentColor" }} />
              {engineStatus.engine === "ml_random_forest" ? "ML Model v2.0" : "Rule Engine v1.0"}
            </div>
          )}
        </div>

        {/* ─── System Stats Cards ─── */}
        {systemStats && (
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: 12, marginTop: 20 }}>
            {/* CPU */}
            <div style={{ ...s.card, position: "relative", overflow: "hidden" }}>
              <div style={{ fontSize: 12, color: T.textDim, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.5px" }}>
                CPU Usage
              </div>
              <div style={{ fontSize: 28, fontWeight: 700, color: barColor(systemStats.cpu_total), marginTop: 6 }}>
                {systemStats.cpu_total.toFixed(1)}%
              </div>
              <div style={{ fontSize: 11, color: T.textDim, marginTop: 4 }}>
                {systemStats.cpu_cores} cores
              </div>
              <div style={{
                position: "absolute", bottom: 0, left: 0, right: 0, height: 3,
                background: T.bg0,
              }}>
                <div style={{
                  height: "100%", width: `${systemStats.cpu_total}%`,
                  background: `linear-gradient(90deg, ${barColor(systemStats.cpu_total)}88, ${barColor(systemStats.cpu_total)})`,
                  transition: "width 0.5s ease",
                }} />
              </div>
            </div>

            {/* RAM */}
            <div style={{ ...s.card, position: "relative", overflow: "hidden" }}>
              <div style={{ fontSize: 12, color: T.textDim, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.5px" }}>
                Memory
              </div>
              <div style={{ fontSize: 28, fontWeight: 700, color: barColor(systemStats.memory_percent), marginTop: 6 }}>
                {systemStats.memory_used_gb.toFixed(1)}
                <span style={{ fontSize: 14, fontWeight: 500, color: T.textDim }}> / {systemStats.memory_total_gb.toFixed(1)} GB</span>
              </div>
              <div style={{ fontSize: 11, color: T.textDim, marginTop: 4 }}>
                {systemStats.memory_percent.toFixed(1)}% used
              </div>
              <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, height: 3, background: T.bg0 }}>
                <div style={{
                  height: "100%", width: `${systemStats.memory_percent}%`,
                  background: `linear-gradient(90deg, ${barColor(systemStats.memory_percent)}88, ${barColor(systemStats.memory_percent)})`,
                  transition: "width 0.5s ease",
                }} />
              </div>
            </div>

            {/* CPU Temperature */}
            <div style={{ ...s.card, position: "relative", overflow: "hidden" }}>
              <div style={{ 
                fontSize: 12, color: T.textDim, fontWeight: 500, 
                textTransform: "uppercase", letterSpacing: "0.5px" 
              }}>
                CPU Temp
              </div>
              {systemStats.cpu_temperature ? (
                <>
                  <div style={{ 
                    fontSize: 28, fontWeight: 700, marginTop: 6,
                    color: systemStats.cpu_temperature.value > 
                           (systemStats.cpu_temperature.critical || 95) * 0.9
                           ? T.red
                           : systemStats.cpu_temperature.value > 
                             (systemStats.cpu_temperature.high || 80) * 0.9
                             ? T.amber 
                             : T.green
                  }}>
                    {systemStats.cpu_temperature.value}°C
                  </div>
                  <div style={{ fontSize: 11, color: T.textDim, marginTop: 4 }}>
                    {systemStats.cpu_temperature.high 
                      ? `High: ${systemStats.cpu_temperature.high}°C` 
                      : `Sensor: ${systemStats.cpu_temperature.source}`}
                  </div>
                  <div style={{ 
                    position: "absolute", bottom: 0, left: 0, right: 0, height: 3,
                    background: T.bg0 
                  }}>
                    <div style={{
                      height: "100%",
                      width: `${Math.min(
                        (systemStats.cpu_temperature.value / 
                         (systemStats.cpu_temperature.critical || 100)) * 100, 
                        100
                      )}%`,
                      background: systemStats.cpu_temperature.value > 
                                  (systemStats.cpu_temperature.critical || 95) * 0.9
                                  ? T.red : systemStats.cpu_temperature.value > 
                                    (systemStats.cpu_temperature.high || 80) * 0.9
                                    ? T.amber : T.green,
                      transition: "width 0.5s ease",
                    }} />
                  </div>
                </>
              ) : (
                <>
                  <div style={{ fontSize: 22, fontWeight: 700, color: T.textDim, marginTop: 6 }}>
                    N/A
                  </div>
                  <div style={{ fontSize: 11, color: T.textDim, marginTop: 4 }}>
                    Not available on this OS
                  </div>
                </>
              )}
            </div>

            {/* Active Processes */}
            <div style={{ ...s.card, position: "relative", overflow: "hidden" }}>
              <div style={{ fontSize: 12, color: T.textDim, fontWeight: 500, textTransform: "uppercase", letterSpacing: "0.5px" }}>
                Active Processes
              </div>
              <div style={{ fontSize: 28, fontWeight: 700, color: T.accent, marginTop: 6 }}>
                {processes.length}
              </div>
              <div style={{ fontSize: 11, color: T.textDim, marginTop: 4 }}>
                {counts.terminate > 0
                  ? `${counts.terminate} flagged for termination`
                  : "All processes healthy"}
              </div>
            </div>
          </div>
        )}

        {/* V2 addition: Model Insights Panel */}
        <div style={{ marginTop: 16 }}>
          <ModelInsightsPanel insights={modelInsights} />
        </div>
      </header>

      {/* ═══════════════ FILTER & SORT BAR ═══════════════ */}
      <div
        style={{
          ...s.glass, padding: "12px 16px", marginBottom: 16,
          display: "flex", alignItems: "center", flexWrap: "wrap", gap: 10,
          animation: "fadeIn 0.5s ease",
        }}
      >
        {/* Search */}
        <div style={{ position: "relative", flex: "1 1 220px", minWidth: 180 }}>
          <span style={{ position: "absolute", left: 10, top: "50%", transform: "translateY(-50%)", color: T.textDim, fontSize: 14, pointerEvents: "none" }}>
            🔍
          </span>
          <input
            id="search-input"
            type="text"
            placeholder="Search processes…"
            value={search}
            onChange={(e) => setSearch(e.target.value)}
            style={{
              width: "100%", padding: "8px 12px 8px 32px", borderRadius: T.radiusSm,
              border: `1px solid ${T.border}`, background: T.bg0, color: T.text,
              fontSize: 13, outline: "none", fontFamily: T.font,
              transition: T.transition,
            }}
            onFocus={(e) => (e.target.style.borderColor = T.accentDark)}
            onBlur={(e) => (e.target.style.borderColor = T.border)}
          />
        </div>

        {/* Sort */}
        <select
          id="sort-select"
          value={sortBy}
          onChange={(e) => setSortBy(e.target.value)}
          style={{
            padding: "8px 12px", borderRadius: T.radiusSm,
            border: `1px solid ${T.border}`, background: T.bg0, color: T.text,
            fontSize: 13, outline: "none", cursor: "pointer", fontFamily: T.font,
          }}
        >
          <option value="composite">Sort: Impact Score</option>
          <option value="cpu">Sort: CPU Usage</option>
          <option value="memory">Sort: Memory Usage</option>
          <option value="name">Sort: Name</option>
          <option value="recommendation">Sort: Recommendation</option>
        </select>

        {/* Filter */}
        <select
          id="filter-select"
          value={filterBy}
          onChange={(e) => setFilterBy(e.target.value)}
          style={{
            padding: "8px 12px", borderRadius: T.radiusSm,
            border: `1px solid ${T.border}`, background: T.bg0, color: T.text,
            fontSize: 13, outline: "none", cursor: "pointer", fontFamily: T.font,
          }}
        >
          <option value="all">Filter: All</option>
          <option value="high">High Resource (CPU&gt;20 / Mem&gt;8)</option>
          <option value="critical">User: Critical</option>
          <option value="expendable">User: Expendable</option>
          <option value="ai_pause">AI: Pause</option>
          <option value="ai_terminate">AI: Terminate</option>
          <option value="labeled">Labeled Only</option>
        </select>

        {/* Count */}
        <span style={{ fontSize: 12, color: T.textDim, marginLeft: "auto", whiteSpace: "nowrap" }}>
          Showing {filtered.length} of {processes.length} processes
        </span>
      </div>

      {/* ═══════════════ PROCESS TABLE ═══════════════ */}
      <div style={{ ...s.glass, overflow: "hidden", animation: "fadeIn 0.6s ease" }}>
        {/* Table header */}
        <div
          style={{
            display: "grid",
            gridTemplateColumns: "2.2fr 1fr 1fr 0.5fr 1.4fr 1.2fr 1.2fr",
            padding: "10px 16px",
            background: T.bg1,
            borderBottom: `1px solid ${T.border}`,
            fontSize: 11, fontWeight: 600, color: T.textDim,
            textTransform: "uppercase", letterSpacing: "0.5px",
          }}
        >
          <div>Process</div>
          <div>CPU</div>
          <div>Memory</div>
          <div style={{ textAlign: "center" }}>Threads</div>
          <div>Recommendation</div>
          <div style={{ textAlign: "center" }}>Label</div>
          <div style={{ textAlign: "center" }}>Actions</div>
        </div>

        {/* Rows */}
        <div style={{ maxHeight: "calc(100vh - 380px)", overflowY: "auto" }}>
          {filtered.length === 0 ? (
            <div style={{ padding: 40, textAlign: "center", color: T.textDim, fontSize: 14 }}>
              No processes match your filters.
            </div>
          ) : (
            filtered.map((proc, idx) => {
              const rc = recColors[proc.recommendation] || recColors.monitor;
              const cc = catColors[proc.category] || catColors.other;

              return (
                <div
                  key={`${proc.pid}-${idx}`}
                  style={{
                    display: "grid",
                    gridTemplateColumns: "2.2fr 1fr 1fr 0.5fr 1.4fr 1.2fr 1.2fr",
                    padding: "10px 16px",
                    alignItems: "center",
                    borderBottom: `1px solid ${T.bg3}`,
                    transition: T.transition,
                    background: idx % 2 === 0 ? "transparent" : "rgba(255,255,255,0.01)",
                    cursor: "default",
                  }}
                  onMouseEnter={(e) => (e.currentTarget.style.background = T.bg3)}
                  onMouseLeave={(e) => (e.currentTarget.style.background = idx % 2 === 0 ? "transparent" : "rgba(255,255,255,0.01)")}
                >
                  {/* Process Name + PID + Category */}
                  <div style={{ overflow: "hidden" }}>
                    <div style={{
                      display: "flex", alignItems: "center", gap: 8,
                      overflow: "hidden",
                    }}>
                      <span style={{
                        fontSize: 13, fontWeight: 600, color: T.text,
                        whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis",
                        maxWidth: 160,
                      }}>
                        {proc.name}
                      </span>
                      <span style={{ fontSize: 11, color: T.textDim, flexShrink: 0 }}>
                        {proc.pid}
                      </span>
                    </div>
                    <span
                      style={{
                        display: "inline-block", marginTop: 3,
                        padding: "1px 8px", borderRadius: 10,
                        fontSize: 10, fontWeight: 600, letterSpacing: "0.3px",
                        background: cc.bg, color: cc.color, border: `1px solid ${cc.border}`,
                      }}
                    >
                      {formatCat(proc.category)}
                    </span>
                  </div>

                  {/* CPU bar */}
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <div style={{
                        flex: 1, height: 6, background: T.bg0,
                        borderRadius: 3, overflow: "hidden", maxWidth: 80,
                      }}>
                        <div style={{
                          height: "100%", width: `${Math.min(proc.cpu_percent, 100)}%`,
                          background: barColor(proc.cpu_percent),
                          borderRadius: 3, transition: "width 0.4s ease",
                        }} />
                      </div>
                      <span style={{
                        fontSize: 12, fontWeight: 600, color: barColor(proc.cpu_percent),
                        minWidth: 40, textAlign: "right",
                      }}>
                        {proc.cpu_percent.toFixed(1)}%
                      </span>
                    </div>
                  </div>

                  {/* Memory bar */}
                  <div>
                    <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
                      <div style={{
                        flex: 1, height: 6, background: T.bg0,
                        borderRadius: 3, overflow: "hidden", maxWidth: 80,
                      }}>
                        <div style={{
                          height: "100%", 
                          width: `${Math.min(proc.memory_percent, 100)}%`,
                          background: barColor(proc.memory_percent),
                          borderRadius: 3, transition: "width 0.4s ease",
                        }} />
                      </div>
                      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-end" }}>
                        <span style={{
                          fontSize: 12, fontWeight: 600, 
                          color: barColor(proc.memory_percent),
                          lineHeight: 1.2,
                        }}>
                          {formatMemoryBytes(proc.memory_bytes)}
                        </span>
                        <span style={{ fontSize: 10, color: T.textDim, lineHeight: 1.2 }}>
                          {proc.memory_percent.toFixed(1)}%
                        </span>
                      </div>
                    </div>
                  </div>

                  {/* Threads */}
                  <div style={{ textAlign: "center", fontSize: 12, color: T.textMuted, fontWeight: 500 }}>
                    {proc.num_threads}
                  </div>

                  {/* Recommendation badge + confidence + reason */}
                  <div>
                    <RecommendationBadge 
                      recommendation={proc.recommendation} 
                      confidence={proc.confidence} 
                    />
                    {/* V2 addition: Show reason text per process row */}
                    <div style={{ 
                      fontSize: 10, color: T.textDim, marginTop: 4, 
                      maxWidth: 160, lineHeight: 1.4 
                    }}>
                      {proc.reason}
                    </div>
                  </div>

                  {/* Label buttons */}
                  <div style={{ display: "flex", justifyContent: "center", gap: 4 }}>
                    {["critical", "normal", "expendable"].map((label) => {
                      const isActive = proc.user_label === label;
                      const colors = {
                        critical: { bg: T.greenBg, color: T.green, activeBg: T.greenDark },
                        normal: { bg: T.blueBg, color: T.blue, activeBg: "#2563eb" },
                        expendable: { bg: T.redBg, color: T.red, activeBg: T.redDark },
                      };
                      const lc = colors[label];
                      return (
                        <button
                          key={label}
                          id={`label-${label}-${proc.pid}`}
                          onClick={() => doLabel(proc, label)}
                          style={{
                            padding: "3px 8px", borderRadius: T.radiusXs,
                            border: isActive ? "none" : `1px solid ${T.border}`,
                            background: isActive ? lc.activeBg : "transparent",
                            color: isActive ? "#fff" : T.textDim,
                            fontSize: 10, fontWeight: 600, cursor: "pointer",
                            fontFamily: T.font, transition: T.transition,
                            textTransform: "capitalize",
                          }}
                        >
                          {label.charAt(0).toUpperCase() + label.slice(1, 4)}
                        </button>
                      );
                    })}
                  </div>

                  {/* Action buttons — conditionally shown */}
                  <div style={{ display: "flex", justifyContent: "center", gap: 4, flexWrap: "wrap" }}>
                    {proc.recommendation === "prioritize" && (
                      <button
                        id={`boost-${proc.pid}`}
                        onClick={() => doAction(proc.pid, "prioritize", proc.name)}
                        style={{
                          padding: "4px 10px", borderRadius: T.radiusXs, border: "none",
                          background: `linear-gradient(135deg, ${T.greenDark}, #047857)`,
                          color: "#fff", fontSize: 11, fontWeight: 600, cursor: "pointer",
                          fontFamily: T.font, transition: T.transition,
                        }}
                      >
                        ⚡ Boost
                      </button>
                    )}
                    {proc.recommendation === "pause" && proc.status !== "stopped" && (
                      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
                        <button
                          id={`pause-${proc.pid}`}
                          onClick={() => doAction(proc.pid, "pause", proc.name)}
                          style={{
                            padding: "4px 10px", borderRadius: T.radiusXs, border: "none",
                            background: `linear-gradient(135deg, ${T.amberDark}, #b45309)`,
                            color: "#fff", fontSize: 11, fontWeight: 600, cursor: "pointer",
                            fontFamily: T.font, transition: T.transition,
                          }}
                        >
                          ⏸ Pause
                        </button>
                        {getMemoryFreeMessage(proc) && (
                          <span style={{ fontSize: 9, color: T.amber, opacity: 0.8, whiteSpace: "nowrap" }}>
                            {getMemoryFreeMessage(proc)}
                          </span>
                        )}
                      </div>
                    )}
                    {proc.recommendation === "terminate" && (
                      <div style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: 2 }}>
                        <button
                          id={`kill-${proc.pid}`}
                          onClick={() => setConfirmKill(proc)}
                          style={{
                            padding: "4px 10px", borderRadius: T.radiusXs, border: "none",
                            background: `linear-gradient(135deg, ${T.redDark}, #b91c1c)`,
                            color: "#fff", fontSize: 11, fontWeight: 600, cursor: "pointer",
                            fontFamily: T.font, transition: T.transition,
                          }}
                        >
                          ✕ Kill
                        </button>
                        {getMemoryFreeMessage(proc) && (
                          <span style={{ fontSize: 9, color: T.red, opacity: 0.8, whiteSpace: "nowrap" }}>
                            {getMemoryFreeMessage(proc)}
                          </span>
                        )}
                      </div>
                    )}
                    {proc.status === "stopped" && (
                      <button
                        id={`resume-${proc.pid}`}
                        onClick={() => doAction(proc.pid, "resume", proc.name)}
                        style={{
                          padding: "4px 10px", borderRadius: T.radiusXs, border: "none",
                          background: `linear-gradient(135deg, #2563eb, #1d4ed8)`,
                          color: "#fff", fontSize: 11, fontWeight: 600, cursor: "pointer",
                          fontFamily: T.font, transition: T.transition,
                        }}
                      >
                        ▶ Resume
                      </button>
                    )}
                    {proc.recommendation === "monitor" && proc.status !== "stopped" && (
                      <span style={{ fontSize: 10, color: T.textDim, padding: "4px 0" }}>—</span>
                    )}
                  </div>
                </div>
              );
            })
          )}
        </div>
      </div>

      {/* ═══════════════ BOTTOM STATS BAR ═══════════════ */}
      <div
        style={{
          ...s.glass, padding: "12px 16px", marginTop: 16,
          display: "flex", alignItems: "center", justifyContent: "space-between",
          flexWrap: "wrap", gap: 10, animation: "fadeIn 0.7s ease",
        }}
      >
        <div style={{ display: "flex", gap: 16, flexWrap: "wrap" }}>
          {[
            { label: "Prioritize", count: counts.prioritize, color: T.green },
            { label: "Monitor", count: counts.monitor, color: T.textMuted },
            { label: "Pause", count: counts.pause, color: T.amber },
            { label: "Terminate", count: counts.terminate, color: T.red },
          ].map(({ label, count, color }) => (
            <span key={label} style={{ fontSize: 12, color: T.textDim }}>
              <span style={{ color, fontWeight: 700, fontSize: 14 }}>{count}</span>{" "}
              to {label.toLowerCase()}
            </span>
          ))}
        </div>

        {/* V2 addition: Train Model Button */}
        <button
          id="train-v2-button"
          onClick={handleTrain}
          disabled={!engineStatus || engineStatus.training_samples < 5 || training}
          title={!engineStatus || engineStatus.training_samples < 5 ? `Label ${5 - (engineStatus?.training_samples || 0)} more processes to unlock` : "Train Random Forest model"}
          style={{
            padding: "8px 18px", borderRadius: T.radiusSm,
            border: `1px solid ${(!engineStatus || engineStatus.training_samples < 5) ? T.border : T.accent}`, 
            background: (!engineStatus || engineStatus.training_samples < 5) ? T.bg3 : `linear-gradient(135deg, ${T.accent}, ${T.accentDark})`,
            color: (!engineStatus || engineStatus.training_samples < 5) ? T.textDim : "#fff", 
            fontSize: 12, fontWeight: 600, 
            cursor: (!engineStatus || engineStatus.training_samples < 5 || training) ? "not-allowed" : "pointer",
            fontFamily: T.font, opacity: (!engineStatus || engineStatus.training_samples < 5) ? 0.5 : 1,
            transition: T.transition,
            boxShadow: (!engineStatus || engineStatus.training_samples < 5) ? "none" : "0 0 15px rgba(129, 140, 248, 0.3)"
          }}
        >
          {training ? "Training..." : engineStatus?.model_ready ? "🤖 Retrain Model" : "🤖 Train Model"}
        </button>
      </div>

      {/* Footer */}
      <div style={{ textAlign: "center", padding: "20px 0 0", color: T.textDim, fontSize: 11 }}>
        AI Process Recommendation System · V2 ML-Powered Engine
        {engineStatus && !engineStatus.model_ready && " · Rule-Based Fallback Active"}
      </div>
    </div>
  );
};