@rebasepro/studio 0.9.0 → 0.9.1-canary.0fce67c

package/src/components/Backups/BackupsView.tsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect, useRef, useCallback } from "react";
+import {
+    Alert,
+    Button,
+    Chip,
+    CircularProgress,
+    cls,
+    DatabaseIcon,
+    defaultBorderMixin,
+    DownloadIcon,
+    iconSize,
+    IconButton,
+    RefreshCwIcon,
+    Typography
+} from "@rebasepro/ui";
+import { useRebaseClient, useSnackbarController } from "@rebasepro/app";
+import type { BackupInfo, RebaseClient } from "@rebasepro/types";
+
+function formatSize(bytes: number | undefined): string {
+    if (bytes === undefined || bytes === null) return "—";
+    if (bytes < 1024) return `${bytes} B`;
+    if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+    if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    return `${(bytes / (1024 * 1024 * 1024)).toFixed(2)} GB`;
+}
+
+function formatDate(iso: string | undefined): string {
+    if (!iso) return "—";
+    const d = new Date(iso);
+    if (isNaN(d.getTime())) return "—";
+    return d.toLocaleString();
+}
+
+export function BackupsView() {
+    const client = useRebaseClient<RebaseClient>();
+    const snackbar = useSnackbarController();
+
+    const [backups, setBackups] = useState<BackupInfo[]>([]);
+    const [destinationKind, setDestinationKind] = useState<string>("local");
+    const [configured, setConfigured] = useState(true);
+    const [loading, setLoading] = useState(true);
+    const [downloading, setDownloading] = useState<string | null>(null);
+
+    const clientRef = useRef(client);
+    clientRef.current = client;
+    const snackbarRef = useRef(snackbar);
+    snackbarRef.current = snackbar;
+
+    const load = useCallback(async () => {
+        const c = clientRef.current;
+        if (!c?.backups) {
+            setLoading(false);
+            setConfigured(false);
+            return;
+        }
+        try {
+            const res = await c.backups.list();
+            setBackups(res.backups);
+            setDestinationKind(res.destinationKind);
+            setConfigured(res.configured);
+        } catch (e: unknown) {
+            snackbarRef.current.open({
+                type: "error",
+                message: e instanceof Error ? e.message : String(e)
+            });
+        } finally {
+            setLoading(false);
+        }
+    }, []);
+
+    useEffect(() => {
+        load();
+    }, [load]);
+
+    const handleDownload = async (backup: BackupInfo) => {
+        const c = clientRef.current;
+        if (!c?.backups) return;
+        setDownloading(backup.key);
+        try {
+            const blob = await c.backups.download(backup.key);
+            const url = URL.createObjectURL(blob);
+            const a = document.createElement("a");
+            a.href = url;
+            a.download = backup.name;
+            document.body.appendChild(a);
+            a.click();
+            a.remove();
+            URL.revokeObjectURL(url);
+        } catch (e: unknown) {
+            snackbarRef.current.open({
+                type: "error",
+                message: e instanceof Error ? e.message : String(e)
+            });
+        } finally {
+            setDownloading(null);
+        }
+    };
+
+    // Backups API not available on this client (e.g. non-Postgres backend).
+    if (!client?.backups) {
+        return (
+            <div className="flex flex-col items-center justify-center h-full gap-4 text-center p-8">
+                <DatabaseIcon size={iconSize.large} className="text-surface-300 dark:text-surface-600"/>
+                <Typography variant="h6" color="secondary">Backups Not Available</Typography>
+                <Typography variant="body2" color="disabled" className="max-w-md">
+                    The backups API is not exposed by this backend.
+                </Typography>
+            </div>
+        );
+    }
+
+    if (loading) {
+        return (
+            <div className="flex items-center justify-center h-full">
+                <CircularProgress/>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex flex-col h-full w-full overflow-hidden bg-white dark:bg-surface-950">
+            {/* Header */}
+            <div className={cls("flex items-center justify-between px-5 py-2.5 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
+                <div className="flex items-center gap-2">
+                    <DatabaseIcon size={iconSize.small} className="text-primary"/>
+                    <Typography variant="subtitle2" className="font-semibold">Backups</Typography>
+                    <Chip size="smallest" className="bg-surface-200 dark:bg-surface-700 text-surface-600 dark:text-surface-300">{backups.length}</Chip>
+                    <Chip size="smallest" className="bg-surface-100 dark:bg-surface-800 text-surface-500 dark:text-surface-400 uppercase font-mono text-[10px]">{destinationKind}</Chip>
+                </div>
+                <IconButton size="small" onClick={load} title="Refresh">
+                    <RefreshCwIcon size={iconSize.smallest}/>
+                </IconButton>
+            </div>
+
+            <div className="flex-1 overflow-y-auto p-5">
+                {!configured ? (
+                    <Alert color="info">
+                        <Typography variant="body2" className="text-[13px]">
+                            <strong>Backups are not configured.</strong> Set
+                            <code className="mx-1 px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-950 font-mono text-[12px]">BACKUP_DESTINATION</code>
+                            (a local path or an <code className="font-mono text-[12px]">s3://</code> / <code className="font-mono text-[12px]">gs://</code> URL) and create backups with
+                            <code className="mx-1 px-1.5 py-0.5 rounded bg-surface-100 dark:bg-surface-950 font-mono text-[12px]">rebase db backup</code>
+                            or a scheduled cron. See docs/backups.md.
+                        </Typography>
+                    </Alert>
+                ) : backups.length === 0 ? (
+                    <div className="flex flex-col items-center justify-center h-full gap-3 text-center">
+                        <DatabaseIcon size={iconSize.large} className="text-surface-200 dark:text-surface-700"/>
+                        <Typography variant="body2" color="disabled">
+                            No backups found yet. Run <code className="font-mono text-[12px]">rebase db backup</code> or wait for the next scheduled run.
+                        </Typography>
+                    </div>
+                ) : (
+                    <div className="space-y-2 max-w-3xl">
+                        {backups.map(backup => (
+                            <div
+                                key={backup.key}
+                                className={cls("flex items-center gap-3 px-4 py-3 rounded-lg border bg-white dark:bg-surface-900", defaultBorderMixin)}
+                            >
+                                <DatabaseIcon size={iconSize.small} className="text-surface-400 shrink-0"/>
+                                <div className="flex-1 min-w-0">
+                                    <Typography variant="body2" className="truncate font-medium font-mono text-[12px]">{backup.name}</Typography>
+                                    <Typography variant="caption" color="secondary" className="text-[11px]">
+                                        {formatDate(backup.createdAt)} · {formatSize(backup.sizeBytes)}
+                                    </Typography>
+                                </div>
+                                <Button
+                                    size="small"
+                                    variant="outlined"
+                                    onClick={() => handleDownload(backup)}
+                                    disabled={downloading === backup.key}
+                                    startIcon={downloading === backup.key
+                                        ? <CircularProgress size="smallest"/>
+                                        : <DownloadIcon size={iconSize.smallest}/>}
+                                >
+                                    {downloading === backup.key ? "Downloading…" : "Download"}
+                                </Button>
+                            </div>
+                        ))}
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/src/components/Branches/BranchesView.tsx

@@ -24,7 +24,7 @@ import {
     Trash2Icon,
     Typography
 } from "@rebasepro/ui";
-import { useRebaseContext, useSnackbarController, ConfirmationDialog } from "@rebasepro/core";
+import { useRebaseContext, useSnackbarController, ConfirmationDialog } from "@rebasepro/app";
 import { isBranchAdmin } from "@rebasepro/types";
 import type { BranchInfo } from "@rebasepro/types";
 

package/src/components/CronJobs/CronJobsView.tsx

@@ -19,7 +19,7 @@ import {
     RefreshCwIcon,
     Typography
 } from "@rebasepro/ui";
-import { useRebaseClient, useSnackbarController } from "@rebasepro/core";
+import { useRebaseClient, useSnackbarController } from "@rebasepro/app";
 import type { CronJobStatus, CronJobLogEntry } from "@rebasepro/types";
 import type { RebaseClient } from "@rebasepro/types";
 

package/src/components/JSEditor/JSEditor.tsx

@@ -35,8 +35,8 @@ import {
     VirtualTableColumn,
     XIcon
 } from "@rebasepro/ui";
-import { useStudioUrlController, useStudioCollectionRegistry, useStudioSidePanelController } from "@rebasepro/core";
-import { useRebaseContext, useRebaseClient, useSnackbarController, useApiConfig, useTranslation, useModeController, ErrorView, SelectableUser, IconForView } from "@rebasepro/core";
+import { useStudioUrlController, useStudioCollectionRegistry, useStudioSidePanelController } from "@rebasepro/app";
+import { useRebaseContext, useRebaseClient, useSnackbarController, useApiConfig, useTranslation, useModeController, ErrorView, SelectableUser, IconForView } from "@rebasepro/app";
 import { CollectionConfig } from "@rebasepro/types";
 import { createRebaseClient } from "@rebasepro/client";
 import { JSMonacoEditor } from "./JSMonacoEditor";
@@ -65,7 +65,7 @@ interface EditorTab {
     code: string;
 }
 
-// SelectedUser is now SelectableUser from @rebasepro/core
+// SelectedUser is now SelectableUser from @rebasepro/app
 
 // ─── Constants ───────────────────────────────────────────────────────
 
@@ -670,7 +670,7 @@ message: t("studio_sql_markdown_copy_failed") });
                                     </div>
                                 </div>
                                 <div className="flex shrink-0 items-center justify-end gap-1.5">
-                                    <Tooltip title="SaveIcon as snippet">
+                                    <Tooltip title="Save as snippet">
                                         <IconButton
                                             size="small"
                                             onClick={() => {
@@ -1009,9 +1009,9 @@ id: String(ra.entityId) })}
                 />
             </div>
 
-            {/* SaveIcon snippet dialog */}
+            {/* Save snippet dialog */}
             <Dialog open={showSaveDialog} onOpenChange={setShowSaveDialog}>
-                <DialogTitle>SaveIcon Snippet</DialogTitle>
+                <DialogTitle>Save Snippet</DialogTitle>
                 <DialogContent>
                     <TextField
                         label="Snippet name"

package/src/components/JSEditor/JSMonacoEditor.tsx

@@ -3,7 +3,7 @@ import React, { useRef, useEffect } from "react";
 import Editor, { Monaco, OnMount } from "@monaco-editor/react";
 import type { editor } from "monaco-editor";
 import { cls, defaultBorderMixin, FileIcon } from "@rebasepro/ui";
-import { useModeController } from "@rebasepro/core";
+import { useModeController } from "@rebasepro/app";
 
 /**
  * Shape of `monaco.languages.typescript` at runtime.

package/src/components/LogsExplorer/LogsExplorer.tsx

@@ -1,5 +1,6 @@
-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 {
     id: string;
@@ -25,14 +26,48 @@ 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.");
+            return;
+        }
         try {
             const params = new URLSearchParams();
             if (level && level !== "all") params.set("level", level);
@@ -40,14 +75,46 @@ export function LogsExplorer() {
             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 || []);
+            // Logs are admin-only, so the request must carry the auth token. The
+            // URL is absolute: a relative one would resolve against the frontend
+            // origin, which serves index.html rather than the API.
+            const headers: Record<string, string> = {};
+            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 data: { entries?: LogEntry[] } = await resp.json();
+            // 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);
             }
-        } catch {
-            /* ignore poll failures */
+            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(() => {
@@ -82,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]);
 
@@ -123,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}
                     />
@@ -148,40 +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
-                        )}
+            <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
+                            )}
+                        >
+                            <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"
                     >
-                        <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" color="secondary">
-                            No log entries yet. Logs will appear here as requests come in.
-                        </Typography>
-                    </div>
+                        <ArrowDownToLineIcon size={14}/>
+                        {newCount} new {newCount === 1 ? "entry" : "entries"}
+                    </button>
                 )}
             </div>
         </div>

package/src/components/RLSEditor/PolicyEditor.tsx

@@ -19,7 +19,7 @@ import {
     TextField,
     Typography
 } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 import { MonacoEditor } from "../SQLEditor/MonacoEditor";
 import { PostgresPolicy } from "./RLSEditor";
 
@@ -187,7 +187,9 @@ export const PolicyEditor = ({
 
     return (
         <>
-            <DialogTitle className="flex justify-between items-center w-full" variant="h6">
+            {/* Inline header: this editor renders as a full pane, not inside a Dialog,
+                so DialogTitle (Radix-bound) cannot be used here. */}
+            <Typography variant="h6" gutterBottom className="mt-8 mx-8 flex justify-between items-center w-full">
                 <div>
                     <div>{policy ? t("studio_policy_edit") : t("studio_policy_create")}</div>
                     <div className="text-sm font-normal text-text-secondary dark:text-text-secondary-dark tracking-wide mt-1">
@@ -197,7 +199,7 @@ export const PolicyEditor = ({
                 <IconButton size="small" onClick={() => setHelpOpen(true)}>
                     <HelpCircleIcon size={iconSize.smallest}/>
                 </IconButton>
-            </DialogTitle>
+            </Typography>
 
             <DialogContent className="p-4 md:p-6 border-t dark:border-surface-950 bg-surface-50 dark:bg-surface-950" includeMargin={false}>
                 <div className="max-w-4xl mx-auto">