@rebasepro/studio 0.9.1-canary.d198c11 → 0.9.1-canary.e2fc7b6

package/dist/LogsExplorer-BCXoGREr.js

@@ -0,0 +1,298 @@
+import { useApiConfig } from "@rebasepro/app";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ArrowDownToLineIcon, Checkbox, Label, Select, SelectItem, TextField, Typography, cls, defaultBorderMixin } from "@rebasepro/ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/LogsExplorer/LogsExplorer.tsx
+var LEVEL_COLORS = {
+	debug: "text-surface-500",
+	info: "text-blue-600 dark:text-blue-500",
+	warn: "text-amber-600 dark:text-amber-500",
+	error: "text-red-600 dark:text-red-500"
+};
+var SOURCE_COLORS = {
+	api: "text-sky-600 dark:text-sky-400",
+	auth: "text-purple-600 dark:text-purple-400",
+	storage: "text-green-600 dark:text-green-500",
+	realtime: "text-orange-600 dark:text-orange-400",
+	system: "text-surface-600 dark:text-surface-400"
+};
+var idNum = (entry) => Number(entry.id.slice(4));
+var sameLogs = (a, b) => a.length === b.length && a[0]?.id === b[0]?.id && a[a.length - 1]?.id === b[b.length - 1]?.id;
+var STICK_THRESHOLD = 40;
+function LogsExplorer() {
+	const [logs, setLogs] = useState([]);
+	const [level, setLevel] = useState("all");
+	const [source, setSource] = useState("all");
+	const [searchInput, setSearchInput] = useState("");
+	const [search, setSearch] = useState("");
+	const [autoScroll, setAutoScroll] = useState(true);
+	const [error, setError] = useState(null);
+	const [newCount, setNewCount] = useState(0);
+	const [atBottom, setAtBottom] = useState(true);
+	const containerRef = useRef(null);
+	const stickRef = useRef(true);
+	const lastMaxIdRef = useRef(null);
+	const apiConfig = useApiConfig();
+	useEffect(() => {
+		const t = setTimeout(() => setSearch(searchInput), 300);
+		return () => clearTimeout(t);
+	}, [searchInput]);
+	const fetchLogs = useCallback(async () => {
+		if (!apiConfig?.apiUrl) {
+			setError("No API URL configured — cannot load logs.");
+			return;
+		}
+		try {
+			const params = new URLSearchParams();
+			if (level && level !== "all") params.set("level", level);
+			if (source && source !== "all") params.set("source", source);
+			if (search) params.set("search", search);
+			params.set("limit", "200");
+			const headers = {};
+			const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;
+			if (token) headers["Authorization"] = `Bearer ${token}`;
+			const resp = await fetch(`${apiConfig.apiUrl}/api/logs?${params}`, { headers });
+			if (!resp.ok) {
+				setError(resp.status === 401 || resp.status === 403 ? "Not authorised to read logs — an admin role is required." : `Could not load logs (HTTP ${resp.status}).`);
+				return;
+			}
+			const entries = ((await resp.json()).entries || []).slice().reverse();
+			const prevMax = lastMaxIdRef.current;
+			if (prevMax != null && !stickRef.current) {
+				const fresh = entries.filter((e) => idNum(e) > prevMax).length;
+				if (fresh > 0) setNewCount((c) => c + fresh);
+			}
+			if (entries.length > 0) lastMaxIdRef.current = idNum(entries[entries.length - 1]);
+			setLogs((prev) => sameLogs(prev, entries) ? prev : entries);
+			setError(null);
+		} catch (e) {
+			setError(e instanceof Error ? e.message : "Could not load logs.");
+		}
+	}, [
+		level,
+		source,
+		search,
+		apiConfig
+	]);
+	useEffect(() => {
+		lastMaxIdRef.current = null;
+		setNewCount(0);
+	}, [
+		level,
+		source,
+		search
+	]);
+	useEffect(() => {
+		let timeoutId = null;
+		let cancelled = false;
+		fetchLogs();
+		const scheduleNext = () => {
+			if (cancelled) return;
+			timeoutId = setTimeout(async () => {
+				if (document.visibilityState === "visible") await fetchLogs();
+				scheduleNext();
+			}, 3e3);
+		};
+		scheduleNext();
+		const handleVisibility = () => {
+			if (document.visibilityState === "visible") fetchLogs();
+		};
+		document.addEventListener("visibilitychange", handleVisibility);
+		return () => {
+			cancelled = true;
+			if (timeoutId) clearTimeout(timeoutId);
+			document.removeEventListener("visibilitychange", handleVisibility);
+		};
+	}, [fetchLogs]);
+	const scrollToBottom = useCallback(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		el.scrollTop = el.scrollHeight;
+		stickRef.current = true;
+		setAtBottom(true);
+		setNewCount(0);
+	}, []);
+	const handleScroll = useCallback(() => {
+		const el = containerRef.current;
+		if (!el) return;
+		const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_THRESHOLD;
+		stickRef.current = nearBottom;
+		setAtBottom(nearBottom);
+		if (nearBottom) setNewCount(0);
+	}, []);
+	useLayoutEffect(() => {
+		if (autoScroll && stickRef.current) {
+			const el = containerRef.current;
+			if (el) el.scrollTop = el.scrollHeight;
+		}
+	}, [logs, autoScroll]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex flex-col h-[calc(100vh-64px)] w-full bg-surface-50 dark:bg-surface-800",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("flex gap-2 p-3 border-b items-center flex-wrap shrink-0", defaultBorderMixin),
+				children: [
+					/* @__PURE__ */ jsxs(Select, {
+						value: level,
+						onValueChange: setLevel,
+						size: "small",
+						placeholder: "All Levels",
+						children: [
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "all",
+								children: "All Levels"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "debug",
+								children: "Debug"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "info",
+								children: "Info"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "warn",
+								children: "Warn"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "error",
+								children: "Error"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsxs(Select, {
+						value: source,
+						onValueChange: setSource,
+						size: "small",
+						placeholder: "All Sources",
+						children: [
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "all",
+								children: "All Sources"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "api",
+								children: "API"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "auth",
+								children: "Auth"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "storage",
+								children: "Storage"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "realtime",
+								children: "Realtime"
+							}),
+							/* @__PURE__ */ jsx(SelectItem, {
+								value: "system",
+								children: "System"
+							})
+						]
+					}),
+					/* @__PURE__ */ jsx(TextField, {
+						size: "small",
+						placeholder: "Search logs...",
+						value: searchInput,
+						onChange: (e) => setSearchInput(e.target.value),
+						className: "flex-1 min-w-[200px]"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex items-center gap-1.5 cursor-pointer ml-2",
+						children: [/* @__PURE__ */ jsx(Checkbox, {
+							id: "auto-scroll",
+							checked: autoScroll,
+							onCheckedChange: (checked) => {
+								setAutoScroll(checked);
+								if (checked) scrollToBottom();
+							},
+							size: "small",
+							padding: false
+						}), /* @__PURE__ */ jsx(Label, {
+							htmlFor: "auto-scroll",
+							className: "text-xs select-none cursor-pointer text-surface-600 dark:text-surface-400",
+							children: "Auto-scroll"
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: "ml-auto pl-4",
+						children: /* @__PURE__ */ jsxs(Typography, {
+							variant: "caption",
+							color: "secondary",
+							children: [logs.length, " entries"]
+						})
+					})
+				]
+			}),
+			error && logs.length > 0 && /* @__PURE__ */ jsx("div", {
+				className: cls("px-4 py-1.5 border-b bg-amber-50 dark:bg-amber-950/20 shrink-0", defaultBorderMixin),
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "caption",
+					className: "text-amber-700 dark:text-amber-400",
+					children: error
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "relative flex-1 min-h-0",
+				children: [/* @__PURE__ */ jsxs("div", {
+					ref: containerRef,
+					onScroll: handleScroll,
+					className: "h-full overflow-auto py-2",
+					children: [logs.map((log) => /* @__PURE__ */ jsxs("div", {
+						className: cls("flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors", defaultBorderMixin),
+						children: [
+							/* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								color: "secondary",
+								className: "w-[72px] shrink-0 font-mono",
+								children: new Date(log.timestamp).toLocaleTimeString()
+							}),
+							/* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								className: cls("w-[48px] shrink-0 uppercase font-semibold font-mono", LEVEL_COLORS[log.level] || "text-surface-500"),
+								children: log.level
+							}),
+							/* @__PURE__ */ jsxs(Typography, {
+								variant: "body2",
+								className: cls("w-[80px] shrink-0 font-mono", SOURCE_COLORS[log.source] || "text-surface-500"),
+								children: [
+									"[",
+									log.source,
+									"]"
+								]
+							}),
+							/* @__PURE__ */ jsx(Typography, {
+								variant: "body2",
+								className: "flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100",
+								children: log.message
+							})
+						]
+					}, log.id)), logs.length === 0 && /* @__PURE__ */ jsx("div", {
+						className: "p-8 text-center",
+						children: /* @__PURE__ */ jsx(Typography, {
+							variant: "body2",
+							className: error ? "text-red-600 dark:text-red-500" : void 0,
+							color: error ? void 0 : "secondary",
+							children: error ?? "No log entries yet. Logs will appear here as requests come in."
+						})
+					})]
+				}), autoScroll && !atBottom && newCount > 0 && /* @__PURE__ */ jsxs("button", {
+					onClick: scrollToBottom,
+					className: "absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 rounded-full bg-primary text-white text-xs font-medium pl-2.5 pr-3 py-1.5 shadow-md hover:bg-primary-dark transition-colors",
+					children: [
+						/* @__PURE__ */ jsx(ArrowDownToLineIcon, { size: 14 }),
+						newCount,
+						" new ",
+						newCount === 1 ? "entry" : "entries"
+					]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { LogsExplorer };
+
+//# sourceMappingURL=LogsExplorer-BCXoGREr.js.map

package/dist/LogsExplorer-BCXoGREr.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogsExplorer-BCXoGREr.js","names":[],"sources":["../src/components/LogsExplorer/LogsExplorer.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from \"react\";\nimport { ArrowDownToLineIcon, Checkbox, cls, defaultBorderMixin, Label, Select, SelectItem, TextField, Typography } from \"@rebasepro/ui\";\nimport { useApiConfig } from \"@rebasepro/app\";\n\ninterface LogEntry {\n    id: string;\n    timestamp: string;\n    level: \"debug\" | \"info\" | \"warn\" | \"error\";\n    source: \"api\" | \"auth\" | \"storage\" | \"realtime\" | \"system\";\n    message: string;\n    metadata?: Record<string, unknown>;\n}\n\nconst LEVEL_COLORS: Record<string, string> = {\n    debug: \"text-surface-500\",\n    info: \"text-blue-600 dark:text-blue-500\",\n    warn: \"text-amber-600 dark:text-amber-500\",\n    error: \"text-red-600 dark:text-red-500\"\n};\n\nconst SOURCE_COLORS: Record<string, string> = {\n    api: \"text-sky-600 dark:text-sky-400\",\n    auth: \"text-purple-600 dark:text-purple-400\",\n    storage: \"text-green-600 dark:text-green-500\",\n    realtime: \"text-orange-600 dark:text-orange-400\",\n    system: \"text-surface-600 dark:text-surface-400\"\n};\n\n// Ids are `log_<n>` with a monotonic counter, so numeric comparison tells\n// old entries from new ones across polls.\nconst idNum = (entry: LogEntry): number => Number(entry.id.slice(\"log_\".length));\n\n// The window is contiguous and ordered, so identical ends mean identical content.\nconst sameLogs = (a: LogEntry[], b: LogEntry[]): boolean =>\n    a.length === b.length &&\n    a[0]?.id === b[0]?.id &&\n    a[a.length - 1]?.id === b[b.length - 1]?.id;\n\n// How close to the bottom edge still counts as \"at the bottom\".\nconst STICK_THRESHOLD = 40;\n\nexport function LogsExplorer() {\n    const [logs, setLogs] = useState<LogEntry[]>([]);\n    const [level, setLevel] = useState<string>(\"all\");\n    const [source, setSource] = useState<string>(\"all\");\n    const [searchInput, setSearchInput] = useState(\"\");\n    const [search, setSearch] = useState(\"\");\n    const [autoScroll, setAutoScroll] = useState(true);\n    const [error, setError] = useState<string | null>(null);\n    // Entries that arrived while the user was scrolled away from the bottom.\n    const [newCount, setNewCount] = useState(0);\n    const [atBottom, setAtBottom] = useState(true);\n    const containerRef = useRef<HTMLDivElement>(null);\n    // Whether the view is stuck to the bottom right now. A ref, not state:\n    // the scroll handler and the fetch loop both read it synchronously.\n    const stickRef = useRef(true);\n    const lastMaxIdRef = useRef<number | null>(null);\n    const apiConfig = useApiConfig();\n\n    // Debounce the search box so typing doesn't refetch per keystroke.\n    useEffect(() => {\n        const t = setTimeout(() => setSearch(searchInput), 300);\n        return () => clearTimeout(t);\n    }, [searchInput]);\n\n    const fetchLogs = useCallback(async () => {\n        if (!apiConfig?.apiUrl) {\n            setError(\"No API URL configured — cannot load logs.\");\n            return;\n        }\n        try {\n            const params = new URLSearchParams();\n            if (level && level !== \"all\") params.set(\"level\", level);\n            if (source && source !== \"all\") params.set(\"source\", source);\n            if (search) params.set(\"search\", search);\n            params.set(\"limit\", \"200\");\n\n            // Logs are admin-only, so the request must carry the auth token. The\n            // URL is absolute: a relative one would resolve against the frontend\n            // origin, which serves index.html rather than the API.\n            const headers: Record<string, string> = {};\n            const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;\n            if (token) headers[\"Authorization\"] = `Bearer ${token}`;\n\n            const resp = await fetch(`${apiConfig.apiUrl}/api/logs?${params}`, { headers });\n            if (!resp.ok) {\n                setError(resp.status === 401 || resp.status === 403\n                    ? \"Not authorised to read logs — an admin role is required.\"\n                    : `Could not load logs (HTTP ${resp.status}).`);\n                return;\n            }\n            const data: { entries?: LogEntry[] } = await resp.json();\n            // The API returns newest-first; the view tails like a terminal, so\n            // flip to chronological order (newest at the bottom).\n            const entries = (data.entries || []).slice().reverse();\n\n            const prevMax = lastMaxIdRef.current;\n            if (prevMax != null && !stickRef.current) {\n                const fresh = entries.filter(e => idNum(e) > prevMax).length;\n                if (fresh > 0) setNewCount(c => c + fresh);\n            }\n            if (entries.length > 0) lastMaxIdRef.current = idNum(entries[entries.length - 1]);\n\n            // Unchanged window → keep the previous array so React leaves the\n            // DOM alone (hover states and text selection survive the poll).\n            setLogs(prev => sameLogs(prev, entries) ? prev : entries);\n            setError(null);\n        } catch (e) {\n            setError(e instanceof Error ? e.message : \"Could not load logs.\");\n        }\n    }, [level, source, search, apiConfig]);\n\n    // A filter change replaces the window wholesale — \"new entries since last\n    // poll\" stops meaning anything, so the counter starts over.\n    useEffect(() => {\n        lastMaxIdRef.current = null;\n        setNewCount(0);\n    }, [level, source, search]);\n\n    useEffect(() => {\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n        let cancelled = false;\n\n        fetchLogs();\n\n        const scheduleNext = () => {\n            if (cancelled) return;\n            timeoutId = setTimeout(async () => {\n                if (document.visibilityState === \"visible\") {\n                    await fetchLogs();\n                }\n                scheduleNext();\n            }, 3000);\n        };\n\n        scheduleNext();\n\n        const handleVisibility = () => {\n            if (document.visibilityState === \"visible\") {\n                fetchLogs();\n            }\n        };\n        document.addEventListener(\"visibilitychange\", handleVisibility);\n\n        return () => {\n            cancelled = true;\n            if (timeoutId) clearTimeout(timeoutId);\n            document.removeEventListener(\"visibilitychange\", handleVisibility);\n        };\n    }, [fetchLogs]);\n\n    const scrollToBottom = useCallback(() => {\n        const el = containerRef.current;\n        if (!el) return;\n        el.scrollTop = el.scrollHeight;\n        stickRef.current = true;\n        setAtBottom(true);\n        setNewCount(0);\n    }, []);\n\n    // Stick to the bottom only while the user is already there. Scrolling up\n    // disengages; scrolling back down re-engages. Our own scrollTop writes\n    // always land at the bottom, so they can never disengage it.\n    const handleScroll = useCallback(() => {\n        const el = containerRef.current;\n        if (!el) return;\n        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_THRESHOLD;\n        stickRef.current = nearBottom;\n        setAtBottom(nearBottom);\n        if (nearBottom) setNewCount(0);\n    }, []);\n\n    useLayoutEffect(() => {\n        if (autoScroll && stickRef.current) {\n            const el = containerRef.current;\n            if (el) el.scrollTop = el.scrollHeight;\n        }\n    }, [logs, autoScroll]);\n\n    return (\n        <div className=\"flex flex-col h-[calc(100vh-64px)] w-full bg-surface-50 dark:bg-surface-800\">\n            {/* Toolbar */}\n            <div className={cls(\n                \"flex gap-2 p-3 border-b items-center flex-wrap shrink-0\",\n                defaultBorderMixin\n            )}>\n                <Select\n                    value={level}\n                    onValueChange={setLevel}\n                    size=\"small\"\n                    placeholder=\"All Levels\"\n                >\n                    <SelectItem value=\"all\">All Levels</SelectItem>\n                    <SelectItem value=\"debug\">Debug</SelectItem>\n                    <SelectItem value=\"info\">Info</SelectItem>\n                    <SelectItem value=\"warn\">Warn</SelectItem>\n                    <SelectItem value=\"error\">Error</SelectItem>\n                </Select>\n                <Select\n                    value={source}\n                    onValueChange={setSource}\n                    size=\"small\"\n                    placeholder=\"All Sources\"\n                >\n                    <SelectItem value=\"all\">All Sources</SelectItem>\n                    <SelectItem value=\"api\">API</SelectItem>\n                    <SelectItem value=\"auth\">Auth</SelectItem>\n                    <SelectItem value=\"storage\">Storage</SelectItem>\n                    <SelectItem value=\"realtime\">Realtime</SelectItem>\n                    <SelectItem value=\"system\">System</SelectItem>\n                </Select>\n                <TextField\n                    size=\"small\"\n                    placeholder=\"Search logs...\"\n                    value={searchInput}\n                    onChange={e => setSearchInput(e.target.value)}\n                    className=\"flex-1 min-w-[200px]\"\n                />\n                <div className=\"flex items-center gap-1.5 cursor-pointer ml-2\">\n                    <Checkbox\n                        id=\"auto-scroll\"\n                        checked={autoScroll}\n                        onCheckedChange={(checked: boolean) => {\n                            setAutoScroll(checked);\n                            if (checked) scrollToBottom();\n                        }}\n                        size=\"small\"\n                        padding={false}\n                    />\n                    <Label\n                        htmlFor=\"auto-scroll\"\n                        className=\"text-xs select-none cursor-pointer text-surface-600 dark:text-surface-400\"\n                    >\n                        Auto-scroll\n                    </Label>\n                </div>\n                <div className=\"ml-auto pl-4\">\n                    <Typography variant=\"caption\" color=\"secondary\">\n                        {logs.length} entries\n                    </Typography>\n                </div>\n            </div>\n\n            {/* A failing poll must stay visible even while stale logs are on\n                screen — otherwise the view quietly freezes. */}\n            {error && logs.length > 0 && (\n                <div className={cls(\n                    \"px-4 py-1.5 border-b bg-amber-50 dark:bg-amber-950/20 shrink-0\",\n                    defaultBorderMixin\n                )}>\n                    <Typography variant=\"caption\" className=\"text-amber-700 dark:text-amber-400\">\n                        {error}\n                    </Typography>\n                </div>\n            )}\n\n            {/* Log entries */}\n            <div className=\"relative flex-1 min-h-0\">\n                <div\n                    ref={containerRef}\n                    onScroll={handleScroll}\n                    className=\"h-full overflow-auto py-2\"\n                >\n                    {logs.map(log => (\n                        <div\n                            key={log.id}\n                            className={cls(\n                                \"flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors\",\n                                defaultBorderMixin\n                            )}\n                        >\n                            <Typography variant=\"body2\" color=\"secondary\" className=\"w-[72px] shrink-0 font-mono\">\n                                {new Date(log.timestamp).toLocaleTimeString()}\n                            </Typography>\n                            <Typography variant=\"body2\" className={cls(\"w-[48px] shrink-0 uppercase font-semibold font-mono\", LEVEL_COLORS[log.level] || \"text-surface-500\")}>\n                                {log.level}\n                            </Typography>\n                            <Typography variant=\"body2\" className={cls(\"w-[80px] shrink-0 font-mono\", SOURCE_COLORS[log.source] || \"text-surface-500\")}>\n                                [{log.source}]\n                            </Typography>\n                            <Typography variant=\"body2\" className=\"flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100\">\n                                {log.message}\n                            </Typography>\n                        </div>\n                    ))}\n                    {logs.length === 0 && (\n                        <div className=\"p-8 text-center\">\n                            <Typography\n                                variant=\"body2\"\n                                className={error ? \"text-red-600 dark:text-red-500\" : undefined}\n                                color={error ? undefined : \"secondary\"}\n                            >\n                                {error ?? \"No log entries yet. Logs will appear here as requests come in.\"}\n                            </Typography>\n                        </div>\n                    )}\n                </div>\n\n                {autoScroll && !atBottom && newCount > 0 && (\n                    <button\n                        onClick={scrollToBottom}\n                        className=\"absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 rounded-full bg-primary text-white text-xs font-medium pl-2.5 pr-3 py-1.5 shadow-md hover:bg-primary-dark transition-colors\"\n                    >\n                        <ArrowDownToLineIcon size={14}/>\n                        {newCount} new {newCount === 1 ? \"entry\" : \"entries\"}\n                    </button>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/index.es.js

@@ -558,7 +558,7 @@ var SchemaVisualizer = lazy(() => import("./SchemaVisualizer-D01DzU-f.js").then(
 var BranchesView = lazy(() => import("./BranchesView-DH0qnU9J.js").then((m) => ({ default: m.BranchesView })));
 var BackupsView = lazy(() => import("./BackupsView-DNS6LdVg.js").then((m) => ({ default: m.BackupsView })));
 var ApiExplorer = lazy(() => import("./ApiExplorer-B9M9-uy_.js").then((m) => ({ default: m.ApiExplorer })));
-var LogsExplorer = lazy(() => import("./LogsExplorer-Bi0bxDRx.js").then((m) => ({ default: m.LogsExplorer })));
+var LogsExplorer = lazy(() => import("./LogsExplorer-BCXoGREr.js").then((m) => ({ default: m.LogsExplorer })));
 var ApiKeysView = lazy(() => import("./ApiKeysView-Dbe5cXkS.js").then((m) => ({ default: m.ApiKeysView })));
 /**
 * Declarative component to configure the Studio in Rebase.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/studio",
   "type": "module",
-  "version": "0.9.1-canary.d198c11",
+  "version": "0.9.1-canary.e2fc7b6",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
@@ -15,19 +15,19 @@
     "pgsql-ast-parser": "12.0.2",
     "prism-react-renderer": "^2.4.1",
     "react-dropzone": "^15.0.0",
-    "@rebasepro/client": "0.9.1-canary.d198c11",
-    "@rebasepro/app": "0.9.1-canary.d198c11",
-    "@rebasepro/common": "0.9.1-canary.d198c11",
-    "@rebasepro/types": "0.9.1-canary.d198c11",
-    "@rebasepro/ui": "0.9.1-canary.d198c11",
-    "@rebasepro/utils": "0.9.1-canary.d198c11"
+    "@rebasepro/client": "0.9.1-canary.e2fc7b6",
+    "@rebasepro/common": "0.9.1-canary.e2fc7b6",
+    "@rebasepro/app": "0.9.1-canary.e2fc7b6",
+    "@rebasepro/ui": "0.9.1-canary.e2fc7b6",
+    "@rebasepro/types": "0.9.1-canary.e2fc7b6",
+    "@rebasepro/utils": "0.9.1-canary.e2fc7b6"
   },
   "peerDependencies": {
     "react": ">=19.0.0",
     "react-dom": ">=19.0.0",
     "react-router": "^7.0.0",
     "react-router-dom": "^7.0.0",
-    "@rebasepro/admin": "0.9.1-canary.d198c11"
+    "@rebasepro/admin": "0.9.1-canary.e2fc7b6"
   },
   "peerDependenciesMeta": {
     "@rebasepro/admin": {

package/src/components/LogsExplorer/LogsExplorer.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useEffect, useRef, useCallback } from "react";
-import { Select, SelectItem, TextField, Checkbox, Label, Typography, cls, defaultBorderMixin } from "@rebasepro/ui";
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { ArrowDownToLineIcon, Checkbox, cls, defaultBorderMixin, Label, Select, SelectItem, TextField, Typography } from "@rebasepro/ui";
 import { useApiConfig } from "@rebasepro/app";
 
 interface LogEntry {
@@ -26,16 +26,43 @@ const SOURCE_COLORS: Record<string, string> = {
     system: "text-surface-600 dark:text-surface-400"
 };
 
+// Ids are `log_<n>` with a monotonic counter, so numeric comparison tells
+// old entries from new ones across polls.
+const idNum = (entry: LogEntry): number => Number(entry.id.slice("log_".length));
+
+// The window is contiguous and ordered, so identical ends mean identical content.
+const sameLogs = (a: LogEntry[], b: LogEntry[]): boolean =>
+    a.length === b.length &&
+    a[0]?.id === b[0]?.id &&
+    a[a.length - 1]?.id === b[b.length - 1]?.id;
+
+// How close to the bottom edge still counts as "at the bottom".
+const STICK_THRESHOLD = 40;
+
 export function LogsExplorer() {
     const [logs, setLogs] = useState<LogEntry[]>([]);
     const [level, setLevel] = useState<string>("all");
     const [source, setSource] = useState<string>("all");
+    const [searchInput, setSearchInput] = useState("");
     const [search, setSearch] = useState("");
     const [autoScroll, setAutoScroll] = useState(true);
     const [error, setError] = useState<string | null>(null);
+    // Entries that arrived while the user was scrolled away from the bottom.
+    const [newCount, setNewCount] = useState(0);
+    const [atBottom, setAtBottom] = useState(true);
     const containerRef = useRef<HTMLDivElement>(null);
+    // Whether the view is stuck to the bottom right now. A ref, not state:
+    // the scroll handler and the fetch loop both read it synchronously.
+    const stickRef = useRef(true);
+    const lastMaxIdRef = useRef<number | null>(null);
     const apiConfig = useApiConfig();
 
+    // Debounce the search box so typing doesn't refetch per keystroke.
+    useEffect(() => {
+        const t = setTimeout(() => setSearch(searchInput), 300);
+        return () => clearTimeout(t);
+    }, [searchInput]);
+
     const fetchLogs = useCallback(async () => {
         if (!apiConfig?.apiUrl) {
             setError("No API URL configured — cannot load logs.");
@@ -63,13 +90,33 @@ export function LogsExplorer() {
                 return;
             }
             const data: { entries?: LogEntry[] } = await resp.json();
-            setLogs(data.entries || []);
+            // The API returns newest-first; the view tails like a terminal, so
+            // flip to chronological order (newest at the bottom).
+            const entries = (data.entries || []).slice().reverse();
+
+            const prevMax = lastMaxIdRef.current;
+            if (prevMax != null && !stickRef.current) {
+                const fresh = entries.filter(e => idNum(e) > prevMax).length;
+                if (fresh > 0) setNewCount(c => c + fresh);
+            }
+            if (entries.length > 0) lastMaxIdRef.current = idNum(entries[entries.length - 1]);
+
+            // Unchanged window → keep the previous array so React leaves the
+            // DOM alone (hover states and text selection survive the poll).
+            setLogs(prev => sameLogs(prev, entries) ? prev : entries);
             setError(null);
         } catch (e) {
             setError(e instanceof Error ? e.message : "Could not load logs.");
         }
     }, [level, source, search, apiConfig]);
 
+    // A filter change replaces the window wholesale — "new entries since last
+    // poll" stops meaning anything, so the counter starts over.
+    useEffect(() => {
+        lastMaxIdRef.current = null;
+        setNewCount(0);
+    }, [level, source, search]);
+
     useEffect(() => {
         let timeoutId: ReturnType<typeof setTimeout> | null = null;
         let cancelled = false;
@@ -102,9 +149,31 @@ export function LogsExplorer() {
         };
     }, [fetchLogs]);
 
-    useEffect(() => {
-        if (autoScroll && containerRef.current) {
-            containerRef.current.scrollTop = containerRef.current.scrollHeight;
+    const scrollToBottom = useCallback(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        el.scrollTop = el.scrollHeight;
+        stickRef.current = true;
+        setAtBottom(true);
+        setNewCount(0);
+    }, []);
+
+    // Stick to the bottom only while the user is already there. Scrolling up
+    // disengages; scrolling back down re-engages. Our own scrollTop writes
+    // always land at the bottom, so they can never disengage it.
+    const handleScroll = useCallback(() => {
+        const el = containerRef.current;
+        if (!el) return;
+        const nearBottom = el.scrollHeight - el.scrollTop - el.clientHeight < STICK_THRESHOLD;
+        stickRef.current = nearBottom;
+        setAtBottom(nearBottom);
+        if (nearBottom) setNewCount(0);
+    }, []);
+
+    useLayoutEffect(() => {
+        if (autoScroll && stickRef.current) {
+            const el = containerRef.current;
+            if (el) el.scrollTop = el.scrollHeight;
         }
     }, [logs, autoScroll]);
 
@@ -143,15 +212,18 @@ export function LogsExplorer() {
                 <TextField
                     size="small"
                     placeholder="Search logs..."
-                    value={search}
-                    onChange={e => setSearch(e.target.value)}
+                    value={searchInput}
+                    onChange={e => setSearchInput(e.target.value)}
                     className="flex-1 min-w-[200px]"
                 />
                 <div className="flex items-center gap-1.5 cursor-pointer ml-2">
                     <Checkbox
                         id="auto-scroll"
                         checked={autoScroll}
-                        onCheckedChange={setAutoScroll}
+                        onCheckedChange={(checked: boolean) => {
+                            setAutoScroll(checked);
+                            if (checked) scrollToBottom();
+                        }}
                         size="small"
                         padding={false}
                     />
@@ -168,44 +240,70 @@ export function LogsExplorer() {
                     </Typography>
                 </div>
             </div>
-            
+
+            {/* A failing poll must stay visible even while stale logs are on
+                screen — otherwise the view quietly freezes. */}
+            {error && logs.length > 0 && (
+                <div className={cls(
+                    "px-4 py-1.5 border-b bg-amber-50 dark:bg-amber-950/20 shrink-0",
+                    defaultBorderMixin
+                )}>
+                    <Typography variant="caption" className="text-amber-700 dark:text-amber-400">
+                        {error}
+                    </Typography>
+                </div>
+            )}
+
             {/* Log entries */}
-            <div
-                ref={containerRef}
-                className="flex-1 overflow-auto py-2"
-            >
-                {logs.map(log => (
-                    <div
-                        key={log.id}
-                        className={cls(
-                            "flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors",
-                            defaultBorderMixin
-                        )}
-                    >
-                        <Typography variant="body2" color="secondary" className="w-[72px] shrink-0 font-mono">
-                            {new Date(log.timestamp).toLocaleTimeString()}
-                        </Typography>
-                        <Typography variant="body2" className={cls("w-[48px] shrink-0 uppercase font-semibold font-mono", LEVEL_COLORS[log.level] || "text-surface-500")}>
-                            {log.level}
-                        </Typography>
-                        <Typography variant="body2" className={cls("w-[80px] shrink-0 font-mono", SOURCE_COLORS[log.source] || "text-surface-500")}>
-                            [{log.source}]
-                        </Typography>
-                        <Typography variant="body2" className="flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100">
-                            {log.message}
-                        </Typography>
-                    </div>
-                ))}
-                {logs.length === 0 && (
-                    <div className="p-8 text-center">
-                        <Typography
-                            variant="body2"
-                            className={error ? "text-red-600 dark:text-red-500" : undefined}
-                            color={error ? undefined : "secondary"}
+            <div className="relative flex-1 min-h-0">
+                <div
+                    ref={containerRef}
+                    onScroll={handleScroll}
+                    className="h-full overflow-auto py-2"
+                >
+                    {logs.map(log => (
+                        <div
+                            key={log.id}
+                            className={cls(
+                                "flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors",
+                                defaultBorderMixin
+                            )}
                         >
-                            {error ?? "No log entries yet. Logs will appear here as requests come in."}
-                        </Typography>
-                    </div>
+                            <Typography variant="body2" color="secondary" className="w-[72px] shrink-0 font-mono">
+                                {new Date(log.timestamp).toLocaleTimeString()}
+                            </Typography>
+                            <Typography variant="body2" className={cls("w-[48px] shrink-0 uppercase font-semibold font-mono", LEVEL_COLORS[log.level] || "text-surface-500")}>
+                                {log.level}
+                            </Typography>
+                            <Typography variant="body2" className={cls("w-[80px] shrink-0 font-mono", SOURCE_COLORS[log.source] || "text-surface-500")}>
+                                [{log.source}]
+                            </Typography>
+                            <Typography variant="body2" className="flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100">
+                                {log.message}
+                            </Typography>
+                        </div>
+                    ))}
+                    {logs.length === 0 && (
+                        <div className="p-8 text-center">
+                            <Typography
+                                variant="body2"
+                                className={error ? "text-red-600 dark:text-red-500" : undefined}
+                                color={error ? undefined : "secondary"}
+                            >
+                                {error ?? "No log entries yet. Logs will appear here as requests come in."}
+                            </Typography>
+                        </div>
+                    )}
+                </div>
+
+                {autoScroll && !atBottom && newCount > 0 && (
+                    <button
+                        onClick={scrollToBottom}
+                        className="absolute bottom-3 left-1/2 -translate-x-1/2 flex items-center gap-1.5 rounded-full bg-primary text-white text-xs font-medium pl-2.5 pr-3 py-1.5 shadow-md hover:bg-primary-dark transition-colors"
+                    >
+                        <ArrowDownToLineIcon size={14}/>
+                        {newCount} new {newCount === 1 ? "entry" : "entries"}
+                    </button>
                 )}
             </div>
         </div>

package/dist/LogsExplorer-Bi0bxDRx.js

@@ -1,225 +0,0 @@
-import { useApiConfig } from "@rebasepro/app";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { Checkbox, Label, Select, SelectItem, TextField, Typography, cls, defaultBorderMixin } from "@rebasepro/ui";
-import { jsx, jsxs } from "react/jsx-runtime";
-//#region src/components/LogsExplorer/LogsExplorer.tsx
-var LEVEL_COLORS = {
-	debug: "text-surface-500",
-	info: "text-blue-600 dark:text-blue-500",
-	warn: "text-amber-600 dark:text-amber-500",
-	error: "text-red-600 dark:text-red-500"
-};
-var SOURCE_COLORS = {
-	api: "text-sky-600 dark:text-sky-400",
-	auth: "text-purple-600 dark:text-purple-400",
-	storage: "text-green-600 dark:text-green-500",
-	realtime: "text-orange-600 dark:text-orange-400",
-	system: "text-surface-600 dark:text-surface-400"
-};
-function LogsExplorer() {
-	const [logs, setLogs] = useState([]);
-	const [level, setLevel] = useState("all");
-	const [source, setSource] = useState("all");
-	const [search, setSearch] = useState("");
-	const [autoScroll, setAutoScroll] = useState(true);
-	const [error, setError] = useState(null);
-	const containerRef = useRef(null);
-	const apiConfig = useApiConfig();
-	const fetchLogs = useCallback(async () => {
-		if (!apiConfig?.apiUrl) {
-			setError("No API URL configured — cannot load logs.");
-			return;
-		}
-		try {
-			const params = new URLSearchParams();
-			if (level && level !== "all") params.set("level", level);
-			if (source && source !== "all") params.set("source", source);
-			if (search) params.set("search", search);
-			params.set("limit", "200");
-			const headers = {};
-			const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;
-			if (token) headers["Authorization"] = `Bearer ${token}`;
-			const resp = await fetch(`${apiConfig.apiUrl}/api/logs?${params}`, { headers });
-			if (!resp.ok) {
-				setError(resp.status === 401 || resp.status === 403 ? "Not authorised to read logs — an admin role is required." : `Could not load logs (HTTP ${resp.status}).`);
-				return;
-			}
-			setLogs((await resp.json()).entries || []);
-			setError(null);
-		} catch (e) {
-			setError(e instanceof Error ? e.message : "Could not load logs.");
-		}
-	}, [
-		level,
-		source,
-		search,
-		apiConfig
-	]);
-	useEffect(() => {
-		let timeoutId = null;
-		let cancelled = false;
-		fetchLogs();
-		const scheduleNext = () => {
-			if (cancelled) return;
-			timeoutId = setTimeout(async () => {
-				if (document.visibilityState === "visible") await fetchLogs();
-				scheduleNext();
-			}, 3e3);
-		};
-		scheduleNext();
-		const handleVisibility = () => {
-			if (document.visibilityState === "visible") fetchLogs();
-		};
-		document.addEventListener("visibilitychange", handleVisibility);
-		return () => {
-			cancelled = true;
-			if (timeoutId) clearTimeout(timeoutId);
-			document.removeEventListener("visibilitychange", handleVisibility);
-		};
-	}, [fetchLogs]);
-	useEffect(() => {
-		if (autoScroll && containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight;
-	}, [logs, autoScroll]);
-	return /* @__PURE__ */ jsxs("div", {
-		className: "flex flex-col h-[calc(100vh-64px)] w-full bg-surface-50 dark:bg-surface-800",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cls("flex gap-2 p-3 border-b items-center flex-wrap shrink-0", defaultBorderMixin),
-			children: [
-				/* @__PURE__ */ jsxs(Select, {
-					value: level,
-					onValueChange: setLevel,
-					size: "small",
-					placeholder: "All Levels",
-					children: [
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "all",
-							children: "All Levels"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "debug",
-							children: "Debug"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "info",
-							children: "Info"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "warn",
-							children: "Warn"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "error",
-							children: "Error"
-						})
-					]
-				}),
-				/* @__PURE__ */ jsxs(Select, {
-					value: source,
-					onValueChange: setSource,
-					size: "small",
-					placeholder: "All Sources",
-					children: [
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "all",
-							children: "All Sources"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "api",
-							children: "API"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "auth",
-							children: "Auth"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "storage",
-							children: "Storage"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "realtime",
-							children: "Realtime"
-						}),
-						/* @__PURE__ */ jsx(SelectItem, {
-							value: "system",
-							children: "System"
-						})
-					]
-				}),
-				/* @__PURE__ */ jsx(TextField, {
-					size: "small",
-					placeholder: "Search logs...",
-					value: search,
-					onChange: (e) => setSearch(e.target.value),
-					className: "flex-1 min-w-[200px]"
-				}),
-				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1.5 cursor-pointer ml-2",
-					children: [/* @__PURE__ */ jsx(Checkbox, {
-						id: "auto-scroll",
-						checked: autoScroll,
-						onCheckedChange: setAutoScroll,
-						size: "small",
-						padding: false
-					}), /* @__PURE__ */ jsx(Label, {
-						htmlFor: "auto-scroll",
-						className: "text-xs select-none cursor-pointer text-surface-600 dark:text-surface-400",
-						children: "Auto-scroll"
-					})]
-				}),
-				/* @__PURE__ */ jsx("div", {
-					className: "ml-auto pl-4",
-					children: /* @__PURE__ */ jsxs(Typography, {
-						variant: "caption",
-						color: "secondary",
-						children: [logs.length, " entries"]
-					})
-				})
-			]
-		}), /* @__PURE__ */ jsxs("div", {
-			ref: containerRef,
-			className: "flex-1 overflow-auto py-2",
-			children: [logs.map((log) => /* @__PURE__ */ jsxs("div", {
-				className: cls("flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors", defaultBorderMixin),
-				children: [
-					/* @__PURE__ */ jsx(Typography, {
-						variant: "body2",
-						color: "secondary",
-						className: "w-[72px] shrink-0 font-mono",
-						children: new Date(log.timestamp).toLocaleTimeString()
-					}),
-					/* @__PURE__ */ jsx(Typography, {
-						variant: "body2",
-						className: cls("w-[48px] shrink-0 uppercase font-semibold font-mono", LEVEL_COLORS[log.level] || "text-surface-500"),
-						children: log.level
-					}),
-					/* @__PURE__ */ jsxs(Typography, {
-						variant: "body2",
-						className: cls("w-[80px] shrink-0 font-mono", SOURCE_COLORS[log.source] || "text-surface-500"),
-						children: [
-							"[",
-							log.source,
-							"]"
-						]
-					}),
-					/* @__PURE__ */ jsx(Typography, {
-						variant: "body2",
-						className: "flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100",
-						children: log.message
-					})
-				]
-			}, log.id)), logs.length === 0 && /* @__PURE__ */ jsx("div", {
-				className: "p-8 text-center",
-				children: /* @__PURE__ */ jsx(Typography, {
-					variant: "body2",
-					className: error ? "text-red-600 dark:text-red-500" : void 0,
-					color: error ? void 0 : "secondary",
-					children: error ?? "No log entries yet. Logs will appear here as requests come in."
-				})
-			})]
-		})]
-	});
-}
-//#endregion
-export { LogsExplorer };
-
-//# sourceMappingURL=LogsExplorer-Bi0bxDRx.js.map

package/dist/LogsExplorer-Bi0bxDRx.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"LogsExplorer-Bi0bxDRx.js","names":[],"sources":["../src/components/LogsExplorer/LogsExplorer.tsx"],"sourcesContent":["import React, { useState, useEffect, useRef, useCallback } from \"react\";\nimport { Select, SelectItem, TextField, Checkbox, Label, Typography, cls, defaultBorderMixin } from \"@rebasepro/ui\";\nimport { useApiConfig } from \"@rebasepro/app\";\n\ninterface LogEntry {\n    id: string;\n    timestamp: string;\n    level: \"debug\" | \"info\" | \"warn\" | \"error\";\n    source: \"api\" | \"auth\" | \"storage\" | \"realtime\" | \"system\";\n    message: string;\n    metadata?: Record<string, unknown>;\n}\n\nconst LEVEL_COLORS: Record<string, string> = {\n    debug: \"text-surface-500\",\n    info: \"text-blue-600 dark:text-blue-500\",\n    warn: \"text-amber-600 dark:text-amber-500\",\n    error: \"text-red-600 dark:text-red-500\"\n};\n\nconst SOURCE_COLORS: Record<string, string> = {\n    api: \"text-sky-600 dark:text-sky-400\",\n    auth: \"text-purple-600 dark:text-purple-400\",\n    storage: \"text-green-600 dark:text-green-500\",\n    realtime: \"text-orange-600 dark:text-orange-400\",\n    system: \"text-surface-600 dark:text-surface-400\"\n};\n\nexport function LogsExplorer() {\n    const [logs, setLogs] = useState<LogEntry[]>([]);\n    const [level, setLevel] = useState<string>(\"all\");\n    const [source, setSource] = useState<string>(\"all\");\n    const [search, setSearch] = useState(\"\");\n    const [autoScroll, setAutoScroll] = useState(true);\n    const [error, setError] = useState<string | null>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const apiConfig = useApiConfig();\n\n    const fetchLogs = useCallback(async () => {\n        if (!apiConfig?.apiUrl) {\n            setError(\"No API URL configured — cannot load logs.\");\n            return;\n        }\n        try {\n            const params = new URLSearchParams();\n            if (level && level !== \"all\") params.set(\"level\", level);\n            if (source && source !== \"all\") params.set(\"source\", source);\n            if (search) params.set(\"search\", search);\n            params.set(\"limit\", \"200\");\n\n            // Logs are admin-only, so the request must carry the auth token. The\n            // URL is absolute: a relative one would resolve against the frontend\n            // origin, which serves index.html rather than the API.\n            const headers: Record<string, string> = {};\n            const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;\n            if (token) headers[\"Authorization\"] = `Bearer ${token}`;\n\n            const resp = await fetch(`${apiConfig.apiUrl}/api/logs?${params}`, { headers });\n            if (!resp.ok) {\n                setError(resp.status === 401 || resp.status === 403\n                    ? \"Not authorised to read logs — an admin role is required.\"\n                    : `Could not load logs (HTTP ${resp.status}).`);\n                return;\n            }\n            const data: { entries?: LogEntry[] } = await resp.json();\n            setLogs(data.entries || []);\n            setError(null);\n        } catch (e) {\n            setError(e instanceof Error ? e.message : \"Could not load logs.\");\n        }\n    }, [level, source, search, apiConfig]);\n\n    useEffect(() => {\n        let timeoutId: ReturnType<typeof setTimeout> | null = null;\n        let cancelled = false;\n\n        fetchLogs();\n\n        const scheduleNext = () => {\n            if (cancelled) return;\n            timeoutId = setTimeout(async () => {\n                if (document.visibilityState === \"visible\") {\n                    await fetchLogs();\n                }\n                scheduleNext();\n            }, 3000);\n        };\n\n        scheduleNext();\n\n        const handleVisibility = () => {\n            if (document.visibilityState === \"visible\") {\n                fetchLogs();\n            }\n        };\n        document.addEventListener(\"visibilitychange\", handleVisibility);\n\n        return () => {\n            cancelled = true;\n            if (timeoutId) clearTimeout(timeoutId);\n            document.removeEventListener(\"visibilitychange\", handleVisibility);\n        };\n    }, [fetchLogs]);\n\n    useEffect(() => {\n        if (autoScroll && containerRef.current) {\n            containerRef.current.scrollTop = containerRef.current.scrollHeight;\n        }\n    }, [logs, autoScroll]);\n\n    return (\n        <div className=\"flex flex-col h-[calc(100vh-64px)] w-full bg-surface-50 dark:bg-surface-800\">\n            {/* Toolbar */}\n            <div className={cls(\n                \"flex gap-2 p-3 border-b items-center flex-wrap shrink-0\",\n                defaultBorderMixin\n            )}>\n                <Select\n                    value={level}\n                    onValueChange={setLevel}\n                    size=\"small\"\n                    placeholder=\"All Levels\"\n                >\n                    <SelectItem value=\"all\">All Levels</SelectItem>\n                    <SelectItem value=\"debug\">Debug</SelectItem>\n                    <SelectItem value=\"info\">Info</SelectItem>\n                    <SelectItem value=\"warn\">Warn</SelectItem>\n                    <SelectItem value=\"error\">Error</SelectItem>\n                </Select>\n                <Select\n                    value={source}\n                    onValueChange={setSource}\n                    size=\"small\"\n                    placeholder=\"All Sources\"\n                >\n                    <SelectItem value=\"all\">All Sources</SelectItem>\n                    <SelectItem value=\"api\">API</SelectItem>\n                    <SelectItem value=\"auth\">Auth</SelectItem>\n                    <SelectItem value=\"storage\">Storage</SelectItem>\n                    <SelectItem value=\"realtime\">Realtime</SelectItem>\n                    <SelectItem value=\"system\">System</SelectItem>\n                </Select>\n                <TextField\n                    size=\"small\"\n                    placeholder=\"Search logs...\"\n                    value={search}\n                    onChange={e => setSearch(e.target.value)}\n                    className=\"flex-1 min-w-[200px]\"\n                />\n                <div className=\"flex items-center gap-1.5 cursor-pointer ml-2\">\n                    <Checkbox\n                        id=\"auto-scroll\"\n                        checked={autoScroll}\n                        onCheckedChange={setAutoScroll}\n                        size=\"small\"\n                        padding={false}\n                    />\n                    <Label\n                        htmlFor=\"auto-scroll\"\n                        className=\"text-xs select-none cursor-pointer text-surface-600 dark:text-surface-400\"\n                    >\n                        Auto-scroll\n                    </Label>\n                </div>\n                <div className=\"ml-auto pl-4\">\n                    <Typography variant=\"caption\" color=\"secondary\">\n                        {logs.length} entries\n                    </Typography>\n                </div>\n            </div>\n            \n            {/* Log entries */}\n            <div\n                ref={containerRef}\n                className=\"flex-1 overflow-auto py-2\"\n            >\n                {logs.map(log => (\n                    <div\n                        key={log.id}\n                        className={cls(\n                            \"flex gap-4 px-4 py-[6px] border-b hover:bg-surface-100 dark:hover:bg-surface-900 transition-colors\",\n                            defaultBorderMixin\n                        )}\n                    >\n                        <Typography variant=\"body2\" color=\"secondary\" className=\"w-[72px] shrink-0 font-mono\">\n                            {new Date(log.timestamp).toLocaleTimeString()}\n                        </Typography>\n                        <Typography variant=\"body2\" className={cls(\"w-[48px] shrink-0 uppercase font-semibold font-mono\", LEVEL_COLORS[log.level] || \"text-surface-500\")}>\n                            {log.level}\n                        </Typography>\n                        <Typography variant=\"body2\" className={cls(\"w-[80px] shrink-0 font-mono\", SOURCE_COLORS[log.source] || \"text-surface-500\")}>\n                            [{log.source}]\n                        </Typography>\n                        <Typography variant=\"body2\" className=\"flex-1 font-mono break-all whitespace-pre-wrap text-surface-900 dark:text-surface-100\">\n                            {log.message}\n                        </Typography>\n                    </div>\n                ))}\n                {logs.length === 0 && (\n                    <div className=\"p-8 text-center\">\n                        <Typography\n                            variant=\"body2\"\n                            className={error ? \"text-red-600 dark:text-red-500\" : undefined}\n                            color={error ? undefined : \"secondary\"}\n                        >\n                            {error ?? \"No log entries yet. Logs will appear here as requests come in.\"}\n                        </Typography>\n                    </div>\n                )}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}