@rebasepro/studio 0.12.1-canary.gf5f1d39 → 0.13.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/studio",
   "type": "module",
-  "version": "0.12.1-canary.gf5f1d39",
+  "version": "0.13.0",
   "license": "MIT",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
@@ -10,26 +10,25 @@
   "dependencies": {
     "@monaco-editor/react": "^4.7.0",
     "@types/dagre": "0.7.54",
-    "@xyflow/react": "12.11.0",
+    "@xyflow/react": "12.11.2",
     "dagre": "0.8.5",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "^0.56.0",
     "pgsql-ast-parser": "12.0.2",
     "prism-react-renderer": "^2.4.1",
-    "react-dropzone": "^15.0.0",
-    "@rebasepro/admin-types": "0.12.1-canary.gf5f1d39",
-    "@rebasepro/app": "0.12.1-canary.gf5f1d39",
-    "@rebasepro/client": "0.12.1-canary.gf5f1d39",
-    "@rebasepro/common": "0.12.1-canary.gf5f1d39",
-    "@rebasepro/types": "0.12.1-canary.gf5f1d39",
-    "@rebasepro/utils": "0.12.1-canary.gf5f1d39",
-    "@rebasepro/ui": "0.12.1-canary.gf5f1d39"
+    "react-dropzone": "^19.1.1",
+    "@rebasepro/admin-types": "0.13.0",
+    "@rebasepro/app": "0.13.0",
+    "@rebasepro/common": "0.13.0",
+    "@rebasepro/types": "0.13.0",
+    "@rebasepro/ui": "0.13.0",
+    "@rebasepro/utils": "0.13.0",
+    "@rebasepro/client": "0.13.0"
   },
   "peerDependencies": {
-    "react": ">=19.0.0",
-    "react-dom": ">=19.0.0",
-    "react-router": "^7.0.0",
-    "react-router-dom": "^7.0.0",
-    "@rebasepro/admin": "0.12.1-canary.gf5f1d39"
+    "react": ">=19.2.7",
+    "react-dom": ">=19.2.7",
+    "react-router": "^8.3.0",
+    "@rebasepro/admin": "0.13.0"
   },
   "peerDependenciesMeta": {
     "@rebasepro/admin": {
@@ -58,20 +57,19 @@
   },
   "devDependencies": {
     "@jest/globals": "^30.4.1",
-    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/jest-dom": "^7.0.0",
     "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
-    "@types/node": "^25.9.3",
+    "@types/node": "^26.1.2",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.2",
+    "@vitejs/plugin-react": "^6.0.4",
     "babel-plugin-react-compiler": "19.0.0-beta-ebf51a3-20250411",
     "jest": "^30.4.2",
-    "react-router": "^7.17.0",
-    "react-router-dom": "^7.17.0",
-    "ts-jest": "^29.4.11",
+    "react-router": "^8.3.0",
+    "ts-jest": "^29.4.12",
     "typescript": "^6.0.3",
-    "vite": "^8.0.16"
+    "vite": "^8.1.5"
   },
   "files": [
     "dist",

package/src/components/ApiExplorer/ApiExplorer.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useMemo } from "react";
-import { useApiConfig, useAuthController } from "@rebasepro/app";
+import { useApiBase, useApiConfig, useAuthController } from "@rebasepro/app";
 import {
     CircularProgress,
     Typography,
@@ -24,6 +24,7 @@ import { parseOpenApiSpec } from "./parseSpec";
  */
 export function ApiExplorer() {
     const apiConfig = useApiConfig();
+    const apiBase = useApiBase();
     const authController = useAuthController();
     const apiUrl = apiConfig?.apiUrl;
 
@@ -39,7 +40,7 @@ export function ApiExplorer() {
     useEffect(() => {
         if (!apiUrl) return;
         let cancelled = false;
-        const specUrl = `${apiUrl.replace(/\/+$/, "")}/api/docs`;
+        const specUrl = `${apiBase}/docs`;
 
         (async () => {
             try {
@@ -66,7 +67,7 @@ export function ApiExplorer() {
         return () => {
             cancelled = true;
         };
-    }, [apiUrl, apiConfig, authController]);
+    }, [apiUrl, apiBase, apiConfig, authController]);
 
     // Parse spec into grouped endpoints
     const { groups, allEndpoints } = useMemo(() => {

package/src/components/JSEditor/JSEditor.tsx

@@ -73,17 +73,34 @@ interface EditorTab {
 const STORAGE_PREFIX = "rebase_js_";
 const MAX_HISTORY = 50;
 
-const DEFAULT_CODE = `// Available: client (RebaseClient)
+/**
+ * The starter script.
+ *
+ * It runs. That is the point: the console opens with the Run button armed, and
+ * a starter that reads `collection("your_collection")` made the first thing a
+ * new user did be a 404 — a placeholder presented as working code. `slug` is
+ * the project's first collection when one is known.
+ */
+const makeDefaultCode = (slug?: string) => `// Available: client (RebaseClient)
 // Press Cmd+Enter (Ctrl+Enter) to run
 //
 // Examples:
-//   const result = await client.data.collection("your_collection").find({ limit: 10 });
 //   const users = await client.admin.listUsers();
 //   const session = client.auth.getSession();
-
-const result = await client.data.collection("your_collection").find({ limit: 10 });
+${slug
+        ? `
+const result = await client.data.collection(${JSON.stringify(slug)}).find({ limit: 10 });
 return result;
-`;
+`
+        : `
+// Name one of your collections to query it:
+//   const result = await client.data.collection("posts").find({ limit: 10 });
+//   return result;
+
+return client.auth.getSession();
+`}`;
+
+const DEFAULT_CODE = makeDefaultCode();
 
 // ─── Helpers ─────────────────────────────────────────────────────────
 
@@ -250,6 +267,26 @@ code: DEFAULT_CODE }])
 
     const collectionSlugs = useMemo(() => collectionInfos.map(c => c.slug), [collectionInfos]);
 
+    /**
+     * Name a real collection in the starter script once the registry knows one.
+     *
+     * The registry is empty on first paint — in the hosted console it arrives
+     * over the network — so the placeholder-free default cannot be built in the
+     * `useState` initialiser. Rewriting only a tab whose content is still
+     * *exactly* the untouched default means this can never overwrite anything
+     * anyone typed, and never fires twice.
+     */
+    const firstSlug = collectionSlugs[0];
+    useEffect(() => {
+        if (!firstSlug) return;
+        setTabs(prev => {
+            if (!prev.some(tab => tab.code === DEFAULT_CODE)) return prev;
+            const seeded = makeDefaultCode(firstSlug);
+            return prev.map(tab => (tab.code === DEFAULT_CODE ? { ...tab,
+code: seeded } : tab));
+        });
+    }, [firstSlug]);
+
     // Users list for the picker — mapped to SelectableUser shape
     const users = useMemo((): SelectableUser[] => {
         const managed: SelectableUser[] = [];

package/src/components/LogsExplorer/LogsExplorer.tsx

@@ -1,6 +1,6 @@
 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";
+import { useApiBase, useApiConfig } from "@rebasepro/app";
 
 interface LogEntry {
     id: string;
@@ -56,6 +56,7 @@ export function LogsExplorer() {
     const stickRef = useRef(true);
     const lastMaxIdRef = useRef<number | null>(null);
     const apiConfig = useApiConfig();
+    const apiBase = useApiBase();
 
     // Debounce the search box so typing doesn't refetch per keystroke.
     useEffect(() => {
@@ -82,7 +83,7 @@ export function LogsExplorer() {
             const token = apiConfig.getAuthToken ? await apiConfig.getAuthToken() : null;
             if (token) headers["Authorization"] = `Bearer ${token}`;
 
-            const resp = await fetch(`${apiConfig.apiUrl}/api/logs?${params}`, { headers });
+            const resp = await fetch(`${apiBase}/logs?${params}`, { headers });
             if (!resp.ok) {
                 setError(resp.status === 401 || resp.status === 403
                     ? "Not authorised to read logs — an admin role is required."
@@ -108,7 +109,7 @@ export function LogsExplorer() {
         } catch (e) {
             setError(e instanceof Error ? e.message : "Could not load logs.");
         }
-    }, [level, source, search, apiConfig]);
+    }, [level, source, search, apiConfig, apiBase]);
 
     // A filter change replaces the window wholesale — "new entries since last
     // poll" stops meaning anything, so the counter starts over.

package/src/components/RLSEditor/RLSEditor.tsx

@@ -1,5 +1,6 @@
 
-import { useStudioCollectionRegistry } from "@rebasepro/app";
+import { useStudioCollectionRegistry, useStudioCapabilities } from "@rebasepro/app";
+import { useApiBase } from "@rebasepro/app";
 import React, { useState, useEffect, useCallback, useMemo } from "react";
 import {
     Alert,
@@ -29,7 +30,7 @@ import { useRebaseContext, useSnackbarController, ErrorView, useTranslation } fr
 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 { resolveJunctionSpecs, getJunctionSecurityRules, getEffectiveSecurityRules } from "@rebasepro/common";
 import { PolicyEditor } from "./PolicyEditor";
 
 type TableCategory = "collection" | "junction" | "internal" | "other";
@@ -65,7 +66,7 @@ function sanitizeSqlIdentifier(name: string): string {
 
 // Re-exported for the components that used to import it from here.
 export type { PostgresPolicy } from "@rebasepro/types";
-import type { PostgresPolicy } from "@rebasepro/types";
+import type { CollectionConfig, PostgresPolicy } from "@rebasepro/types";
 
 interface TableRLSStatus {
     schemaName: string;
@@ -154,6 +155,10 @@ export const RLSEditor = ({ apiUrl = "" }: { apiUrl?: string }) => {
     const { databaseAdmin } = useRebaseContext();
     const snackbarController = useSnackbarController();
     const collectionRegistry = useStudioCollectionRegistry();
+    const { codebase: hasCodebase } = useStudioCapabilities();
+    /* `apiUrl` is a bare origin; the routes live under the backend's
+       `basePath`, which is `/api` only by default. */
+    const apiBase = useApiBase() ?? `${apiUrl.replace(/\/+$/, "")}/api`;
     const { t } = useTranslation();
 
     const [isLoading, setIsLoading] = useState(true);
@@ -388,8 +393,21 @@ status: "live" };
         // `<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) => {
+        //
+        // `getEffectiveSecurityRules` rather than `securityRules`, for the same
+        // reason one step further out: the generator also injects the
+        // safe-by-default baseline (`<table>_default_admin_read` and the three
+        // `_default_admin_write_*`), which appears in no collection's
+        // `securityRules`. Reading the declared rules alone made four policies
+        // *Rebase itself wrote* look like drift on every table in the project —
+        // badged "DB Only" and offered for import back into the codebase that
+        // produced them. The admin panel's own RLS tab already derived them this
+        // way; this view, its sibling, did not. Both start from
+        // `getEffectiveSecurityRules` now — this one needs the rule bodies to
+        // render a policy row, the other only the names it compiles to
+        // (`getGeneratedPolicyNames`).
+        if (activeCollection && isPostgresCollectionConfig(activeCollection)) {
+            getEffectiveSecurityRules(activeCollection as unknown as CollectionConfig).forEach((rule) => {
                 const ops = getPolicyOperations(rule);
                 const policyNames = getPolicyNamesForRule(rule, activeTableData.tableName);
 
@@ -731,7 +749,26 @@ message: e instanceof Error ? e.message : String(e) });
                                 schema={activeTableData.schemaName}
                                 table={activeTableData.tableName}
                                 onSave={async (newPolicy) => {
-                                    if (activeCollection) {
+                                    /*
+                                     * Where a policy for a *mapped* table belongs depends
+                                     * on the host, not on the table.
+                                     *
+                                     * Beside its own source, the collection file is the
+                                     * right home: the rule is checked in, and the next
+                                     * migration applies it. The hosted console has no
+                                     * source — the container is rebuilt from the
+                                     * customer's repository on every deploy — and the
+                                     * schema-editor routes it would POST to are not even
+                                     * mounted, because the framework switches them off
+                                     * under NODE_ENV=production, which every tenant runs.
+                                     * So this branch used to make "Create Policy" and
+                                     * "Edit" fail with "Failed to save policy" on every
+                                     * mapped table in the console, which is most of them.
+                                     * There, the database is the only place a policy can
+                                     * live, so write it there — the same path unmapped
+                                     * tables have always used.
+                                     */
+                                    if (activeCollection && hasCodebase) {
                                         // Collection-mapped table: save via schema-editor API
                                         const rule: Record<string, unknown> = {
                                             name: newPolicy.policyname,
@@ -751,7 +788,7 @@ message: e instanceof Error ? e.message : String(e) });
                                         }
 
                                         try {
-                                            const response = await fetch(`${apiUrl}/api/schema-editor/collection/save`, {
+                                            const response = await fetch(`${apiBase}/schema-editor/collection/save`, {
                                                 method: "POST",
                                                 headers: { "Content-Type": "application/json" },
                                                 body: JSON.stringify({
@@ -770,7 +807,9 @@ message: "Policy saved successfully" });
 message: e instanceof Error ? e.message : String(e) });
                                         }
                                     } else {
-                                        // Non-collection table (internal/junction/unmapped): apply policy directly via SQL
+                                        // No codebase to write to (hosted console), or an
+                                        // unmapped table (internal/junction/other): apply
+                                        // the policy to the database directly.
                                         try {
                                             const qualifiedTable = `${sanitizeSqlIdentifier(activeTableData.schemaName)}.${sanitizeSqlIdentifier(activeTableData.tableName)}`;
                                             const policyName = sanitizeSqlIdentifier(newPolicy.policyname || "unnamed_policy");
@@ -795,7 +834,7 @@ message: e instanceof Error ? e.message : String(e) });
                                             await databaseAdmin!.executeSql!(sql);
 
                                             snackbarController.open({ type: "success",
-message: `Policy "${newPolicy.policyname}" applied directly via SQL` });
+message: `Policy "${newPolicy.policyname}" applied to the database` });
                                             setEditingPolicy(null);
                                             fetchRLSData();
                                         } catch (e: unknown) {
@@ -907,7 +946,12 @@ message: e instanceof Error ? e.message : String(e) });
                                                                     </div>
                                                                 </Tooltip>
                                                             )}
-                                                            {policy.status === "live" && (
+                                                            {/* "DB Only" is a *drift* signal — it means the
+                                                                codebase does not declare this policy. Where
+                                                                there is no codebase to compare against, every
+                                                                policy trivially qualifies, so the badge said
+                                                                nothing and said it about everything. */}
+                                                            {policy.status === "live" && hasCodebase && (
                                                                 <Tooltip title="This policy is live in the database but missing from your codebase schema.">
                                                                     <div className="px-1.5 py-0.5 rounded text-[10px] uppercase bg-orange-500/10 text-orange-600 border border-orange-500/20 shrink-0">
                                                                         DB Only
@@ -921,7 +965,10 @@ message: e instanceof Error ? e.message : String(e) });
                                                         </div>
                                                     </div>
                                                     <div className="flex gap-2 shrink-0 items-center">
-                                                        {policy.status === "live" && activeCollection && (
+                                                        {/* Writes a collection source file, so it needs a
+                                                            codebase on the other end. In the console the
+                                                            endpoint is not mounted and the button 404'd. */}
+                                                        {policy.status === "live" && activeCollection && hasCodebase && (
                                                             <Button
                                                                 size="small"
                                                                 variant="outlined"
@@ -940,7 +987,7 @@ message: e instanceof Error ? e.message : String(e) });
                                                                     const newRules = [...existingRules, rule];
 
                                                                     try {
-                                                                        const response = await fetch(`${apiUrl}/api/schema-editor/collection/save`, {
+                                                                        const response = await fetch(`${apiBase}/schema-editor/collection/save`, {
                                                                             method: "POST",
                                                                             headers: { "Content-Type": "application/json" },
                                                                             body: JSON.stringify({

package/src/components/RebaseStudio.tsx

@@ -34,6 +34,21 @@ export function RebaseStudio({ tools, homePage }: RebaseStudioConfig) {
 
     const resolvedHomePage = homePage ?? DEFAULT_HOME_PAGE;
 
+    /**
+     * The tool list reduced to a value, so that re-rendering the host does not
+     * republish the registry.
+     *
+     * `tools` is an array, and callers write it inline — `tools={[...TOOLS]}`
+     * in the hosted console. A fresh array every render meant a fresh
+     * `devViews` every render, which meant the effect below unregistered and
+     * re-registered on every render. Because each registration builds *new*
+     * `<Suspense><SQLEditor/></Suspense>` elements, whatever view was on screen
+     * was torn down and remounted each time: a half-typed SQL query, a storage
+     * folder you had navigated into, an open policy editor — all discarded, and
+     * every mount reissued the view's initial requests.
+     */
+    const toolsKey = tools ? tools.join(",") : "";
+
     const devViews: AppView[] = useMemo(() => {
         const views: AppView[] = [];
         const activeTools = tools ?? ["sql", "js", "rls", "storage", "cron", "schema-visualizer", "branches", "backups", "api", "logs", "api-keys"];
@@ -130,19 +145,27 @@ view: suspense(<ApiKeysView/>) });
         // Note: "schema" tool is auto-injected by RebaseShell when collectionEditor is enabled.
         // It is NOT registered here anymore.
         return views;
-    }, [tools]);
+        // Keyed by the tool list's *contents*; see `toolsKey`. `tools` itself is
+        // read inside, and is exactly determined by the key.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [toolsKey]);
 
     // 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;
 
+    // Same reasoning for `tools`: it is registered as config, but a new array
+    // with the same contents must not count as a change.
+    const toolsRef = React.useRef(tools);
+    toolsRef.current = tools;
+
     useLayoutEffect(() => {
-        dispatch.registerStudio({ tools,
+        dispatch.registerStudio({ tools: toolsRef.current,
 homePage: homePageRef.current,
 devViews });
         return () => dispatch.unregisterStudio();
-    }, [dispatch, tools, devViews]);
+    }, [dispatch, devViews]);
 
     return null;
 }

package/src/components/SchemaVisualizer/SchemaVisualizer.tsx

@@ -6,6 +6,7 @@ import {
     Background,
     BackgroundVariant,
     useReactFlow,
+    useNodesInitialized,
     ReactFlowProvider,
     applyNodeChanges,
     applyEdgeChanges
@@ -32,6 +33,7 @@ import {
 
 import { isPostgresCollectionConfig } from "@rebasepro/types";
 import { useSchemaGraph } from "./useSchemaGraph";
+import { useLiveRlsTables } from "./useLiveRls";
 import type { TableNodeData } from "./useSchemaGraph";
 import { TableNode } from "./TableNode";
 import { RelationEdge } from "./RelationEdge";
@@ -55,6 +57,7 @@ function SchemaVisualizerCanvas({
     collections: AdminCollection[];
 }) {
     const reactFlowInstance = useReactFlow();
+    const liveRls = useLiveRlsTables();
     const {
         nodes: layoutedNodes,
         edges: layoutedEdges,
@@ -63,7 +66,7 @@ function SchemaVisualizerCanvas({
         relayout,
         tableCount,
         relationCount
-    } = useSchemaGraph(collections);
+    } = useSchemaGraph(collections, liveRls);
 
     const [nodes, setNodes] = useState<Node[]>([]);
     const [edges, setEdges] = useState<Edge[]>([]);
@@ -86,18 +89,43 @@ function SchemaVisualizerCanvas({
         []
     );
 
-    // Fit view on first load
+    /**
+     * Fit the graph into view, once, as soon as it can be measured.
+     *
+     * This used to fire on a 200ms timer. `fitView` needs every node's real
+     * width and height, which React Flow only knows after it has laid them out
+     * and measured them — with a dozen tables, a cold Monaco-sized bundle and
+     * a slow first paint, 200ms is often too early. The fit then ran against
+     * zero-sized nodes and produced a viewport nothing lines up with, and
+     * `initialFitDone` made sure it was never retried: the ERD opened as a
+     * scatter of specks in a corner and stayed there until you hit "fit" by
+     * hand. `useNodesInitialized` is the event this was approximating.
+     */
+    const nodesInitialized = useNodesInitialized();
     useEffect(() => {
-        if (nodes.length > 0 && !initialFitDone.current) {
-            const timer = setTimeout(() => {
-                reactFlowInstance.fitView({ padding: 0.15,
+        if (!nodesInitialized || nodes.length === 0 || initialFitDone.current) return;
+        initialFitDone.current = true;
+        reactFlowInstance.fitView({ padding: 0.15,
 duration: 400 });
-                initialFitDone.current = true;
-            }, 200);
-            return () => clearTimeout(timer);
-        }
-        return undefined;
-    }, [nodes.length, reactFlowInstance]);
+    }, [nodesInitialized, nodes.length, reactFlowInstance]);
+
+    /**
+     * Re-fit after a relayout.
+     *
+     * Switching LR↔TB transposes the graph — a tall column becomes a wide band
+     * — so the viewport that framed the old shape frames the new one badly:
+     * asking for a different layout used to leave most of it off-screen until
+     * you pressed "fit" as a second step. Skipped for the very first layout,
+     * which the initial fit above already handles.
+     */
+    const lastFittedDirection = useRef(direction);
+    useEffect(() => {
+        if (!nodesInitialized || nodes.length === 0) return;
+        if (lastFittedDirection.current === direction) return;
+        lastFittedDirection.current = direction;
+        reactFlowInstance.fitView({ padding: 0.15,
+duration: 400 });
+    }, [direction, nodesInitialized, nodes, reactFlowInstance]);
 
     const handleFitView = useCallback(() => {
         reactFlowInstance.fitView({ padding: 0.15,
@@ -176,24 +204,40 @@ duration: 400 }
         [nodes]
     );
 
+    /**
+     * The RLS answer for one collection, from the same place the graph used.
+     *
+     * `nodes` already carries it, so look it up there rather than re-deriving —
+     * that is what kept the sidebar dots, the node badges and the total from
+     * agreeing.
+     */
+    const rlsEnabledFor = useCallback(
+        (collection: AdminCollection): boolean => {
+            const table = (isPostgresCollectionConfig(collection) ? collection.table : undefined) ?? collection.slug;
+            const node = nodes.find((n) => n.id === `table-${table}`);
+            return Boolean((node?.data as TableNodeData | undefined)?.rlsEnabled);
+        },
+        [nodes]
+    );
+
     // Stats
     const stats = useMemo(
         () => ({
             tables: tableCount,
             relations: relationCount,
             junctions: junctionNodes.length,
-            withRls: postgresCollections.filter(
-                (c) =>
-                    isPostgresCollectionConfig(c) &&
-                    c.securityRules &&
-                    c.securityRules.length > 0
-            ).length
+            // Counted off the nodes, which already carry the database's answer
+            // where there was one — the same number the per-table badges show.
+            // Counting `securityRules` here instead made the total disagree
+            // with the badges, and read 0 in the hosted console, where the
+            // contract endpoint strips those rules.
+            withRls: nodes.filter((n) => (n.data as TableNodeData | undefined)?.rlsEnabled).length
         }),
         [
             tableCount,
             relationCount,
             junctionNodes.length,
-            postgresCollections
+            nodes
         ]
     );
 
@@ -293,14 +337,16 @@ duration: 400 }
                                             )}
                                         </div>
                                         <div className="flex items-center gap-1 shrink-0 ml-1">
-                                            {isPostgresCollectionConfig(collection) &&
-                                                collection.securityRules &&
-                                                collection.securityRules
-                                                    .length > 0 && (
-                                                    <Tooltip title="RLS enabled">
-                                                        <div className="w-1.5 h-1.5 rounded-full bg-green-500"/>
-                                                    </Tooltip>
-                                                )}
+                                            {/* Same source as the node badge and the
+                                                "RLS protected" total: the database when
+                                                it could be asked, the config otherwise.
+                                                Reading `securityRules` directly here made
+                                                the three disagree. */}
+                                            {rlsEnabledFor(collection) && (
+                                                <Tooltip title="RLS enabled">
+                                                    <div className="w-1.5 h-1.5 rounded-full bg-green-500"/>
+                                                </Tooltip>
+                                            )}
                                             {collection.history && (
                                                 <Tooltip title="History enabled">
                                                     <div className="w-1.5 h-1.5 rounded-full bg-blue-400"/>