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/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,