@rebasepro/studio 0.8.0 → 0.9.1-canary.09aaf62

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,9 +35,9 @@ import {
     VirtualTableColumn,
     XIcon
 } from "@rebasepro/ui";
-import { useStudioUrlController, useStudioCollectionRegistry, useStudioSideEntityController } from "@rebasepro/core";
-import { useRebaseContext, useRebaseClient, useSnackbarController, useApiConfig, useTranslation, useModeController, ErrorView, SelectableUser, IconForView } from "@rebasepro/core";
-import { EntityCollection } from "@rebasepro/types";
+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";
 import { JSEditorSidebar, JSSnippet } from "./JSEditorSidebar";
@@ -65,7 +65,7 @@ interface EditorTab {
     code: string;
 }
 
-// SelectedUser is now SelectableUser from @rebasepro/core
+// SelectedUser is now SelectableUser from @rebasepro/app
 
 // ─── Constants ───────────────────────────────────────────────────────
 
@@ -113,7 +113,7 @@ function formatJSON(value: unknown): string {
 
 interface MatchedJSCollection {
     collectionSlug: string;
-    collection: EntityCollection;
+    collection: CollectionConfig;
     pkColumn: string;
 }
 
@@ -126,7 +126,7 @@ interface MatchedJSCollection {
 function detectCollectionsInResult(
     code: string,
     resultValue: unknown,
-    collections: EntityCollection[]
+    collections: CollectionConfig[]
 ): MatchedJSCollection[] {
     if (!resultValue || !collections?.length) return [];
 
@@ -190,7 +190,7 @@ export function JSEditor() {
     const apiConfig = useApiConfig();
     const snackbar = useSnackbarController();
     const collectionRegistry = useStudioCollectionRegistry();
-    const sideEntityController = useStudioSideEntityController();
+    const sidePanelController = useStudioSidePanelController();
     const { t } = useTranslation();
 
     // User management for the "Run as" picker
@@ -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={() => {
@@ -854,7 +854,7 @@ id: String(ra.entityId) })}>
                                                                                             className="text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300"
                                                                                             onClick={(e) => {
                                                                                                 e.stopPropagation();
-                                                                                                sideEntityController.open({
+                                                                                                sidePanelController.open({
                                                                                                     path: ra.collection.collectionSlug,
                                                                                                     entityId: ra.entityId,
                                                                                                     collection: ra.collection.collection,
@@ -887,7 +887,7 @@ id: String(ra.entityId) })}>
                                                                                             key={ra.collection.collectionSlug}
                                                                                             dense
                                                                                             onClick={() => {
-                                                                                                sideEntityController.open({
+                                                                                                sidePanelController.open({
                                                                                                     path: ra.collection.collectionSlug,
                                                                                                     entityId: ra.entityId,
                                                                                                     collection: ra.collection.collection,
@@ -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.
@@ -23,11 +23,7 @@ interface MonacoTypeScriptApi {
 const REBASE_CLIENT_TYPES = `
 // ─── Rebase Client SDK Type Definitions ─────────────────────────────
 
-interface Entity<M extends Record<string, any> = any> {
-    id: string | number;
-    path: string;
-    values: M;
-}
+/** A flat database row with the id merged at the top level. */
 
 interface FindParams {
     limit?: number;
@@ -39,8 +35,8 @@ interface FindParams {
     searchString?: string;
 }
 
-interface FindResponse<M extends Record<string, any> = any> {
-    data: Entity<M>[];
+interface FindResult<M extends Record<string, any> = any> {
+    data: M[];
     meta: {
         total: number;
         limit: number;
@@ -57,55 +53,55 @@ interface QueryBuilder<M extends Record<string, any> = any> {
     limit(count: number): QueryBuilder<M>;
     offset(count: number): QueryBuilder<M>;
     search(searchString: string): QueryBuilder<M>;
-    find(): Promise<FindResponse<M>>;
-    findOne(): Promise<Entity<M> | undefined>;
+    find(): Promise<FindResult<M>>;
     count(): Promise<number>;
 }
 
 interface CollectionClient<M extends Record<string, any> = any> {
-    find(params?: FindParams): Promise<FindResponse<M>>;
-    findById(id: string | number): Promise<Entity<M> | undefined>;
-    create(data: Partial<M>, id?: string | number): Promise<Entity<M>>;
-    update(id: string | number, data: Partial<M>): Promise<Entity<M>>;
+    find(params?: FindParams): Promise<FindResult<M>>;
+    findById(id: string | number): Promise<M | undefined>;
+    create(data: Partial<M>, id?: string | number): Promise<M>;
+    update(id: string | number, data: Partial<M>): Promise<M>;
     delete(id: string | number): Promise<void>;
     where(column: keyof M & string, operator: WhereFilterOp, value: any): QueryBuilder<M>;
     orderBy(column: keyof M & string, direction?: "asc" | "desc"): QueryBuilder<M>;
     limit(count: number): QueryBuilder<M>;
     offset(count: number): QueryBuilder<M>;
     search(searchString: string): QueryBuilder<M>;
-    listen?(params: FindParams | undefined, onUpdate: (response: FindResponse<M>) => void, onError?: (error: Error) => void): () => void;
-    listenById?(id: string | number, onUpdate: (entity: Entity<M> | undefined) => void, onError?: (error: Error) => void): () => void;
+    listen?(params: FindParams | undefined, onUpdate: (response: FindResult<M>) => void, onError?: (error: Error) => void): () => void;
+    listenById?(id: string | number, onUpdate: (row: M | undefined) => void, onError?: (error: Error) => void): () => void;
     count?(params?: FindParams): Promise<number>;
 }
 
-interface RebaseUser {
+interface User {
     uid: string;
     email: string | null;
     displayName: string | null;
     photoURL: string | null;
-    emailVerified?: boolean;
-    roles?: string[];
     providerId: string;
     isAnonymous: boolean;
+    emailVerified?: boolean;
+    roles?: string[];
+    metadata?: Record<string, unknown>;
 }
 
 interface RebaseSession {
     accessToken: string;
     refreshToken: string;
     expiresAt: number;
-    user: RebaseUser;
+    user: User;
 }
 
 type AuthChangeEvent = 'SIGNED_IN' | 'SIGNED_OUT' | 'TOKEN_REFRESHED' | 'USER_UPDATED';
 
 interface RebaseAuth {
-    signInWithEmail(email: string, password: string): Promise<{ user: RebaseUser; accessToken: string; refreshToken: string }>;
-    signUp(email: string, password: string, displayName?: string): Promise<{ user: RebaseUser; accessToken: string; refreshToken: string }>;
-    signInWithGoogle(idToken: string): Promise<{ user: RebaseUser; accessToken: string; refreshToken: string }>;
+    signInWithEmail(email: string, password: string): Promise<{ user: User; accessToken: string; refreshToken: string }>;
+    signUp(email: string, password: string, displayName?: string): Promise<{ user: User; accessToken: string; refreshToken: string }>;
+    signInWithGoogle(idToken: string): Promise<{ user: User; accessToken: string; refreshToken: string }>;
     signOut(): Promise<void>;
     refreshSession(): Promise<RebaseSession>;
-    getUser(): Promise<RebaseUser>;
-    updateUser(updates: { displayName?: string; photoURL?: string }): Promise<RebaseUser>;
+    getUser(): Promise<User>;
+    updateUser(updates: { displayName?: string; photoURL?: string }): Promise<User>;
     resetPasswordForEmail(email: string): Promise<{ success: boolean; message: string }>;
     resetPassword(token: string, password: string): Promise<{ success: boolean; message: string }>;
     changePassword(oldPassword: string, newPassword: string): Promise<{ success: boolean; message: string }>;