@rebasepro/studio 0.15.0 → 0.16.0

package/dist/components/RLSEditor/policy-presets.d.ts

@@ -0,0 +1,74 @@
+export type PolicyCommand = "ALL" | "SELECT" | "INSERT" | "UPDATE" | "DELETE";
+export declare const COMMAND_OPTIONS: PolicyCommand[];
+/**
+ * The roles a policy's `TO` list can name when nothing better is known.
+ *
+ * Not `authenticated` / `anon` / `admin`, which is what this list used to be.
+ * The first two are Supabase's role names and Rebase never creates them, so
+ * `CREATE POLICY ... TO authenticated` — which is literally what the editor
+ * builds and executes — fails with `role "authenticated" does not exist`. The
+ * driver's `validatePolicyPgRoles` rejects the same three names in
+ * `SecurityRule.pgRoles` and says why: they are another platform's convention,
+ * and application roles belong in a condition, not in the `TO` list.
+ *
+ * `admin` was the more dangerous entry, because it is a plausible *application*
+ * role. Had one existed as a database role too, the policy would have been
+ * created successfully and then matched nothing at all: requests run as
+ * {@link REBASE_USER_ROLE} after a `SET LOCAL ROLE`, and a `TO` list naming a
+ * role the request never assumes filters every row without erroring.
+ *
+ * So: `public` (what the framework's own generator emits) and the role requests
+ * actually arrive as. "Signed-in users" and "admins" are not roles here — they
+ * are conditions over `rebase.uid()` and `rebase.roles()`, which is what the
+ * presets below now compile to.
+ */
+export declare const FALLBACK_ROLE_OPTIONS: string[];
+/**
+ * The `TO` list the editor offers, given what the database reported and what
+ * the policy being edited already targets.
+ *
+ * Three sources, and each is there for a reason the others do not cover:
+ *
+ *  - {@link FALLBACK_ROLE_OPTIONS} always, because `public` is a **keyword, not
+ *    a row in `pg_roles`** — `fetchAvailableRoles` cannot return it, so seeding
+ *    from the live fetch alone would drop the one role every generated policy
+ *    targets.
+ *  - the live roles, so an operator's own `app_read` is reachable without
+ *    hand-editing SQL.
+ *  - the edited policy's own roles, because a `MultiSelect` silently drops a
+ *    value with no matching item. That value is the `TO` list of a policy
+ *    already enforcing something, so opening an unrelated policy for a one-word
+ *    rename would have quietly rewritten who it applies to.
+ */
+export declare function roleOptionsFor(fetched: readonly string[] | undefined, policyRoles: readonly string[] | undefined): string[];
+/**
+ * Preset conditions, compiled by the framework's own policy compiler rather
+ * than written out here.
+ *
+ * `policyToPostgres` is the function `db push` generates policies with, so a
+ * preset cannot drift from what the framework emits — and the one that matters
+ * has drifted before: `authenticated()` used to compile to a bare
+ * `IS NOT NULL`, which is true for anonymous visitors, and any copy of that
+ * string sitting in a preset would still be handing out the old grant today.
+ */
+export declare const SIGNED_IN_SQL: string;
+export declare const IS_ADMIN_SQL: string;
+export declare const OWNS_ROW_SQL: string;
+export interface PolicyPreset {
+    id: string;
+    label: string;
+    description: string;
+    policyname: string;
+    cmd: PolicyCommand;
+    permissive: "PERMISSIVE" | "RESTRICTIVE";
+    roles: string[];
+    qual: string;
+    with_check: string;
+}
+/**
+ * Every preset targets `TO public`, which is what the framework's generator
+ * emits and what actually reaches a request running as `rebase_user`. The part
+ * that used to be expressed as a role — "authenticated", "admin" — is a
+ * condition now, so it is enforced where Postgres will actually evaluate it.
+ */
+export declare const POLICY_PRESETS: PolicyPreset[];

package/dist/index.es.js

@@ -549,15 +549,15 @@ function SyntaxHighlightedSnippet() {
 }
 //#endregion
 //#region src/components/RebaseStudio.tsx
-var SQLEditor = lazyChunk(() => import("./SQLEditor-BmI0iIWK.js").then((m) => ({ default: m.SQLEditor })));
-var JSEditor = lazyChunk(() => import("./JSEditor-BaSrzWhF.js").then((m) => ({ default: m.JSEditor })));
-var RLSEditor = lazyChunk(() => import("./RLSEditor-CV8R1G3W.js").then((m) => ({ default: m.RLSEditor })));
-var StorageView = lazyChunk(() => import("./StorageView-CwDI4sBG.js").then((m) => ({ default: m.StorageView })));
+var SQLEditor = lazyChunk(() => import("./SQLEditor-ByecwX8B.js").then((m) => ({ default: m.SQLEditor })));
+var JSEditor = lazyChunk(() => import("./JSEditor-BZnvK1n6.js").then((m) => ({ default: m.JSEditor })));
+var RLSEditor = lazyChunk(() => import("./RLSEditor-CBX4uD66.js").then((m) => ({ default: m.RLSEditor })));
+var StorageView = lazyChunk(() => import("./StorageView-CGm-cacx.js").then((m) => ({ default: m.StorageView })));
 var CronJobsView = lazyChunk(() => import("./CronJobsView-BHtJZeJZ.js").then((m) => ({ default: m.CronJobsView })));
-var SchemaVisualizer = lazyChunk(() => import("./SchemaVisualizer-vxKSG80C.js").then((m) => ({ default: m.SchemaVisualizer })));
+var SchemaVisualizer = lazyChunk(() => import("./SchemaVisualizer-D6tMZgeC.js").then((m) => ({ default: m.SchemaVisualizer })));
 var BranchesView = lazyChunk(() => import("./BranchesView-CM3B-ER3.js").then((m) => ({ default: m.BranchesView })));
 var BackupsView = lazyChunk(() => import("./BackupsView-DNS6LdVg.js").then((m) => ({ default: m.BackupsView })));
-var ApiExplorer = lazyChunk(() => import("./ApiExplorer-CDOlUQzk.js").then((m) => ({ default: m.ApiExplorer })));
+var ApiExplorer = lazyChunk(() => import("./ApiExplorer-9iwGvNnt.js").then((m) => ({ default: m.ApiExplorer })));
 var LogsExplorer = lazyChunk(() => import("./LogsExplorer-DI8SVpya.js").then((m) => ({ default: m.LogsExplorer })));
 var ApiKeysView = lazyChunk(() => import("./ApiKeysView-C_UoUPuR.js").then((m) => ({ default: m.ApiKeysView })));
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rebasepro/studio",
   "type": "module",
-  "version": "0.15.0",
+  "version": "0.16.0",
   "license": "MIT",
   "main": "./dist/index.es.js",
   "module": "./dist/index.es.js",
@@ -16,19 +16,19 @@
     "pgsql-ast-parser": "12.0.2",
     "prism-react-renderer": "^2.4.1",
     "react-dropzone": "^19.1.1",
-    "@rebasepro/app": "0.15.0",
-    "@rebasepro/types": "0.15.0",
-    "@rebasepro/admin-types": "0.15.0",
-    "@rebasepro/client": "0.15.0",
-    "@rebasepro/ui": "0.15.0",
-    "@rebasepro/common": "0.15.0",
-    "@rebasepro/utils": "0.15.0"
+    "@rebasepro/app": "0.16.0",
+    "@rebasepro/client": "0.16.0",
+    "@rebasepro/common": "0.16.0",
+    "@rebasepro/ui": "0.16.0",
+    "@rebasepro/types": "0.16.0",
+    "@rebasepro/admin-types": "0.16.0",
+    "@rebasepro/utils": "0.16.0"
   },
   "peerDependencies": {
     "react": ">=19.2.7",
     "react-dom": ">=19.2.7",
     "react-router": "^8.3.0",
-    "@rebasepro/admin": "0.15.0"
+    "@rebasepro/admin": "0.16.0"
   },
   "peerDependenciesMeta": {
     "@rebasepro/admin": {

package/src/components/ApiExplorer/ApiExplorer.tsx

@@ -210,7 +210,7 @@ allEndpoints: [] };
                                         <span className="truncate text-[13px] opacity-90">{ep.summary || ep.shortPath}</span>
                                         <span
                                             className={cls(
-                                                "text-[10px] font-bold uppercase shrink-0",
+                                                "text-[10px] font-semibold uppercase shrink-0",
                                                 METHOD_COLORS[ep.method] ?? "text-text-secondary"
                                             )}
                                         >
@@ -247,7 +247,7 @@ allEndpoints: [] };
                             <div className="flex items-center gap-3 min-w-0">
                                 <span
                                     className={cls(
-                                        "text-xs font-bold uppercase",
+                                        "text-xs font-semibold uppercase",
                                         METHOD_COLORS[selectedEndpoint.method] ?? ""
                                     )}
                                 >

package/src/components/ApiExplorer/EndpointDetail.tsx

@@ -275,5 +275,5 @@ function StatusBadge({ code }: { code: string }) {
                 ? "text-amber-600 dark:text-amber-400"
                 : "text-red-600 dark:text-red-400";
 
-    return <span className={cls("text-xs font-bold font-mono", color)}>{code}</span>;
+    return <span className={cls("text-xs font-semibold font-mono", color)}>{code}</span>;
 }

package/src/components/ApiExplorer/TryItPanel.tsx

@@ -456,7 +456,7 @@ function ResponseBadge({ status }: { status: number }) {
     else if (status >= 400 && status < 500) colorClass = "text-amber-500";
 
     return (
-        <span className={cls("text-xs font-bold font-mono", colorClass)}>
+        <span className={cls("text-xs font-semibold font-mono", colorClass)}>
             {status || "ERR"}
         </span>
     );

package/src/components/JSEditor/JSEditor.tsx

@@ -778,7 +778,7 @@ message: t("studio_sql_markdown_copy_failed") });
                                         <div className="h-full w-full flex flex-col bg-surface-50 dark:bg-surface-950 overflow-hidden min-h-0">
                                             {/* Result header — matches SQL editor */}
                                             <div className={cls("p-2 px-4 bg-surface-100 dark:bg-surface-900 border-b shrink-0 flex items-center", defaultBorderMixin)}>
-                                                <Typography variant="caption" className="font-bold text-text-disabled dark:text-text-disabled-dark uppercase tracking-widest text-[10px]">
+                                                <Typography variant="caption" className="font-semibold text-text-disabled dark:text-text-disabled-dark uppercase tracking-widest text-[10px]">
                                                     {t("studio_sql_query_results")}
                                                 </Typography>
 
@@ -846,7 +846,7 @@ message: t("studio_sql_markdown_copy_failed") });
                                                         {matchedCollections.length > 0 && (
                                                             <div className={cls("px-4 py-1.5 border-b flex items-center gap-2 shrink-0 bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
                                                                 <Tooltip title={t("studio_sql_admin_collections_tooltip")}>
-                                                                    <Typography variant="caption" className="text-[10px] font-bold uppercase tracking-widest text-text-disabled dark:text-text-disabled-dark mr-1 shrink-0 cursor-help">{t("studio_sql_collections_label")}</Typography>
+                                                                    <Typography variant="caption" className="text-[10px] font-semibold uppercase tracking-widest text-text-disabled dark:text-text-disabled-dark mr-1 shrink-0 cursor-help">{t("studio_sql_collections_label")}</Typography>
                                                                 </Tooltip>
                                                                 <div className="flex items-center gap-1.5 overflow-x-auto no-scrollbar">
                                                                     {matchedCollections.map(mc => (
@@ -1002,11 +1002,11 @@ id: String(ra.entityId) })}
                                                 <div className={cls("p-2 px-4 border-t bg-surface-50 dark:bg-surface-900 flex justify-between items-center shrink-0", defaultBorderMixin)}>
                                                     <div className="flex space-x-4">
                                                         <div className="flex items-center text-[11px]">
-                                                            <span className="font-bold text-text-disabled dark:text-text-disabled-dark mr-2 uppercase tracking-tighter">{t("studio_sql_rows")}</span>
+                                                            <span className="font-semibold text-text-disabled dark:text-text-disabled-dark mr-2 uppercase tracking-tighter">{t("studio_sql_rows")}</span>
                                                             <span className="font-mono text-text-secondary dark:text-text-secondary-dark">{tableData.data.length}</span>
                                                         </div>
                                                         <div className="flex items-center text-[11px]">
-                                                            <span className="font-bold text-text-disabled dark:text-text-disabled-dark mr-2 uppercase tracking-tighter">{t("studio_sql_time")}</span>
+                                                            <span className="font-semibold text-text-disabled dark:text-text-disabled-dark mr-2 uppercase tracking-tighter">{t("studio_sql_time")}</span>
                                                             <span className="font-mono text-text-secondary dark:text-text-secondary-dark">{result.duration.toFixed(0)}ms</span>
                                                         </div>
                                                     </div>
@@ -1014,7 +1014,7 @@ id: String(ra.entityId) })}
                                                         <Button
                                                             size="small"
                                                             variant="text"
-                                                            className="text-[10px] uppercase font-bold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap"
+                                                            className="text-[10px] uppercase font-semibold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap"
                                                             onClick={handleExportMarkdown}
                                                         >
                                                             {t("studio_sql_copy_markdown")}
@@ -1022,7 +1022,7 @@ id: String(ra.entityId) })}
                                                         <Button
                                                             size="small"
                                                             variant="text"
-                                                            className="text-[10px] uppercase font-bold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap"
+                                                            className="text-[10px] uppercase font-semibold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap"
                                                             onClick={exportResult}
                                                         >
                                                             {t("studio_sql_export_json")}
@@ -1030,7 +1030,7 @@ id: String(ra.entityId) })}
                                                         <Button
                                                             size="small"
                                                             variant="text"
-                                                            className="text-[10px] uppercase font-bold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap"
+                                                            className="text-[10px] uppercase font-semibold text-text-secondary dark:text-text-secondary-dark whitespace-nowrap"
                                                             onClick={handleExportCSV}
                                                         >
                                                             {t("studio_sql_export_csv")}

package/src/components/JSEditor/JSEditorSidebar.tsx

@@ -119,7 +119,7 @@ export const JSEditorSidebar = ({
                 {activeTab === "collections" && (
                     <div className="flex flex-col h-full">
                         <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                            <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
+                            <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
                                 Collections
                             </Typography>
                         </div>
@@ -147,7 +147,7 @@ export const JSEditorSidebar = ({
                 {activeTab === "reference" && (
                     <div className="flex flex-col h-full">
                         <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                            <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
+                            <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
                                 SDK Reference
                             </Typography>
                         </div>
@@ -187,7 +187,7 @@ export const JSEditorSidebar = ({
                     return (
                         <div className="flex flex-col h-full">
                             <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                                <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">Snippets</Typography>
+                                <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">Snippets</Typography>
                             </div>
                             <div className="flex-grow overflow-y-auto p-2 space-y-2 no-scrollbar">
                                 {snippets.length === 0 ? (
@@ -200,7 +200,7 @@ export const JSEditorSidebar = ({
                                     <>
                                         {favorites.length > 0 && (
                                             <div className="mb-3">
-                                                <Typography variant="caption" className="text-[10px] font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1 flex items-center">
+                                                <Typography variant="caption" className="text-[10px] font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1 flex items-center">
                                                     <svg className="w-3 h-3 mr-1 text-amber-500" fill="currentColor" viewBox="0 0 20 20"><path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"/></svg>
                                                     Favorites
                                                 </Typography>
@@ -214,7 +214,7 @@ export const JSEditorSidebar = ({
                                         {others.length > 0 && (
                                             <div>
                                                 {favorites.length > 0 && (
-                                                    <Typography variant="caption" className="text-[10px] font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1">
+                                                    <Typography variant="caption" className="text-[10px] font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark mb-2 px-1">
                                                         Others
                                                     </Typography>
                                                 )}
@@ -236,7 +236,7 @@ export const JSEditorSidebar = ({
                 {activeTab === "history" && (
                     <div className="flex flex-col h-full">
                         <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                            <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">History</Typography>
+                            <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">History</Typography>
                         </div>
                         <div className="flex-grow overflow-y-auto p-1 space-y-1 no-scrollbar">
                             {history.length === 0 ? (

package/src/components/RLSEditor/PolicyEditor.tsx

@@ -1,5 +1,4 @@
-
-import React, { useState, useEffect } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
     Button,
     cls,
@@ -20,6 +19,13 @@ import {
     Typography
 } from "@rebasepro/ui";
 import { useTranslation } from "@rebasepro/app";
+import { RLS_JWT_SQL, RLS_ROLES_SQL, RLS_UID_SQL } from "@rebasepro/types";
+import {
+    COMMAND_OPTIONS,
+    POLICY_PRESETS,
+    roleOptionsFor,
+    type PolicyCommand
+} from "./policy-presets";
 import { MonacoEditor } from "../SQLEditor/MonacoEditor";
 import type { PostgresPolicy } from "./RLSEditor";
 
@@ -27,99 +33,23 @@ export interface PolicyEditorProps {
     policy?: PostgresPolicy;
     schema: string;
     table: string;
+    /**
+     * Native PostgreSQL roles this database actually has, for the `TO` list.
+     *
+     * Supplied by the caller from `fetchAvailableRoles()`. Merged with the
+     * always-offered defaults by `roleOptionsFor`, never used in place of them:
+     * `public` is a keyword and never comes back from that query.
+     */
+    roleOptions?: readonly string[];
     onSave: (policyData: Partial<PostgresPolicy>) => void;
     onCancel: () => void;
 }
 
-type PolicyCommand = "ALL" | "SELECT" | "INSERT" | "UPDATE" | "DELETE";
-const COMMAND_OPTIONS: PolicyCommand[] = ["ALL", "SELECT", "INSERT", "UPDATE", "DELETE"];
-const ROLE_OPTIONS = ["public", "authenticated", "anon", "admin"];
-
-interface PolicyPreset {
-    id: string;
-    label: string;
-    description: string;
-    policyname: string;
-    cmd: PolicyCommand;
-    permissive: "PERMISSIVE" | "RESTRICTIVE";
-    roles: string[];
-    qual: string;
-    with_check: string;
-}
-
-const POLICY_PRESETS: PolicyPreset[] = [
-    {
-        id: "public_read",
-        label: "Enable read access to everyone",
-        description: "Anyone can read data, regardless of authentication status.",
-        policyname: "Enable read access for all users",
-        cmd: "SELECT",
-        permissive: "PERMISSIVE",
-        roles: ["public"],
-        qual: "true",
-        with_check: ""
-    },
-    {
-        id: "auth_read",
-        label: "Enable read access for authenticated users only",
-        description: "Only logged-in users are allowed to read data.",
-        policyname: "Enable read access for authenticated users",
-        cmd: "SELECT",
-        permissive: "PERMISSIVE",
-        roles: ["authenticated"],
-        qual: "true",
-        with_check: ""
-    },
-    {
-        id: "auth_insert",
-        label: "Enable insert for authenticated users only",
-        description: "Only logged-in users are allowed to insert new data.",
-        policyname: "Enable insert for authenticated users only",
-        cmd: "INSERT",
-        permissive: "PERMISSIVE",
-        roles: ["authenticated"],
-        qual: "",
-        with_check: "true"
-    },
-    {
-        id: "user_select_own",
-        label: "Users can read their own rows",
-        description: "Users can only read rows where the uid matches their auth.uid()",
-        policyname: "Users can select their own data",
-        cmd: "SELECT",
-        permissive: "PERMISSIVE",
-        roles: ["authenticated"],
-        qual: "auth.uid() = uid",
-        with_check: ""
-    },
-    {
-        id: "user_update_own",
-        label: "Users can update their own rows",
-        description: "Users can only update rows where the uid matches their auth.uid()",
-        policyname: "Users can update their own data",
-        cmd: "UPDATE",
-        permissive: "PERMISSIVE",
-        roles: ["authenticated"],
-        qual: "auth.uid() = uid",
-        with_check: "auth.uid() = uid"
-    },
-    {
-        id: "user_delete_own",
-        label: "Users can delete their own rows",
-        description: "Users can only delete rows where the uid matches their auth.uid()",
-        policyname: "Users can delete their own data",
-        cmd: "DELETE",
-        permissive: "PERMISSIVE",
-        roles: ["authenticated"],
-        qual: "auth.uid() = uid",
-        with_check: ""
-    }
-];
-
 export const PolicyEditor = ({
     policy,
     schema,
     table,
+    roleOptions,
     onSave,
     onCancel
 }: PolicyEditorProps) => {
@@ -135,6 +65,11 @@ export const PolicyEditor = ({
 
     const [selectedPreset, setSelectedPreset] = useState<string>("");
 
+    const availableRoles = useMemo(
+        () => roleOptionsFor(roleOptions, policy?.roles),
+        [roleOptions, policy]
+    );
+
     useEffect(() => {
         if (policy) {
             setName(policy.policyname || "");
@@ -300,7 +235,7 @@ export const PolicyEditor = ({
                             onValueChange={setRoles}
                             placeholder={t("studio_policy_roles_placeholder")}
                         >
-                            {ROLE_OPTIONS.map(role => (
+                            {availableRoles.map(role => (
                                 <MultiSelectItem key={role} value={role}>
                                     {role}
                                 </MultiSelectItem>
@@ -396,7 +331,7 @@ export const PolicyEditor = ({
                                 {t("studio_policy_help_step3_desc")}
                             </Typography>
                             <div className={cls("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", defaultBorderMixin)}>
-                                Example: auth.uid() = uid
+                                Example: {RLS_UID_SQL} = uid
                             </div>
                             <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark">
                                 {t("studio_policy_help_step3_example")}
@@ -409,7 +344,7 @@ export const PolicyEditor = ({
                                 {t("studio_policy_help_step4_desc")}
                             </Typography>
                             <div className={cls("bg-surface-100 dark:bg-surface-950 px-3 py-2 rounded-md font-mono text-sm my-2", defaultBorderMixin)}>
-                                Example: auth.uid() = uid
+                                Example: {RLS_UID_SQL} = uid
                             </div>
                             <Typography variant="caption" className="text-text-secondary dark:text-text-secondary-dark">
                                 {t("studio_policy_help_step4_example")}
@@ -423,16 +358,16 @@ export const PolicyEditor = ({
                             </Typography>
                             <ul className="list-disc pl-5 space-y-2 text-sm text-text-secondary dark:text-text-secondary-dark font-normal">
                                 <li>
-                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">auth.uid()</code>
-                                    <span className="block mt-0.5">Returns the current user&apos;s ID as text. Example: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">auth.uid() = uid</code></span>
+                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">{RLS_UID_SQL}</code>
+                                    <span className="block mt-0.5">Returns the current user&apos;s ID as text. Example: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">{RLS_UID_SQL} = uid</code></span>
                                 </li>
                                 <li>
-                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">auth.jwt()</code>
-                                    <span className="block mt-0.5">Returns the full JWT payload as JSONB so you can check custom claims. Example: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">auth.jwt() -&gt;&gt; &apos;email&apos; = &apos;admin@example.com&apos;</code></span>
+                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">{RLS_JWT_SQL}</code>
+                                    <span className="block mt-0.5">Returns the full JWT payload as JSONB so you can check custom claims. Example: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">{RLS_JWT_SQL} -&gt;&gt; &apos;email&apos; = &apos;admin@example.com&apos;</code></span>
                                 </li>
                                 <li>
-                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">auth.roles()</code>
-                                    <span className="block mt-0.5">Returns the user&apos;s role IDs as a comma-separated string. Best used with: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">string_to_array(auth.roles(), &apos;,&apos;) @&gt; ARRAY[&apos;admin&apos;]</code></span>
+                                    <code className="bg-surface-100 dark:bg-surface-950 px-1.5 py-0.5 rounded mr-1 whitespace-nowrap">{RLS_ROLES_SQL}</code>
+                                    <span className="block mt-0.5">Returns the user&apos;s role IDs as a comma-separated string. Best used with: <code className="bg-surface-100 dark:bg-surface-950 px-1 py-0.5 rounded text-[11px]">string_to_array({RLS_ROLES_SQL}, &apos;,&apos;) @&gt; ARRAY[&apos;admin&apos;]</code></span>
                                 </li>
                             </ul>
                         </Paper>

package/src/components/RLSEditor/RLSEditor.tsx

@@ -181,6 +181,25 @@ export const RLSEditor = ({ apiUrl = "" }: { apiUrl?: string }) => {
 
     const [editingPolicy, setEditingPolicy] = useState<PostgresPolicy | "new" | null>(null);
 
+    /**
+     * Native PostgreSQL roles, for the policy editor's `TO` list.
+     *
+     * `fetchAvailableRoles` and not `fetchApplicationRoles`: a policy's `TO`
+     * clause names database roles, and an application role put there produces a
+     * policy that either fails to create or matches nothing. The editor falls
+     * back to a static pair when the driver cannot answer.
+     */
+    const [pgRoleOptions, setPgRoleOptions] = useState<string[]>([]);
+
+    useEffect(() => {
+        let mounted = true;
+        if (!databaseAdmin?.fetchAvailableRoles) return;
+        databaseAdmin.fetchAvailableRoles()
+            .then((roles) => { if (mounted) setPgRoleOptions(roles); })
+            .catch((e) => console.error("Failed to fetch database roles", e));
+        return () => { mounted = false; };
+    }, [databaseAdmin]);
+
     const [sidebarSize, setSidebarSize] = useState(() => {
         try {
             const saved = localStorage.getItem("rebase_rls_editor_sidebar_size");
@@ -428,7 +447,14 @@ status: "live" };
                         tablename: activeTableData.tableName,
                         permissive: (rule.mode || "permissive").toUpperCase() as PostgresPolicy["permissive"],
                         cmd: (ops[opIdx] ?? rule.operation ?? "ALL").toUpperCase() as PostgresPolicy["cmd"],
-                        roles: [...(rule.roles ?? ["public"])],
+                        // `pgRoles`, not `roles`. This is a policy's `TO` list —
+                        // database roles — while `SecurityRule.roles` holds
+                        // *application* roles, which the generator compiles into
+                        // the USING clause via `rebase.roles()` and never puts in
+                        // the `TO` list. Reading the wrong field made every rule
+                        // scoped `roles: ["admin"]` render as `TO admin`, a
+                        // policy the framework has never written.
+                        roles: [...(rule.pgRoles ?? ["public"])],
                         qual: rule.using || null,
                         with_check: rule.withCheck || null,
                         // "both" = defined in code and live in Postgres (potentially edited)
@@ -503,7 +529,7 @@ totalPolicies };
                             {sidebarTab === "tables" && (
                                 <div className="flex flex-col h-full">
                                     <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                                        <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
+                                        <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
                                             {t("studio_schema_tables")}
                                         </Typography>
                                         <IconButton size="small" onClick={fetchRLSData} title="Refresh">
@@ -600,7 +626,7 @@ totalPolicies };
                             {sidebarTab === "info" && (
                                 <div className="flex flex-col h-full">
                                     <div className={cls("flex items-center justify-between px-3 py-2 border-b bg-surface-50 dark:bg-surface-900 min-h-[48px]", defaultBorderMixin)}>
-                                        <Typography variant="caption" className="font-bold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
+                                        <Typography variant="caption" className="font-semibold uppercase tracking-wider text-text-disabled dark:text-text-disabled-dark">
                                             Overview
                                         </Typography>
                                     </div>
@@ -759,6 +785,7 @@ message: e instanceof Error ? e.message : String(e) });
                                 policy={editingPolicy === "new" ? undefined : editingPolicy}
                                 schema={activeTableData.schemaName}
                                 table={activeTableData.tableName}
+                                roleOptions={pgRoleOptions}
                                 onSave={async (newPolicy) => {
                                     /*
                                      * Where a policy for a *mapped* table belongs depends
@@ -787,7 +814,22 @@ message: e instanceof Error ? e.message : String(e) });
                                             mode: newPolicy.permissive?.toLowerCase(),
                                             using: newPolicy.qual || undefined,
                                             withCheck: newPolicy.with_check || undefined,
-                                            roles: newPolicy.roles
+                                            // The editor edits a `PostgresPolicy`, whose
+                                            // `roles` is the `TO` list — so it maps to
+                                            // `pgRoles`. Writing it to `roles` filed
+                                            // database roles as *application* roles, and
+                                            // the generator then compiled them into a
+                                            // `rebase.roles()` check no user could
+                                            // satisfy: the rule saved cleanly, pushed
+                                            // cleanly, and matched nothing.
+                                            //
+                                            // Omitted at the default so a rule that
+                                            // targets `public` — nearly all of them —
+                                            // does not carry an advanced field it does
+                                            // not need.
+                                            ...(newPolicy.roles && !(newPolicy.roles.length === 1 && newPolicy.roles[0] === "public")
+                                                ? { pgRoles: newPolicy.roles }
+                                                : {})
                                         };
 
                                         const existingRules = (isPostgresCollectionConfig(activeCollection) ? activeCollection.securityRules : undefined) || [];