Let decision-approaches wrap at narrow widths and sync key-resource scopes.

The info-box checkboxes overflowed in a squeezed column; wrapping them and offering those scopes as chips on every approach keeps the sidebar and Applicable Scope selection in sync without publishing unchecked keys as defaults.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/(app)/create/components/ApplicableScopeField.tsx

@@ -84,6 +84,7 @@ function ApplicableScopeFieldComponent({
               disabled={readOnly}
               onClick={() => !readOnly && onToggleScope(scope)}
               ariaLabel={`${isSelected ? "Deselect" : "Select"} ${scope}`}
+              className="max-w-full"
             />
           );
         })}

app/(app)/create/components/FinalReviewChipEditModal.tsx

@@ -35,6 +35,10 @@ import {
   decisionApproachPresetFor,
   membershipPresetFor,
 } from "../../../../lib/create/finalReviewChipPresets";
+import {
+  applyDecisionApproachKeyResources,
+  selectedKeyResourceLabelsFromCheckedIds,
+} from "../../../../lib/create/decisionApproachKeyResources";
 import { isCustomMethodCardId } from "../../../../lib/create/isCustomMethodCardId";
 import { usesWizardFieldBlocksModalBody } from "../../../../lib/create/usesWizardFieldBlocksModalBody";
 import type { CustomMethodCardFieldBlock } from "../../../../lib/create/customMethodCardFieldBlocks";
@@ -1266,6 +1270,7 @@ function facetSeedSignature(
       return JSON.stringify({
         meta: state.customMethodCardMetaById?.[id] ?? null,
         details: state.decisionApproachDetailsById?.[id] ?? null,
+        keyResources: state.selectedDecisionKeyResourceIds ?? null,
         blocks: state.customMethodCardFieldBlocksById?.[id] ?? null,
       });
     case "conflictManagement":
@@ -1330,12 +1335,18 @@ function seedDraftForTarget(
       const saved =
         state.decisionApproachDetailsById?.[target.overrideKey] ??
         decisionApproachPresetFor(target.overrideKey);
+      const withKeys = applyDecisionApproachKeyResources(
+        saved,
+        selectedKeyResourceLabelsFromCheckedIds(
+          state.selectedDecisionKeyResourceIds ?? [],
+        ),
+      );
       return {
         groupKey: "decisionApproaches",
         value: {
-          ...saved,
-          applicableScope: [...saved.applicableScope],
-          selectedApplicableScope: [...saved.selectedApplicableScope],
+          ...withKeys,
+          applicableScope: [...withKeys.applicableScope],
+          selectedApplicableScope: [...withKeys.selectedApplicableScope],
         },
       };
     }

app/(app)/create/components/methodEditFields/DecisionApproachEditFields.tsx

@@ -7,12 +7,13 @@
  * `markCreateFlowInteraction` live in the parent.
  */
 
-import { memo, useCallback } from "react";
+import { memo, useCallback, useMemo } from "react";
 import { useMessages } from "../../../../contexts/MessagesContext";
 import ModalTextAreaField from "../ModalTextAreaField";
 import ApplicableScopeField from "../ApplicableScopeField";
 import IncrementerBlock from "../../../../components/controls/IncrementerBlock";
 import type { DecisionApproachDetailEntry } from "../../types";
+import { withDecisionApproachKeyResourceScopes } from "../../../../../lib/create/decisionApproachKeyResources";
 
 export interface DecisionApproachEditFieldsProps {
   value: DecisionApproachDetailEntry;
@@ -32,6 +33,11 @@ function DecisionApproachEditFieldsComponent({
   const m = useMessages();
   const t = m.create.customRule.decisionApproaches;
 
+  const scopes = useMemo(
+    () => withDecisionApproachKeyResourceScopes(value.applicableScope),
+    [value.applicableScope],
+  );
+
   const patch = useCallback(
     <K extends keyof DecisionApproachDetailEntry>(
       key: K,
@@ -53,7 +59,7 @@ function DecisionApproachEditFieldsComponent({
       <ApplicableScopeField
         label={t.sectionHeadings.applicableScope}
         addLabel={t.scopeAddButtonLabel}
-        scopes={value.applicableScope}
+        scopes={scopes}
         selectedScopes={value.selectedApplicableScope}
         readOnly={readOnly}
         onToggleScope={(scope) =>

app/(app)/create/screens/right-rail/DecisionApproachesScreen.tsx

@@ -33,6 +33,13 @@ import { DecisionApproachEditFields } from "../../components/methodEditFields";
 import CustomMethodCardWizard from "../../components/CustomMethodCardWizard";
 import { uploadCreateFlowFile } from "../../../../../lib/create/uploadToServer";
 import { decisionApproachPresetFor } from "../../../../../lib/create/finalReviewChipPresets";
+import {
+  applyDecisionApproachKeyResources,
+  decisionApproachKeyResourceIdsFromLabels,
+  selectedKeyResourceLabelsFromCheckedIds,
+  stringArraysEqual,
+  syncDecisionApproachKeyResourceDetails,
+} from "../../../../../lib/create/decisionApproachKeyResources";
 import type { CustomMethodCardFieldBlock } from "../../../../../lib/create/customMethodCardFieldBlocks";
 import { mergePresetMethodsWithCustom } from "../../../../../lib/create/mergePresetMethodsWithCustom";
 import { moveFacetSelectionIdToFront } from "../../../../../lib/create/methodCardSelectionOrder";
@@ -71,9 +78,6 @@ export function DecisionApproachesScreen() {
   const customizeSnapshotRef = useRef<
     MethodCardCustomizeSnapshot<DecisionApproachDetailEntry> | null
   >(null);
-  const [messageBoxCheckedIds, setMessageBoxCheckedIds] = useState<string[]>(
-    [],
-  );
   const [expanded, setExpanded] = useState(false);
   const [createModalOpen, setCreateModalOpen] = useState(false);
   const [pendingCardId, setPendingCardId] = useState<string | null>(null);
@@ -90,6 +94,11 @@ export function DecisionApproachesScreen() {
   >(null);
 
   const selectedIds = state.selectedDecisionApproachIds ?? [];
+  const messageBoxCheckedIds = state.selectedDecisionKeyResourceIds ?? [];
+  const selectedKeyResourceLabels = useMemo(
+    () => selectedKeyResourceLabelsFromCheckedIds(messageBoxCheckedIds),
+    [messageBoxCheckedIds],
+  );
 
   const messageBoxItems: InfoMessageBoxItem[] = useMemo(
     () =>
@@ -137,26 +146,52 @@ export function DecisionApproachesScreen() {
   const handleMessageBoxCheckboxChange = useCallback(
     (id: string, checked: boolean) => {
       markCreateFlowInteraction();
-      setMessageBoxCheckedIds((prev) =>
-        checked ? [...prev, id] : prev.filter((x) => x !== id),
-      );
+      const nextCheckedIds = checked
+        ? [...messageBoxCheckedIds, id]
+        : messageBoxCheckedIds.filter((x) => x !== id);
+      const nextLabels =
+        selectedKeyResourceLabelsFromCheckedIds(nextCheckedIds);
+      if (pendingDraft) {
+        setPendingDraft(
+          applyDecisionApproachKeyResources(pendingDraft, nextLabels),
+        );
+      }
+      updateState({
+        selectedDecisionKeyResourceIds: nextCheckedIds,
+        decisionApproachDetailsById: syncDecisionApproachKeyResourceDetails(
+          state.decisionApproachDetailsById,
+          selectedIds,
+          nextLabels,
+          decisionApproachPresetFor,
+        ),
+      });
     },
-    [markCreateFlowInteraction],
+    [
+      markCreateFlowInteraction,
+      messageBoxCheckedIds,
+      pendingDraft,
+      selectedIds,
+      state.decisionApproachDetailsById,
+      updateState,
+    ],
   );
 
   const seedDraft = useCallback(
     (id: string): DecisionApproachDetailEntry => {
       const saved = state.decisionApproachDetailsById?.[id];
-      if (saved) {
-        return {
-          ...saved,
-          applicableScope: [...saved.applicableScope],
-          selectedApplicableScope: [...saved.selectedApplicableScope],
-        };
-      }
-      return decisionApproachPresetFor(id);
+      const base = saved
+        ? {
+            ...saved,
+            applicableScope: [...saved.applicableScope],
+            selectedApplicableScope: [...saved.selectedApplicableScope],
+          }
+        : decisionApproachPresetFor(id);
+      return applyDecisionApproachKeyResources(
+        base,
+        selectedKeyResourceLabels,
+      );
     },
-    [state.decisionApproachDetailsById],
+    [selectedKeyResourceLabels, state.decisionApproachDetailsById],
   );
 
   const handleCardSelect = useCallback(
@@ -202,8 +237,31 @@ export function DecisionApproachesScreen() {
     (next: DecisionApproachDetailEntry) => {
       markCreateFlowInteraction();
       setPendingDraft(next);
+      const nextCheckedIds = decisionApproachKeyResourceIdsFromLabels(
+        next.selectedApplicableScope,
+      );
+      if (stringArraysEqual(nextCheckedIds, messageBoxCheckedIds)) {
+        return;
+      }
+      const nextLabels =
+        selectedKeyResourceLabelsFromCheckedIds(nextCheckedIds);
+      updateState({
+        selectedDecisionKeyResourceIds: nextCheckedIds,
+        decisionApproachDetailsById: syncDecisionApproachKeyResourceDetails(
+          state.decisionApproachDetailsById,
+          selectedIds,
+          nextLabels,
+          decisionApproachPresetFor,
+        ),
+      });
     },
-    [markCreateFlowInteraction],
+    [
+      markCreateFlowInteraction,
+      messageBoxCheckedIds,
+      selectedIds,
+      state.decisionApproachDetailsById,
+      updateState,
+    ],
   );
 
   const isSelectedCardModal =
@@ -594,7 +652,10 @@ export function DecisionApproachesScreen() {
         },
         decisionApproachDetailsById: {
           ...(state.decisionApproachDetailsById ?? {}),
-          [id]: decisionApproachPresetFor(id),
+          [id]: applyDecisionApproachKeyResources(
+            decisionApproachPresetFor(id),
+            selectedKeyResourceLabels,
+          ),
         },
         customMethodCardFieldBlocksById: {
           ...(state.customMethodCardFieldBlocksById ?? {}),
@@ -606,6 +667,7 @@ export function DecisionApproachesScreen() {
       markCreateFlowInteraction,
       pendingDraft,
       selectedIds,
+      selectedKeyResourceLabels,
       state.customMethodCardFieldBlocksById,
       state.customMethodCardMetaById,
       state.decisionApproachDetailsById,

app/(app)/create/types.ts

@@ -165,6 +165,12 @@ export interface CreateFlowState {
   >;
   membershipMethodDetailsById?: Record<string, MembershipMethodDetailEntry>;
   decisionApproachDetailsById?: Record<string, DecisionApproachDetailEntry>;
+  /**
+   * Checked “key resource” ids from the decision-approaches InfoMessageBox
+   * (`amend`, `finances`, `project`, `discipline`). Selecting one also selects
+   * the matching Applicable Scope chip on every decision approach.
+   */
+  selectedDecisionKeyResourceIds?: string[];
   conflictManagementDetailsById?: Record<
     string,
     ConflictManagementDetailEntry

app/components/cards/Selection/Selection.view.tsx

@@ -84,14 +84,14 @@ export function SelectionView({
       onKeyDown={onKeyDown}
     >
       <div className="flex min-w-0 flex-1 flex-col gap-1">
-        <div className="flex items-center gap-1">
-          <span className="text-medium-label text-[var(--color-content-invert-secondary)]">
+        <div className="flex min-w-0 items-center gap-1">
+          <span className="min-w-0 break-words text-medium-label text-[var(--color-content-invert-secondary)]">
             {label}
           </span>
           {showInfoIcon ? <InfoIcon /> : null}
         </div>
         {supportText ? (
-          <p className="text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
+          <p className="min-w-0 break-words text-x-small-paragraph text-[var(--color-content-invert-tertiary)]">
             {supportText}
           </p>
         ) : null}

app/components/controls/Checkbox/Checkbox.view.tsx

@@ -17,7 +17,7 @@ export function CheckboxView({
 }: CheckboxViewProps) {
   return (
     <label
-      className={`inline-flex items-center gap-[8px] cursor-pointer select-none ${
+      className={`inline-flex max-w-full min-w-0 items-center gap-[8px] cursor-pointer select-none ${
         disabled ? "opacity-60 cursor-not-allowed" : ""
       } ${className}`}
       onMouseDown={(e) => e.preventDefault()}
@@ -51,7 +51,7 @@ export function CheckboxView({
       {label && (
         <span
           id={labelId}
-          className="text-[14px] leading-[18px]"
+          className="min-w-0 flex-1 text-[14px] leading-[18px] whitespace-normal break-words"
           style={{ color: labelColor }}
         >
           {label}

app/components/controls/Chip/Chip.view.tsx

@@ -99,6 +99,7 @@ function ChipView({
 
   const baseClasses = `
     inline-flex
+    max-w-full
     items-center
     justify-center
     rounded-[var(--measures-radius-full,9999px)]
@@ -264,7 +265,7 @@ function ChipView({
       onClick={handleClick}
       {...sharedA11y}
     >
-      <span className="flex items-center justify-center">{label}</span>
+      <span className="min-w-0 truncate">{label}</span>
       {onRemove && !isDisabled && (
         <button
           type="button"

app/components/controls/InfoMessageBox/InfoMessageBox.view.tsx

@@ -45,30 +45,30 @@ function InfoMessageBoxView({
 
   return (
     <div
-      className={`flex flex-col gap-[12px] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] w-full min-w-0 ${className}`}
+      className={`flex w-full min-w-0 items-start gap-[var(--measures-spacing-200,8px)] p-[var(--spacing-measures-spacing-500,20px)] rounded-[var(--measures-radius-300,12px)] border-l-2 border-solid border-[var(--color-border-default-secondary,#1f1f1f)] bg-[var(--color-content-inverse-secondary,#1f1f1f)] ${className}`}
       role="region"
       aria-label={title}
     >
-      <div className="flex items-center gap-[var(--measures-spacing-200,8px)] min-w-0">
-        <div
-          className="relative shrink-0 size-6 flex items-center justify-center"
-          data-name="Asset / Icon / exclamation"
-        >
-          {icon ?? <ExclamationIconInline />}
-        </div>
-        <p className="text-small-label text-[var(--color-content-default-primary,white)] min-w-0">
+      <div
+        className="relative shrink-0 size-6 flex items-center justify-center"
+        data-name="Asset / Icon / exclamation"
+      >
+        {icon ?? <ExclamationIconInline />}
+      </div>
+      <div className="flex min-w-0 flex-1 flex-col gap-[12px]">
+        <p className="text-small-label text-[var(--color-content-default-primary,white)] min-w-0 break-words">
           {title}
         </p>
-      </div>
-      <div className="flex flex-col gap-[12px] [&_label]:gap-[6px] [&_label_span]:text-x-small-paragraph [&_label_span]:opacity-80 pl-8">
-        <CheckboxGroup
-          mode="standard"
-          value={checkedIds}
-          onChange={handleChange}
-          options={options}
-          aria-label={title}
-          className="flex flex-col gap-[12px] !space-y-0"
-        />
+        <div className="flex min-w-0 w-full flex-col gap-[12px] [&_label]:w-full [&_label]:min-w-0 [&_label]:gap-[6px] [&_label_span]:text-x-small-paragraph [&_label_span]:opacity-80">
+          <CheckboxGroup
+            mode="standard"
+            value={checkedIds}
+            onChange={handleChange}
+            options={options}
+            aria-label={title}
+            className="flex w-full min-w-0 flex-col gap-[12px] !space-y-0"
+          />
+        </div>
       </div>
     </div>
   );

lib/create/customRuleFacets.ts

@@ -157,7 +157,10 @@ const decisionRow = {
   selectionIds: (s: CreateFlowState) => s.selectedDecisionApproachIds ?? [],
   selectedIdsStateKey: "selectedDecisionApproachIds",
   detailOverridesStateKey: "decisionApproachDetailsById",
-  stripSelectionKeys: ["selectedDecisionApproachIds"] as const,
+  stripSelectionKeys: [
+    "selectedDecisionApproachIds",
+    "selectedDecisionKeyResourceIds",
+  ] as const,
   apiMethodSectionId: "decisionApproaches",
 } satisfies CustomRuleFacetRow;
 

lib/create/decisionApproachKeyResources.ts

@@ -0,0 +1,149 @@
+import type { DecisionApproachDetailEntry } from "../../app/(app)/create/types";
+import decisionApproachesMessages from "../../messages/en/create/customRule/decisionApproaches.json";
+
+export type DecisionApproachKeyResourceItem = {
+  id: string;
+  label: string;
+};
+
+function uniquePreserveOrder(values: readonly string[]): string[] {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  for (const value of values) {
+    if (seen.has(value)) continue;
+    seen.add(value);
+    out.push(value);
+  }
+  return out;
+}
+
+function isKeyResourceItem(value: unknown): value is DecisionApproachKeyResourceItem {
+  if (!value || typeof value !== "object") return false;
+  const row = value as { id?: unknown; label?: unknown };
+  return typeof row.id === "string" && typeof row.label === "string";
+}
+
+/**
+ * Sidebar “key resource” checkboxes on the decision-approaches step.
+ * These labels are also offered as Applicable Scope chips on every approach.
+ */
+export function decisionApproachKeyResourceItems(): DecisionApproachKeyResourceItem[] {
+  const items = (
+    decisionApproachesMessages as {
+      messageBox?: { items?: unknown };
+    }
+  ).messageBox?.items;
+  if (!Array.isArray(items)) return [];
+  return items.filter(isKeyResourceItem);
+}
+
+export function decisionApproachKeyResourceLabels(): string[] {
+  return decisionApproachKeyResourceItems().map((item) => item.label);
+}
+
+export function selectedKeyResourceLabelsFromCheckedIds(
+  checkedIds: readonly string[],
+): string[] {
+  const idSet = new Set(checkedIds);
+  return decisionApproachKeyResourceItems()
+    .filter((item) => idSet.has(item.id))
+    .map((item) => item.label);
+}
+
+export function decisionApproachKeyResourceIdsFromLabels(
+  labels: readonly string[],
+): string[] {
+  const labelSet = new Set(labels);
+  return decisionApproachKeyResourceItems()
+    .filter((item) => labelSet.has(item.label))
+    .map((item) => item.id);
+}
+
+export function stringArraysEqual(
+  a: readonly string[],
+  b: readonly string[],
+): boolean {
+  if (a.length !== b.length) return false;
+  return a.every((value, index) => value === b[index]);
+}
+
+/**
+ * Offer the four sidebar labels as Applicable Scope chips without persisting
+ * them onto `applicableScope` (unchecked keys must not publish as defaults).
+ */
+export function withDecisionApproachKeyResourceScopes(
+  scopes: readonly string[],
+): string[] {
+  return uniquePreserveOrder([
+    ...scopes,
+    ...decisionApproachKeyResourceLabels(),
+  ]);
+}
+
+/**
+ * Keep non-key chip selections, then select the key-resource labels whose
+ * sidebar boxes are checked.
+ */
+export function applyDecisionApproachKeyResources(
+  entry: DecisionApproachDetailEntry,
+  selectedKeyResourceLabels: readonly string[],
+): DecisionApproachDetailEntry {
+  const keyLabels = decisionApproachKeyResourceLabels();
+  const keySet = new Set(keyLabels);
+  const selectedSet = new Set(selectedKeyResourceLabels);
+  return {
+    ...entry,
+    selectedApplicableScope: uniquePreserveOrder([
+      ...entry.selectedApplicableScope.filter((scope) => !keySet.has(scope)),
+      ...keyLabels.filter((label) => selectedSet.has(label)),
+    ]),
+  };
+}
+
+export function withoutDecisionApproachKeyResourceLabels(
+  scopes: readonly string[],
+): string[] {
+  const keySet = new Set(decisionApproachKeyResourceLabels());
+  return scopes.filter((scope) => !keySet.has(scope));
+}
+
+/**
+ * Publish selected original scopes (or all originals when none are picked)
+ * plus any checked key-resource labels. Checking a key resource must not drop
+ * unselected default scopes.
+ */
+export function decisionApproachScopeForPublish(
+  applicableScope: readonly unknown[],
+  selectedApplicableScope: readonly unknown[],
+): string[] {
+  const asStrings = (values: readonly unknown[]): string[] =>
+    values.filter((value): value is string => typeof value === "string");
+  const keySet = new Set(decisionApproachKeyResourceLabels());
+  const original = withoutDecisionApproachKeyResourceLabels(
+    asStrings(applicableScope),
+  );
+  const selected = asStrings(selectedApplicableScope);
+  const selectedOther = withoutDecisionApproachKeyResourceLabels(selected);
+  const selectedKeys = selected.filter((scope) => keySet.has(scope));
+  return uniquePreserveOrder([
+    ...(selectedOther.length > 0 ? selectedOther : original),
+    ...selectedKeys,
+  ]);
+}
+
+export function syncDecisionApproachKeyResourceDetails(
+  detailsById: Record<string, DecisionApproachDetailEntry> | undefined,
+  extraIds: readonly string[],
+  selectedKeyResourceLabels: readonly string[],
+  seed: (_id: string) => DecisionApproachDetailEntry,
+): Record<string, DecisionApproachDetailEntry> {
+  const next: Record<string, DecisionApproachDetailEntry> = {};
+  const ids = new Set<string>([...Object.keys(detailsById ?? {}), ...extraIds]);
+  for (const id of ids) {
+    next[id] = applyDecisionApproachKeyResources(
+      detailsById?.[id] ?? seed(id),
+      selectedKeyResourceLabels,
+    );
+  }
+  return next;
+}

lib/create/methodCardFacetMatchesPresetForId.ts

@@ -10,6 +10,7 @@ import {
   decisionApproachPresetFor,
   membershipPresetFor,
 } from "./finalReviewChipPresets";
+import { withoutDecisionApproachKeyResourceLabels } from "./decisionApproachKeyResources";
 
 function stringArraysEqual(a: readonly string[], b: readonly string[]): boolean {
   if (a.length !== b.length) return false;
@@ -51,8 +52,14 @@ export function decisionApproachFacetMatchesPreset(
   const p = decisionApproachPresetFor(cardId);
   return (
     details.corePrinciple === p.corePrinciple &&
-    stringArraysEqual(details.applicableScope, p.applicableScope) &&
-    stringArraysEqual(details.selectedApplicableScope, p.selectedApplicableScope) &&
+    stringArraysEqual(
+      withoutDecisionApproachKeyResourceLabels(details.applicableScope),
+      withoutDecisionApproachKeyResourceLabels(p.applicableScope),
+    ) &&
+    stringArraysEqual(
+      withoutDecisionApproachKeyResourceLabels(details.selectedApplicableScope),
+      withoutDecisionApproachKeyResourceLabels(p.selectedApplicableScope),
+    ) &&
     details.stepByStepInstructions === p.stepByStepInstructions &&
     details.consensusLevel === p.consensusLevel &&
     details.objectionsDeadlocks === p.objectionsDeadlocks

lib/create/ruleSectionsFromMethodSelections.ts

@@ -5,6 +5,7 @@ import type {
 } from "../../app/components/type/CommunityRule/CommunityRule.types";
 import type { PublishedMethodSelections } from "./buildPublishPayload";
 import type { CustomMethodCardFieldBlock } from "./customMethodCardFieldBlocks";
+import { decisionApproachScopeForPublish } from "./decisionApproachKeyResources";
 import { templateCategoryToGroupKey } from "./templateReviewMapping";
 
 /** Uses filename extension and/or URL path so uploads render as `<img>` vs file link on read-only surfaces. */
@@ -243,9 +244,14 @@ export function sectionFromDecision(
   for (const m of ms) {
     const sec = m.sections as unknown as Record<string, unknown>;
     const merged: Record<string, unknown> = { ...sec };
-    const scope =
-      formatScopePayload(sec.selectedApplicableScope) ??
-      formatScopePayload(sec.applicableScope);
+    const scope = formatScopePayload(
+      decisionApproachScopeForPublish(
+        Array.isArray(sec.applicableScope) ? sec.applicableScope : [],
+        Array.isArray(sec.selectedApplicableScope)
+          ? sec.selectedApplicableScope
+          : [],
+      ),
+    );
     if (scope) merged.applicableScope = scope;
     delete merged.selectedApplicableScope;
     const e = communityRuleEntryFromMethodChip(m.label, merged, DEC_LABELS, {

lib/server/validation/createFlowSchemas.ts

@@ -117,6 +117,7 @@ export const createFlowStateSchema = z
     selectedCommunicationMethodIds: z.array(z.string()).max(200).optional(),
     selectedMembershipMethodIds: z.array(z.string()).max(200).optional(),
     selectedDecisionApproachIds: z.array(z.string()).max(200).optional(),
+    selectedDecisionKeyResourceIds: z.array(z.string().max(80)).max(20).optional(),
     selectedConflictManagementIds: z.array(z.string()).max(200).optional(),
     communicationMethodDetailsById: z
       .record(communicationMethodDetailEntrySchema)

tests/components/InfoMessageBox.test.tsx

@@ -34,4 +34,11 @@ describe("InfoMessageBox", () => {
     await u.click(checkbox);
     expect(onCheckboxChange).toHaveBeenCalled();
   });
+
+  it("keeps the checkbox column shrinkable so labels wrap", () => {
+    render(<InfoMessageBox title="Important" items={items} />);
+    const region = screen.getByRole("region", { name: "Important" });
+    expect(region).toHaveClass("min-w-0");
+    expect(region).toHaveClass("w-full");
+  });
 });

tests/pages/decision-approaches.test.jsx

@@ -272,4 +272,91 @@ describe("Create flow decision-approaches page", () => {
     await user.click(amendCheckbox);
     expect(amendCheckbox).toBeChecked();
   });
+
+  test("each approach modal includes the key-resource applicable-scope chips", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Lazy Consensus: A decision is assumed approved/,
+      }),
+    );
+    const dialog = await screen.findByRole("dialog");
+    expect(
+      within(dialog).getByRole("button", {
+        name: "Select Amend your CommunityRule",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole("button", { name: "Select Steward finances" }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole("button", {
+        name: "Select Project level decisions",
+      }),
+    ).toBeInTheDocument();
+    expect(
+      within(dialog).getByRole("button", {
+        name: "Select Discipline and member termination",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("checking a key-resource box selects that chip on every approach", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    await user.click(
+      screen.getByRole("checkbox", { name: "Steward finances" }),
+    );
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Lazy Consensus: A decision is assumed approved/,
+      }),
+    );
+    const lazyDialog = await screen.findByRole("dialog");
+    expect(
+      within(lazyDialog).getByRole("button", {
+        name: "Deselect Steward finances",
+      }),
+    ).toBeInTheDocument();
+    await user.click(within(lazyDialog).getByRole("button", { name: "Close dialog" }));
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Do-ocracy: Decisions are made by those who take initiative/,
+      }),
+    );
+    const doocracyDialog = await screen.findByRole("dialog");
+    expect(
+      within(doocracyDialog).getByRole("button", {
+        name: "Deselect Steward finances",
+      }),
+    ).toBeInTheDocument();
+  });
+
+  test("choosing a key-resource chip checks the matching sidebar box", async () => {
+    const user = userEvent.setup();
+    render(<DecisionApproachesScreen />);
+
+    await user.click(
+      screen.getByRole("button", {
+        name: /Lazy Consensus: A decision is assumed approved/,
+      }),
+    );
+    const dialog = await screen.findByRole("dialog");
+    await user.click(
+      within(dialog).getByRole("button", {
+        name: "Select Discipline and member termination",
+      }),
+    );
+
+    expect(
+      screen.getByRole("checkbox", {
+        name: "Discipline and member termination",
+      }),
+    ).toBeChecked();
+  });
 });

tests/unit/decisionApproachKeyResources.test.ts

@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import {
+  applyDecisionApproachKeyResources,
+  decisionApproachKeyResourceIdsFromLabels,
+  decisionApproachScopeForPublish,
+  decisionApproachKeyResourceItems,
+  decisionApproachKeyResourceLabels,
+  selectedKeyResourceLabelsFromCheckedIds,
+  stringArraysEqual,
+  syncDecisionApproachKeyResourceDetails,
+  withDecisionApproachKeyResourceScopes,
+} from "../../lib/create/decisionApproachKeyResources";
+import type { DecisionApproachDetailEntry } from "../../app/(app)/create/types";
+
+const emptyEntry = (): DecisionApproachDetailEntry => ({
+  corePrinciple: "p",
+  applicableScope: ["Daily Operations"],
+  selectedApplicableScope: [],
+  stepByStepInstructions: "s",
+  consensusLevel: 75,
+  objectionsDeadlocks: "o",
+});
+
+describe("decisionApproachKeyResources", () => {
+  it("reads the four key-resource items from messages", () => {
+    expect(decisionApproachKeyResourceItems()).toEqual([
+      { id: "amend", label: "Amend your CommunityRule" },
+      { id: "finances", label: "Steward finances" },
+      { id: "project", label: "Project level decisions" },
+      { id: "discipline", label: "Discipline and member termination" },
+    ]);
+  });
+
+  it("selects checked key-resource labels without rewriting applicableScope", () => {
+    const next = applyDecisionApproachKeyResources(emptyEntry(), [
+      "Steward finances",
+    ]);
+    expect(next.applicableScope).toEqual(["Daily Operations"]);
+    expect(next.selectedApplicableScope).toEqual(["Steward finances"]);
+  });
+
+  it("keeps non-key chip selections when syncing sidebar checks", () => {
+    const next = applyDecisionApproachKeyResources(
+      {
+        ...emptyEntry(),
+        applicableScope: ["Steward finances", "Daily Operations"],
+        selectedApplicableScope: ["Daily Operations"],
+      },
+      ["Steward finances"],
+    );
+    expect(next.applicableScope).toEqual([
+      "Steward finances",
+      "Daily Operations",
+    ]);
+    expect(next.selectedApplicableScope).toEqual([
+      "Daily Operations",
+      "Steward finances",
+    ]);
+  });
+
+  it("publishes default scopes plus checked key resources", () => {
+    expect(
+      decisionApproachScopeForPublish(
+        ["Daily Operations", "Minor Expenditures"],
+        ["Steward finances"],
+      ),
+    ).toEqual([
+      "Daily Operations",
+      "Minor Expenditures",
+      "Steward finances",
+    ]);
+    expect(
+      decisionApproachScopeForPublish(
+        ["Daily Operations", "Minor Expenditures"],
+        ["Daily Operations", "Steward finances"],
+      ),
+    ).toEqual(["Daily Operations", "Steward finances"]);
+    expect(
+      decisionApproachScopeForPublish(
+        ["Daily Operations", "Minor Expenditures"],
+        [],
+      ),
+    ).toEqual(["Daily Operations", "Minor Expenditures"]);
+  });
+
+  it("maps checkbox ids to labels and back", () => {
+    expect(selectedKeyResourceLabelsFromCheckedIds(["amend", "project"])).toEqual(
+      ["Amend your CommunityRule", "Project level decisions"],
+    );
+    expect(
+      decisionApproachKeyResourceIdsFromLabels([
+        "Project level decisions",
+        "Unknown",
+        "Amend your CommunityRule",
+      ]),
+    ).toEqual(["amend", "project"]);
+  });
+
+  it("syncs existing and selected approach details", () => {
+    const next = syncDecisionApproachKeyResourceDetails(
+      { "lazy-consensus": emptyEntry() },
+      ["do-ocracy"],
+      ["Amend your CommunityRule"],
+      (id) => ({
+        ...emptyEntry(),
+        corePrinciple: id,
+        applicableScope: ["Volunteer Tasks"],
+      }),
+    );
+    expect(next["lazy-consensus"]?.selectedApplicableScope).toEqual([
+      "Amend your CommunityRule",
+    ]);
+    expect(next["do-ocracy"]?.corePrinciple).toBe("do-ocracy");
+    expect(next["do-ocracy"]?.applicableScope).toEqual(["Volunteer Tasks"]);
+    expect(next["do-ocracy"]?.selectedApplicableScope).toEqual([
+      "Amend your CommunityRule",
+    ]);
+  });
+
+  it("compares string arrays by order", () => {
+    expect(stringArraysEqual(["a", "b"], ["a", "b"])).toBe(true);
+    expect(stringArraysEqual(["a", "b"], ["b", "a"])).toBe(false);
+    expect(decisionApproachKeyResourceLabels()).toHaveLength(4);
+  });
+
+  it("unions key-resource labels onto an existing scope list", () => {
+    expect(
+      withDecisionApproachKeyResourceScopes(["Daily Operations"]),
+    ).toEqual([
+      "Daily Operations",
+      "Amend your CommunityRule",
+      "Steward finances",
+      "Project level decisions",
+      "Discipline and member termination",
+    ]);
+  });
+});

tests/unit/methodCardFacetMatchesPresetForId.test.ts

@@ -1,6 +1,12 @@
 import { describe, expect, it } from "vitest";
-import { communicationPresetFor } from "../../lib/create/finalReviewChipPresets";
-import { communicationMethodFacetMatchesPreset } from "../../lib/create/methodCardFacetMatchesPresetForId";
+import {
+  communicationPresetFor,
+  decisionApproachPresetFor,
+} from "../../lib/create/finalReviewChipPresets";
+import {
+  communicationMethodFacetMatchesPreset,
+  decisionApproachFacetMatchesPreset,
+} from "../../lib/create/methodCardFacetMatchesPresetForId";
 
 const uuid = "550e8400-e29b-41d4-a716-446655440000";
 
@@ -19,4 +25,23 @@ describe("methodCardFacetMatchesPresetForId", () => {
       ),
     ).toBe(false);
   });
+
+  it("decision approaches: ignores key-resource chip selections", () => {
+    const p = decisionApproachPresetFor(uuid);
+    expect(
+      decisionApproachFacetMatchesPreset(
+        {
+          ...p,
+          selectedApplicableScope: ["Steward finances"],
+        },
+        uuid,
+      ),
+    ).toBe(true);
+    expect(
+      decisionApproachFacetMatchesPreset(
+        { ...p, corePrinciple: "edited" },
+        uuid,
+      ),
+    ).toBe(false);
+  });
 });

tests/unit/stripCustomRuleSelectionFields.test.ts

@@ -12,6 +12,7 @@ describe("stripCustomRuleSelectionFields", () => {
       selectedCommunicationMethodIds: ["signal"],
       selectedMembershipMethodIds: ["x"],
       selectedDecisionApproachIds: ["y"],
+      selectedDecisionKeyResourceIds: ["amend"],
       selectedConflictManagementIds: ["z"],
       methodSectionsPinCommitted: { communication: true },
       coreValueDetailsByChipId: { "1": { meaning: "", signals: "" } },
@@ -38,6 +39,7 @@ describe("stripCustomRuleSelectionFields", () => {
     expect(out.selectedCommunicationMethodIds).toBeUndefined();
     expect(out.selectedMembershipMethodIds).toBeUndefined();
     expect(out.selectedDecisionApproachIds).toBeUndefined();
+    expect(out.selectedDecisionKeyResourceIds).toBeUndefined();
     expect(out.selectedConflictManagementIds).toBeUndefined();
     expect(out.methodSectionsPinCommitted).toBeUndefined();
     expect(out.coreValueDetailsByChipId).toBeUndefined();