Index: lan-frontend/src/App.jsx
===================================================================
--- lan-frontend/src/App.jsx	(revision 505f39ae7b51fc1db15123d66bf06aec0dca2f62)
+++ lan-frontend/src/App.jsx	(revision d42aac31fe37e6e42a1b0515b54b86e8706d90a8)
@@ -1,3 +1,3 @@
-import React, {useEffect, useMemo, useState} from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import "./styles/theme.css";
 
@@ -9,233 +9,268 @@
 
 export default function App() {
-    const [stats, setStats] = useState(null);
-    const [computers, setComputers] = useState([]);
-    const [loading, setLoading] = useState(true);
-    const [lastUpdated, setLastUpdated] = useState(null);
-
-    const [query, setQuery] = useState("");
-    const [status, setStatus] = useState("");
-
-    const [selectedComputer, setSelectedComputer] = useState(null);
-    const [aiOpen, setAiOpen] = useState(false);
-    const [aiScope, setAiScope] = useState(null);
-    const [selectedEnv, setSelectedEnv] = useState("default");
-
-    const [me, setMe] = useState(null);
-    const [meLoading, setMeLoading] = useState(true);
-
-    // const [openAI, setOpenAI] = useState(false);
-    // const [scope, setScope] = useState(null);
-
-
-    async function loadMe() {
-        setMeLoading(true);
-        try {
-            const r = await fetch("/api/me", {credentials: "include"});
-            if (r.ok) {
-                const data = await r.json();
-                setMe(data.user);
-            } else {
-                setMe(null);
-            }
-        } catch (e) {
-            console.error("loadMe error", e);
-            setMe(null);
-        } finally {
-            setMeLoading(false);
-        }
-    }
-
-    async function refresh() {
-        try {
-            setLoading(true);
-            const [s, c] = await Promise.all([
-                fetch("/api/stats", {credentials: "include"}).then((r) => r.json()),
-                fetch("/api/computers", {
-                    credentials: "include",
-                    headers: {"X-Env": selectedEnv},
-                }).then((r) => r.json()),
-            ]);
-
-            setStats(s);
-            setComputers(Array.isArray(c) ? c : []);
-            setLastUpdated(new Date().toISOString());
-        } catch (e) {
-            console.error("refresh error", e);
-        } finally {
-            setLoading(false);
-        }
-    }
-
-    // on mount: check session
-    useEffect(() => {
-        loadMe();
-    }, []);
-
-    // when logged in OR env changed, refresh data
-    useEffect(() => {
-        if (me) refresh();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [me, selectedEnv]);
-
-    const filtered = useMemo(() => {
-        const q = query.trim().toLowerCase();
-        return (computers || [])
-            .filter((c) => (status ? c.status === status : true))
-            .filter((c) => {
-                if (!q) return true;
-                const hay = [c.name, c.user, c.ip, c.os, c.status]
-                    .filter(Boolean)
-                    .join(" ")
-                    .toLowerCase();
-                return hay.includes(q);
-            });
-    }, [computers, query, status]);
-
-    // Gate UI
-    if (meLoading) return <div style={{padding: 20}}>Loading…</div>;
-    if (!me) return <Login onDone={loadMe}/>;
-
-    return (
-        <div className="app-wrap">
-            <TopBar
-                onOpenAI={() => setAiOpen(true)}
-                onRefresh={refresh}
-                lastUpdated={lastUpdated}
-                onEnvChange={(env) => setSelectedEnv(env)}
-                selectedEnv={selectedEnv}
-                me={me}
-                onLoggedOut={loadMe}
+  const [stats, setStats] = useState(null);
+  const [computers, setComputers] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [lastUpdated, setLastUpdated] = useState(null);
+
+  const [query, setQuery] = useState("");
+  const [status, setStatus] = useState("");
+
+  const [selectedComputer, setSelectedComputer] = useState(null);
+  const [aiOpen, setAiOpen] = useState(false);
+  const [aiScope, setAiScope] = useState(null);
+  const [selectedEnv, setSelectedEnv] = useState("default");
+
+  const [me, setMe] = useState(null);
+  const [meLoading, setMeLoading] = useState(true);
+
+  // NEW: environment setting (switch)
+  const [saveProcHistory, setSaveProcHistory] = useState(false);
+
+  async function loadMe() {
+    setMeLoading(true);
+    try {
+      const r = await fetch("/api/me", { credentials: "include" });
+      if (r.ok) {
+        const data = await r.json();
+        setMe(data.user);
+      } else {
+        setMe(null);
+      }
+    } catch (e) {
+      console.error("loadMe error", e);
+      setMe(null);
+    } finally {
+      setMeLoading(false);
+    }
+  }
+
+  async function refresh() {
+    try {
+      setLoading(true);
+      const [s, c] = await Promise.all([
+        fetch("/api/stats", { credentials: "include" }).then((r) => r.json()),
+        fetch("/api/computers", {
+          credentials: "include",
+          headers: { "X-Env": selectedEnv },
+        }).then((r) => r.json()),
+      ]);
+
+      setStats(s);
+      setComputers(Array.isArray(c) ? c : []);
+      setLastUpdated(new Date().toISOString());
+    } catch (e) {
+      console.error("refresh error", e);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  // NEW: load env settings (switch state) for selected env
+  async function loadEnvSettings(env) {
+    try {
+      // само admin ќе има пристап (ако не си admin, ќе падне во else и ќе стане false)
+      const r = await fetch(`/api/admin/env-settings/${encodeURIComponent(env)}`, {
+        credentials: "include",
+      });
+
+      if (r.ok) {
+        const data = await r.json();
+        setSaveProcHistory(!!data.save_process_history);
+      } else {
+        setSaveProcHistory(false);
+      }
+    } catch (e) {
+      console.error("loadEnvSettings error", e);
+      setSaveProcHistory(false);
+    }
+  }
+
+  // NEW: set env setting (toggle)
+  async function setEnvProcessHistory(env, enabled) {
+    // optimistic UI
+    setSaveProcHistory(enabled);
+
+    try {
+      const r = await fetch(`/api/admin/env-settings/${encodeURIComponent(env)}`, {
+        method: "POST",
+        credentials: "include",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ save_process_history: enabled }),
+      });
+
+      if (r.ok) {
+        const data = await r.json();
+        setSaveProcHistory(!!data.save_process_history);
+      } else {
+        // rollback
+        setSaveProcHistory(!enabled);
+        console.error("setEnvProcessHistory failed", await r.text());
+      }
+    } catch (e) {
+      setSaveProcHistory(!enabled);
+      console.error("setEnvProcessHistory error", e);
+    }
+  }
+
+  // on mount: check session
+  useEffect(() => {
+    loadMe();
+  }, []);
+
+  // when logged in OR env changed, refresh data + load env switch state
+  useEffect(() => {
+    if (!me) return;
+    loadEnvSettings(selectedEnv);
+    refresh();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [me, selectedEnv]);
+
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return (computers || [])
+      .filter((c) => (status ? c.status === status : true))
+      .filter((c) => {
+        if (!q) return true;
+        const hay = [c.name, c.user, c.ip, c.os, c.status]
+          .filter(Boolean)
+          .join(" ")
+          .toLowerCase();
+        return hay.includes(q);
+      });
+  }, [computers, query, status]);
+
+  // Gate UI
+  if (meLoading) return <div style={{ padding: 20 }}>Loading…</div>;
+  if (!me) return <Login onDone={loadMe} />;
+
+  return (
+    <div className="app-wrap">
+      <TopBar
+        onOpenAI={() => setAiOpen(true)}
+        onRefresh={refresh}
+        lastUpdated={lastUpdated}
+        onEnvChange={(env) => setSelectedEnv(env)}
+        selectedEnv={selectedEnv}
+        me={me}
+        onLoggedOut={loadMe}
+        // NEW props for switch:
+        saveProcHistory={saveProcHistory}
+        onToggleProcHistory={(enabled) => setEnvProcessHistory(selectedEnv, enabled)}
+      />
+
+      {/* STATS */}
+      <div className="stats-grid">
+        <div className="stat-card">
+          <div className="label">Total Computers</div>
+          <div className="value">{computers.length}</div>
+          <div className="sub">Monitored Systems</div>
+        </div>
+
+        <div className="stat-card">
+          <div className="label">Sysmon Events (24h)</div>
+          <div className="value">{stats?.total_sysmon_events ?? "—"}</div>
+          <div className="sub">Security Events</div>
+        </div>
+
+        <div className="stat-card">
+          <div className="label">Network Connections (24h)</div>
+          <div className="value">{stats?.total_network_connections ?? "—"}</div>
+          <div className="sub">Captured Connections</div>
+        </div>
+      </div>
+
+      {/* FILTERS */}
+      <div className="panel" style={{ marginBottom: 14 }}>
+        <div className="panel-head">
+          <div className="panel-title">Filters</div>
+          <div style={{ color: "var(--dim)", fontSize: 12 }}>
+            {loading ? "Refreshing…" : `${filtered.length} shown`}
+          </div>
+        </div>
+        <div className="panel-body">
+          <div className="filters">
+            <input
+              className="input"
+              value={query}
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search by name / user / ip / os…"
             />
 
-
-            {/* STATS */}
-            <div className="stats-grid">
-                <div className="stat-card">
-                    <div className="label">Total Computers</div>
-                    <div className="value">{computers.length}</div>
-                    <div className="sub">Monitored Systems</div>
-                </div>
-
-                <div className="stat-card">
-                    <div className="label">Sysmon Events (24h)</div>
-                    <div className="value">{stats?.total_sysmon_events ?? "—"}</div>
-                    <div className="sub">Security Events</div>
-                </div>
-
-                <div className="stat-card">
-                    <div className="label">Network Connections (24h)</div>
-                    <div className="value">{stats?.total_network_connections ?? "—"}</div>
-                    <div className="sub">Captured Connections</div>
-                </div>
-            </div>
-
-            {/* FILTERS */}
-            <div className="panel" style={{marginBottom: 14}}>
-                <div className="panel-head">
-                    <div className="panel-title">Filters</div>
-                    <div style={{color: "var(--dim)", fontSize: 12}}>
-                        {loading ? "Refreshing…" : `${filtered.length} shown`}
-                    </div>
-                </div>
-                <div className="panel-body">
-                    <div className="filters">
-                        <input
-                            className="input"
-                            value={query}
-                            onChange={(e) => setQuery(e.target.value)}
-                            placeholder="Search by name / user / ip / os…"
-                        />
-
-                        <select
-                            className="select"
-                            value={status}
-                            onChange={(e) => setStatus(e.target.value)}
-                        >
-                            <option value="">All status</option>
-                            <option value="online">Online</option>
-                            <option value="idle">Idle</option>
-                            <option value="offline">Offline</option>
-                        </select>
-
-                        <button className="btn primary" onClick={refresh}>
-                            Refresh
-                        </button>
-                    </div>
-                </div>
-            </div>
-
-            {/* COMPUTERS */}
-            <div className="panel">
-                <div className="panel-head">
-                    <div className="panel-title">Connected Computers</div>
-                    <div style={{display: "flex", gap: 10, alignItems: "center"}}>
-                        <span className="pill">{filtered.length} computers</span>
-                        <button
-                            className="btn"
-                            onClick={() => {
-                                setQuery("");
-                                setStatus("");
-                            }}
-                        >
-                            Reset
-                        </button>
-                    </div>
-                </div>
-                <div className="panel-body">
-                    <div className="computers-grid">
-                        {filtered.map((c) => (
-                            <ComputerCard
-                                key={c.name}
-                                c={c}
-                                onOpen={(pc) => {
-                                    setSelectedComputer(pc);
-                                    setAiScope(pc.name);
-                                }}
-                            />
-                        ))}
-                        {filtered.length === 0 && (
-                            <div style={{color: "var(--dim)"}}>
-                                No computers match filter.
-                            </div>
-                        )}
-                    </div>
-                </div>
-            </div>
-
-            {/* DETAILS MODAL */}
-            <ComputerDetailsModal
-                open={!!selectedComputer}
-                computer={selectedComputer}
-                onClose={() => setSelectedComputer(null)}
-                onAskAI={(name) => {
-                    setAiScope(name);
-                    setAiOpen(true);
+            <select
+              className="select"
+              value={status}
+              onChange={(e) => setStatus(e.target.value)}
+            >
+              <option value="">All status</option>
+              <option value="online">Online</option>
+              <option value="idle">Idle</option>
+              <option value="offline">Offline</option>
+            </select>
+
+            <button className="btn primary" onClick={refresh}>
+              Refresh
+            </button>
+          </div>
+        </div>
+      </div>
+
+      {/* COMPUTERS */}
+      <div className="panel">
+        <div className="panel-head">
+          <div className="panel-title">Connected Computers</div>
+          <div style={{ display: "flex", gap: 10, alignItems: "center" }}>
+            <span className="pill">{filtered.length} computers</span>
+            <button
+              className="btn"
+              onClick={() => {
+                setQuery("");
+                setStatus("");
+              }}
+            >
+              Reset
+            </button>
+          </div>
+        </div>
+        <div className="panel-body">
+          <div className="computers-grid">
+            {filtered.map((c) => (
+              <ComputerCard
+                key={c.name}
+                c={c}
+                onOpen={(pc) => {
+                  setSelectedComputer(pc);
+                  setAiScope(pc.name);
                 }}
-            />
-
-            {/* AI DRAWER */}
-            {/*<button onClick={() => setOpenAI(true)}>AI</button>*/}
-
-            {/*<AIAssistantDrawer*/}
-            {/*    open={openAI}*/}
-            {/*    onClose={() => setOpenAI(false)}*/}
-            {/*    computers={computers}*/}
-            {/*    scope={scope}*/}
-            {/*    setScope={setScope}*/}
-            {/*    apiBase={import.meta.env.VITE_API_BASE}*/}
-            {/*/>*/}
-
-            <AIAssistantDrawer
-                open={aiOpen}
-                onClose={() => setAiOpen(false)}
-                computers={computers}
-                scope={aiScope}
-                setScope={setAiScope}
-                apiBase={import.meta.env.VITE_API_BASE}
-            />
-
-
-        </div>
-    );
+              />
+            ))}
+            {filtered.length === 0 && (
+              <div style={{ color: "var(--dim)" }}>No computers match filter.</div>
+            )}
+          </div>
+        </div>
+      </div>
+
+      {/* DETAILS MODAL */}
+      <ComputerDetailsModal
+        open={!!selectedComputer}
+        computer={selectedComputer}
+        onClose={() => setSelectedComputer(null)}
+        onAskAI={(name) => {
+          setAiScope(name);
+          setAiOpen(true);
+        }}
+      />
+
+      {/* AI DRAWER */}
+      <AIAssistantDrawer
+        open={aiOpen}
+        onClose={() => setAiOpen(false)}
+        computers={computers}
+        scope={aiScope}
+        setScope={setAiScope}
+        apiBase={import.meta.env.VITE_API_BASE}
+      />
+    </div>
+  );
 }
Index: lan-frontend/src/components/AIAssistantDrawer.jsx
===================================================================
--- lan-frontend/src/components/AIAssistantDrawer.jsx	(revision 505f39ae7b51fc1db15123d66bf06aec0dca2f62)
+++ lan-frontend/src/components/AIAssistantDrawer.jsx	(revision d42aac31fe37e6e42a1b0515b54b86e8706d90a8)
@@ -55,16 +55,28 @@
 
             const data = await r.json().catch(() => ({}));
+            // if (!r.ok) {
+            //     setMessages((m) => [...m, {
+            //         role: "assistant",
+            //         text: `Error ${r.status}: ${data.error || "Request failed"}`
+            //     }]);
+            // } else {
+            //     setMessages((m) => [...m, {role: "assistant", text: data.answer || "(no answer)"}]);
+            // }
+            // setMessages((m) => [
+            //     ...m,
+            //     {role: "assistant", text: data.answer || "(no answer)"},
+            // ]);
             if (!r.ok) {
-                setMessages((m) => [...m, {
-                    role: "assistant",
-                    text: `Error ${r.status}: ${data.error || "Request failed"}`
-                }]);
+                setMessages((m) => [
+                    ...m,
+                    {role: "assistant", text: `Error ${r.status}: ${data.error || "Request failed"}`},
+                ]);
             } else {
-                setMessages((m) => [...m, {role: "assistant", text: data.answer || "(no answer)"}]);
+                setMessages((m) => [
+                    ...m,
+                    {role: "assistant", text: data.answer || "(no answer)"},
+                ]);
             }
-            setMessages((m) => [
-                ...m,
-                {role: "assistant", text: data.answer || "(no answer)"},
-            ]);
+
         } catch (e) {
             setMessages((m) => [
Index: lan-frontend/src/components/TopBar.jsx
===================================================================
--- lan-frontend/src/components/TopBar.jsx	(revision 505f39ae7b51fc1db15123d66bf06aec0dca2f62)
+++ lan-frontend/src/components/TopBar.jsx	(revision d42aac31fe37e6e42a1b0515b54b86e8706d90a8)
@@ -1,4 +1,4 @@
 import React, { useEffect, useMemo, useState } from "react";
-import logo from "../assets/ChatGPT_Image_Jan_21__2026__01_20_04_PM-removebg-preview (1).png";
+import logo from "../assets/logo_image.png";
 
 export default function TopBar({
@@ -10,4 +10,8 @@
   me,
   onLoggedOut, // optional callback (App loadMe)
+
+  // NEW: process history switch (controlled by App)
+  saveProcHistory = false,
+  onToggleProcHistory, // (enabled:boolean) => void
 }) {
   const [open, setOpen] = useState(false);
@@ -22,4 +26,5 @@
   const [error, setError] = useState("");
 
+  const isAdmin = (me?.role || "").toLowerCase() === "admin";
 
   // keep in sync ако App праќа selectedEnv prop
@@ -146,12 +151,4 @@
         .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;
@@ -169,4 +166,16 @@
           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)); }
+
+        .tb-switch{ display:flex; align-items:center; gap:10px; padding: 8px 12px; border-radius: 999px;
+          background: rgba(15,23,42,0.55); border: 1px solid rgba(96,165,250,0.22);
+          color: rgba(255,255,255,0.9); font-weight: 800; font-size: 12px; }
+        .tb-switch .label{ color: rgba(191,219,254,0.9); }
+        .tb-toggle{ width: 46px; height: 26px; border-radius: 999px; position: relative; border: 1px solid rgba(96,165,250,0.25);
+          background: rgba(30,41,59,0.65); cursor: pointer; transition: background .12s ease, opacity .12s ease; }
+        .tb-toggle.disabled{ opacity: .55; cursor: not-allowed; }
+        .tb-knob{ width: 22px; height: 22px; border-radius: 999px; position: absolute; top: 1px; left: 1px;
+          background: rgba(226,232,240,0.95); transition: transform .14s ease; box-shadow: 0 6px 14px rgba(0,0,0,0.22); }
+        .tb-toggle.on{ background: rgba(37,99,235,0.85); border-color: rgba(147,197,253,0.45); }
+        .tb-toggle.on .tb-knob{ transform: translateX(20px); }
 
         .tb-backdrop{ position: fixed; inset: 0; background: rgba(2,6,23,0.72); backdrop-filter: blur(6px);
@@ -202,39 +211,61 @@
       <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>
-              {me?.email && (
-                <p className="tb-sub" style={{ marginTop: 4, opacity: 0.9 }}>
-                  Signed in as <span>{me.email}</span>
-                  {me.role ? ` • ${me.role}` : ""}
-                </p>
-              )}
+          <div>
+            <img
+              src={logo}
+              alt="NETIntel logo"
+              className="netintel-logo"
+              width={150}
+              style={{ marginTop: 10 }}
+            />
+            <div style={{ marginTop: 4, fontSize: 12, color: "rgba(191,219,254,0.8)", fontWeight: 800 }}>
+              <span style={{ color: "rgba(96,165,250,0.95)" }}>{prettyTime}</span>
+              {me?.email ? (
+                <span style={{ marginLeft: 10 }}>
+                  • {me.email}
+                  {me?.role ? ` • ${me.role}` : ""}
+                </span>
+              ) : null}
             </div>
           </div>
-          <div>
-            <img
-                src={logo}
-                alt="NETIntel logo"
-                className="netintel-logo"
-                width={150}
-                style={{marginTop: 10 }}
-            />
-          </div>
-
-
 
           <div className="tb-actions">
-            <span className="tb-pill">
+            <span className="tb-pill" title="Selected environment">
               <span className="dot" />
               Env: {selectedEnv}
             </span>
+
+            {/* NEW: Save process history switch */}
+            <div className="tb-switch" title={isAdmin ? "Toggle saving process history for this environment" : "Only admin can change this"}>
+              <span className="label">Proc history</span>
+              <div
+                className={[
+                  "tb-toggle",
+                  saveProcHistory ? "on" : "",
+                  !isAdmin ? "disabled" : "",
+                ].join(" ")}
+                role="switch"
+                aria-checked={saveProcHistory ? "true" : "false"}
+                tabIndex={0}
+                onClick={() => {
+                  if (!isAdmin) return;
+                  onToggleProcHistory?.(!saveProcHistory);
+                }}
+                onKeyDown={(e) => {
+                  if (!isAdmin) return;
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault();
+                    onToggleProcHistory?.(!saveProcHistory);
+                  }
+                }}
+              >
+                <div className="tb-knob" />
+              </div>
+            </div>
+
             <button className="tb-btn" onClick={onRefresh} disabled={busy}>
               Refresh
             </button>
+
             <button
               className="tb-btn"
@@ -252,4 +283,5 @@
               Admin
             </button>
+
             <button className="tb-btn primary" onClick={onOpenAI}>
               AI Assistant
@@ -298,4 +330,6 @@
                   <div className="tb-help">
                     Овој env ќе се користи за dashboard филтрирање + token generation.
+                    <br />
+                    <b>Proc history</b> switch горе важи за тековниот env.
                   </div>
                 </div>