Index: lan-frontend/src/components/ComputerCard.jsx
===================================================================
--- lan-frontend/src/components/ComputerCard.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
+++ lan-frontend/src/components/ComputerCard.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
@@ -0,0 +1,42 @@
+import React from "react";
+
+function dotClass(status) {
+  if (status === "online") return "dot online";
+  if (status === "idle") return "dot idle";
+  return "dot offline";
+}
+
+export default function ComputerCard({ c, onOpen }) {
+  return (
+    <button className="card" onClick={() => onOpen?.(c)}>
+      <div className="card-head">
+        <div className="card-title">{c.name}</div>
+        <div className={dotClass(c.status)} />
+      </div>
+
+      <div className="meta">
+        <div><span className="dim">🏷 Env:</span> {c.env_name || "default"}</div>
+        <div><span className="dim">👤 User:</span> {c.user || "—"}</div>
+        <div><span className="dim">🌐 IP:</span> {c.ip || "—"}</div>
+        <div><span className="dim">💻 OS:</span> {(c.os || "—").slice(0, 60)}</div>
+        <div><span className="dim">⏰ Last:</span> {c.last_seen ? new Date(c.last_seen).toLocaleTimeString() : "—"}</div>
+        <div><span className="dim">🛡 Sysmon:</span> {c.sysmon_available ? "Yes" : "No"} • {c.recent_sysmon ?? 0} events</div>
+      </div>
+
+      <div className="kpis">
+        <div className="kpi">
+          <div className="k">CPU avg</div>
+          <div className="v">{c.avg_cpu ?? 0}%</div>
+        </div>
+        <div className="kpi">
+          <div className="k">RAM avg</div>
+          <div className="v">{c.avg_ram ?? 0}%</div>
+        </div>
+        <div className="kpi">
+          <div className="k">Logs 24h</div>
+          <div className="v">{c.recent_logs ?? 0}</div>
+        </div>
+      </div>
+    </button>
+  );
+}