@flaredev/cli 0.13.0 → 0.14.0

package/templates/app/components/dashboard/role-matrix.tsx

@@ -0,0 +1,268 @@
+"use client";
+
+import { useRouter } from "next/navigation";
+import { useState, useTransition } from "react";
+import { LockIcon, PlusIcon, ShieldIcon, Trash2Icon, UnlockIcon } from "lucide-react";
+import { toast } from "sonner";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Spinner } from "@/components/ui/spinner";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { createRoleAction, deleteRoleAction, setGrantAction } from "@/app/dashboard/roles/actions";
+
+export interface MatrixResource {
+  name: string;
+  pluralLabel: string;
+  /** Whether a policy file restricts it. Without one, every signed-in user may use it. */
+  restricted: boolean;
+  /** Roles the policy *file* gives, per action — these are ticked and locked. */
+  fromCode: Record<string, string[]>;
+  /** Roles the dashboard has granted, per action — these are the editable ticks. */
+  granted: Record<string, string[]>;
+}
+
+export interface MatrixRole {
+  name: string;
+  label: string;
+}
+
+const ACTIONS = ["read", "create", "update", "delete"] as const;
+
+/**
+ * Who may do what, as a grid.
+ *
+ * Two kinds of tick, and the difference is the point. A **locked** tick comes from
+ * `policies/<resource>.policy.ts` and cannot be changed here — the file is the floor,
+ * and a screen that appeared to remove access the code grants would be lying. An
+ * **open** tick is a grant in the database, and is yours to set.
+ *
+ * A resource with no policy file is open to every signed-in user. Ticking boxes on it
+ * would change nothing, so the row says so and points at the command that restricts it,
+ * rather than offering controls that quietly do nothing.
+ */
+export function RoleMatrix({ roles, resources, adminRoles }: { roles: MatrixRole[]; resources: MatrixResource[]; adminRoles: string[] }) {
+  const router = useRouter();
+  const [pending, startTransition] = useTransition();
+  const [selected, setSelected] = useState(roles[0]?.name ?? "");
+  const [open, setOpen] = useState(false);
+
+  const role = roles.find((candidate) => candidate.name === selected);
+
+  const run = (work: () => Promise<{ ok: boolean; error?: string }>, done?: string) =>
+    startTransition(async () => {
+      const result = await work();
+      if (!result.ok) {
+        toast.error(result.error ?? "That didn't work.");
+        return;
+      }
+      if (done) toast.success(done);
+      router.refresh();
+    });
+
+  const addRole = (form: FormData) => {
+    const name = String(form.get("name") ?? "");
+    run(async () => {
+      const result = await createRoleAction({ name, label: String(form.get("label") ?? "") });
+      if (result.ok) {
+        setSelected(name.trim().toLowerCase());
+        setOpen(false);
+      }
+      return result;
+    }, "Role created.");
+  };
+
+  return (
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader>
+          <CardTitle className="text-base">Roles</CardTitle>
+          <CardDescription>
+            A role is a name your policies give meaning. Assign one to somebody from{" "}
+            <a href="/dashboard/users" className="underline underline-offset-2">
+              Users
+            </a>
+            .
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-wrap items-center gap-2">
+          {roles.map((candidate) => (
+            <Button
+              key={candidate.name}
+              variant={candidate.name === selected ? "default" : "outline"}
+              size="sm"
+              onClick={() => setSelected(candidate.name)}
+            >
+              <ShieldIcon data-icon="inline-start" />
+              {candidate.label}
+            </Button>
+          ))}
+
+          <Dialog open={open} onOpenChange={setOpen}>
+            <DialogTrigger asChild>
+              <Button variant="outline" size="sm">
+                <PlusIcon data-icon="inline-start" />
+                New role
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-sm">
+              <DialogHeader>
+                <DialogTitle>New role</DialogTitle>
+                <DialogDescription>It exists as soon as you name it; what it may do is the grid below.</DialogDescription>
+              </DialogHeader>
+              <form action={addRole} className="flex flex-col gap-4">
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="role-name">Name</Label>
+                  <Input id="role-name" name="name" placeholder="support-agent" required autoComplete="off" />
+                  <p className="text-xs text-muted-foreground">Lowercase letters, digits, _ or -. This is what `user.role` holds.</p>
+                </div>
+                <div className="flex flex-col gap-2">
+                  <Label htmlFor="role-label">Label</Label>
+                  <Input id="role-label" name="label" placeholder="Support agent" autoComplete="off" />
+                </div>
+                <DialogFooter>
+                  <Button type="submit" disabled={pending}>
+                    {pending && <Spinner data-icon="inline-start" />}
+                    Create role
+                  </Button>
+                </DialogFooter>
+              </form>
+            </DialogContent>
+          </Dialog>
+
+          {role && !adminRoles.includes(role.name) && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="ml-auto text-destructive"
+              disabled={pending}
+              onClick={() =>
+                run(async () => {
+                  const result = await deleteRoleAction(role.name);
+                  if (result.ok) setSelected(roles.find((other) => other.name !== role.name)?.name ?? "");
+                  return result;
+                }, `Deleted ${role.label}.`)
+              }
+            >
+              <Trash2Icon data-icon="inline-start" />
+              Delete {role.label}
+            </Button>
+          )}
+        </CardContent>
+      </Card>
+
+      {role && (
+        <Card>
+          <CardHeader>
+            <CardTitle className="text-base">What {role.label} may do</CardTitle>
+            <CardDescription>
+              A locked tick comes from the resource&apos;s policy file and can only be changed there. Everything else is yours.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>Resource</TableHead>
+                    {ACTIONS.map((action) => (
+                      <TableHead key={action} className="w-24 text-center capitalize">
+                        {action}
+                      </TableHead>
+                    ))}
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {resources.map((resource) => (
+                    <TableRow key={resource.name}>
+                      <TableCell>
+                        <div className="flex flex-col">
+                          <span className="font-medium">{resource.pluralLabel}</span>
+                          {!resource.restricted && (
+                            <span className="text-xs text-muted-foreground">
+                              Open to everyone signed in — <code>flare gen policy {resource.name} --roles admin</code> to restrict it.
+                            </span>
+                          )}
+                        </div>
+                      </TableCell>
+                      {ACTIONS.map((action) => {
+                        const inCode = (resource.fromCode[action] ?? []).some((named) => named === role.name || named === "*");
+                        const isGranted = (resource.granted[action] ?? []).includes(role.name);
+                        if (!resource.restricted) {
+                          return (
+                            <TableCell key={action} className="text-center">
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <span className="inline-flex text-muted-foreground">
+                                    <UnlockIcon className="size-4" aria-label="No policy: everyone signed in may do this" />
+                                  </span>
+                                </TooltipTrigger>
+                                <TooltipContent>This resource has no policy, so every signed-in user may do this.</TooltipContent>
+                              </Tooltip>
+                            </TableCell>
+                          );
+                        }
+                        if (inCode) {
+                          return (
+                            <TableCell key={action} className="text-center">
+                              <Tooltip>
+                                <TooltipTrigger asChild>
+                                  <span className="inline-flex text-success">
+                                    <LockIcon className="size-4" aria-label="Granted by the policy file" />
+                                  </span>
+                                </TooltipTrigger>
+                                <TooltipContent>
+                                  policies/{resource.name.toLowerCase()}.policy.ts grants this. Change it there.
+                                </TooltipContent>
+                              </Tooltip>
+                            </TableCell>
+                          );
+                        }
+                        return (
+                          <TableCell key={action} className="text-center">
+                            <Checkbox
+                              checked={isGranted}
+                              disabled={pending}
+                              aria-label={`${role.label} may ${action} ${resource.pluralLabel.toLowerCase()}`}
+                              onCheckedChange={(next) =>
+                                run(() =>
+                                  setGrantAction({ role: role.name, resource: resource.name, action, granted: next === true }),
+                                )
+                              }
+                            />
+                          </TableCell>
+                        );
+                      })}
+                    </TableRow>
+                  ))}
+                </TableBody>
+              </Table>
+            </div>
+            <p className="mt-4 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-muted-foreground">
+              <span className="inline-flex items-center gap-1.5">
+                <LockIcon className="size-3.5 text-success" /> from the policy file
+              </span>
+              <span className="inline-flex items-center gap-1.5">
+                <UnlockIcon className="size-3.5" /> no policy — open to everyone signed in
+              </span>
+              <Badge variant="secondary">Grants widen a policy; they never narrow one.</Badge>
+            </p>
+          </CardContent>
+        </Card>
+      )}
+    </div>
+  );
+}

package/templates/app/components/dashboard/user-actions.tsx

@@ -23,6 +23,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
+import { Combobox } from "@/components/ui/combobox";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Spinner } from "@/components/ui/spinner";
@@ -42,6 +43,7 @@ const KNOWN_ROLES = ["admin", "staff", "user"];
 export function CreateUserButton() {
   const router = useRouter();
   const [open, setOpen] = useState(false);
+  const [role, setRole] = useState("user");
   const [pending, startTransition] = useTransition();
 
   const submit = (form: FormData) => {
@@ -90,12 +92,21 @@ export function CreateUserButton() {
           </div>
           <div className="flex flex-col gap-2">
             <Label htmlFor="new-user-role">Role</Label>
-            <Input id="new-user-role" name="role" defaultValue="user" list="known-roles" />
-            <datalist id="known-roles">
-              {KNOWN_ROLES.map((role) => (
-                <option key={role} value={role} />
-              ))}
-            </datalist>
+            {/* A combobox rather than a datalist: browsers render datalists
+                inconsistently, and the arrow on one that does nothing reads as a broken
+                control. allowCustom because a role is a string your policies name — the
+                list is a convenience, not the set of legal answers. */}
+            <Combobox
+              id="new-user-role"
+              name="role"
+              value={role}
+              onChange={setRole}
+              options={KNOWN_ROLES.map((option) => ({ value: option, label: option }))}
+              placeholder="Choose a role"
+              searchPlaceholder="Search or type a new role…"
+              allowCustom
+              customLabel={(typed) => `Create the role "${typed}"`}
+            />
             <p className="text-xs text-muted-foreground">Type anything: a new role exists the moment a policy names it.</p>
           </div>
           <DialogFooter>
@@ -113,6 +124,8 @@ export function CreateUserButton() {
 export function UserRowMenu({ userId, role, banned }: { userId: string; role: string; banned: boolean }) {
   const router = useRouter();
   const [pending, startTransition] = useTransition();
+  const [picking, setPicking] = useState(false);
+  const [draft, setDraft] = useState(role);
 
   const run = (work: () => Promise<UserActionResult>, done: string) => {
     startTransition(async () => {
@@ -146,10 +159,14 @@ export function UserRowMenu({ userId, role, banned }: { userId: string; role: st
               {option}
             </DropdownMenuItem>
           ))}
+          {/* A dialog with the same combobox, not window.prompt: a browser prompt
+              cannot show the roles that already exist, and is the one piece of UI in
+              the app that looks like it belongs to 1998. */}
           <DropdownMenuItem
-            onSelect={() => {
-              const next = window.prompt("Role (lowercase letters, digits, _ or -):", role);
-              if (next && next !== role) setRole(next);
+            onSelect={(event) => {
+              event.preventDefault();
+              setDraft(role);
+              setPicking(true);
             }}
           >
             Something else…
@@ -166,6 +183,35 @@ export function UserRowMenu({ userId, role, banned }: { userId: string; role: st
           </DropdownMenuItem>
         </DropdownMenuGroup>
       </DropdownMenuContent>
+
+      <Dialog open={picking} onOpenChange={setPicking}>
+        <DialogContent className="sm:max-w-sm">
+          <DialogHeader>
+            <DialogTitle>Change role</DialogTitle>
+            <DialogDescription>Pick one that exists, or type a new one — a role exists the moment a policy names it.</DialogDescription>
+          </DialogHeader>
+          <Combobox
+            value={draft}
+            onChange={setDraft}
+            options={KNOWN_ROLES.map((option) => ({ value: option, label: option }))}
+            placeholder="Choose a role"
+            searchPlaceholder="Search or type a new role…"
+            allowCustom
+            customLabel={(typed) => `Create the role "${typed}"`}
+          />
+          <DialogFooter>
+            <Button
+              disabled={pending || !draft.trim() || draft === role}
+              onClick={() => {
+                setPicking(false);
+                setRole(draft.trim());
+              }}
+            >
+              Change role
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </DropdownMenu>
   );
 }

package/templates/app/components/dashboard/user-menu.tsx

@@ -66,7 +66,7 @@ export function UserMenuItems({ user, isAdmin = false }: { user: DashboardUser;
         </DropdownMenuItem>
         {isAdmin && (
           <DropdownMenuItem asChild>
-            <Link href="/dashboard/users">
+            <Link href="/dashboard/roles">
               <ShieldIcon />
               Manage roles
             </Link>

package/templates/app/components/ui/combobox.tsx

@@ -0,0 +1,133 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import { CheckIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { cn } from "@/lib/utils";
+
+export interface ComboboxOption {
+  value: string;
+  label: string;
+  /** A second line, for options whose label is not enough on its own. */
+  hint?: string;
+}
+
+/**
+ * A select you can type into.
+ *
+ * A plain `<select>` is fine for three options and miserable for thirty: you cannot
+ * search it, and on a touch device it becomes a native wheel. This is the pattern the
+ * relation field already used — a popover over a command list — made general, so every
+ * place in the app that chooses one thing from a list behaves the same way.
+ *
+ * `allowCustom` lets the typed text be the answer. That is for values which are not a
+ * fixed set — a role is just a string your policies name, so the list is a convenience
+ * rather than a constraint, and the field must not stop you inventing one.
+ */
+export function Combobox({
+  options,
+  value,
+  onChange,
+  id,
+  name,
+  placeholder = "Select…",
+  searchPlaceholder = "Search…",
+  emptyMessage = "Nothing found.",
+  allowCustom = false,
+  customLabel = (typed: string) => `Use "${typed}"`,
+  disabled,
+  invalid,
+  className,
+}: {
+  options: ComboboxOption[];
+  value: string;
+  onChange: (value: string) => void;
+  id?: string;
+  /** Mirrors the value into a hidden input, so plain `<form>` submission sees it. */
+  name?: string;
+  placeholder?: string;
+  searchPlaceholder?: string;
+  emptyMessage?: string;
+  allowCustom?: boolean;
+  customLabel?: (typed: string) => string;
+  disabled?: boolean;
+  invalid?: boolean;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+
+  const selected = options.find((option) => option.value === value);
+  // A custom value is shown as itself rather than falling back to the placeholder,
+  // which would make a perfectly good answer look like no answer.
+  const display = selected?.label ?? (value || null);
+
+  const typed = query.trim();
+  const canCreate = allowCustom && typed.length > 0 && !options.some((option) => option.value.toLowerCase() === typed.toLowerCase());
+
+  const choose = (next: string) => {
+    onChange(next);
+    setQuery("");
+    setOpen(false);
+  };
+
+  const filtered = useMemo(() => {
+    if (!typed) return options;
+    const needle = typed.toLowerCase();
+    return options.filter((option) => option.label.toLowerCase().includes(needle) || option.value.toLowerCase().includes(needle));
+  }, [options, typed]);
+
+  return (
+    <>
+      {name && <input type="hidden" name={name} value={value} />}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            id={id}
+            type="button"
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            aria-invalid={invalid || undefined}
+            disabled={disabled}
+            className={cn("w-full justify-between font-normal", !display && "text-muted-foreground", className)}
+          >
+            <span className="truncate">{display ?? placeholder}</span>
+            <ChevronsUpDownIcon className="opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-(--radix-popover-trigger-width) p-0" align="start">
+          <Command shouldFilter={false}>
+            <CommandInput placeholder={searchPlaceholder} value={query} onValueChange={setQuery} />
+            <CommandList>
+              {filtered.length === 0 && !canCreate && <CommandEmpty>{emptyMessage}</CommandEmpty>}
+              {filtered.length > 0 && (
+                <CommandGroup>
+                  {filtered.map((option) => (
+                    <CommandItem key={option.value} value={option.value} onSelect={() => choose(option.value)}>
+                      <span className="flex min-w-0 flex-col">
+                        <span className="truncate">{option.label}</span>
+                        {option.hint && <span className="truncate text-xs text-muted-foreground">{option.hint}</span>}
+                      </span>
+                      <CheckIcon className={cn("ml-auto", option.value === value ? "opacity-100" : "opacity-0")} />
+                    </CommandItem>
+                  ))}
+                </CommandGroup>
+              )}
+              {canCreate && (
+                <CommandGroup>
+                  <CommandItem value={`__create__${typed}`} onSelect={() => choose(typed)}>
+                    <PlusIcon />
+                    {customLabel(typed)}
+                  </CommandItem>
+                </CommandGroup>
+              )}
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}

package/templates/app/db/flare-schema.ts

@@ -1,5 +1,5 @@
 import { sql } from "drizzle-orm";
-import { index, integer, sqliteTable, text } from "drizzle-orm/sqlite-core";
+import { index, integer, sqliteTable, text, uniqueIndex } from "drizzle-orm/sqlite-core";
 
 /**
  * Roles a user can hold (`user.role` from Better Auth's admin plugin).
@@ -14,6 +14,32 @@ export const role = sqliteTable("role", {
     .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`),
 });
 
+/**
+ * Permissions granted from the dashboard, on top of the policies in your code.
+ *
+ * A row says "this role may do this to this resource". It can only ever *widen* what
+ * `policies/*.policy.ts` already allows — see `withGrants` in @flaredev/core. A
+ * resource with no policy file is open to every signed-in user, and no row here changes
+ * that; the roles screen says so rather than pretending otherwise.
+ */
+export const rolePermission = sqliteTable(
+  "role_permission",
+  {
+    id: text("id").primaryKey().$defaultFn(() => crypto.randomUUID()),
+    /** The role's name, as in the `role` table and `user.role`. */
+    role: text("role").notNull(),
+    /** The resource's descriptor name, e.g. "Invoice". */
+    resource: text("resource").notNull(),
+    /** "read", "create", "update" or "delete". */
+    action: text("action").notNull(),
+    createdAt: integer("created_at", { mode: "timestamp_ms" })
+      .notNull()
+      .default(sql`(cast(unixepoch('subsecond') * 1000 as integer))`),
+  },
+  // One row per cell of the matrix: ticking a box twice is the same tick.
+  (table) => [uniqueIndex("role_permission_unique").on(table.role, table.resource, table.action)],
+);
+
 /**
  * Who changed what, and when. Written by the dashboard's actions (lib/audit.ts) for
  * every create, update, delete and import, and read by /dashboard/observability.

package/templates/app/lib/api.ts

@@ -6,6 +6,7 @@ import type { ResourceAction } from "@/lib/resource";
 import { checkRateLimit } from "@/lib/rate-limit";
 import type { Authorize } from "@/lib/resource/handlers";
 import { policies } from "@/policies";
+import { effectivePolicy } from "./permissions";
 import { userFromApiKey } from "./api-keys";
 import { auth } from "./auth";
 
@@ -60,7 +61,9 @@ export const authorize: Authorize = async ({ request, resource, action }) => {
   if (!session && !viaKey) return problemResponse(401, "Sign in required.", PROBLEM_CODES.unauthenticated);
 
   const role = session ? ((session.user as { role?: string | null }).role ?? null) : viaKey!.role;
-  if (!can(policyFor(resource.name), role, action)) {
+  // The effective policy: your policy file, widened by whatever the dashboard's Roles
+  // screen granted. The API and the admin read the same one, so they cannot drift.
+  if (!can(await effectivePolicy(resource.name), role, action)) {
     return problemResponse(403, `Your role can't ${action} ${resource.pluralLabel.toLowerCase()}.`, PROBLEM_CODES.forbidden);
   }
 };

package/templates/app/lib/dashboard.ts

@@ -6,6 +6,7 @@ import type { SQLiteTable } from "drizzle-orm/sqlite-core";
 import { createResourceStore, drizzleRows, type ResourceStore } from "@/lib/resource";
 import { getDb } from "@/db";
 import { policies } from "@/policies";
+import { effectivePolicy } from "./permissions";
 import { resourceTables } from "@/resources/server";
 import { currentUser } from "./api";
 import { auth } from "./auth";
@@ -18,6 +19,13 @@ import { cached, resourceTag, revalidateResource, TTL } from "./cache";
  */
 export const ADMIN_ROLES = ["admin", "staff"];
 
+/**
+ * The policy in your code, before the dashboard's grants.
+ *
+ * The store takes this one, because the half of a policy the store enforces is `own` —
+ * per-record ownership — which is a code decision and not something the roles screen
+ * can change. Role checks go through {@link effectivePolicy} instead.
+ */
 export function policyFor(resourceName: string): Policy | undefined {
   return (policies as Record<string, Policy | undefined>)[resourceName];
 }
@@ -26,7 +34,9 @@ export async function dashboardSession() {
   const session = await auth.api.getSession({ headers: await headers() });
   if (!session) return { session: null, role: null, allowed: false } as const;
   const role = (session.user as { role?: string | null }).role ?? null;
-  const readable = allResources().some((resource) => can(policyFor(resource.name), role, "read"));
+  const readable = (await Promise.all(allResources().map((resource) => effectivePolicy(resource.name)))).some((policy) =>
+    can(policy, role, "read"),
+  );
   return { session, role, allowed: (role !== null && ADMIN_ROLES.includes(role)) || readable } as const;
 }
 
@@ -45,7 +55,7 @@ export async function requireDashboard(returnTo = "/dashboard") {
  */
 export async function requireAccess(resource: Resource, action: PolicyAction) {
   const { session, role } = await requireDashboard(resourcePath(resource));
-  const policy = policyFor(resource.name);
+  const policy = await effectivePolicy(resource.name);
   if (!can(policy, role, action)) {
     redirect(action !== "read" && can(policy, role, "read") ? resourcePath(resource) : "/dashboard?error=forbidden");
   }
@@ -55,7 +65,7 @@ export async function requireAccess(resource: Resource, action: PolicyAction) {
 /** What the current user may do with a resource, for hiding actions they can't use. */
 export async function adminPermissions(resourceName: string) {
   const { role } = await dashboardSession();
-  return allowedActions(policyFor(resourceName), role);
+  return allowedActions(await effectivePolicy(resourceName), role);
 }
 
 /**
@@ -195,7 +205,8 @@ export function allResources(): Resource[] {
 /** Resources the current user may read, for the sidebar and dashboard. */
 export async function visibleResources(): Promise<Resource[]> {
   const { role } = await dashboardSession();
-  return allResources().filter((resource) => can(policyFor(resource.name), role, "read"));
+  const policies = await Promise.all(allResources().map((resource) => effectivePolicy(resource.name)));
+  return allResources().filter((resource, index) => can(policies[index], role, "read"));
 }
 
 export function resourcePath(resource: Resource, ...parts: string[]) {