@rebasepro/studio 0.2.3 → 0.2.5

package/src/components/JSEditor/JSEditor.tsx

@@ -47,12 +47,12 @@ import { AuthSimulationSelector } from "../AuthSimulationSelector";
 
 interface ConsoleEntry {
     type: "log" | "warn" | "error" | "info";
-    args: any[];
+    args: unknown[];
     timestamp: number;
 }
 
 interface ExecutionResult {
-    value: any;
+    value: unknown;
     console: ConsoleEntry[];
     duration: number;
     error?: string;
@@ -101,7 +101,7 @@ function saveToStorage<T>(key: string, value: T) {
     } catch { /* quota */ }
 }
 
-function formatJSON(value: any): string {
+function formatJSON(value: unknown): string {
     try {
         return JSON.stringify(value, null, 2);
     } catch {
@@ -125,7 +125,7 @@ interface MatchedJSCollection {
  */
 function detectCollectionsInResult(
     code: string,
-    resultValue: any,
+    resultValue: unknown,
     collections: EntityCollection[]
 ): MatchedJSCollection[] {
     if (!resultValue || !collections?.length) return [];
@@ -151,9 +151,10 @@ function detectCollectionsInResult(
     if (mentionedSlugs.size === 0) return [];
 
     // Check if result has rows with an "id" field
-    let rows: any[] = [];
-    if (resultValue?.data && Array.isArray(resultValue.data)) {
-        rows = resultValue.data;
+    let rows: Record<string, unknown>[] = [];
+    const rv = resultValue as Record<string, unknown>;
+    if (rv?.data && Array.isArray(rv.data)) {
+        rows = rv.data;
     } else if (Array.isArray(resultValue)) {
         rows = resultValue;
     }
@@ -405,7 +406,7 @@ isScoped: true };
             info: console.info
         };
 
-        const captureConsole = (type: ConsoleEntry["type"]) => (...args: any[]) => {
+        const captureConsole = (type: ConsoleEntry["type"]) => (...args: unknown[]) => {
             consoleEntries.push({ type,
 args,
 timestamp: Date.now() });
@@ -451,7 +452,8 @@ timestamp: Date.now() });
             });
 
             // Auto-detect best view
-            if (value?.data && Array.isArray(value.data)) {
+            const resultObj = value as Record<string, unknown> | undefined;
+            if (resultObj?.data && Array.isArray(resultObj.data)) {
                 setResultView("table");
             } else if (consoleEntries.length > 0 && value === undefined) {
                 setResultView("console");
@@ -522,11 +524,12 @@ message: "Snippet saved" });
         if (!result?.value) return { columns: [] as VirtualTableColumn[],
 data: [] as Record<string, unknown>[] };
 
-        let rows: any[] = [];
-        if (result.value?.data && Array.isArray(result.value.data)) {
-            rows = result.value.data.map((entity: any) => ({
+        let rows: Record<string, unknown>[] = [];
+        const val = result.value as Record<string, unknown>;
+        if (val?.data && Array.isArray(val.data)) {
+            rows = (val.data as Record<string, unknown>[]).map((entity) => ({
                 id: entity.id,
-                ...entity.values,
+                ...(entity.values as Record<string, unknown> ?? {}),
                 ...(entity.values ? {} : entity)
             }));
         } else if (Array.isArray(result.value)) {
@@ -564,13 +567,13 @@ data: rows };
         );
     }, [result, activeTab?.code, collectionRegistry?.collections]);
 
-    const getRowEntityActions = useCallback((rowData: any): { collection: MatchedJSCollection; entityId: string | number }[] => {
+    const getRowEntityActions = useCallback((rowData: Record<string, unknown>): { collection: MatchedJSCollection; entityId: string | number }[] => {
         if (!rowData || matchedCollections.length === 0) return [];
         return matchedCollections
             .filter(mc => rowData[mc.pkColumn] != null)
             .map(mc => ({
                 collection: mc,
-                entityId: rowData[mc.pkColumn]
+                entityId: rowData[mc.pkColumn] as string | number
             }));
     }, [matchedCollections]);
 
@@ -685,7 +688,7 @@ message: t("studio_sql_markdown_copy_failed") });
                                         </IconButton>
                                     </Tooltip>
 
-                                    {result?.value && (
+                                    {result?.value != null && (
                                         <Tooltip title="Export result as JSON">
                                             <IconButton size="small" onClick={exportResult}>
                                                 <DownloadIcon size={iconSize.smallest}/>
@@ -843,7 +846,7 @@ resizable: false }, ...tableData.columns]
                                                                 cellRenderer={({ rowData, column, rowIndex }: CellRendererParams<Record<string, unknown>>) => {
                                                                     // Entity action column
                                                                     if (column.key === "__entity_action__") {
-                                                                        const rowActions = getRowEntityActions(rowData);
+                                                                        const rowActions = getRowEntityActions(rowData ?? {});
                                                                         if (rowActions.length === 0) return <div className="h-full w-full"/>;
                                                                         if (rowActions.length === 1) {
                                                                             const ra = rowActions[0];
@@ -1037,7 +1040,7 @@ id: String(ra.entityId) })}
 
 // ─── JSON Syntax Highlighting ────────────────────────────────────────
 
-function JSONHighlight({ value }: { value: any }) {
+function JSONHighlight({ value }: { value: unknown }) {
     const json = formatJSON(value);
     const { mode } = useModeController();
 

package/src/components/JSEditor/JSMonacoEditor.tsx

@@ -111,7 +111,7 @@ interface RebaseAuth {
     changePassword(oldPassword: string, newPassword: string): Promise<{ success: boolean; message: string }>;
     sendVerificationEmail(): Promise<{ success: boolean; message: string }>;
     verifyEmail(token: string): Promise<{ success: boolean; message: string }>;
-    getSessions(): Promise<any[]>;
+    getSessions(): Promise<RebaseSession[]>;
     revokeSession(sessionId: string): Promise<{ success: boolean }>;
     revokeAllSessions(): Promise<{ success: boolean }>;
     getSession(): RebaseSession | null;
@@ -129,25 +129,12 @@ interface AdminUser {
     updatedAt: string;
 }
 
-interface RebaseRole {
-    id: string;
-    name: string;
-    isAdmin: boolean;
-    defaultPermissions: Record<string, any> | null;
-    config: Record<string, any> | null;
-}
-
 interface RebaseAdmin {
     listUsers(): Promise<{ users: AdminUser[] }>;
     getUser(userId: string): Promise<{ user: AdminUser }>;
     createUser(data: { email: string; displayName?: string; password?: string; roles?: string[] }): Promise<{ user: AdminUser }>;
     updateUser(userId: string, data: { email?: string; displayName?: string; password?: string; roles?: string[] }): Promise<{ user: AdminUser }>;
     deleteUser(userId: string): Promise<{ success: boolean }>;
-    listRoles(): Promise<{ roles: RebaseRole[] }>;
-    getRole(roleId: string): Promise<{ role: RebaseRole }>;
-    createRole(data: { id: string; name: string; isAdmin?: boolean; defaultPermissions?: any; config?: any }): Promise<{ role: RebaseRole }>;
-    updateRole(roleId: string, data: { name?: string; isAdmin?: boolean; defaultPermissions?: any; config?: any }): Promise<{ role: RebaseRole }>;
-    deleteRole(roleId: string): Promise<{ success: boolean }>;
     bootstrap(): Promise<{ success: boolean; message: string; user: { uid: string; roles: string[] } }>;
 }
 
@@ -155,7 +142,7 @@ interface UploadFileProps {
     file: FileIcon;
     fileName?: string;
     path?: string;
-    metadata?: Record<string, any>;
+    metadata?: Record<string, unknown>;
     bucket?: string;
 }
 
@@ -168,7 +155,7 @@ interface UploadFileResult {
 interface DownloadConfig {
     url: string | null;
     fileNotFound?: boolean;
-    metadata?: any;
+    metadata?: Record<string, unknown>;
 }
 
 interface StorageSource {
@@ -176,7 +163,7 @@ interface StorageSource {
     getSignedUrl(pathOrUrl: string, bucket?: string): Promise<DownloadConfig>;
     getObject(path: string, bucket?: string): Promise<FileIcon | null>;
     deleteObject(path: string, bucket?: string): Promise<void>;
-    listObjects(path: string, options?: { bucket?: string; maxResults?: number; pageToken?: string }): Promise<any>;
+    listObjects(path: string, options?: { bucket?: string; maxResults?: number; pageToken?: string }): Promise<unknown>;
 }
 
 type RebaseData = {
@@ -220,9 +207,9 @@ interface RebaseClient {
     /** Storage operations */
     storage?: StorageSource;
     /** Call a custom server-side endpoint */
-    call<T = any>(endpoint: string, payload?: any): Promise<T>;
+    call<T = unknown>(endpoint: string, payload?: unknown): Promise<T>;
     /** Direct collection access (shorthand) */
-    [collectionSlug: string]: any;
+    [collectionSlug: string]: unknown;
 }
 
 /** The pre-configured client instance. Already authenticated with the current user session. */

package/src/components/LogsExplorer/LogsExplorer.tsx

@@ -0,0 +1,224 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import { Select, SelectItem, TextField, Checkbox, Label } from "@rebasepro/ui";
+
+interface LogEntry {
+    id: string;
+    timestamp: string;
+    level: "debug" | "info" | "warn" | "error";
+    source: "api" | "auth" | "storage" | "realtime" | "system";
+    message: string;
+    metadata?: Record<string, unknown>;
+}
+
+const LEVEL_COLORS: Record<string, string> = {
+    debug: "#6c7086",
+    info: "#89b4fa",
+    warn: "#f9e2af",
+    error: "#f38ba8"
+};
+
+const SOURCE_COLORS: Record<string, string> = {
+    api: "#74c7ec",
+    auth: "#cba6f7",
+    storage: "#a6e3a1",
+    realtime: "#fab387",
+    system: "#6c7086"
+};
+
+export function LogsExplorer() {
+    const [logs, setLogs] = useState<LogEntry[]>([]);
+    const [level, setLevel] = useState<string>("");
+    const [source, setSource] = useState<string>("");
+    const [search, setSearch] = useState("");
+    const [autoScroll, setAutoScroll] = useState(true);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const fetchLogs = useCallback(async () => {
+        try {
+            const params = new URLSearchParams();
+            if (level) params.set("level", level);
+            if (source) params.set("source", source);
+            if (search) params.set("search", search);
+            params.set("limit", "200");
+
+            const resp = await fetch(`/api/logs?${params}`);
+            if (resp.ok) {
+                const data: { entries?: LogEntry[] } = await resp.json();
+                setLogs(data.entries || []);
+            }
+        } catch {
+            /* ignore poll failures */
+        }
+    }, [level, source, search]);
+
+    useEffect(() => {
+        let timeoutId: ReturnType<typeof setTimeout> | null = null;
+        let cancelled = false;
+
+        fetchLogs();
+
+        const scheduleNext = () => {
+            if (cancelled) return;
+            timeoutId = setTimeout(async () => {
+                if (document.visibilityState === "visible") {
+                    await fetchLogs();
+                }
+                scheduleNext();
+            }, 3000);
+        };
+
+        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]);
+
+    const selectStyle: React.CSSProperties = {
+        background: "#313244",
+        color: "#cdd6f4",
+        border: "1px solid #45475a",
+        borderRadius: 4,
+        padding: "4px 8px"
+    };
+
+    return (
+        <div style={{
+            display: "flex",
+            flexDirection: "column",
+            height: "calc(100vh - 64px)",
+            background: "#1e1e2e",
+            color: "#cdd6f4"
+        }}>
+            {/* Toolbar */}
+            <div style={{
+                display: "flex",
+                gap: 8,
+                padding: "8px 16px",
+                borderBottom: "1px solid #313244",
+                alignItems: "center",
+                flexWrap: "wrap"
+            }}>
+                <Select
+                    value={level}
+                    onValueChange={setLevel}
+                    size="small"
+                    placeholder="All Levels"
+                >
+                    <SelectItem value="">All Levels</SelectItem>
+                    <SelectItem value="debug">Debug</SelectItem>
+                    <SelectItem value="info">Info</SelectItem>
+                    <SelectItem value="warn">Warn</SelectItem>
+                    <SelectItem value="error">Error</SelectItem>
+                </Select>
+                <Select
+                    value={source}
+                    onValueChange={setSource}
+                    size="small"
+                    placeholder="All Sources"
+                >
+                    <SelectItem value="">All Sources</SelectItem>
+                    <SelectItem value="api">API</SelectItem>
+                    <SelectItem value="auth">Auth</SelectItem>
+                    <SelectItem value="storage">Storage</SelectItem>
+                    <SelectItem value="realtime">Realtime</SelectItem>
+                    <SelectItem value="system">System</SelectItem>
+                </Select>
+                <TextField
+                    size="small"
+                    placeholder="Search logs..."
+                    value={search}
+                    onChange={e => setSearch(e.target.value)}
+                    className="flex-1 min-w-[200px]"
+                />
+                <div className="flex items-center gap-1.5 cursor-pointer">
+                    <Checkbox
+                        id="auto-scroll"
+                        checked={autoScroll}
+                        onCheckedChange={setAutoScroll}
+                        size="small"
+                        padding={false}
+                    />
+                    <Label
+                        htmlFor="auto-scroll"
+                        className="text-xs select-none cursor-pointer"
+                    >
+                        Auto-scroll
+                    </Label>
+                </div>
+                <span style={{ fontSize: 12, color: "#6c7086" }}>
+                    {logs.length} entries
+                </span>
+            </div>
+            {/* Log entries */}
+            <div
+                ref={containerRef}
+                style={{
+                    flex: 1,
+                    overflow: "auto",
+                    fontFamily: "monospace",
+                    fontSize: 12,
+                    padding: "8px 0"
+                }}
+            >
+                {logs.map(log => (
+                    <div
+                        key={log.id}
+                        style={{
+                            padding: "2px 16px",
+                            display: "flex",
+                            gap: 8,
+                            borderBottom: "1px solid #181825"
+                        }}
+                    >
+                        <span style={{ color: "#6c7086", flexShrink: 0 }}>
+                            {new Date(log.timestamp).toLocaleTimeString()}
+                        </span>
+                        <span style={{
+                            color: LEVEL_COLORS[log.level] || "#cdd6f4",
+                            width: 40,
+                            flexShrink: 0,
+                            textTransform: "uppercase",
+                            fontWeight: 600
+                        }}>
+                            {log.level}
+                        </span>
+                        <span style={{
+                            color: SOURCE_COLORS[log.source] || "#cdd6f4",
+                            width: 64,
+                            flexShrink: 0
+                        }}>
+                            [{log.source}]
+                        </span>
+                        <span style={{ color: "#cdd6f4", flex: 1 }}>
+                            {log.message}
+                        </span>
+                    </div>
+                ))}
+                {logs.length === 0 && (
+                    <div style={{
+                        padding: 32,
+                        textAlign: "center",
+                        color: "#6c7086"
+                    }}>
+                        No log entries yet. Logs will appear here as requests come in.
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/RebaseStudio.tsx

@@ -13,6 +13,7 @@ const CronJobsView = lazy(() => import("./CronJobs/CronJobsView").then(m => ({ d
 const SchemaVisualizer = lazy(() => import("./SchemaVisualizer/SchemaVisualizer").then(m => ({ default: m.SchemaVisualizer })));
 const BranchesView = lazy(() => import("./Branches/BranchesView").then(m => ({ default: m.BranchesView })));
 const ApiExplorer = lazy(() => import("./ApiExplorer/ApiExplorer").then(m => ({ default: m.ApiExplorer })));
+const LogsExplorer = lazy(() => import("./LogsExplorer/LogsExplorer").then(m => ({ default: m.LogsExplorer })));
 
 import { StudioHomePage } from "./StudioHomePage";
 
@@ -33,7 +34,7 @@ export function RebaseStudio({ tools, homePage }: RebaseStudioConfig) {
 
     const devViews: AppView[] = useMemo(() => {
         const views: AppView[] = [];
-        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "api"];
+        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "api", "logs"];
         const suspense = (el: React.ReactNode) => <Suspense fallback={<CircularProgressCenter/>}>{el}</Suspense>;
 
         if (activeTools.includes("sql")) {
@@ -99,6 +100,14 @@ group: "API",
 icon: "BookOpen",
 description: "Interactive API documentation and testing",
 view: suspense(<ApiExplorer/>) });
+        }
+        if (activeTools.includes("logs")) {
+            views.push({ slug: "logs",
+name: "Logs Explorer",
+group: "Database",
+icon: "Activity",
+description: "Real-time system and query logs",
+view: suspense(<LogsExplorer/>) });
         }
         // Note: "schema" tool is auto-injected by RebaseShell when collectionEditor is enabled.
         // It is NOT registered here anymore.

package/src/components/SQLEditor/SQLEditor.tsx

@@ -66,10 +66,31 @@ const QueryLoadingView = () => {
 
     useEffect(() => {
         const start = Date.now();
-        const interval = setInterval(() => {
-            setElapsed(Date.now() - start);
-        }, 100);
-        return () => clearInterval(interval);
+        let timeoutId: ReturnType<typeof setTimeout> | null = null;
+        let cancelled = false;
+
+        const tick = () => {
+            if (cancelled) return;
+            if (document.visibilityState === "visible") {
+                setElapsed(Date.now() - start);
+            }
+            timeoutId = setTimeout(tick, 100);
+        };
+
+        tick();
+
+        const handleVisibility = () => {
+            if (document.visibilityState === "visible") {
+                setElapsed(Date.now() - start);
+            }
+        };
+        document.addEventListener("visibilitychange", handleVisibility);
+
+        return () => {
+            cancelled = true;
+            if (timeoutId) clearTimeout(timeoutId);
+            document.removeEventListener("visibilitychange", handleVisibility);
+        };
     }, []);
 
     return (
@@ -1054,7 +1075,7 @@ resizable: false }, ...dataColumns]
                         cellRenderer={({ rowData, column, rowIndex }) => {
                             // Dedicated collection action column
                             if (column.key === "__cms_action__") {
-                                const rowActions = getRowEntityActions(rowData);
+                                const rowActions = getRowEntityActions(rowData ?? {});
                                 if (rowActions.length === 0) {
                                     return <div className="h-full w-full"/>;
                                 }
@@ -1128,7 +1149,7 @@ id: String(ra.entityId) })}
                                 return (
                                     <FixedEditorOverlay
                                         displayValue={displayValue}
-                                        onSave={(val) => handleCellSave(val, rowData, column.key, rowIndex)}
+                                        onSave={(val) => handleCellSave(val, rowData ?? {}, column.key, rowIndex)}
                                         onCancel={() => setEditingCell(null)}
                                     />
                                 );
@@ -1137,7 +1158,7 @@ id: String(ra.entityId) })}
                             return (
                                 <div
                                     className="px-4 py-1.5 h-full flex items-center whitespace-nowrap text-[13px] text-text-primary dark:text-text-primary-dark font-mono cursor-text group/cell"
-                                    onDoubleClick={() => handleDoubleClick(rowIndex, column.key, displayValue, rowData)}
+                                    onDoubleClick={() => handleDoubleClick(rowIndex, column.key, displayValue, rowData ?? {})}
                                 >
                                     <div className="truncate flex-grow" title={displayValue}>
                                         {displayValue === "" ? <span className="text-text-disabled dark:text-text-disabled-dark italic text-[11px]">NULL</span> : displayValue}

package/src/components/StudioHomePage.tsx

@@ -34,7 +34,8 @@ const SECTIONS: StudioSection[] = [
             { path: "/schema-visualizer", name: "Schema Visualizer", description: "Interactive ERD showing tables, columns, and relationships", icon: "Network" },
             { path: "/sql", name: "SQL Console", description: "Execute raw SQL queries directly against your database", icon: "terminal" },
             { path: "/branches", name: "Branches", description: "Create and manage isolated database copies for development", icon: "GitBranch" },
-            { path: "/rls", name: "RLS Policies", description: "Configure Row Level Security for fine-grained data access", icon: "ShieldCheck" }
+            { path: "/rls", name: "RLS Policies", description: "Configure Row Level Security for fine-grained data access", icon: "ShieldCheck" },
+            { path: "/logs", name: "Logs Explorer", description: "Real-time system, query, and authentication logs", icon: "Activity" }
         ]
     },
     {