feat(monitor): activity log with rebuild polling + warm cache details

- Rebuild: shows webhook status, then polls every 15s until PMTiles
  last-modified changes, then shows success with new size/timestamp
- Warm cache: shows HIT/MISS/error breakdown after completion
- Activity log panel with timestamps, color-coded status, scrollable
- 15-minute timeout on rebuild polling

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

src/app/(modules)/monitor/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useCallback } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 
 type MonitorData = {
   timestamp: string;
@@ -14,8 +14,10 @@ type MonitorData = {
 export default function MonitorPage() {
   const [data, setData] = useState<MonitorData | null>(null);
   const [loading, setLoading] = useState(true);
-  const [actionMsg, setActionMsg] = useState("");
   const [actionLoading, setActionLoading] = useState("");
+  const [logs, setLogs] = useState<{ time: string; type: "info" | "ok" | "error" | "wait"; msg: string }[]>([]);
+  const rebuildPrevRef = useRef<string | null>(null);
+  const pollRef = useRef<ReturnType<typeof setInterval> | null>(null);
 
   const refresh = useCallback(async () => {
     setLoading(true);
@@ -34,19 +36,82 @@ export default function MonitorPage() {
     return () => clearInterval(interval);
   }, [refresh]);
 
-  const triggerAction = async (action: string) => {
-    setActionLoading(action);
-    setActionMsg("");
+  const addLog = useCallback((type: "info" | "ok" | "error" | "wait", msg: string) => {
+    setLogs((prev) => [{ time: new Date().toLocaleTimeString("ro-RO"), type, msg }, ...prev.slice(0, 49)]);
+  }, []);
+
+  // Cleanup poll on unmount
+  useEffect(() => {
+    return () => { if (pollRef.current) clearInterval(pollRef.current); };
+  }, []);
+
+  const triggerRebuild = async () => {
+    setActionLoading("rebuild");
+    addLog("info", "Se trimite webhook la N8N...");
     try {
       const res = await fetch("/api/geoportal/monitor", {
         method: "POST",
         headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ action }),
+        body: JSON.stringify({ action: "rebuild" }),
       });
-      const result = await res.json() as { message?: string; error?: string };
-      setActionMsg(result.message ?? result.error ?? "Done");
+      const result = await res.json() as { ok?: boolean; error?: string; previousPmtiles?: { lastModified: string }; webhookStatus?: number };
+      if (!result.ok) {
+        addLog("error", result.error ?? "Eroare necunoscuta");
+        setActionLoading("");
+        return;
+      }
+      addLog("ok", `Webhook trimis (HTTP ${result.webhookStatus}). Rebuild in curs...`);
+      rebuildPrevRef.current = result.previousPmtiles?.lastModified ?? null;
+      // Poll every 15s to check if PMTiles was updated
+      if (pollRef.current) clearInterval(pollRef.current);
+      pollRef.current = setInterval(async () => {
+        try {
+          const checkRes = await fetch("/api/geoportal/monitor", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ action: "check-rebuild", previousLastModified: rebuildPrevRef.current }),
+          });
+          const check = await checkRes.json() as { changed?: boolean; current?: { size: string; lastModified: string } };
+          if (check.changed) {
+            addLog("ok", `Rebuild finalizat! PMTiles: ${check.current?.size}, actualizat: ${check.current?.lastModified}`);
+            if (pollRef.current) { clearInterval(pollRef.current); pollRef.current = null; }
+            setActionLoading("");
+            refresh();
+          }
+        } catch { /* continue polling */ }
+      }, 15_000);
+      // Timeout after 15 min
+      setTimeout(() => {
+        if (pollRef.current) {
+          clearInterval(pollRef.current);
+          pollRef.current = null;
+          addLog("error", "Timeout: rebuild nu s-a finalizat in 15 minute");
+          setActionLoading("");
+        }
+      }, 15 * 60_000);
     } catch {
-      setActionMsg("Eroare la trimitere");
+      addLog("error", "Nu s-a putut trimite webhook-ul");
+      setActionLoading("");
+    }
+  };
+
+  const triggerWarmCache = async () => {
+    setActionLoading("warm-cache");
+    addLog("info", "Se incarca tile-uri in cache...");
+    try {
+      const res = await fetch("/api/geoportal/monitor", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ action: "warm-cache" }),
+      });
+      const result = await res.json() as { ok?: boolean; error?: string; total?: number; hits?: number; misses?: number; errors?: number; message?: string };
+      if (result.ok) {
+        addLog("ok", result.message ?? "Cache warming finalizat");
+      } else {
+        addLog("error", result.error ?? "Eroare");
+      }
+    } catch {
+      addLog("error", "Eroare la warm cache");
     }
     setActionLoading("");
     setTimeout(refresh, 2000);
@@ -155,24 +220,45 @@ export default function MonitorPage() {
         ) : <Skeleton />}
       </Card>
 
-      {/* Actions */}
+      {/* Actions + Log */}
       <Card title="Actiuni">
-        <div className="flex flex-wrap gap-3">
+        <div className="flex flex-wrap gap-3 mb-4">
           <ActionButton
             label="Rebuild PMTiles"
-            description="Regenereaza tile-urile overview din PostGIS"
+            description="Regenereaza tile-urile overview din PostGIS (~8 min)"
             loading={actionLoading === "rebuild"}
-            onClick={() => triggerAction("rebuild")}
+            onClick={triggerRebuild}
           />
           <ActionButton
             label="Warm Cache"
             description="Pre-incarca tile-uri frecvente in nginx cache"
             loading={actionLoading === "warm-cache"}
-            onClick={() => triggerAction("warm-cache")}
+            onClick={triggerWarmCache}
           />
         </div>
-        {actionMsg && (
-          <p className="mt-3 text-sm px-3 py-2 rounded bg-muted">{actionMsg}</p>
+        {logs.length > 0 && (
+          <div className="border border-border rounded-lg overflow-hidden">
+            <div className="flex items-center justify-between px-3 py-2 bg-muted/50 border-b border-border">
+              <span className="text-xs font-medium text-muted-foreground">Log activitate</span>
+              <button onClick={() => setLogs([])} className="text-xs text-muted-foreground hover:text-foreground">Sterge</button>
+            </div>
+            <div className="max-h-48 overflow-y-auto">
+              {logs.map((log, i) => (
+                <div key={i} className="flex items-start gap-2 px-3 py-1.5 text-xs border-b border-border/30 last:border-0">
+                  <span className="text-muted-foreground shrink-0 font-mono">{log.time}</span>
+                  <span className={`shrink-0 ${
+                    log.type === "ok" ? "text-green-400" :
+                    log.type === "error" ? "text-red-400" :
+                    log.type === "wait" ? "text-yellow-400" :
+                    "text-blue-400"
+                  }`}>
+                    {log.type === "ok" ? "[OK]" : log.type === "error" ? "[ERR]" : log.type === "wait" ? "[...]" : "[i]"}
+                  </span>
+                  <span>{log.msg}</span>
+                </div>
+              ))}
+            </div>
+          </div>
         )}
       </Card>