Index: lan-frontend/src/components/AIAssistantDrawer.jsx
===================================================================
--- lan-frontend/src/components/AIAssistantDrawer.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
+++ lan-frontend/src/components/AIAssistantDrawer.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
@@ -0,0 +1,101 @@
+import React from "react";
+
+import { useEffect, useRef, useState } from "react";
+
+export default function AIAssistantDrawer({ open, onClose, computers, scope, setScope }) {
+  const [messages, setMessages] = useState([
+    { role: "assistant", text: "Постави прашање за Sysmon, процеси, мрежа. Можеш да избереш компјутер (scope) горе." },
+  ]);
+  const [input, setInput] = useState("");
+  const [sending, setSending] = useState(false);
+  const bottomRef = useRef(null);
+
+  useEffect(() => {
+    if (bottomRef.current) bottomRef.current.scrollIntoView({ behavior: "smooth" });
+  }, [messages, open]);
+
+  async function send() {
+    const q = input.trim();
+    if (!q || sending) return;
+
+    setInput("");
+    setMessages((m) => [...m, { role: "user", text: q }]);
+    setSending(true);
+
+    try {
+      const r = await fetch("/api/chat", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ question: q, computer_name: scope || null }),
+      });
+      const data = await r.json();
+      setMessages((m) => [...m, { role: "assistant", text: data.answer || "(no answer)" }]);
+    } catch (e) {
+      setMessages((m) => [...m, { role: "assistant", text: `Грешка: ${String(e.message || e)}` }]);
+    } finally {
+      setSending(false);
+    }
+  }
+
+  if (!open) return null;
+
+  return (
+    <>
+      <div className="drawer-backdrop" onMouseDown={onClose} />
+      <div className="drawer" onMouseDown={(e) => e.stopPropagation()}>
+        <div className="drawer-head">
+          <div>
+            <div className="drawer-title">🤖 AI Assistant</div>
+            <div className="drawer-sub">Uses /api/chat (RAG over your logs)</div>
+          </div>
+          <button className="btn" onClick={onClose}>Close</button>
+        </div>
+
+        <div style={{ padding: "12px 16px", borderBottom: "1px solid var(--border)" }}>
+          <div className="row">
+            <select className="select" value={scope || ""} onChange={(e) => setScope(e.target.value || null)}>
+              <option value="">All computers</option>
+              {(computers || []).map((c) => (
+                <option key={c.name} value={c.name}>{c.name}</option>
+              ))}
+            </select>
+          </div>
+          <div className="small">Tip: “Top процеси по RAM” или “сомнителни sysmon events”</div>
+        </div>
+
+        <div className="drawer-body">
+          {messages.map((m, i) => (
+            <div key={i} className={`bubble ${m.role === "user" ? "user" : ""}`}>
+              <div style={{ fontSize: 11, color: "var(--dim)", marginBottom: 6 }}>
+                {m.role === "user" ? "You" : "Assistant"}
+              </div>
+              <div style={{ whiteSpace: "pre-wrap" }}>{m.text}</div>
+            </div>
+          ))}
+          <div ref={bottomRef} />
+        </div>
+
+        <div className="drawer-foot">
+          <div className="row">
+            <textarea
+              className="textarea"
+              rows={2}
+              value={input}
+              placeholder="Постави прашање… (Enter = send, Shift+Enter нов ред)"
+              onChange={(e) => setInput(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" && !e.shiftKey) {
+                  e.preventDefault();
+                  send();
+                }
+              }}
+            />
+            <button className="btn primary" onClick={send} disabled={sending || !input.trim()}>
+              {sending ? "Sending…" : "Send"}
+            </button>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+}
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>
+  );
+}
Index: lan-frontend/src/components/ComputerDetailsModal.jsx
===================================================================
--- lan-frontend/src/components/ComputerDetailsModal.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
+++ lan-frontend/src/components/ComputerDetailsModal.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
@@ -0,0 +1,384 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+function severityForEventId(eventId) {
+  const id = parseInt(eventId, 10);
+  const high = new Set([1, 3, 8, 10]);
+  const med = new Set([5, 6, 7, 11, 22]);
+  if (high.has(id)) return "high";
+  if (med.has(id)) return "medium";
+  return "low";
+}
+
+export default function ComputerDetailsModal({ open, computer, onClose, onAskAI }) {
+  const [tab, setTab] = useState("overview");
+  const [loading, setLoading] = useState(false);
+  const [details, setDetails] = useState(null);
+  const [search, setSearch] = useState("");
+
+  // JSON viewer state
+  const [jsonOpen, setJsonOpen] = useState(false);
+  const [jsonTitle, setJsonTitle] = useState("");
+  const [jsonData, setJsonData] = useState(null);
+
+  useEffect(() => {
+    if (!open || !computer?.name) return;
+    let cancelled = false;
+
+    async function load() {
+      try {
+        setLoading(true);
+        const r = await fetch(`/api/computer/${encodeURIComponent(computer.name)}`);
+        const d = await r.json();
+        if (!cancelled) setDetails(d);
+      } catch (e) {
+        console.error("details error", e);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    }
+
+    load();
+    return () => {
+      cancelled = true;
+    };
+  }, [open, computer?.name]);
+
+  const filteredSysmon = useMemo(() => {
+    const list = details?.sysmon_events || [];
+    const q = search.trim().toLowerCase();
+    if (!q) return list;
+    return list.filter((ev) => {
+      const msg = (ev.message || "").toLowerCase();
+      const type = (ev.event_type || "").toLowerCase();
+      const id = String(ev.event_id ?? "");
+      return msg.includes(q) || type.includes(q) || id.includes(q);
+    });
+  }, [details, search]);
+
+  function openJson(ev) {
+    // server ти враќа: { event_id, event_type, message, timestamp, details }
+    setJsonTitle(`Sysmon Event ${ev?.event_id ?? ""} • ${ev?.event_type ?? ""}`);
+    setJsonData(ev?.details ?? ev); // ако нема details, покажи цел event
+    setJsonOpen(true);
+  }
+
+  function closeJson() {
+    setJsonOpen(false);
+    setJsonTitle("");
+    setJsonData(null);
+  }
+
+  if (!open) return null;
+
+  return (
+    <>
+      <div className="backdrop" onMouseDown={onClose}>
+        <div className="modal" onMouseDown={(e) => e.stopPropagation()}>
+          <div className="modal-head">
+            <div>
+              <div className="modal-title">{computer.name}</div>
+              <div className="modal-sub">
+                {computer.ip || "—"} • {computer.user || "—"} • {computer.status || "—"}
+              </div>
+            </div>
+
+            <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+              <div className="tabs">
+                <button className={`tab ${tab === "overview" ? "active" : ""}`} onClick={() => setTab("overview")}>
+                  Overview
+                </button>
+                <button className={`tab ${tab === "sysmon" ? "active" : ""}`} onClick={() => setTab("sysmon")}>
+                  Sysmon
+                </button>
+                <button className={`tab ${tab === "processes" ? "active" : ""}`} onClick={() => setTab("processes")}>
+                  Processes
+                </button>
+                <button className={`tab ${tab === "network" ? "active" : ""}`} onClick={() => setTab("network")}>
+                  Network
+                </button>
+              </div>
+              <button className="btn" onClick={onClose}>
+                Close
+              </button>
+            </div>
+          </div>
+
+          <div style={{ padding: 16 }}>
+            {loading && <div style={{ color: "#94a3b8" }}>Loading…</div>}
+
+            {!loading && details && tab === "overview" && (
+              <div className="panel">
+                <div className="panel-head">
+                  <div className="panel-title">System Overview</div>
+                  <button className="btn primary" onClick={() => onAskAI(computer.name)}>
+                    Ask AI about this PC
+                  </button>
+                </div>
+                <div className="panel-body" style={{ display: "grid", gap: 10 }}>
+                  <div>
+                    <b>User:</b> {details.computer?.user}
+                  </div>
+                  <div>
+                    <b>IP:</b> {details.computer?.ip}
+                  </div>
+                  <div>
+                    <b>OS:</b> {details.computer?.os}
+                  </div>
+                  <div>
+                    <b>First seen:</b> {details.computer?.first_seen}
+                  </div>
+                  <div>
+                    <b>Last seen:</b> {details.computer?.last_seen}
+                  </div>
+                  <div>
+                    <b>Total logs:</b> {details.computer?.total_logs}
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {!loading && details && tab === "sysmon" && (
+              <div className="panel">
+                <div className="panel-head" style={{ alignItems: "center" }}>
+                  <div className="panel-title">Sysmon Events</div>
+                  <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+                    <span className="pill">{filteredSysmon.length} events</span>
+                    <input
+                      className="input"
+                      style={{ maxWidth: 380 }}
+                      placeholder="Search by id / type / message…"
+                      value={search}
+                      onChange={(e) => setSearch(e.target.value)}
+                    />
+                  </div>
+                </div>
+
+                <div className="panel-body">
+                  <div className="table-wrap">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th style={{ width: 90 }}>Time</th>
+                          <th style={{ width: 70 }}>ID</th>
+                          <th style={{ width: 170 }}>Type</th>
+                          <th style={{ width: 110 }}>Severity</th>
+                          <th>Message</th>
+                          <th style={{ width: 90 }}>View</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {filteredSysmon.slice(0, 200).map((ev, idx) => {
+                          const sev = severityForEventId(ev.event_id);
+                          return (
+                            <tr key={idx}>
+                              <td>{ev.timestamp ? new Date(ev.timestamp).toLocaleTimeString() : "—"}</td>
+                              <td>
+                                <b>{ev.event_id}</b>
+                              </td>
+                              <td>{ev.event_type}</td>
+                              <td>
+                                <span className={`badge ${sev}`}>{sev.toUpperCase()}</span>
+                              </td>
+                              <td
+                                style={{
+                                  fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                                  fontSize: 12,
+                                }}
+                              >
+                                {(ev.message || "").slice(0, 140)}
+                              </td>
+                              <td>
+                                <button className="btn" onClick={() => openJson(ev)}>
+                                  View
+                                </button>
+                              </td>
+                            </tr>
+                          );
+                        })}
+
+                        {filteredSysmon.length === 0 && (
+                          <tr>
+                            <td colSpan="6" style={{ color: "#94a3b8" }}>
+                              No sysmon events.
+                            </td>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+
+                  {filteredSysmon.length > 200 && (
+                    <div style={{ marginTop: 10, color: "#94a3b8", fontSize: 12 }}>
+                      Showing first 200 (for speed).
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+
+            {!loading && details && tab === "processes" && (
+              <div className="panel">
+                <div className="panel-head">
+                  <div className="panel-title">Recent Processes</div>
+                </div>
+                <div className="panel-body">
+                  <div className="table-wrap">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Time</th>
+                          <th>PID</th>
+                          <th>Name</th>
+                          <th>User</th>
+                          <th>CPU%</th>
+                          <th>RAM MB</th>
+                          <th>Cmdline</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {(details.recent_processes || []).slice(0, 150).map((p, idx) => (
+                          <tr key={idx}>
+                            <td>{p.timestamp ? new Date(p.timestamp).toLocaleTimeString() : "—"}</td>
+                            <td>
+                              <b>{p.pid}</b>
+                            </td>
+                            <td>{p.name}</td>
+                            <td>{p.username || "—"}</td>
+                            <td>{p.cpu_percent ?? 0}</td>
+                            <td>{p.memory_mb ?? 0}</td>
+                            <td
+                              style={{
+                                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                                fontSize: 12,
+                              }}
+                            >
+                              {(p.cmdline || "").slice(0, 120)}
+                            </td>
+                          </tr>
+                        ))}
+                        {(details.recent_processes || []).length === 0 && (
+                          <tr>
+                            <td colSpan="7" style={{ color: "#94a3b8" }}>
+                              No process data.
+                            </td>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {!loading && details && tab === "network" && (
+              <div className="panel">
+                <div className="panel-head">
+                  <div className="panel-title">Network Connections</div>
+                </div>
+                <div className="panel-body">
+                  <div className="table-wrap">
+                    <table>
+                      <thead>
+                        <tr>
+                          <th>Time</th>
+                          <th>PID</th>
+                          <th>Process</th>
+                          <th>Local</th>
+                          <th>Remote</th>
+                          <th>Status</th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        {(details.network_connections || []).slice(0, 150).map((n, idx) => (
+                          <tr key={idx}>
+                            <td>{n.timestamp ? new Date(n.timestamp).toLocaleTimeString() : "—"}</td>
+                            <td>
+                              <b>{n.pid}</b>
+                            </td>
+                            <td>{n.process_name || "—"}</td>
+                            <td
+                              style={{
+                                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                                fontSize: 12,
+                              }}
+                            >
+                              {n.local_address || "—"}
+                            </td>
+                            <td
+                              style={{
+                                fontFamily: "ui-monospace, SFMono-Regular, Menlo, monospace",
+                                fontSize: 12,
+                              }}
+                            >
+                              {n.remote_address || "—"}
+                            </td>
+                            <td>{n.status || "—"}</td>
+                          </tr>
+                        ))}
+                        {(details.network_connections || []).length === 0 && (
+                          <tr>
+                            <td colSpan="6" style={{ color: "#94a3b8" }}>
+                              No network data.
+                            </td>
+                          </tr>
+                        )}
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {!loading && !details && <div style={{ color: "#94a3b8" }}>No details.</div>}
+          </div>
+        </div>
+      </div>
+
+      {/* JSON VIEWER MODAL */}
+      {jsonOpen && (
+        <div className="backdrop" onMouseDown={closeJson}>
+          <div className="modal" onMouseDown={(e) => e.stopPropagation()} style={{ width: "min(900px, 96vw)" }}>
+            <div className="modal-head">
+              <div>
+                <div className="modal-title">View JSON</div>
+                <div className="modal-sub">{jsonTitle}</div>
+              </div>
+              <div style={{ display: "flex", gap: 10 }}>
+                <button
+                  className="btn"
+                  onClick={() => {
+                    const txt = JSON.stringify(jsonData ?? {}, null, 2);
+                    navigator.clipboard.writeText(txt);
+                  }}
+                >
+                  Copy
+                </button>
+                <button className="btn" onClick={closeJson}>
+                  Close
+                </button>
+              </div>
+            </div>
+            <div style={{ padding: 16 }}>
+              <pre
+                style={{
+                  margin: 0,
+                  maxHeight: "70vh",
+                  overflow: "auto",
+                  padding: 14,
+                  borderRadius: 12,
+                  border: "1px solid rgba(148,163,184,0.25)",
+                  background: "rgba(2,6,23,0.35)",
+                  color: "rgba(226,232,240,0.95)",
+                  fontSize: 12,
+                  lineHeight: 1.5,
+                }}
+              >
+                {JSON.stringify(jsonData ?? {}, null, 2)}
+              </pre>
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}
Index: lan-frontend/src/components/TopBar.jsx
===================================================================
--- lan-frontend/src/components/TopBar.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
+++ lan-frontend/src/components/TopBar.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
@@ -0,0 +1,532 @@
+import React, { useEffect, useMemo, useState } from "react";
+
+export default function TopBar({ onOpenAI, onRefresh, lastUpdated, onEnvChange }) {
+  const [open, setOpen] = useState(false);
+
+  // admin auth
+  const [adminKey, setAdminKey] = useState("");
+  const [adminSession, setAdminSession] = useState("");
+
+  // env + tokens
+  const [envs, setEnvs] = useState(["default"]);
+  const [selectedEnv, setSelectedEnv] = useState("default");
+  const [newEnvName, setNewEnvName] = useState("");
+  const [token, setToken] = useState("");
+
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState("");
+
+  // helper: fetch env list after login
+  async function loadEnvironments(session) {
+    const r = await fetch("/api/admin/environments", {
+      headers: { "X-Admin-Session": session },
+    });
+    const data = await r.json();
+    if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`);
+
+    const list = data.environments?.length ? data.environments : ["default"];
+    setEnvs(list);
+
+    // ако тековниот не постои, стави првиот од листата
+    if (!list.includes(selectedEnv)) {
+      setSelectedEnv(list[0]);
+      onEnvChange?.(list[0]);
+    }
+  }
+
+  async function login() {
+    setError("");
+    setToken("");
+
+    if (!adminKey.trim()) {
+      setError("Внеси admin key.");
+      return;
+    }
+
+    setBusy(true);
+    try {
+      const r = await fetch("/api/admin/login", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ admin_key: adminKey.trim() }),
+      });
+      const data = await r.json();
+      if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`);
+
+      const session = data.session;
+      setAdminSession(session);
+      await loadEnvironments(session);
+    } catch (e) {
+      setError(String(e.message || e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  function logout() {
+    setAdminSession("");
+    setAdminKey("");
+    setToken("");
+    setError("");
+    setEnvs(["default"]);
+    setSelectedEnv("default");
+    onEnvChange?.("default");
+  }
+
+  async function createEnvironment() {
+    setError("");
+    setToken("");
+    if (!newEnvName.trim()) {
+      setError("Внеси име за environment.");
+      return;
+    }
+
+    setBusy(true);
+    try {
+      const r = await fetch("/api/admin/environments", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Admin-Session": adminSession,
+        },
+        body: JSON.stringify({ name: newEnvName.trim() }),
+      });
+
+      const data = await r.json();
+      if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`);
+
+      // reload list, select new env
+      await loadEnvironments(adminSession);
+      setSelectedEnv(newEnvName.trim());
+      onEnvChange?.(newEnvName.trim());
+      setNewEnvName("");
+    } catch (e) {
+      setError(String(e.message || e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function generateToken() {
+    setError("");
+    setToken("");
+    if (!selectedEnv) {
+      setError("Избери environment.");
+      return;
+    }
+
+    setBusy(true);
+    try {
+      const r = await fetch("/api/admin/tokens", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Admin-Session": adminSession,
+        },
+        body: JSON.stringify({ env: selectedEnv }),
+      });
+
+      const data = await r.json();
+      if (!r.ok) throw new Error(data?.error || `HTTP ${r.status}`);
+
+      setToken(data.token || "");
+    } catch (e) {
+      setError(String(e.message || e));
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function copyToken() {
+    if (!token) return;
+    await navigator.clipboard.writeText(token);
+  }
+
+  function changeEnv(val) {
+    setSelectedEnv(val);
+    setToken("");
+    onEnvChange?.(val);
+  }
+
+  const prettyTime = useMemo(() => {
+    if (!lastUpdated) return "Loading…";
+    try {
+      return `Updated ${new Date(lastUpdated).toLocaleTimeString()}`;
+    } catch {
+      return "Updated";
+    }
+  }, [lastUpdated]);
+
+  return (
+    <>
+      <style>{`
+        /* ---- TopBar scoped theme ---- */
+        .tb-wrap{
+          position: sticky;
+          top: 0;
+          z-index: 20;
+          backdrop-filter: blur(10px);
+          background: linear-gradient(180deg, rgba(10,16,32,0.92), rgba(10,16,32,0.75));
+          border-bottom: 1px solid rgba(96,165,250,0.18);
+        }
+        .tb-inner{
+          max-width: 1200px;
+          margin: 0 auto;
+          padding: 14px 18px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 14px;
+        }
+
+        .tb-brand{
+          display:flex;
+          align-items:center;
+          gap: 12px;
+          min-width: 260px;
+        }
+        .tb-badge{
+          width: 44px;
+          height: 44px;
+          border-radius: 14px;
+          display:flex;
+          align-items:center;
+          justify-content:center;
+          background:
+            radial-gradient(120px 80px at 30% 20%, rgba(96,165,250,0.55), transparent 60%),
+            linear-gradient(135deg, rgba(30,64,175,0.75), rgba(15,23,42,0.85));
+          border: 1px solid rgba(96,165,250,0.25);
+          box-shadow: 0 10px 25px rgba(0,0,0,0.25);
+        }
+        .tb-title{
+          margin:0;
+          font-size: 16px;
+          font-weight: 900;
+          letter-spacing: 0.4px;
+          color: rgba(255,255,255,0.95);
+          line-height: 1.2;
+        }
+        .tb-sub{
+          margin: 2px 0 0 0;
+          font-size: 12px;
+          color: rgba(191,219,254,0.85);
+        }
+        .tb-sub span{
+          color: rgba(96,165,250,0.95);
+          font-weight: 800;
+        }
+
+        .tb-actions{
+          display:flex;
+          align-items:center;
+          gap: 10px;
+          flex-wrap: wrap;
+          justify-content: flex-end;
+        }
+
+        .tb-pill{
+          display:inline-flex;
+          align-items:center;
+          gap: 8px;
+          padding: 8px 12px;
+          border-radius: 999px;
+          background: rgba(30,41,59,0.65);
+          border: 1px solid rgba(96,165,250,0.22);
+          color: rgba(255,255,255,0.9);
+          font-weight: 800;
+          font-size: 12px;
+          box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
+        }
+        .tb-pill .dot{
+          width: 8px;
+          height: 8px;
+          border-radius: 999px;
+          background: rgba(96,165,250,0.95);
+          box-shadow: 0 0 0 3px rgba(96,165,250,0.15);
+        }
+
+        .tb-btn{
+          appearance: none;
+          border: 1px solid rgba(96,165,250,0.22);
+          background: rgba(15,23,42,0.55);
+          color: rgba(255,255,255,0.9);
+          padding: 9px 12px;
+          border-radius: 12px;
+          font-weight: 800;
+          font-size: 13px;
+          cursor: pointer;
+          transition: transform .12s ease, background .12s ease, border-color .12s ease, opacity .12s ease;
+          box-shadow: 0 8px 20px rgba(0,0,0,0.18);
+        }
+        .tb-btn:hover{
+          transform: translateY(-1px);
+          background: rgba(30,41,59,0.65);
+          border-color: rgba(96,165,250,0.38);
+        }
+        .tb-btn:disabled{
+          opacity: .6;
+          cursor: not-allowed;
+          transform: none;
+        }
+        .tb-btn.primary{
+          background: linear-gradient(135deg, rgba(37,99,235,0.95), rgba(56,189,248,0.7));
+          border-color: rgba(147,197,253,0.35);
+          color: rgba(5,12,24,0.95);
+        }
+        .tb-btn.primary:hover{
+          background: linear-gradient(135deg, rgba(59,130,246,0.95), rgba(34,211,238,0.75));
+        }
+
+        /* ---- Modal ---- */
+        .tb-backdrop{
+          position: fixed;
+          inset: 0;
+          background: rgba(2,6,23,0.72);
+          backdrop-filter: blur(6px);
+          display:flex;
+          align-items: center;
+          justify-content: center;
+          padding: 20px;
+          z-index: 50;
+        }
+        .tb-modal{
+          width: min(860px, 96vw);
+          border-radius: 18px;
+          background:
+            radial-gradient(900px 420px at 20% 0%, rgba(96,165,250,0.18), transparent 60%),
+            radial-gradient(700px 350px at 80% 10%, rgba(34,211,238,0.10), transparent 55%),
+            rgba(10,16,32,0.92);
+          border: 1px solid rgba(96,165,250,0.22);
+          box-shadow: 0 30px 80px rgba(0,0,0,0.45);
+          overflow: hidden;
+        }
+        .tb-modal-head{
+          padding: 16px 18px;
+          display:flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 10px;
+          border-bottom: 1px solid rgba(96,165,250,0.18);
+        }
+        .tb-modal-title{
+          color: rgba(255,255,255,0.96);
+          font-weight: 900;
+          letter-spacing: .3px;
+        }
+        .tb-modal-sub{
+          color: rgba(191,219,254,0.8);
+          font-size: 12px;
+          margin-top: 2px;
+        }
+        .tb-grid{
+          padding: 16px;
+          display:grid;
+          gap: 12px;
+        }
+        .tb-card{
+          border-radius: 16px;
+          background: rgba(15,23,42,0.55);
+          border: 1px solid rgba(96,165,250,0.18);
+          padding: 14px;
+        }
+        .tb-card-head{
+          display:flex;
+          align-items:center;
+          justify-content: space-between;
+          margin-bottom: 10px;
+        }
+        .tb-card-title{
+          color: rgba(255,255,255,0.92);
+          font-weight: 900;
+        }
+        .tb-help{
+          color: rgba(148,163,184,0.95);
+          font-size: 12px;
+          margin-top: 8px;
+          line-height: 1.35;
+        }
+        .tb-input, .tb-select{
+          width: 100%;
+          padding: 10px 12px;
+          border-radius: 12px;
+          border: 1px solid rgba(96,165,250,0.18);
+          background: rgba(2,6,23,0.35);
+          color: rgba(255,255,255,0.92);
+          outline: none;
+          font-weight: 700;
+        }
+        .tb-input::placeholder{ color: rgba(148,163,184,0.75); }
+        .tb-row{
+          display:grid;
+          gap: 10px;
+        }
+        .tb-token{
+          display:flex;
+          align-items:center;
+          justify-content: space-between;
+          gap: 10px;
+          padding: 10px 12px;
+          border-radius: 14px;
+          background: rgba(2,6,23,0.38);
+          border: 1px dashed rgba(147,197,253,0.32);
+          color: rgba(255,255,255,0.92);
+        }
+        .tb-mono{
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+          font-weight: 800;
+          color: rgba(191,219,254,0.95);
+        }
+        .tb-error{
+          border-color: rgba(239,68,68,0.45) !important;
+          background: rgba(127,29,29,0.15) !important;
+          color: rgba(254,202,202,0.95);
+        }
+      `}</style>
+
+      {/* TOPBAR */}
+      <div className="tb-wrap">
+        <div className="tb-inner">
+          <div className="tb-brand">
+            <div className="tb-badge">🛡️</div>
+            <div>
+              <h1 className="tb-title">LAN Security Monitor</h1>
+              <p className="tb-sub">
+                Sysmon Edition • <span>{prettyTime}</span>
+              </p>
+            </div>
+          </div>
+
+          <div className="tb-actions">
+            <span className="tb-pill">
+              <span className="dot" />
+              Env: {selectedEnv}
+            </span>
+            <button className="tb-btn" onClick={onRefresh} disabled={busy}>Refresh</button>
+            <button className="tb-btn" onClick={() => setOpen(true)}>Admin</button>
+            <button className="tb-btn primary" onClick={onOpenAI}>AI Assistant</button>
+          </div>
+        </div>
+      </div>
+
+      {/* MODAL */}
+      {open && (
+        <div className="tb-backdrop" onMouseDown={() => setOpen(false)}>
+          <div className="tb-modal" onMouseDown={(e) => e.stopPropagation()}>
+            <div className="tb-modal-head">
+              <div>
+                <div className="tb-modal-title">Admin Panel</div>
+                <div className="tb-modal-sub">Login ➜ Environments ➜ Generate token</div>
+              </div>
+              <button className="tb-btn" onClick={() => setOpen(false)}>Close</button>
+            </div>
+
+            <div className="tb-grid">
+              {/* 1) LOGIN */}
+              {!adminSession ? (
+                <div className="tb-card">
+                  <div className="tb-card-head">
+                    <div className="tb-card-title">Step 1: Admin login</div>
+                  </div>
+
+                  <div className="tb-row">
+                    <input
+                      className="tb-input"
+                      type="password"
+                      value={adminKey}
+                      onChange={(e) => setAdminKey(e.target.value)}
+                      placeholder="Enter admin key"
+                    />
+                    <button className="tb-btn primary" onClick={login} disabled={busy}>
+                      {busy ? "Logging in…" : "Login"}
+                    </button>
+                    <div className="tb-help">
+                      Admin key е само за логирање. После тоа користиме <b>session token</b>.
+                    </div>
+                  </div>
+                </div>
+              ) : (
+                <>
+                  {/* 2) ENV SELECT */}
+                  <div className="tb-card">
+                    <div className="tb-card-head">
+                      <div className="tb-card-title">Step 2: Choose environment</div>
+                      <button className="tb-btn" onClick={logout}>Logout</button>
+                    </div>
+
+                    <div className="tb-row">
+                      <select className="tb-select" value={selectedEnv} onChange={(e) => changeEnv(e.target.value)}>
+                        {envs.map((e) => (
+                          <option key={e} value={e}>{e}</option>
+                        ))}
+                      </select>
+                      <div className="tb-help">
+                        Овој env ќе се користи за dashboard филтрирање + token generation.
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* 3) CREATE ENV */}
+                  <div className="tb-card">
+                    <div className="tb-card-head">
+                      <div className="tb-card-title">Create new environment</div>
+                    </div>
+
+                    <div className="tb-row">
+                      <input
+                        className="tb-input"
+                        value={newEnvName}
+                        onChange={(e) => setNewEnvName(e.target.value)}
+                        placeholder="e.g. school-lab / staging"
+                      />
+                      <button className="tb-btn" onClick={createEnvironment} disabled={busy}>
+                        {busy ? "Creating…" : "Create"}
+                      </button>
+                    </div>
+                  </div>
+
+                  {/* 4) TOKEN */}
+                  <div className="tb-card">
+                    <div className="tb-card-head">
+                      <div className="tb-card-title">Step 3: Generate token (for clients)</div>
+                    </div>
+
+                    <div className="tb-row">
+                      <button className="tb-btn primary" onClick={generateToken} disabled={busy}>
+                        {busy ? "Generating…" : `Generate token for "${selectedEnv}"`}
+                      </button>
+
+                      {token && (
+                        <>
+                          <div className="tb-token">
+                            <div>
+                              <div style={{ fontWeight: 900, color: "rgba(255,255,255,0.92)" }}>Token</div>
+                              <div className="tb-mono">
+                                {token.slice(0, 12)}…{token.slice(-10)}
+                              </div>
+                            </div>
+                            <button className="tb-btn" onClick={copyToken}>Copy</button>
+                          </div>
+
+                          <div className="tb-help">
+                            Клиентот мора да праќа header: <b>X-Env-Token</b> со овој token на <b>/receive</b>.
+                          </div>
+                        </>
+                      )}
+                    </div>
+                  </div>
+                </>
+              )}
+
+              {error && (
+                <div className="tb-card tb-error">
+                  <div style={{ fontWeight: 900 }}>Error</div>
+                  <div style={{ marginTop: 6 }}>{error}</div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </>
+  );
+}