@rebasepro/studio 0.6.0 → 0.7.0

package/dist/{LogsExplorer-CqtKILj8.js → LogsExplorer-J4xfsuv3.js}

@@ -1,32 +1,32 @@
 import { useCallback, useEffect, useRef, useState } from "react";
-import { Checkbox, Label, Select, SelectItem, TextField } from "@rebasepro/ui";
+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: "#6c7086",
-	info: "#89b4fa",
-	warn: "#f9e2af",
-	error: "#f38ba8"
+	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: "#74c7ec",
-	auth: "#cba6f7",
-	storage: "#a6e3a1",
-	realtime: "#fab387",
-	system: "#6c7086"
+	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("");
-	const [source, setSource] = useState("");
+	const [level, setLevel] = useState("all");
+	const [source, setSource] = useState("all");
 	const [search, setSearch] = useState("");
 	const [autoScroll, setAutoScroll] = useState(true);
 	const containerRef = useRef(null);
 	const fetchLogs = useCallback(async () => {
 		try {
 			const params = new URLSearchParams();
-			if (level) params.set("level", level);
-			if (source) params.set("source", source);
+			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 resp = await fetch(`/api/logs?${params}`);
@@ -63,22 +63,9 @@ function LogsExplorer() {
 		if (autoScroll && containerRef.current) containerRef.current.scrollTop = containerRef.current.scrollHeight;
 	}, [logs, autoScroll]);
 	return /* @__PURE__ */ jsxs("div", {
-		style: {
-			display: "flex",
-			flexDirection: "column",
-			height: "calc(100vh - 64px)",
-			background: "#1e1e2e",
-			color: "#cdd6f4"
-		},
+		className: "flex flex-col h-[calc(100vh-64px)] w-full bg-surface-50 dark:bg-surface-800",
 		children: [/* @__PURE__ */ jsxs("div", {
-			style: {
-				display: "flex",
-				gap: 8,
-				padding: "8px 16px",
-				borderBottom: "1px solid #313244",
-				alignItems: "center",
-				flexWrap: "wrap"
-			},
+			className: cls("flex gap-2 p-3 border-b items-center flex-wrap shrink-0", defaultBorderMixin),
 			children: [
 				/* @__PURE__ */ jsxs(Select, {
 					value: level,
@@ -87,7 +74,7 @@ function LogsExplorer() {
 					placeholder: "All Levels",
 					children: [
 						/* @__PURE__ */ jsx(SelectItem, {
-							value: "",
+							value: "all",
 							children: "All Levels"
 						}),
 						/* @__PURE__ */ jsx(SelectItem, {
@@ -115,7 +102,7 @@ function LogsExplorer() {
 					placeholder: "All Sources",
 					children: [
 						/* @__PURE__ */ jsx(SelectItem, {
-							value: "",
+							value: "all",
 							children: "All Sources"
 						}),
 						/* @__PURE__ */ jsx(SelectItem, {
@@ -148,7 +135,7 @@ function LogsExplorer() {
 					className: "flex-1 min-w-[200px]"
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex items-center gap-1.5 cursor-pointer",
+					className: "flex items-center gap-1.5 cursor-pointer ml-2",
 					children: [/* @__PURE__ */ jsx(Checkbox, {
 						id: "auto-scroll",
 						checked: autoScroll,
@@ -157,79 +144,58 @@ function LogsExplorer() {
 						padding: false
 					}), /* @__PURE__ */ jsx(Label, {
 						htmlFor: "auto-scroll",
-						className: "text-xs select-none cursor-pointer",
+						className: "text-xs select-none cursor-pointer text-surface-600 dark:text-surface-400",
 						children: "Auto-scroll"
 					})]
 				}),
-				/* @__PURE__ */ jsxs("span", {
-					style: {
-						fontSize: 12,
-						color: "#6c7086"
-					},
-					children: [logs.length, " entries"]
+				/* @__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,
-			style: {
-				flex: 1,
-				overflow: "auto",
-				fontFamily: "monospace",
-				fontSize: 12,
-				padding: "8px 0"
-			},
+			className: "flex-1 overflow-auto py-2",
 			children: [logs.map((log) => /* @__PURE__ */ jsxs("div", {
-				style: {
-					padding: "2px 16px",
-					display: "flex",
-					gap: 8,
-					borderBottom: "1px solid #181825"
-				},
+				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("span", {
-						style: {
-							color: "#6c7086",
-							flexShrink: 0
-						},
+					/* @__PURE__ */ jsx(Typography, {
+						variant: "body2",
+						color: "secondary",
+						className: "w-[72px] shrink-0 font-mono",
 						children: new Date(log.timestamp).toLocaleTimeString()
 					}),
-					/* @__PURE__ */ jsx("span", {
-						style: {
-							color: LEVEL_COLORS[log.level] || "#cdd6f4",
-							width: 40,
-							flexShrink: 0,
-							textTransform: "uppercase",
-							fontWeight: 600
-						},
+					/* @__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("span", {
-						style: {
-							color: SOURCE_COLORS[log.source] || "#cdd6f4",
-							width: 64,
-							flexShrink: 0
-						},
+					/* @__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("span", {
-						style: {
-							color: "#cdd6f4",
-							flex: 1
-						},
+					/* @__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", {
-				style: {
-					padding: 32,
-					textAlign: "center",
-					color: "#6c7086"
-				},
-				children: "No log entries yet. Logs will appear here as requests come in."
+				className: "p-8 text-center",
+				children: /* @__PURE__ */ jsx(Typography, {
+					variant: "body2",
+					color: "secondary",
+					children: "No log entries yet. Logs will appear here as requests come in."
+				})
 			})]
 		})]
 	});
@@ -237,4 +203,4 @@ function LogsExplorer() {
 //#endregion
 export { LogsExplorer };
 
-//# sourceMappingURL=LogsExplorer-CqtKILj8.js.map
+//# sourceMappingURL=LogsExplorer-J4xfsuv3.js.map

package/dist/LogsExplorer-J4xfsuv3.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LogsExplorer-J4xfsuv3.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\";\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 containerRef = useRef<HTMLDivElement>(null);\n    const fetchLogs = useCallback(async () => {\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            const resp = await fetch(`/api/logs?${params}`);\n            if (resp.ok) {\n                const data: { entries?: LogEntry[] } = await resp.json();\n                setLogs(data.entries || []);\n            }\n        } catch {\n            /* ignore poll failures */\n        }\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    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 variant=\"body2\" color=\"secondary\">\n                            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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"}