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

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">

package/src/components/RLSEditor/RLSEditor.tsx

@@ -1,5 +1,5 @@
 
-import { useStudioCollectionRegistry } from "@rebasepro/core";
+import { useStudioCollectionRegistry } from "@rebasepro/app";
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import {
     Alert,
@@ -25,9 +25,11 @@ import {
     Trash2Icon,
     Typography
 } from "@rebasepro/ui";
-import { useRebaseContext, useSnackbarController, ErrorView, useTranslation } from "@rebasepro/core";
-import { isPostgresCollection } from "@rebasepro/types";
+import { useRebaseContext, useSnackbarController, ErrorView, useTranslation } from "@rebasepro/app";
+import { isPostgresCollectionConfig } from "@rebasepro/types";
 import { REBASE_INTERNAL_SCHEMAS, REBASE_INTERNAL_PREFIXES, JUNCTION_TABLES_SQL } from "@rebasepro/common";
+import { getPolicyNamesForRule, getPolicyNamesForRules, getPolicyOperations } from "@rebasepro/utils";
+import { resolveJunctionSpecs, getJunctionSecurityRules } from "@rebasepro/common";
 import { PolicyEditor } from "./PolicyEditor";
 
 type TableCategory = "collection" | "junction" | "internal" | "other";
@@ -387,41 +389,54 @@ export const RLSEditor = ({ apiUrl = "" }: { apiUrl?: string }) => {
 status: "live" };
         });
 
-        // Merge code-based policies
-        if (activeCollection && isPostgresCollection(activeCollection) && activeCollection.securityRules) {
-            activeCollection.securityRules.forEach((rule: { name?: string, mode?: string, operation?: string, roles?: string[], using?: string, withCheck?: string }) => {
-                const ruleName = rule.name;
-                if (!ruleName) return;
-
-                if (policiesMap[ruleName]) {
-                    // It exists in Postgres, but we have a code definition (potentially edited)
-                    policiesMap[ruleName] = {
-                        policyname: ruleName,
-                        tablename: activeTableData.tableName,
-                        permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
-                        cmd: (rule.operation || "ALL").toUpperCase() as PostgresPolicy["cmd"],
-                        roles: rule.roles || ["public"],
-                        qual: rule.using || null,
-                        with_check: rule.withCheck || null,
-                        status: "both"
-                    };
-                } else {
-                    policiesMap[ruleName] = {
-                        policyname: ruleName,
+        // Merge code-based policies.
+        //
+        // A rule without an explicit `name` still produces policies — Postgres gets
+        // `<table>_<op>_<hash>`, one per operation. Skipping those rules left their
+        // live policies looking like hand-written SQL ("DB Only"), so derive the
+        // names the generator would emit and match on those.
+        if (activeCollection && isPostgresCollectionConfig(activeCollection) && activeCollection.securityRules) {
+            activeCollection.securityRules.forEach((rule) => {
+                const ops = getPolicyOperations(rule);
+                const policyNames = getPolicyNamesForRule(rule, activeTableData.tableName);
+
+                policyNames.forEach((policyName, opIdx) => {
+                    policiesMap[policyName] = {
+                        policyname: policyName,
                         tablename: activeTableData.tableName,
                         permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
-                        cmd: (rule.operation || "ALL").toUpperCase() as PostgresPolicy["cmd"],
-                        roles: rule.roles || ["public"],
+                        cmd: (ops[opIdx] ?? rule.operation ?? "ALL").toUpperCase() as PostgresPolicy["cmd"],
+                        roles: [...(rule.roles ?? ["public"])],
                         qual: rule.using || null,
                         with_check: rule.withCheck || null,
-                        status: "code_only"
+                        // "both" = defined in code and live in Postgres (potentially edited)
+                        status: policiesMap[policyName] ? "both" : "code_only"
                     };
-                }
+                });
             });
         }
 
+        // Junction tables have no collection, but their policies are generated
+        // too — derived from the endpoints' relations. Recognise them so they
+        // don't show as hand-written SQL ("DB Only"). If the registry's
+        // collections don't carry resolvable relations, they simply stay "live".
+        if (!activeCollection) {
+            try {
+                const registryCollections = (collectionRegistry.collections ?? []) as unknown as Parameters<typeof resolveJunctionSpecs>[0];
+                const spec = resolveJunctionSpecs(registryCollections).get(activeTableData.tableName);
+                if (spec) {
+                    const generatedNames = getPolicyNamesForRules(getJunctionSecurityRules(spec), spec.table);
+                    for (const p of Object.values(policiesMap)) {
+                        if (generatedNames.has(p.policyname)) p.status = "both";
+                    }
+                }
+            } catch {
+                /* serialized configs without relation closures — leave as live */
+            }
+        }
+
         return Object.values(policiesMap).sort((a, b) => a.policyname.localeCompare(b.policyname));
-    }, [activeTableData, activeCollection]);
+    }, [activeTableData, activeCollection, collectionRegistry.collections]);
 
     // Stats for the info tab
     const rlsStats = useMemo(() => {
@@ -734,7 +749,7 @@ message: e instanceof Error ? e.message : String(e) });
                                             roles: newPolicy.roles
                                         };
 
-                                        const existingRules = (isPostgresCollection(activeCollection) ? activeCollection.securityRules : undefined) || [];
+                                        const existingRules = (isPostgresCollectionConfig(activeCollection) ? activeCollection.securityRules : undefined) || [];
                                         let newRules;
                                         if (editingPolicy === "new") {
                                             newRules = [...existingRules, rule];
@@ -829,8 +844,10 @@ message: e instanceof Error ? e.message : String(e) });
                                                     </Typography>
                                                     <Typography variant="caption" className="opacity-80">
                                                         This is an auto-generated junction table for a many-to-many relation.
-                                                        Its access is typically managed through the related collections' policies.
-                                                        You can still add RLS policies directly if needed.
+                                                        Rebase derives its policies: rows are readable when both related rows
+                                                        are, and writable following the declaring collection&apos;s update rules
+                                                        (plus the server/admin baseline). You can still add RLS policies
+                                                        directly to broaden access.
                                                     </Typography>
                                                 </div>
                                             </div>
@@ -845,7 +862,7 @@ message: e instanceof Error ? e.message : String(e) });
                                                         Unmapped Table
                                                     </Typography>
                                                     <Typography variant="caption" className="opacity-80">
-                                                        This table exists in the database but isn't mapped to a collection definition.
+                                                        This table exists in the database but isn&apos;t mapped to a collection definition.
                                                         Import it into a Schema configuration file to manage security policies visually.
                                                     </Typography>
                                                 </div>
@@ -926,7 +943,7 @@ message: e instanceof Error ? e.message : String(e) });
                                                                         roles: policy.roles
                                                                     };
 
-                                                                    const existingRules = (isPostgresCollection(activeCollection) ? activeCollection.securityRules : undefined) || [];
+                                                                    const existingRules = (isPostgresCollectionConfig(activeCollection) ? activeCollection.securityRules : undefined) || [];
                                                                     const newRules = [...existingRules, rule];
 
                                                                     try {

package/src/components/RebaseStudio.tsx

@@ -1,5 +1,5 @@
 import React, { lazy, Suspense, useLayoutEffect, useMemo } from "react";
-import { useRebaseRegistryDispatch } from "@rebasepro/core";
+import { useRebaseRegistryDispatch } from "@rebasepro/app";
 import type { RebaseStudioConfig, AppView } from "@rebasepro/types";
 import { CircularProgressCenter } from "@rebasepro/ui";
 
@@ -12,6 +12,7 @@ const StorageView = lazy(() => import("./StorageView/StorageView").then(m => ({
 const CronJobsView = lazy(() => import("./CronJobs/CronJobsView").then(m => ({ default: m.CronJobsView })));
 const SchemaVisualizer = lazy(() => import("./SchemaVisualizer/SchemaVisualizer").then(m => ({ default: m.SchemaVisualizer })));
 const BranchesView = lazy(() => import("./Branches/BranchesView").then(m => ({ default: m.BranchesView })));
+const BackupsView = lazy(() => import("./Backups/BackupsView").then(m => ({ default: m.BackupsView })));
 const ApiExplorer = lazy(() => import("./ApiExplorer/ApiExplorer").then(m => ({ default: m.ApiExplorer })));
 const LogsExplorer = lazy(() => import("./LogsExplorer/LogsExplorer").then(m => ({ default: m.LogsExplorer })));
 const ApiKeysView = lazy(() => import("./ApiKeys/ApiKeysView").then(m => ({ default: m.ApiKeysView })));
@@ -23,7 +24,7 @@ import { StudioHomePage } from "./StudioHomePage";
  * Renders nothing — purely registers config into the RebaseRegistry.
  *
  * The "schema" tool (collection editor view) is now a built-in CMS feature.
- * When `<RebaseCMS collectionEditor={...}>` is used, the schema view is
+ * When `<RebaseAdmin collectionEditor={...}>` is used, the schema view is
  * automatically injected into Studio — no manual wiring needed.
  */
 const DEFAULT_HOME_PAGE = <StudioHomePage/>;
@@ -35,7 +36,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", "logs", "api-keys"];
+        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "backups", "api", "logs", "api-keys"];
         const suspense = (el: React.ReactNode) => <Suspense fallback={<CircularProgressCenter/>}>{el}</Suspense>;
 
         if (activeTools.includes("sql")) {
@@ -93,6 +94,14 @@ group: "Database",
 icon: "GitBranch",
 description: "Create and manage database branches",
 view: suspense(<BranchesView/>) });
+        }
+        if (activeTools.includes("backups")) {
+            views.push({ slug: "backups",
+name: "Backups",
+group: "Database",
+icon: "Database",
+description: "Download database backups",
+view: suspense(<BackupsView/>) });
         }
         if (activeTools.includes("api")) {
             views.push({ slug: "api",

package/src/components/SQLEditor/MonacoEditor.tsx

@@ -2,7 +2,7 @@ import React, { useRef } from "react";
 import Editor, { Monaco, OnMount } from "@monaco-editor/react";
 import type { editor, Position, IRange } from "monaco-editor";
 import { cls, defaultBorderMixin } from "@rebasepro/ui";
-import { useModeController } from "@rebasepro/core";
+import { useModeController } from "@rebasepro/app";
 
 export type MonacoEditorProps = {
     value: string;

package/src/components/SQLEditor/SQLEditor.tsx

@@ -1,6 +1,6 @@
 
-import { IconForView } from "@rebasepro/core";
-import { useStudioCollectionRegistry, useStudioSideEntityController } from "@rebasepro/core";
+import { IconForView } from "@rebasepro/app";
+import { useStudioCollectionRegistry, useStudioSidePanelController } from "@rebasepro/app";
 import React, { useState, useEffect, useCallback, useRef, useMemo } from "react";
 import { createPortal } from "react-dom";
 import {
@@ -42,7 +42,7 @@ import {
     XIcon
 } from "@rebasepro/ui";
 
-import { useRebaseContext, useSnackbarController, ConfirmationDialog, ErrorView, useTranslation } from "@rebasepro/core";
+import { useRebaseContext, useSnackbarController, ConfirmationDialog, ErrorView, useTranslation } from "@rebasepro/app";
 import { MonacoEditor } from "./MonacoEditor";
 import { SQLEditorSidebar, Snippet } from "./SQLEditorSidebar";
 import { parseFirst } from "pgsql-ast-parser";
@@ -213,7 +213,7 @@ const getStoragePrefix = (baseUrl?: string) => {
 
 export const SQLEditor = () => {
     const { databaseAdmin, client } = useRebaseContext();
-    const sideEntityController = useStudioSideEntityController();
+    const sidePanelController = useStudioSidePanelController();
     const snackbarController = useSnackbarController();
     const collectionRegistry = useStudioCollectionRegistry();
 
@@ -1100,7 +1100,7 @@ id: String(ra.entityId) })}>
                                                     className="text-surface-400 dark:text-surface-500 hover:text-surface-600 dark:hover:text-surface-300 transition-colors"
                                                     onClick={(e) => {
                                                         e.stopPropagation();
-                                                        sideEntityController?.open({
+                                                        sidePanelController?.open({
                                                             path: ra.collection.collection.slug,
                                                             entityId: ra.entityId,
                                                             collection: ra.collection.collection,
@@ -1133,7 +1133,7 @@ id: String(ra.entityId) })}>
                                                     key={ra.collection.tableName}
                                                     dense
                                                     onClick={() => {
-                                                        sideEntityController?.open({
+                                                        sidePanelController?.open({
                                                             path: ra.collection.collection.slug,
                                                             entityId: ra.entityId,
                                                             collection: ra.collection.collection,

package/src/components/SQLEditor/SQLEditorSidebar.tsx

@@ -1,7 +1,7 @@
 
 import React, { useState } from "react";
 import { cls, defaultBorderMixin, IconButton, iconSize, Tab, Tabs, Trash2Icon, Typography } from "@rebasepro/ui";
-import { useTranslation } from "@rebasepro/core";
+import { useTranslation } from "@rebasepro/app";
 import { SchemaBrowser } from "./SchemaBrowser";
 import { TableInfo } from "./SQLEditor";
 

package/src/components/SQLEditor/SchemaBrowser.tsx

@@ -15,7 +15,7 @@ import {
     Typography
 } from "@rebasepro/ui";
 import { TableInfo } from "./SQLEditor";
-import { ErrorView, useTranslation } from "@rebasepro/core";
+import { ErrorView, useTranslation } from "@rebasepro/app";
 
 export const SchemaBrowser = ({
     onTableClick,
@@ -86,7 +86,7 @@ export const SchemaBrowser = ({
                                                         e.stopPropagation();
                                                         navigator.clipboard.writeText(table.tableName);
                                                     }}
-                                                    title="CopyIcon table name"
+                                                    title="Copy table name"
                                                 >
                                                     <CopyIcon size={iconSize.small}/>
                                                 </IconButton>
@@ -148,7 +148,7 @@ export const SchemaBrowser = ({
                                                                 e.stopPropagation();
                                                                 navigator.clipboard.writeText(col.name);
                                                             }}
-                                                            title="CopyIcon column name"
+                                                            title="Copy column name"
                                                         >
                                                             <CopyIcon size={iconSize.smallest}/>
                                                         </IconButton>