@rebasepro/studio 0.0.1-canary.09e5ec5

package/src/components/RLSEditor/index.ts

@@ -0,0 +1 @@
+export * from "./RLSEditor";

package/src/components/RebaseStudio.tsx

@@ -0,0 +1,121 @@
+import React, { lazy, Suspense, useLayoutEffect, useMemo } from "react";
+import { useRebaseRegistryDispatch } from "@rebasepro/core";
+import type { RebaseStudioConfig, AppView } from "@rebasepro/types";
+import { CircularProgressCenter } from "@rebasepro/ui";
+
+// Lazy-loaded studio tools — each fetched only when its route is visited.
+// This keeps Monaco, @xyflow/react, dagre, pgsql-ast-parser etc. out of the initial bundle.
+const SQLEditor = lazy(() => import("./SQLEditor/SQLEditor").then(m => ({ default: m.SQLEditor })));
+const JSEditor = lazy(() => import("./JSEditor/JSEditor").then(m => ({ default: m.JSEditor })));
+const RLSEditor = lazy(() => import("./RLSEditor/RLSEditor").then(m => ({ default: m.RLSEditor })));
+const StorageView = lazy(() => import("./StorageView/StorageView").then(m => ({ default: m.StorageView })));
+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 ApiExplorer = lazy(() => import("./ApiExplorer/ApiExplorer").then(m => ({ default: m.ApiExplorer })));
+
+import { StudioHomePage } from "./StudioHomePage";
+
+/**
+ * Declarative component to configure the Studio in Rebase.
+ * 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
+ * automatically injected into Studio — no manual wiring needed.
+ */
+const DEFAULT_HOME_PAGE = <StudioHomePage/>;
+
+export function RebaseStudio({ tools, homePage }: RebaseStudioConfig) {
+    const dispatch = useRebaseRegistryDispatch();
+
+    const resolvedHomePage = homePage ?? DEFAULT_HOME_PAGE;
+
+    const devViews: AppView[] = useMemo(() => {
+        const views: AppView[] = [];
+        const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "api"];
+        const suspense = (el: React.ReactNode) => <Suspense fallback={<CircularProgressCenter/>}>{el}</Suspense>;
+
+        if (activeTools.includes("sql")) {
+            views.push({ slug: "sql",
+name: "SQL Console",
+group: "Database",
+icon: "terminal",
+description: "Execute SQL queries",
+view: suspense(<SQLEditor/>) });
+        }
+        if (activeTools.includes("js")) {
+            views.push({ slug: "js",
+name: "JS Console",
+group: "Compute",
+icon: "code",
+description: "Execute JavaScript",
+view: suspense(<JSEditor/>) });
+        }
+        if (activeTools.includes("rls")) {
+            views.push({ slug: "rls",
+name: "RLS Policies",
+group: "Database",
+icon: "ShieldCheck",
+description: "Row Level Security",
+view: suspense(<RLSEditor/>) });
+        }
+        if (activeTools.includes("storage")) {
+            views.push({ slug: "storage",
+name: "Storage",
+group: "Storage",
+icon: "HardDrive",
+description: "Manage storage files",
+view: suspense(<StorageView/>) });
+        }
+        if (activeTools.includes("cron")) {
+            views.push({ slug: "cron",
+name: "Cron Jobs",
+group: "Compute",
+icon: "Clock",
+description: "Manage scheduled tasks",
+view: suspense(<CronJobsView/>) });
+        }
+        if (activeTools.includes("schema-visualizer")) {
+            views.push({ slug: "schema-visualizer",
+name: "Schema Visualizer",
+group: "Database",
+icon: "Network",
+description: "Interactive database ERD",
+view: suspense(<SchemaVisualizer/>) });
+        }
+        if (activeTools.includes("branches")) {
+            views.push({ slug: "branches",
+name: "Branches",
+group: "Database",
+icon: "GitBranch",
+description: "Create and manage database branches",
+view: suspense(<BranchesView/>) });
+        }
+        if (activeTools.includes("api")) {
+            views.push({ slug: "api",
+name: "API Explorer",
+group: "API",
+icon: "BookOpen",
+description: "Interactive API documentation and testing",
+view: suspense(<ApiExplorer/>) });
+        }
+        // Note: "schema" tool is auto-injected by RebaseShell when collectionEditor is enabled.
+        // It is NOT registered here anymore.
+        return views;
+    }, [tools]);
+
+    // Use a ref for homePage so it never destabilizes the effect.
+    // homePage is a React element — its identity doesn't matter for registration.
+    const homePageRef = React.useRef(resolvedHomePage);
+    homePageRef.current = resolvedHomePage;
+
+    useLayoutEffect(() => {
+        dispatch.registerStudio({ tools,
+homePage: homePageRef.current,
+devViews });
+        return () => dispatch.unregisterStudio();
+    }, [dispatch, tools, devViews]);
+
+    return null;
+}

package/src/components/SQLEditor/ExplainVisualizer.tsx

@@ -0,0 +1,128 @@
+import React, { useState } from "react";
+import { Typography, cls, defaultBorderMixin, Collapse } from "@rebasepro/ui";
+
+export interface ExplainPlanNode {
+    "Node Type": string;
+    "Relation Name"?: string;
+    "Alias"?: string;
+    "Startup Cost": number;
+    "Total Cost": number;
+    "Plan Rows": number;
+    "Plan Width": number;
+    "Actual Startup Time"?: number;
+    "Actual Total Time"?: number;
+    "Actual Rows"?: number;
+    "Actual Loops"?: number;
+    "Filter"?: string;
+    "Index Cond"?: string;
+    "Hash Cond"?: string;
+    "Plans"?: ExplainPlanNode[];
+    [key: string]: unknown;
+}
+
+export interface ExplainVisualizerProps {
+    plan: ExplainPlanNode;
+    isRoot?: boolean;
+}
+
+export const ExplainVisualizer: React.FC<ExplainVisualizerProps> = ({ plan, isRoot = true }) => {
+    const [expanded, setExpanded] = useState(true);
+
+    const hasChildren = plan.Plans && plan.Plans.length > 0;
+
+    // Determine color based on cost
+    const cost = plan["Total Cost"];
+    let costColor = "text-green-500 dark:text-green-400";
+    if (cost > 1000) costColor = "text-red-500 dark:text-red-400";
+    else if (cost > 100) costColor = "text-orange-500 dark:text-orange-400";
+
+    return (
+        <div className={cls("flex flex-col", isRoot ? "p-4" : "pl-6 mt-2 relative")}>
+            {/* Tree branch line */}
+            {!isRoot && (
+                <div className="absolute left-2.5 top-0 bottom-0 w-px bg-surface-200 dark:bg-surface-950 -z-10"></div>
+            )}
+            {!isRoot && (
+                <div className="absolute left-2.5 top-5 w-3 h-px bg-surface-200 dark:bg-surface-950 -z-10"></div>
+            )}
+
+            <div className={cls("border rounded-md bg-white dark:bg-surface-900 text-text-primary dark:text-text-primary-dark shadow-xs relative z-10 w-[420px] max-w-full", defaultBorderMixin)}>
+                <div
+                    className={cls("px-4 py-3 flex justify-between items-center cursor-pointer select-none")}
+                    onClick={() => setExpanded(!expanded)}
+                >
+                    <div className="flex items-center space-x-2">
+                        {hasChildren ? (
+                            <svg className={cls("w-4 h-4 text-text-secondary transition-transform", !expanded ? "-rotate-90" : "")} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7"/></svg>
+                        ) : (
+                            <div className="w-4 h-4"></div>
+                        )}
+
+                        <Typography variant="body1" className="flex items-center">
+                            {plan["Node Type"]}
+                        </Typography>
+
+                        {plan["Relation Name"] && (
+                            <span className="font-mono text-[11px] text-text-secondary dark:text-text-secondary-dark px-2 py-0.5 rounded bg-surface-200 dark:bg-surface-950 ml-2">
+                                on {plan["Relation Name"]} {plan.Alias && plan.Alias !== plan["Relation Name"] ? `(${plan.Alias})` : ""}
+                            </span>
+                        )}
+                    </div>
+
+                    <div className="flex space-x-6 items-center">
+                        <div className="flex flex-col text-right">
+                            <span className="text-[10px] uppercase text-text-disabled dark:text-text-disabled-dark font-semibold tracking-wide leading-tight mb-0.5">Cost</span>
+                            <span className={cls("font-mono font-medium text-[13px] leading-none", costColor)}>{cost.toFixed(2)}</span>
+                        </div>
+                        <div className="flex flex-col text-right">
+                            <span className="text-[10px] uppercase text-text-disabled dark:text-text-disabled-dark font-semibold tracking-wide leading-tight mb-0.5">Rows</span>
+                            <span className="font-mono text-[13px] text-text-secondary dark:text-text-secondary-dark leading-none">{plan["Plan Rows"]}</span>
+                        </div>
+                    </div>
+                </div>
+
+                <Collapse in={expanded}>
+                    <div className="px-4 py-3 border-t border-surface-200 dark:border-surface-950 text-[13px] flex flex-col gap-2">
+                        <div className="flex items-center space-x-6">
+                            <div className="flex items-center space-x-2">
+                                <span className="text-text-disabled dark:text-text-disabled-dark">Startup Cost:</span>
+                                <span className="font-mono font-medium">{plan["Startup Cost"].toFixed(2)}</span>
+                            </div>
+                            <div className="flex items-center space-x-2">
+                                <span className="text-text-disabled dark:text-text-disabled-dark">Width:</span>
+                                <span className="font-mono font-medium">{plan["Plan Width"]} bytes</span>
+                            </div>
+                        </div>
+
+                        {plan.Filter && (
+                            <div className="mt-1">
+                                <span className="text-text-disabled dark:text-text-disabled-dark block mb-1">Filter:</span>
+                                <code className="block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate">{plan.Filter}</code>
+                            </div>
+                        )}
+                        {plan["Index Cond"] && (
+                            <div className="mt-1">
+                                <span className="text-text-disabled dark:text-text-disabled-dark block mb-1">Index Cond:</span>
+                                <code className="block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate">{plan["Index Cond"]}</code>
+                            </div>
+                        )}
+                        {plan["Hash Cond"] && (
+                            <div className="mt-1">
+                                <span className="text-text-disabled dark:text-text-disabled-dark block mb-1">Hash Cond:</span>
+                                <code className="block w-full p-2 bg-surface-50 dark:bg-surface-950 border dark:border-surface-950 rounded font-mono text-[12px] truncate">{plan["Hash Cond"]}</code>
+                            </div>
+                        )}
+                    </div>
+                </Collapse>
+            </div>
+
+            {expanded && hasChildren && (
+                <div className="flex flex-col space-y-2 mt-[-4px]">
+                    {plan.Plans!.map((childPlan, idx) => (
+                        <ExplainVisualizer key={idx} plan={childPlan} isRoot={false}/>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/SQLEditor/MonacoEditor.tsx

@@ -0,0 +1,203 @@
+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";
+
+export type MonacoEditorProps = {
+    value: string;
+    onChange: (value: string | undefined) => void;
+    onRun?: (selectedText?: string) => void;
+    className?: string;
+    readOnly?: boolean;
+    autoFocus?: boolean;
+    schemas?: Record<string, { schemaName: string, tableName: string, columns: { name: string, dataType: string }[] }[]>;
+};
+
+export const MonacoEditor = ({
+    value,
+    onChange,
+    onRun,
+    className,
+    readOnly = false,
+    autoFocus = true,
+    schemas
+}: MonacoEditorProps) => {
+    const { mode } = useModeController();
+    const editorRef = useRef<editor.IStandaloneCodeEditor | null>(null);
+    const monacoRef = useRef<Monaco | null>(null);
+    const onRunRef = useRef(onRun);
+    onRunRef.current = onRun;
+
+    const schemasRef = useRef(schemas);
+    schemasRef.current = schemas;
+
+    const handleEditorOnMount: OnMount = (editor, monaco) => {
+        editorRef.current = editor;
+        monacoRef.current = monaco;
+
+        editor.addAction({
+            id: "run-query",
+            label: "Run Query",
+            keybindings: [monaco.KeyMod.CtrlCmd + monaco.KeyCode.Enter],
+            contextMenuGroupId: "operation",
+            contextMenuOrder: 0,
+            run: () => {
+                if (onRunRef.current) {
+                    const selection = editor.getSelection();
+                    let selectedText: string | undefined = undefined;
+                    if (selection && !selection.isEmpty()) {
+                        selectedText = editor.getModel()?.getValueInRange(selection)?.trim();
+                    }
+                    onRunRef.current(selectedText || undefined);
+                }
+            }
+        });
+
+        // Register custom autocomplete for tables, columns, and SQL keywords
+        const sqlKeywords = [
+            "SELECT", "FROM", "WHERE", "INSERT INTO", "VALUES", "UPDATE", "SET",
+            "DELETE FROM", "JOIN", "INNER JOIN", "LEFT JOIN", "RIGHT JOIN", "FULL JOIN",
+            "ON", "GROUP BY", "HAVING", "ORDER BY", "ASC", "DESC", "LIMIT", "OFFSET",
+            "AS", "AND", "OR", "NOT", "IN", "BETWEEN", "LIKE", "IS NULL", "IS NOT NULL",
+            "CREATE TABLE", "ALTER TABLE", "DROP TABLE", "PRIMARY KEY", "FOREIGN KEY",
+            "COUNT", "SUM", "AVG", "MIN", "MAX", "DISTINCT", "UNION", "ALL", "EXISTS",
+            "CASE", "WHEN", "THEN", "ELSE", "END", "CAST", "COALESCE"
+        ];
+
+        monaco.languages.registerCompletionItemProvider("pgsql", {
+            triggerCharacters: [".", " ", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"],
+            provideCompletionItems: (model: editor.ITextModel, position: Position) => {
+                const word = model.getWordUntilPosition(position);
+                const range = {
+                    startLineNumber: position.lineNumber,
+                    endLineNumber: position.lineNumber,
+                    startColumn: word.startColumn,
+                    endColumn: word.endColumn
+                };
+
+                const textUntilPosition = model.getValueInRange({
+                    startLineNumber: position.lineNumber,
+                    startColumn: 1,
+                    endLineNumber: position.lineNumber,
+                    endColumn: position.column
+                });
+
+                // Check if user is typing `tableName.`
+                const match = textUntilPosition.match(/([a-zA-Z0-9_]+)\.$/);
+                const tableNameMatch = match ? match[1] : null;
+
+                const suggestions: { label: string; kind: number; insertText: string; range: IRange; detail: string; sortText: string }[] = [];
+                const allSchemas = schemasRef.current || {};
+
+                if (tableNameMatch) {
+                    // Provide columns for the matched table
+                    for (const [, tables] of Object.entries(allSchemas)) {
+                        const table = tables.find(t => t.tableName === tableNameMatch);
+                        if (table) {
+                            table.columns.forEach(col => {
+                                suggestions.push({
+                                    label: col.name,
+                                    kind: monaco.languages.CompletionItemKind.Field,
+                                    insertText: col.name,
+                                    range,
+                                    detail: "Column",
+                                    sortText: "1"
+                                });
+                            });
+                        }
+                    }
+                } else {
+                    // Provide table names
+                    for (const [sName, tables] of Object.entries(allSchemas)) {
+                        tables.forEach(table => {
+                            suggestions.push({
+                                label: table.tableName,
+                                kind: monaco.languages.CompletionItemKind.Class,
+                                insertText: table.tableName,
+                                range,
+                                detail: `Table (${sName})`,
+                                sortText: "2"
+                            });
+                        });
+                    }
+
+                    // Provide SQL keywords
+                    sqlKeywords.forEach(keyword => {
+                        suggestions.push({
+                            label: keyword,
+                            kind: monaco.languages.CompletionItemKind.Keyword,
+                            insertText: keyword + " ",
+                            range,
+                            detail: "SQL Keyword",
+                            sortText: "3"
+                        });
+                    });
+
+                    // Heuristic: Suggest columns for tables that are mentioned in the current editor text
+                    const fullText = model.getValue();
+                    const activeTables = new Set<string>();
+                    for (const [, tables] of Object.entries(allSchemas)) {
+                        tables.forEach(table => {
+                            const regex = new RegExp(`\\b${table.tableName}\\b`, "i");
+                            if (regex.test(fullText)) {
+                                activeTables.add(table.tableName);
+                            }
+                        });
+                    }
+
+                    const addedColumns = new Set<string>();
+                    for (const [, tables] of Object.entries(allSchemas)) {
+                        tables.forEach(table => {
+                            if (activeTables.has(table.tableName)) {
+                                table.columns.forEach(col => {
+                                    if (!addedColumns.has(col.name)) {
+                                        addedColumns.add(col.name);
+                                        suggestions.push({
+                                            label: col.name,
+                                            kind: monaco.languages.CompletionItemKind.Field,
+                                            insertText: col.name,
+                                            range,
+                                            detail: `Column (${table.tableName})`,
+                                            sortText: "1" // Prioritize columns from active tables
+                                        });
+                                    }
+                                });
+                            }
+                        });
+                    }
+                }
+
+                return { suggestions };
+
+            }
+        });
+
+        if (autoFocus) {
+            editor.focus();
+        }
+    };
+
+    return (
+        <div className={cls("relative w-full h-full overflow-hidden", className)}>
+            <Editor
+                height="100%"
+                defaultLanguage="pgsql"
+                value={value}
+                onChange={onChange}
+                onMount={handleEditorOnMount}
+                theme={mode === "dark" ? "vs-dark" : "vs"}
+                options={{
+                    minimap: { enabled: false },
+                    fontSize: 14,
+                    lineNumbers: "on",
+                    scrollBeyondLastLine: false,
+                    automaticLayout: true,
+                    readOnly,
+                    tabSize: 2,
+                    wordWrap: "on"
+                }}
+            />
+        </div>
+    );
+};