fix(webapp): enforce write:prompts / update:prompts on prompt detail route + UI

Migrate the prompt detail action to dashboardAction and check the right
permission per intent: promote -> update:prompts, create/edit/remove/
reactivate override -> write:prompts. Surface canPromote / canWritePrompts
display flags from the loader (via the injected ability) and gate the
Promote, Reactivate, Create override, Edit, and Remove buttons. Tenancy
queries unchanged; permissive in OSS, enforced under the enterprise plugin.

Author: matt-aitken

apps/webapp/app/routes/_app.orgs.$organizationSlug.projects.$projectParam.env.$envParam.prompts.$promptSlug/route.tsx

@@ -2,12 +2,7 @@ import * as Ariakit from "@ariakit/react";
 import { ArrowPathIcon, ChevronUpDownIcon } from "@heroicons/react/20/solid";
 import { DialogClose } from "@radix-ui/react-dialog";
 import { type MetaFunction, useFetcher } from "@remix-run/react";
-import {
-  type ActionFunctionArgs,
-  json,
-  type LoaderFunctionArgs,
-  redirect,
-} from "@remix-run/server-runtime";
+import { json, type LoaderFunctionArgs, redirect } from "@remix-run/server-runtime";
 
 import { AnimatePresence, motion } from "framer-motion";
 import { ClipboardCheckIcon, ClipboardIcon, GitBranchPlusIcon } from "lucide-react";
@@ -22,6 +17,7 @@ import { ProvidersFilter } from "~/components/metrics/ProvidersFilter";
 import { AppliedFilter } from "~/components/primitives/AppliedFilter";
 import { Badge } from "~/components/primitives/Badge";
 import { Button, LinkButton } from "~/components/primitives/Buttons";
+import { PermissionButton } from "~/components/primitives/PermissionButton";
 import { DateTime } from "~/components/primitives/DateTime";
 import { Dialog, DialogContent, DialogHeader } from "~/components/primitives/Dialog";
 import { Header3 } from "~/components/primitives/Headers";
@@ -60,7 +56,7 @@ import { Spinner } from "~/components/primitives/Spinner";
 import { TabButton, TabContainer } from "~/components/primitives/Tabs";
 import { TextArea } from "~/components/primitives/TextArea";
 import { TimeFilter } from "~/components/runs/v3/SharedFilters";
-import { prisma } from "~/db.server";
+import { $replica, prisma } from "~/db.server";
 import { useEnvironment } from "~/hooks/useEnvironment";
 import { useInterval } from "~/hooks/useInterval";
 import { useOrganization } from "~/hooks/useOrganizations";
@@ -73,6 +69,9 @@ import { SpanView } from "~/routes/resources.orgs.$organizationSlug.projects.$pr
 import { clickhouseFactory } from "~/services/clickhouse/clickhouseFactoryInstance.server";
 import { getResizableSnapshot } from "~/services/resizablePanel.server";
 import { requireUserId } from "~/services/session.server";
+import { rbac } from "~/services/rbac.server";
+import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder";
+import { checkPermissions } from "~/services/routeBuilders/permissions.server";
 import { PromptService } from "~/v3/services/promptService.server";
 
 import { z } from "zod";
@@ -122,85 +121,107 @@ const ActionSchema = z.discriminatedUnion("intent", [
   }),
 ]);
 
-export async function action({ request, params }: ActionFunctionArgs) {
-  const userId = await requireUserId(request);
-  const { organizationSlug, projectParam, envParam, promptSlug } = ParamSchema.parse(params);
+async function resolveOrgIdFromSlug(slug: string): Promise<string | null> {
+  const org = await $replica.organization.findFirst({ where: { slug }, select: { id: true } });
+  return org?.id ?? null;
+}
 
-  const project = await findProjectBySlug(organizationSlug, projectParam, userId);
-  if (!project) return json({ error: "Project not found" }, { status: 404 });
+export const action = dashboardAction(
+  {
+    params: ParamSchema,
+    context: async (params) => {
+      const organizationId = await resolveOrgIdFromSlug(params.organizationSlug);
+      return organizationId ? { organizationId } : {};
+    },
+  },
+  async ({ request, params, user, ability }) => {
+    const { organizationSlug, projectParam, envParam, promptSlug } = params;
+
+    const project = await findProjectBySlug(organizationSlug, projectParam, user.id);
+    if (!project) return json({ error: "Project not found" }, { status: 404 });
+
+    const environment = await findEnvironmentBySlug(project.id, envParam, user.id);
+    if (!environment) return json({ error: "Environment not found" }, { status: 404 });
+
+    const formData = Object.fromEntries(await request.formData());
+    const parsed = ActionSchema.safeParse(formData);
+    if (!parsed.success) return json({ error: "Invalid action" }, { status: 400 });
+
+    const prompt = await prisma.prompt.findUnique({
+      where: {
+        projectId_runtimeEnvironmentId_slug: {
+          projectId: project.id,
+          runtimeEnvironmentId: environment.id,
+          slug: promptSlug,
+        },
+      },
+    });
 
-  const environment = await findEnvironmentBySlug(project.id, envParam, userId);
-  if (!environment) return json({ error: "Environment not found" }, { status: 404 });
+    if (!prompt) return json({ error: "Prompt not found" }, { status: 404 });
 
-  const formData = Object.fromEntries(await request.formData());
-  const parsed = ActionSchema.safeParse(formData);
-  if (!parsed.success) return json({ error: "Invalid action" }, { status: 400 });
+    const data = parsed.data;
 
-  const prompt = await prisma.prompt.findUnique({
-    where: {
-      projectId_runtimeEnvironmentId_slug: {
-        projectId: project.id,
-        runtimeEnvironmentId: environment.id,
-        slug: promptSlug,
-      },
-    },
-  });
+    // Promoting a version to production is `update:prompts`; creating or
+    // editing override versions is `write:prompts`. Check the right one per
+    // intent — a single authorization block can't express both.
+    const requiredAction = data.intent === "promote" ? "update" : "write";
+    if (!ability.can(requiredAction, { type: "prompts" })) {
+      return json({ error: "Unauthorized" }, { status: 403 });
+    }
 
-  if (!prompt) return json({ error: "Prompt not found" }, { status: 404 });
+    const service = new PromptService();
 
-  const data = parsed.data;
-  const service = new PromptService();
+    if (data.intent === "promote") {
+      await service.promoteVersion(prompt.id, data.versionId);
+      return json({ ok: true });
+    }
 
-  if (data.intent === "promote") {
-    await service.promoteVersion(prompt.id, data.versionId);
-    return json({ ok: true });
-  }
+    const url = new URL(request.url);
 
-  const url = new URL(request.url);
+    if (data.intent === "saveVersion") {
+      const result = await service.createOverride(prompt.id, {
+        textContent: data.textContent ?? "",
+        model: data.model,
+        commitMessage: data.commitMessage,
+        source: "dashboard",
+        createdBy: user.id,
+      });
+      url.searchParams.set("version", String(result.version));
+      return redirect(url.pathname + url.search);
+    }
 
-  if (data.intent === "saveVersion") {
-    const result = await service.createOverride(prompt.id, {
-      textContent: data.textContent ?? "",
-      model: data.model,
-      commitMessage: data.commitMessage,
-      source: "dashboard",
-      createdBy: userId,
-    });
-    url.searchParams.set("version", String(result.version));
-    return redirect(url.pathname + url.search);
-  }
+    if (data.intent === "updateOverride") {
+      await service.updateOverride(prompt.id, {
+        textContent: data.textContent,
+        model: data.model,
+        commitMessage: data.commitMessage,
+      });
+      return json({ ok: true });
+    }
 
-  if (data.intent === "updateOverride") {
-    await service.updateOverride(prompt.id, {
-      textContent: data.textContent,
-      model: data.model,
-      commitMessage: data.commitMessage,
-    });
-    return json({ ok: true });
-  }
+    if (data.intent === "removeOverride") {
+      await service.removeOverride(prompt.id);
+      // Navigate back to current version
+      const currentVersion = await prisma.promptVersion.findFirst({
+        where: { promptId: prompt.id, labels: { has: "current" } },
+        select: { version: true },
+      });
+      if (currentVersion) {
+        url.searchParams.set("version", String(currentVersion.version));
+      } else {
+        url.searchParams.delete("version");
+      }
+      return redirect(url.pathname + url.search);
+    }
 
-  if (data.intent === "removeOverride") {
-    await service.removeOverride(prompt.id);
-    // Navigate back to current version
-    const currentVersion = await prisma.promptVersion.findFirst({
-      where: { promptId: prompt.id, labels: { has: "current" } },
-      select: { version: true },
-    });
-    if (currentVersion) {
-      url.searchParams.set("version", String(currentVersion.version));
-    } else {
-      url.searchParams.delete("version");
+    if (data.intent === "reactivateOverride") {
+      await service.reactivateOverride(prompt.id, data.versionId);
+      return json({ ok: true });
     }
-    return redirect(url.pathname + url.search);
-  }
 
-  if (data.intent === "reactivateOverride") {
-    await service.reactivateOverride(prompt.id, data.versionId);
-    return json({ ok: true });
+    return json({ error: "Unknown intent" }, { status: 400 });
   }
-
-  return json({ error: "Unknown intent" }, { status: 400 });
-}
+);
 
 // ─── Loader ──────────────────────────────────────────────
 
@@ -242,7 +263,10 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const startTime = fromTime ? new Date(fromTime) : new Date(Date.now() - periodMs);
   const endTime = toTime ? new Date(toTime) : new Date();
 
-  const clickhouse = await clickhouseFactory.getClickhouseForOrganization(project.organizationId, "standard");
+  const clickhouse = await clickhouseFactory.getClickhouseForOrganization(
+    project.organizationId,
+    "standard"
+  );
   const presenter = new PromptPresenter(clickhouse);
   let generations: Awaited<ReturnType<typeof presenter.listGenerations>>["generations"] = [];
   let generationsPagination: { next?: string } = {};
@@ -301,6 +325,19 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const possibleOperations = opsErr ? [] : opsRows.map((r) => r.val);
   const possibleProviders = provsErr ? [] : provsRows.map((r) => r.val);
 
+  // Display flags for the promote / override controls — the action enforces
+  // update:prompts and write:prompts independently. Permissive in OSS.
+  const promptAuth = await rbac.authenticateSession(request, {
+    userId,
+    organizationId: project.organizationId,
+  });
+  const promptPermissions = promptAuth.ok
+    ? checkPermissions(promptAuth.ability, {
+        canWritePrompts: { action: "write", resource: { type: "prompts" } },
+        canPromote: { action: "update", resource: { type: "prompts" } },
+      })
+    : { canWritePrompts: true, canPromote: true };
+
   return typedjson({
     resizable: {
       outer: resizableOuter,
@@ -353,6 +390,7 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     possibleModels,
     possibleOperations,
     possibleProviders,
+    ...promptPermissions,
   });
 };
 
@@ -437,6 +475,8 @@ export default function PromptDetailPage() {
     possibleModels,
     possibleOperations,
     possibleProviders,
+    canWritePrompts,
+    canPromote,
   } = useTypedLoaderData<typeof loader>();
   const organization = useOrganization();
   const project = useProject();
@@ -518,18 +558,22 @@ export default function PromptDetailPage() {
               </div>
             )}
             {selectedVersion && !isCurrent && selectedVersion.source === "code" && (
-              <Button
+              <PermissionButton
+                hasPermission={canPromote}
+                noPermissionTooltip="You don't have permission to promote prompt versions"
                 variant="secondary/small"
                 onClick={() => handlePromote(selectedVersion.id)}
                 disabled={fetcher.state !== "idle"}
               >
                 Promote to current
-              </Button>
+              </PermissionButton>
             )}
             {selectedVersion &&
               selectedVersion.source !== "code" &&
               !selectedVersion.labels.includes("override") && (
-                <Button
+                <PermissionButton
+                  hasPermission={canWritePrompts}
+                  noPermissionTooltip="You don't have permission to edit prompt overrides"
                   variant="secondary/small"
                   onClick={() =>
                     fetcher.submit(
@@ -540,12 +584,17 @@ export default function PromptDetailPage() {
                   disabled={fetcher.state !== "idle"}
                 >
                   Reactivate as override
-                </Button>
+                </PermissionButton>
               )}
             {!overrideVersion && (
-              <Button variant="secondary/small" onClick={() => setOverrideDialogOpen(true)}>
+              <PermissionButton
+                hasPermission={canWritePrompts}
+                noPermissionTooltip="You don't have permission to edit prompt overrides"
+                variant="secondary/small"
+                onClick={() => setOverrideDialogOpen(true)}
+              >
                 Create override
-              </Button>
+              </PermissionButton>
             )}
           </div>
         </PageAccessories>
@@ -565,21 +614,25 @@ export default function PromptDetailPage() {
                 instead of the deployed prompt.
               </span>
               <div className="flex items-center gap-2 py-1.5">
-                <Button
+                <PermissionButton
+                  hasPermission={canWritePrompts}
+                  noPermissionTooltip="You don't have permission to edit prompt overrides"
                   variant="tertiary/small"
                   className="border-amber-300/50 bg-amber-400/10 text-amber-300 group-hover/button:border-amber-400/60 group-hover/button:bg-amber-500/25 group-hover/button:text-amber-200"
                   onClick={() => setOverrideDialogOpen(true)}
                 >
                   Edit
-                </Button>
-                <Button
+                </PermissionButton>
+                <PermissionButton
+                  hasPermission={canWritePrompts}
+                  noPermissionTooltip="You don't have permission to edit prompt overrides"
                   variant="tertiary/small"
                   className="border-amber-300/50 bg-amber-400/10 text-amber-300 group-hover/button:border-amber-400/60 group-hover/button:bg-amber-500/25 group-hover/button:text-amber-200"
                   onClick={() => fetcher.submit({ intent: "removeOverride" }, { method: "POST" })}
                   disabled={fetcher.state !== "idle"}
                 >
                   Remove
-                </Button>
+                </PermissionButton>
               </div>
             </motion.div>
           )}
@@ -1502,7 +1555,10 @@ function GenerationsTab({
                       {gen.operation_id || gen.task_identifier}
                     </TableCell>
                     <TableCell
-                      className={cn("tabular-nums", isSelected ? "text-text-bright" : "text-charcoal-400")}
+                      className={cn(
+                        "tabular-nums",
+                        isSelected ? "text-text-bright" : "text-charcoal-400"
+                      )}
                     >
                       v{gen.prompt_version}
                     </TableCell>