Manage stakeholders implemented

app/(app)/create/CreateFlowLayoutClient.tsx

@@ -17,6 +17,9 @@ import { useCompletedRuleShareExport } from "./hooks/useCompletedRuleShareExport
 import CreateFlowFooter from "../../components/navigation/CreateFlowFooter";
 import CreateFlowTopNav from "../../components/navigation/CreateFlowTopNav";
 import {
+  CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY,
+  CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE,
+  CREATE_FLOW_REVIEW_RETURN_QUERY_KEY,
   getNextStep,
   getStepIndex,
   parseReviewReturnSearchParam,
@@ -158,7 +161,17 @@ function CreateFlowLayoutContent({
     resetCustomRuleSelections,
     setMethodSectionsPinCommitted,
     replaceState,
+    markCreateFlowInteraction,
   } = useCreateFlow();
+  const manageStakeholdersIntent =
+    searchParams?.get(CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY) ===
+    CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE;
+  const editingPublishedRuleIdTrimmed =
+    state.editingPublishedRuleId?.trim() ?? "";
+  const isConfirmStakeholdersManagePublished =
+    currentStep === "confirm-stakeholders" &&
+    manageStakeholdersIntent &&
+    editingPublishedRuleIdTrimmed.length > 0;
   const { draftSaveBannerMessage, setDraftSaveBannerMessage } =
     useCreateFlowDraftSaveBanner();
   const [communitySaveMagicLinkSubmitting, setCommunitySaveMagicLinkSubmitting] =
@@ -411,6 +424,7 @@ function CreateFlowLayoutContent({
   const isRightRailStep = currentStep === "decision-approaches";
   const isFinalReviewLike =
     currentStep === "final-review" || currentStep === "edit-rule";
+  const isEditRuleStep = currentStep === "edit-rule";
   const isCardLayoutStep = createFlowStepUsesCardLayout(currentStep);
   /** Two-column select / right-rail: below `lg` main scrolls; at `lg+` only the right column scrolls. */
   const isSelectSplitScrollStep = createFlowStepUsesSelectSplitScroll(
@@ -581,6 +595,7 @@ function CreateFlowLayoutContent({
         hasShare={isCompletedStep}
         hasExport={isCompletedStep}
         hasEdit={isCompletedStep}
+        hasManageStakeholders={isEditRuleStep}
         saveDraftOnExit={saveDraftOnExit}
         onShare={
           isCompletedStep ? () => void handleOpenCompletedShareModal() : undefined
@@ -601,6 +616,20 @@ function CreateFlowLayoutContent({
               }
             : undefined
         }
+        onManageStakeholders={
+          isEditRuleStep
+            ? () => {
+                markCreateFlowInteraction();
+                router.push(
+                  createFlowStepPath("confirm-stakeholders", {
+                    [CREATE_FLOW_REVIEW_RETURN_QUERY_KEY]: "edit-rule",
+                    [CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY]:
+                      CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE,
+                  }),
+                );
+              }
+            : undefined
+        }
         onExit={(opts) => void handleExit(opts)}
         buttonPalette={isCompletedStep ? "inverse" : undefined}
         className={`shrink-0 ${
@@ -762,6 +791,27 @@ function CreateFlowLayoutContent({
               >
                 {footer[customRuleConfirmFooter.footerMessageKey]}
               </Button>
+            ) : isConfirmStakeholdersManagePublished ? (
+              <Button
+                buttonType="filled"
+                palette="default"
+                size="xsmall"
+                disabled={isPublishing}
+                className={CREATE_FLOW_FOOTER_BUTTON_CLASS}
+                onClick={() => {
+                  router.push(
+                    createFlowStepPathAfterStrippingReviewReturn(
+                      "edit-rule",
+                      searchParams,
+                    ),
+                  );
+                }}
+              >
+                {
+                  create.reviewAndComplete.confirmStakeholders.managePublished
+                    .footerDone
+                }
+              </Button>
             ) : nextStep || isFinalReviewLike ? (
               <Button
                 buttonType="filled"

app/(app)/create/hooks/useCreateFlowFinalize.ts

@@ -100,10 +100,14 @@ export function useCreateFlowFinalize({
       return;
     }
 
+    const stakeholderEmails = (state.stakeholderEmails ?? []).filter(
+      (e) => typeof e === "string" && e.trim() !== "",
+    );
     const publishResult = await publishRule({
       title,
       summary,
       document: ruleDocument,
+      ...(stakeholderEmails.length > 0 ? { stakeholderEmails } : {}),
     });
     setIsPublishing(false);
     if (publishResult.ok === true) {

app/(app)/create/screens/select/ConfirmStakeholdersScreen.tsx

@@ -1,25 +1,82 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useRouter, useSearchParams } from "next/navigation";
 import MultiSelect from "../../../../components/controls/MultiSelect";
 import Alert from "../../../../components/modals/Alert";
 import type { ChipOption } from "../../../../components/controls/MultiSelect/MultiSelect.types";
 import { useTranslation } from "../../../../contexts/MessagesContext";
+import { MAX_STAKEHOLDER_EMAILS } from "../../../../../lib/create/stakeholderLimits";
 import { useCreateFlow } from "../../context/CreateFlowContext";
 import { CreateFlowHeaderLockup } from "../../components/CreateFlowHeaderLockup";
 import { CreateFlowStepShell } from "../../components/CreateFlowStepShell";
 import { CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS } from "../../components/createFlowLayoutTokens";
+import {
+  CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY,
+  CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE,
+} from "../../utils/flowSteps";
+import { createFlowStepPath } from "../../utils/createFlowPaths";
+import { PublishedStakeholdersManagePanel } from "./PublishedStakeholdersManagePanel";
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+function emailsToChipOptions(emails: string[]): ChipOption[] {
+  return emails.map((email) => ({
+    id: email,
+    label: email,
+    state: "selected" as const,
+  }));
+}
 
 export function ConfirmStakeholdersScreen() {
-  const { markCreateFlowInteraction } = useCreateFlow();
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const { state, updateState, markCreateFlowInteraction } = useCreateFlow();
   const t = useTranslation("create.reviewAndComplete.confirmStakeholders");
+
+  const manageStakeholdersIntent =
+    searchParams?.get(CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY) ===
+    CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE;
+  const editingPublishedRuleId = state.editingPublishedRuleId?.trim() ?? "";
+  const managePublishedMode =
+    manageStakeholdersIntent && editingPublishedRuleId.length > 0;
+
+  useEffect(() => {
+    if (!manageStakeholdersIntent) return;
+    if (editingPublishedRuleId.length > 0) return;
+    router.replace(createFlowStepPath("edit-rule"));
+  }, [
+    manageStakeholdersIntent,
+    editingPublishedRuleId.length,
+    router,
+  ]);
+
+  const persistedKey = (state.stakeholderEmails ?? []).join("\0");
   const [toastDismissed, setToastDismissed] = useState(false);
+  const [chipError, setChipError] = useState<string | null>(null);
   const [stakeholderOptions, setStakeholderOptions] = useState<ChipOption[]>(
-    [],
+    () => emailsToChipOptions(state.stakeholderEmails ?? []),
   );
 
+  useEffect(() => {
+    setStakeholderOptions((prev) => {
+      const inFlight = prev.filter((c) => c.state === "custom");
+      const nextPersisted = emailsToChipOptions(state.stakeholderEmails ?? []);
+      return [...nextPersisted, ...inFlight];
+    });
+  }, [persistedKey]);
+
   const handleAddStakeholder = () => {
     markCreateFlowInteraction();
+    setChipError(null);
+    const confirmed = state.stakeholderEmails ?? [];
+    const customCount = stakeholderOptions.filter(
+      (o) => o.state === "custom",
+    ).length;
+    if (confirmed.length + customCount >= MAX_STAKEHOLDER_EMAILS) {
+      setChipError(t("maxStakeholders"));
+      return;
+    }
     setStakeholderOptions((prev) => [
       ...prev,
       { id: crypto.randomUUID(), label: "", state: "custom" },
@@ -28,23 +85,72 @@ export function ConfirmStakeholdersScreen() {
 
   const handleCustomChipConfirm = (chipId: string, value: string) => {
     markCreateFlowInteraction();
+    setChipError(null);
+    const trimmed = value.trim().toLowerCase();
+    if (!EMAIL_PATTERN.test(trimmed)) {
+      setChipError(t("invalidEmail"));
+      return;
+    }
+    const current = state.stakeholderEmails ?? [];
+    if (current.includes(trimmed)) {
+      setChipError(t("duplicateEmail"));
+      setStakeholderOptions((prev) => prev.filter((opt) => opt.id !== chipId));
+      return;
+    }
+    if (current.length >= MAX_STAKEHOLDER_EMAILS) {
+      setChipError(t("maxStakeholders"));
+      setStakeholderOptions((prev) => prev.filter((opt) => opt.id !== chipId));
+      return;
+    }
     setStakeholderOptions((prev) =>
       prev.map((opt) =>
-        opt.id === chipId ? { ...opt, label: value, state: "selected" } : opt,
+        opt.id === chipId
+          ? { id: trimmed, label: trimmed, state: "selected" as const }
+          : opt,
       ),
     );
+    updateState({ stakeholderEmails: [...current, trimmed] });
   };
 
   const handleCustomChipClose = (chipId: string) => {
     markCreateFlowInteraction();
+    setChipError(null);
     setStakeholderOptions((prev) => prev.filter((opt) => opt.id !== chipId));
   };
 
   const handleChipClick = (chipId: string) => {
     markCreateFlowInteraction();
+    setChipError(null);
     setStakeholderOptions((prev) => prev.filter((opt) => opt.id !== chipId));
+    updateState({
+      stakeholderEmails: (state.stakeholderEmails ?? []).filter(
+        (e) => e !== chipId,
+      ),
+    });
   };
 
+  if (managePublishedMode) {
+    return (
+      <CreateFlowStepShell
+        variant="centeredNarrowBottomPad"
+        contentTopBelowMd="space-1400"
+      >
+        <div
+          className={`flex flex-col items-start gap-[var(--measures-spacing-300,12px)] ${CREATE_FLOW_MD_UP_COLUMN_MAX_CLASS}`}
+        >
+          <div className="flex w-full flex-col gap-[var(--measures-spacing-200,8px)] py-[12px]">
+            <CreateFlowHeaderLockup
+              title={t("managePublished.lockupTitle")}
+              description={t("managePublished.lockupDescription")}
+              justification="left"
+            />
+          </div>
+          <PublishedStakeholdersManagePanel ruleId={editingPublishedRuleId} />
+        </div>
+      </CreateFlowStepShell>
+    );
+  }
+
   return (
     <>
       <CreateFlowStepShell
@@ -61,6 +167,14 @@ export function ConfirmStakeholdersScreen() {
               justification="left"
             />
           </div>
+          {chipError ? (
+            <p
+              className="font-inter text-sm text-[var(--color-border-default-utility-negative)]"
+              role="alert"
+            >
+              {chipError}
+            </p>
+          ) : null}
           <MultiSelect
             formHeader={false}
             showHelpIcon={false}

app/(app)/create/screens/select/PublishedStakeholdersManagePanel.tsx

@@ -0,0 +1,218 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+import Button from "../../../../components/buttons/Button";
+import TextInput from "../../../../components/controls/TextInput";
+import { useTranslation } from "../../../../contexts/MessagesContext";
+import {
+  addRuleStakeholder,
+  deleteRuleStakeholder,
+  fetchRuleStakeholders,
+  resendRuleStakeholderInvite,
+  type RuleStakeholderListItem,
+} from "../../../../../lib/create/api";
+
+const EMAIL_PATTERN = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+export function PublishedStakeholdersManagePanel({
+  ruleId,
+}: {
+  ruleId: string;
+}) {
+  const t = useTranslation("create.reviewAndComplete.confirmStakeholders");
+  const [items, setItems] = useState<RuleStakeholderListItem[] | null>(null);
+  const [loadError, setLoadError] = useState(false);
+  const [email, setEmail] = useState("");
+  const [fieldError, setFieldError] = useState("");
+  const [bannerError, setBannerError] = useState("");
+  const [addBusy, setAddBusy] = useState(false);
+  const [busyId, setBusyId] = useState<string | null>(null);
+
+  const load = useCallback(async () => {
+    setLoadError(false);
+    const list = await fetchRuleStakeholders(ruleId);
+    if (list === null) {
+      setLoadError(true);
+      setItems([]);
+      return;
+    }
+    setItems(list);
+  }, [ruleId]);
+
+  useEffect(() => {
+    void load();
+  }, [load]);
+
+  const handleAdd = async () => {
+    setBannerError("");
+    setFieldError("");
+    const trimmed = email.trim().toLowerCase();
+    if (!EMAIL_PATTERN.test(trimmed)) {
+      setFieldError(t("managePublished.invalidEmail"));
+      return;
+    }
+    setAddBusy(true);
+    const res = await addRuleStakeholder(ruleId, trimmed);
+    setAddBusy(false);
+    if (res.ok === true) {
+      setEmail("");
+      void load();
+      return;
+    }
+    if (res.retryAfterMs != null && res.retryAfterMs > 0) {
+      const seconds = Math.ceil(res.retryAfterMs / 1000);
+      setBannerError(
+        t("managePublished.rateLimited").replace("{seconds}", String(seconds)),
+      );
+      return;
+    }
+    setBannerError(
+      res.error.trim() !== "" ? res.error : t("managePublished.actionFailed"),
+    );
+  };
+
+  const handleRemove = async (id: string) => {
+    setBannerError("");
+    setBusyId(id);
+    const res = await deleteRuleStakeholder(ruleId, id);
+    setBusyId(null);
+    if (res.ok === true) {
+      void load();
+      return;
+    }
+    setBannerError(
+      res.error.trim() !== "" ? res.error : t("managePublished.actionFailed"),
+    );
+  };
+
+  const handleResend = async (id: string) => {
+    setBannerError("");
+    setBusyId(id);
+    const res = await resendRuleStakeholderInvite(ruleId, id);
+    setBusyId(null);
+    if (res.ok === true) {
+      return;
+    }
+    if (res.retryAfterMs != null && res.retryAfterMs > 0) {
+      const seconds = Math.ceil(res.retryAfterMs / 1000);
+      setBannerError(
+        t("managePublished.rateLimited").replace("{seconds}", String(seconds)),
+      );
+      return;
+    }
+    setBannerError(
+      res.error.trim() !== "" ? res.error : t("managePublished.actionFailed"),
+    );
+  };
+
+  return (
+    <section className="flex w-full flex-col gap-4 pt-1 pb-2">
+      {bannerError ? (
+        <p
+          className="font-inter text-sm text-[var(--color-border-default-utility-negative)]"
+          role="alert"
+        >
+          {bannerError}
+        </p>
+      ) : null}
+
+      {loadError ? (
+        <p className="font-inter text-sm text-[var(--color-border-default-utility-negative)]">
+          {t("managePublished.loadFailed")}
+        </p>
+      ) : items === null ? (
+        <p className="font-inter text-sm text-[var(--color-content-default-secondary)]">
+          {t("managePublished.loading")}
+        </p>
+      ) : items.length === 0 ? (
+        <p className="font-inter text-sm text-[var(--color-content-default-tertiary)]">
+          {t("managePublished.empty")}
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-3">
+          {items.map((row) => (
+            <li
+              key={row.id}
+              className="flex flex-col gap-2 rounded-lg bg-black/5 px-3 py-3 md:flex-row md:items-center md:justify-between"
+            >
+              <div className="flex min-w-0 flex-col gap-1">
+                <span className="truncate font-inter text-sm font-medium text-[var(--color-content-default-primary)] md:text-base">
+                  {row.email}
+                </span>
+                <span className="font-inter text-xs text-[var(--color-content-default-tertiary)] md:text-sm">
+                  {row.status === "pending"
+                    ? t("managePublished.pending")
+                    : t("managePublished.accepted")}
+                </span>
+              </div>
+              <div className="flex flex-wrap gap-2">
+                {row.status === "pending" ? (
+                  <Button
+                    type="button"
+                    size="small"
+                    buttonType="outline"
+                    palette="default"
+                    disabled={busyId === row.id}
+                    onClick={() => void handleResend(row.id)}
+                    ariaLabel={t("managePublished.resendAria").replace(
+                      "{email}",
+                      row.email,
+                    )}
+                  >
+                    {t("managePublished.resend")}
+                  </Button>
+                ) : null}
+                <Button
+                  type="button"
+                  size="small"
+                  buttonType="outline"
+                  palette="default"
+                  disabled={busyId === row.id}
+                  onClick={() => void handleRemove(row.id)}
+                  ariaLabel={t("managePublished.removeAria").replace(
+                    "{email}",
+                    row.email,
+                  )}
+                >
+                  {t("managePublished.remove")}
+                </Button>
+              </div>
+            </li>
+          ))}
+        </ul>
+      )}
+
+      <div className="flex flex-col gap-3 md:flex-row md:items-end md:gap-3">
+        <div className="min-w-0 flex-1">
+          <TextInput
+            id="published-stakeholder-email"
+            type="email"
+            inputSize="small"
+            showHelpIcon={false}
+            label={t("managePublished.emailLabel")}
+            placeholder={t("managePublished.emailPlaceholder")}
+            value={email}
+            onChange={(e) => {
+              setEmail(e.target.value);
+              setFieldError("");
+            }}
+            error={Boolean(fieldError)}
+            textHint={fieldError || false}
+            autoComplete="email"
+          />
+        </div>
+        <Button
+          type="button"
+          size="small"
+          buttonType="filled"
+          palette="default"
+          className="md:mb-[2px]"
+          disabled={addBusy || items === null}
+          onClick={() => void handleAdd()}
+        >
+          {t("managePublished.addInvite")}
+        </Button>
+      </div>
+    </section>
+  );
+}

app/(app)/create/types.ts

@@ -218,8 +218,11 @@ export interface CreateFlowState {
   currentStep?: CreateFlowStep;
   /** Section drafts; structure will tighten as steps persist real shapes. */
   sections?: Record<string, unknown>[];
-  /** Stakeholder placeholders until the confirm-stakeholders step defines a schema. */
-  stakeholders?: Record<string, unknown>[];
+  /**
+   * Stakeholder invite emails (confirm-stakeholders step). Normalized on the server;
+   * invites are sent at first publish (`POST /api/rules`).
+   */
+  stakeholderEmails?: string[];
   /** Extra step-specific fields (must be JSON-serializable for server draft sync). */
   [key: string]: unknown;
 }

app/(app)/create/utils/createFlowPaths.ts

@@ -4,7 +4,10 @@
  */
 
 import type { CreateFlowStep } from "../types";
-import { CREATE_FLOW_REVIEW_RETURN_QUERY_KEY } from "./flowSteps";
+import {
+  CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY,
+  CREATE_FLOW_REVIEW_RETURN_QUERY_KEY,
+} from "./flowSteps";
 
 export const CREATE_ROUTES = {
   root: "/",
@@ -59,7 +62,7 @@ export function createCompletedPath(query?: CreateFlowPathQuery): string {
 
 /**
  * Navigate back from a facet step to final-review / edit-rule, dropping
- * `reviewReturn` from the current query while preserving other params.
+ * `reviewReturn` and `manageStakeholders` from the current query while preserving other params.
  */
 export function createFlowStepPathAfterStrippingReviewReturn(
   step: CreateFlowStep,
@@ -67,6 +70,7 @@ export function createFlowStepPathAfterStrippingReviewReturn(
 ): string {
   const params = new URLSearchParams(searchParams?.toString() ?? "");
   params.delete(CREATE_FLOW_REVIEW_RETURN_QUERY_KEY);
+  params.delete(CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY);
   const query: CreateFlowPathQuery = {};
   params.forEach((value, key) => {
     query[key] = value;

app/(app)/create/utils/flowSteps.ts

@@ -188,6 +188,13 @@ export const CREATE_FLOW_COMPLETED_CELEBRATE_VALUE = "1" as const;
 /** `/create/{step}?reviewReturn=…` — set when opening a custom-rule step from final-review or edit-rule via + */
 export const CREATE_FLOW_REVIEW_RETURN_QUERY_KEY = "reviewReturn" as const;
 
+/**
+ * `/create/confirm-stakeholders?manageStakeholders=1` — edit published rule invites (requires `state.editingPublishedRuleId`).
+ * Typically paired with `reviewReturn=edit-rule`.
+ */
+export const CREATE_FLOW_MANAGE_STAKEHOLDERS_QUERY = "manageStakeholders" as const;
+export const CREATE_FLOW_MANAGE_STAKEHOLDERS_VALUE = "1" as const;
+
 export type CreateFlowReviewReturnTarget = "final-review" | "edit-rule";
 
 export function parseReviewReturnSearchParam(