Index: lan-frontend/src/components/AIAssistantDrawer.jsx
===================================================================
--- lan-frontend/src/components/AIAssistantDrawer.jsx	(revision 2058e5c694bb6097866a5fe6503c519e8f74970f)
+++ lan-frontend/src/components/AIAssistantDrawer.jsx	(revision 505f39ae7b51fc1db15123d66bf06aec0dca2f62)
@@ -1,83 +1,138 @@
-import React from "react";
+import React, {useEffect, useRef, useState} from "react";
 
-import { useEffect, useRef, useState } from "react";
+export default function AIAssistantDrawer({
+                                              open,
+                                              onClose,
+                                              computers,
+                                              scope,
+                                              setScope,
+                                              apiBase = "", // ако сакаш можеш да пратиш VITE_API_BASE тука
+                                          }) {
+    const [messages, setMessages] = useState([
+        {
+            role: "assistant",
+            text: "Постави прашање за Sysmon, процеси, мрежа. Можеш да избереш компјутер (scope) горе.",
+        },
+    ]);
+    const [input, setInput] = useState("");
+    const [sending, setSending] = useState(false);
+    const bottomRef = useRef(null);
 
-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 (open) {
+            // затвори со Escape
+            const onKey = (e) => {
+                if (e.key === "Escape") onClose?.();
+            };
+            window.addEventListener("keydown", onKey);
+            return () => window.removeEventListener("keydown", onKey);
+        }
+    }, [open, onClose]);
 
-  useEffect(() => {
-    if (bottomRef.current) bottomRef.current.scrollIntoView({ behavior: "smooth" });
-  }, [messages, open]);
+    useEffect(() => {
+        if (bottomRef.current) bottomRef.current.scrollIntoView({behavior: "smooth"});
+    }, [messages, open]);
 
-  async function send() {
-    const q = input.trim();
-    if (!q || sending) return;
+    async function send() {
+        const q = input.trim();
+        if (!q || sending) return;
 
-    setInput("");
-    setMessages((m) => [...m, { role: "user", text: q }]);
-    setSending(true);
+        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);
+        try {
+            const base = (apiBase || "").replace(/\/$/, ""); // тргни trailing /
+            const url = `${base}/api/chat`;
+
+            const r = await fetch(url, {
+                method: "POST",
+                headers: {"Content-Type": "application/json"},
+                credentials: "include",
+                body: JSON.stringify({question: q, computer_name: scope || null}),
+            });
+
+
+            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)"},
+            ]);
+        } catch (e) {
+            setMessages((m) => [
+                ...m,
+                {role: "assistant", text: `Грешка: ${String(e?.message || e)}`},
+            ]);
+        } finally {
+            setSending(false);
+        }
     }
-  }
 
-  if (!open) return null;
+    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>
+    return (
+        <>
+            <div className="aiDrawer-backdrop" onMouseDown={onClose}/>
 
-        <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>
+            <aside
+                className="aiDrawer"
+                role="dialog"
+                aria-modal="true"
+                onMouseDown={(e) => e.stopPropagation()}
+            >
+                <header className="aiDrawer-head">
+                    <div>
+                        <div className="aiDrawer-title">🤖 AI Assistant</div>
+                        <div className="aiDrawer-sub">RAG over your logs</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>
+                    <button className="aiBtn" onClick={onClose} aria-label="Close">
+                        ✕
+                    </button>
+                </header>
 
-        <div className="drawer-foot">
-          <div className="row">
-            <textarea
-              className="textarea"
+                <div className="aiDrawer-toolbar">
+                    <select
+                        className="aiSelect"
+                        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 className="aiHint">
+                        Tip: “Top процеси по RAM” / “сомнителни sysmon events”
+                    </div>
+                </div>
+
+                <main className="aiDrawer-body">
+                    {messages.map((m, i) => (
+                        <div
+                            key={i}
+                            className={`aiMsg ${m.role === "user" ? "user" : "assistant"}`}
+                        >
+                            <div className="aiMsg-meta">{m.role === "user" ? "You" : "Assistant"}</div>
+                            <div className="aiMsg-text">{m.text}</div>
+                        </div>
+                    ))}
+                    <div ref={bottomRef}/>
+                </main>
+
+                <footer className="aiDrawer-foot">
+          <textarea
+              className="aiTextarea"
               rows={2}
               value={input}
@@ -85,17 +140,20 @@
               onChange={(e) => setInput(e.target.value)}
               onKeyDown={(e) => {
-                if (e.key === "Enter" && !e.shiftKey) {
-                  e.preventDefault();
-                  send();
-                }
+                  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>
-    </>
-  );
+          />
+                    <button
+                        className="aiBtn aiBtnPrimary"
+                        onClick={send}
+                        disabled={sending || !input.trim()}
+                    >
+                        {sending ? "Sending…" : "Send"}
+                    </button>
+                </footer>
+            </aside>
+        </>
+    );
 }