From 96125aa6ae250c8412111ae7a38de88fa8b2a8a0 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 12:55:48 -0500
Subject: [PATCH 01/38] Add rubric template utilities, collapsible
 FieldConfigCard, and store/registry scaffolding

- Create rubricTemplate.ts with pure functions for CRUD operations on
  RubricTemplateSchema (scored, yes/no, dropdown, long_text criterion types)
- Extend FieldConfigCard with optional collapsible/accordion behavior using
  React Aria Disclosure primitives with animated height transitions
- Add headerExtra prop to FieldConfigCard for rendering badges in the header
- Add setRubricTemplateSchema/getRubricTemplateSchema to ProcessBuilder store
- Create rubricCriterionRegistry with type metadata, icons, and labels
---
 .../rubric/rubricCriterionRegistry.tsx        |  64 ++
 .../stores/useProcessBuilderStore.ts          |  26 +-
 .../components/decisions/rubricTemplate.ts    | 587 ++++++++++++++++++
 .../ui/src/components/FieldConfigCard.tsx     | 284 +++++++--
 4 files changed, 892 insertions(+), 69 deletions(-)
 create mode 100644 apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
 create mode 100644 apps/app/src/components/decisions/rubricTemplate.ts

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
new file mode 100644
index 000000000..ebcd4ce7e
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
@@ -0,0 +1,64 @@
+import type { IconType } from 'react-icons';
+import {
+  LuChevronDown,
+  LuHash,
+  LuLetterText,
+  LuToggleRight,
+} from 'react-icons/lu';
+
+import type { RubricCriterionType } from '../../../../decisions/rubricTemplate';
+
+/**
+ * Display metadata for each rubric criterion type.
+ */
+interface CriterionTypeRegistryEntry {
+  icon: IconType;
+  /** Translation key for the type label */
+  labelKey: string;
+  /** Translation key for a short description shown in the radio selector */
+  descriptionKey: string;
+}
+
+export const CRITERION_TYPE_REGISTRY: Record<
+  RubricCriterionType,
+  CriterionTypeRegistryEntry
+> = {
+  scored: {
+    icon: LuHash,
+    labelKey: 'Scored',
+    descriptionKey: 'Rate on a numeric scale with points',
+  },
+  yes_no: {
+    icon: LuToggleRight,
+    labelKey: 'Yes / No',
+    descriptionKey: 'Simple yes or no answer',
+  },
+  dropdown: {
+    icon: LuChevronDown,
+    labelKey: 'Dropdown',
+    descriptionKey: 'Select from custom options',
+  },
+  long_text: {
+    icon: LuLetterText,
+    labelKey: 'Long text',
+    descriptionKey: 'Open-ended written feedback',
+  },
+};
+
+/**
+ * Ordered list of criterion types for the radio selector.
+ */
+export const CRITERION_TYPES: RubricCriterionType[] = [
+  'scored',
+  'yes_no',
+  'dropdown',
+  'long_text',
+];
+
+export function getCriterionIcon(type: RubricCriterionType): IconType {
+  return CRITERION_TYPE_REGISTRY[type].icon;
+}
+
+export function getCriterionLabelKey(type: RubricCriterionType): string {
+  return CRITERION_TYPE_REGISTRY[type].labelKey;
+}
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stores/useProcessBuilderStore.ts b/apps/app/src/components/decisions/ProcessBuilder/stores/useProcessBuilderStore.ts
index 616f7fc1f..f6edba442 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stores/useProcessBuilderStore.ts
+++ b/apps/app/src/components/decisions/ProcessBuilder/stores/useProcessBuilderStore.ts
@@ -31,7 +31,7 @@
  * - `saveStates[decisionId]` - UI save indicator state
  */
 import type { InstanceData, InstancePhaseData } from '@op/api/encoders';
-import type { ProposalTemplateSchema } from '@op/common';
+import type { ProposalTemplateSchema, RubricTemplateSchema } from '@op/common';
 import { create } from 'zustand';
 import { createJSONStorage, persist } from 'zustand/middleware';
 
@@ -101,6 +101,15 @@ interface ProcessBuilderState {
     decisionId: string,
   ) => ProposalTemplateSchema | undefined;
 
+  // Actions for rubric template
+  setRubricTemplateSchema: (
+    decisionId: string,
+    template: RubricTemplateSchema,
+  ) => void;
+  getRubricTemplateSchema: (
+    decisionId: string,
+  ) => RubricTemplateSchema | undefined;
+
   // Actions for save state
   setSaveStatus: (decisionId: string, status: SaveStatus) => void;
   markSaved: (decisionId: string) => void;
@@ -190,6 +199,21 @@ export const useProcessBuilderStore = create<ProcessBuilderState>()(
       getProposalTemplateSchema: (decisionId) =>
         get().instances[decisionId]?.proposalTemplate,
 
+      // Rubric template actions
+      setRubricTemplateSchema: (decisionId, template) =>
+        set((state) => ({
+          instances: {
+            ...state.instances,
+            [decisionId]: {
+              ...state.instances[decisionId],
+              rubricTemplate: template,
+            },
+          },
+        })),
+
+      getRubricTemplateSchema: (decisionId) =>
+        get().instances[decisionId]?.rubricTemplate,
+
       // Save state actions
       setSaveStatus: (decisionId, status) =>
         set((state) => ({
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
new file mode 100644
index 000000000..696f1b679
--- /dev/null
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -0,0 +1,587 @@
+/**
+ * Rubric Template — JSON Schema utilities.
+ *
+ * Uses `RubricTemplateSchema` from `@op/common`. Field ordering is stored as a
+ * top-level `x-field-order` array. Per-criterion widget selection is driven by
+ * `x-format` on each property (consumed by the renderer's rubric field logic).
+ *
+ * Mirrors the architecture of `proposalTemplate.ts` but tailored to rubric
+ * criteria: scored dropdowns, yes/no, custom dropdowns, and long text.
+ */
+import type {
+  RubricTemplateSchema,
+  XFormatPropertySchema,
+} from '@op/common/client';
+
+export type { RubricTemplateSchema };
+
+// ---------------------------------------------------------------------------
+// Criterion types
+// ---------------------------------------------------------------------------
+
+export type RubricCriterionType =
+  | 'scored'
+  | 'yes_no'
+  | 'dropdown'
+  | 'long_text';
+
+/**
+ * Flat read-only view of a single rubric criterion, derived from the template.
+ * Gives builder/renderer code a friendly object instead of requiring
+ * multiple reader calls per criterion.
+ */
+export interface CriterionView {
+  id: string;
+  criterionType: RubricCriterionType;
+  label: string;
+  description?: string;
+  required: boolean;
+  /** Maximum points for scored criteria. */
+  maxPoints?: number;
+  /** Labels for each score level (index 0 = score 1). Scored criteria only. */
+  scoreLabels: string[];
+  /** Options for dropdown criteria. */
+  options: { id: string; value: string }[];
+}
+
+// ---------------------------------------------------------------------------
+// Criterion type ↔ JSON Schema mapping
+// ---------------------------------------------------------------------------
+
+const DEFAULT_MAX_POINTS = 5;
+
+const DEFAULT_SCORE_LABELS: Record<number, string> = {
+  1: 'Poor',
+  2: 'Below Average',
+  3: 'Average',
+  4: 'Good',
+  5: 'Excellent',
+};
+
+/**
+ * Create the JSON Schema for a given criterion type.
+ */
+export function createCriterionJsonSchema(
+  type: RubricCriterionType,
+): XFormatPropertySchema {
+  switch (type) {
+    case 'scored': {
+      const max = DEFAULT_MAX_POINTS;
+      const oneOf = Array.from({ length: max }, (_, i) => ({
+        const: i + 1,
+        title: DEFAULT_SCORE_LABELS[i + 1] ?? `${i + 1}`,
+      }));
+      return {
+        type: 'integer',
+        'x-format': 'dropdown',
+        minimum: 1,
+        maximum: max,
+        oneOf,
+      };
+    }
+    case 'yes_no':
+      return {
+        type: 'string',
+        'x-format': 'dropdown',
+        oneOf: [
+          { const: 'yes', title: 'Yes' },
+          { const: 'no', title: 'No' },
+        ],
+      };
+    case 'dropdown':
+      return {
+        type: 'string',
+        'x-format': 'dropdown',
+        oneOf: [
+          { const: 'Option 1', title: 'Option 1' },
+          { const: 'Option 2', title: 'Option 2' },
+        ],
+      };
+    case 'long_text':
+      return {
+        type: 'string',
+        'x-format': 'long-text',
+      };
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Type inference from schema shape
+// ---------------------------------------------------------------------------
+
+/**
+ * Infer the `RubricCriterionType` from a raw JSON Schema property.
+ */
+export function inferCriterionType(
+  schema: XFormatPropertySchema,
+): RubricCriterionType | undefined {
+  const xFormat = schema['x-format'];
+
+  if (xFormat === 'long-text') {
+    return 'long_text';
+  }
+
+  if (xFormat === 'dropdown') {
+    // Scored: integer type with maximum
+    if (schema.type === 'integer' && typeof schema.maximum === 'number') {
+      return 'scored';
+    }
+
+    // Yes/No: string with exactly two oneOf entries (yes, no)
+    if (schema.type === 'string' && Array.isArray(schema.oneOf)) {
+      const values = schema.oneOf
+        .filter(
+          (e): e is { const: string } =>
+            typeof e === 'object' && e !== null && 'const' in e,
+        )
+        .map((e) => e.const);
+      if (
+        values.length === 2 &&
+        values.includes('yes') &&
+        values.includes('no')
+      ) {
+        return 'yes_no';
+      }
+    }
+
+    // Generic dropdown
+    if (schema.type === 'string') {
+      return 'dropdown';
+    }
+  }
+
+  return undefined;
+}
+
+// ---------------------------------------------------------------------------
+// Readers
+// ---------------------------------------------------------------------------
+
+function asSchema(def: unknown): XFormatPropertySchema | undefined {
+  if (typeof def === 'object' && def !== null) {
+    return def as XFormatPropertySchema;
+  }
+  return undefined;
+}
+
+export function getCriterionOrder(template: RubricTemplateSchema): string[] {
+  return (template['x-field-order'] as string[] | undefined) ?? [];
+}
+
+export function getCriterionSchema(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): XFormatPropertySchema | undefined {
+  const props = template.properties;
+  if (!props) {
+    return undefined;
+  }
+  return asSchema(props[criterionId]);
+}
+
+export function getCriterionType(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): RubricCriterionType | undefined {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema) {
+    return undefined;
+  }
+  return inferCriterionType(schema);
+}
+
+export function getCriterionLabel(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): string {
+  const schema = getCriterionSchema(template, criterionId);
+  return (schema?.title as string | undefined) ?? '';
+}
+
+export function getCriterionDescription(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): string | undefined {
+  const schema = getCriterionSchema(template, criterionId);
+  return schema?.description;
+}
+
+export function isCriterionRequired(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): boolean {
+  const required = template.required;
+  if (!Array.isArray(required)) {
+    return false;
+  }
+  return required.includes(criterionId);
+}
+
+export function getCriterionMaxPoints(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): number | undefined {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema || schema.type !== 'integer') {
+    return undefined;
+  }
+  return schema.maximum;
+}
+
+export function getCriterionScoreLabels(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): string[] {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema || schema.type !== 'integer' || !Array.isArray(schema.oneOf)) {
+    return [];
+  }
+  return schema.oneOf
+    .filter(
+      (e): e is { const: number; title: string } =>
+        typeof e === 'object' &&
+        e !== null &&
+        'const' in e &&
+        'title' in e &&
+        typeof (e as { title: unknown }).title === 'string',
+    )
+    .sort((a, b) => a.const - b.const)
+    .map((e) => e.title);
+}
+
+export function getCriterionOptions(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): { id: string; value: string }[] {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema || schema.type !== 'string' || !Array.isArray(schema.oneOf)) {
+    return [];
+  }
+  return schema.oneOf
+    .filter(
+      (e): e is { const: string; title: string } =>
+        typeof e === 'object' &&
+        e !== null &&
+        'const' in e &&
+        'title' in e &&
+        typeof (e as { const: unknown }).const === 'string',
+    )
+    .map((e, i) => ({
+      id: `${criterionId}-opt-${i}`,
+      value: e.title,
+    }));
+}
+
+// ---------------------------------------------------------------------------
+// Composite readers
+// ---------------------------------------------------------------------------
+
+export function getCriterion(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): CriterionView | undefined {
+  const criterionType = getCriterionType(template, criterionId);
+  if (!criterionType) {
+    return undefined;
+  }
+
+  return {
+    id: criterionId,
+    criterionType,
+    label: getCriterionLabel(template, criterionId),
+    description: getCriterionDescription(template, criterionId),
+    required: isCriterionRequired(template, criterionId),
+    maxPoints: getCriterionMaxPoints(template, criterionId),
+    scoreLabels: getCriterionScoreLabels(template, criterionId),
+    options: getCriterionOptions(template, criterionId),
+  };
+}
+
+export function getCriteria(template: RubricTemplateSchema): CriterionView[] {
+  const order = getCriterionOrder(template);
+  const criteria: CriterionView[] = [];
+  for (const id of order) {
+    const criterion = getCriterion(template, id);
+    if (criterion) {
+      criteria.push(criterion);
+    }
+  }
+  return criteria;
+}
+
+// ---------------------------------------------------------------------------
+// Validation
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns translation keys for validation errors on a criterion.
+ * Pass each key through `t()` in the UI layer.
+ */
+export function getCriterionErrors(criterion: CriterionView): string[] {
+  const errors: string[] = [];
+
+  if (!criterion.label.trim()) {
+    errors.push('Criterion label is required');
+  }
+
+  if (criterion.criterionType === 'dropdown') {
+    if (criterion.options.length < 2) {
+      errors.push('At least two options are required');
+    }
+    if (criterion.options.some((o) => !o.value.trim())) {
+      errors.push('Options cannot be empty');
+    }
+  }
+
+  if (criterion.criterionType === 'scored') {
+    if (criterion.scoreLabels.some((l) => !l.trim())) {
+      errors.push('Score labels cannot be empty');
+    }
+  }
+
+  return errors;
+}
+
+// ---------------------------------------------------------------------------
+// Immutable mutators — each returns a new template
+// ---------------------------------------------------------------------------
+
+export function addCriterion(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  type: RubricCriterionType,
+  label: string,
+): RubricTemplateSchema {
+  const jsonSchema = { ...createCriterionJsonSchema(type), title: label };
+  const order = getCriterionOrder(template);
+
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [criterionId]: jsonSchema,
+    },
+    'x-field-order': [...order, criterionId],
+  };
+}
+
+export function removeCriterion(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): RubricTemplateSchema {
+  const { [criterionId]: _removed, ...restProps } = template.properties ?? {};
+  const order = getCriterionOrder(template).filter((id) => id !== criterionId);
+  const required = (template.required ?? []).filter((id) => id !== criterionId);
+
+  return {
+    ...template,
+    properties: restProps,
+    required: required.length > 0 ? required : undefined,
+    'x-field-order': order,
+  };
+}
+
+export function reorderCriteria(
+  template: RubricTemplateSchema,
+  newOrder: string[],
+): RubricTemplateSchema {
+  return {
+    ...template,
+    'x-field-order': newOrder,
+  };
+}
+
+export function updateCriterionLabel(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  label: string,
+): RubricTemplateSchema {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema) {
+    return template;
+  }
+
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [criterionId]: { ...schema, title: label },
+    },
+  };
+}
+
+export function updateCriterionDescription(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  description: string | undefined,
+): RubricTemplateSchema {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema) {
+    return template;
+  }
+
+  const updated = { ...schema };
+  if (description) {
+    updated.description = description;
+  } else {
+    delete updated.description;
+  }
+
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [criterionId]: updated,
+    },
+  };
+}
+
+export function setCriterionRequired(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  required: boolean,
+): RubricTemplateSchema {
+  const current = template.required ?? [];
+  const filtered = current.filter((id) => id !== criterionId);
+  const next = required ? [...filtered, criterionId] : filtered;
+
+  return {
+    ...template,
+    required: next.length > 0 ? next : undefined,
+  };
+}
+
+/**
+ * Change a criterion's type while preserving its label, description, and
+ * required status. The schema is rebuilt from scratch for the new type.
+ */
+export function changeCriterionType(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  newType: RubricCriterionType,
+): RubricTemplateSchema {
+  const existing = getCriterionSchema(template, criterionId);
+  if (!existing) {
+    return template;
+  }
+
+  const newSchema: XFormatPropertySchema = {
+    ...createCriterionJsonSchema(newType),
+    title: existing.title,
+  };
+  if (existing.description) {
+    newSchema.description = existing.description;
+  }
+
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [criterionId]: newSchema,
+    },
+  };
+}
+
+/**
+ * Low-level updater for the raw JSON Schema of a criterion.
+ * Used for updating score labels, max points, dropdown options, etc.
+ */
+export function updateCriterionJsonSchema(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  updates: Partial<XFormatPropertySchema>,
+): RubricTemplateSchema {
+  const existing = getCriterionSchema(template, criterionId);
+  if (!existing) {
+    return template;
+  }
+
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [criterionId]: { ...existing, ...updates },
+    },
+  };
+}
+
+/**
+ * Update the maximum points for a scored criterion.
+ * Rebuilds the `oneOf` array to match the new max, preserving existing
+ * labels where possible and generating defaults for new levels.
+ */
+export function updateScoredMaxPoints(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  newMax: number,
+): RubricTemplateSchema {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema || schema.type !== 'integer') {
+    return template;
+  }
+
+  const clampedMax = Math.max(2, Math.min(newMax, 10));
+  const existingLabels = getCriterionScoreLabels(template, criterionId);
+
+  const oneOf = Array.from({ length: clampedMax }, (_, i) => ({
+    const: i + 1,
+    title: existingLabels[i] ?? DEFAULT_SCORE_LABELS[i + 1] ?? `${i + 1}`,
+  }));
+
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [criterionId]: {
+        ...schema,
+        maximum: clampedMax,
+        oneOf,
+      },
+    },
+  };
+}
+
+/**
+ * Update a single score label for a scored criterion.
+ */
+export function updateScoreLabel(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  scoreIndex: number,
+  label: string,
+): RubricTemplateSchema {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema || schema.type !== 'integer' || !Array.isArray(schema.oneOf)) {
+    return template;
+  }
+
+  const oneOf = schema.oneOf.map((entry, i) => {
+    if (i === scoreIndex && typeof entry === 'object' && entry !== null) {
+      return { ...entry, title: label };
+    }
+    return entry;
+  });
+
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [criterionId]: { ...schema, oneOf },
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Factory
+// ---------------------------------------------------------------------------
+
+/**
+ * Creates an empty rubric template with no criteria.
+ */
+export function createEmptyRubricTemplate(): RubricTemplateSchema {
+  return {
+    type: 'object',
+    properties: {},
+    'x-field-order': [],
+  };
+}
diff --git a/packages/ui/src/components/FieldConfigCard.tsx b/packages/ui/src/components/FieldConfigCard.tsx
index 2c2572327..e29790470 100644
--- a/packages/ui/src/components/FieldConfigCard.tsx
+++ b/packages/ui/src/components/FieldConfigCard.tsx
@@ -1,9 +1,16 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { useRef } from 'react';
-import { Button as AriaButton } from 'react-aria-components';
-import { LuGripVertical, LuLock, LuX } from 'react-icons/lu';
+import { use, useLayoutEffect, useRef } from 'react';
+import type { Key } from 'react-aria-components';
+import {
+  Button as AriaButton,
+  DisclosurePanel as DisclosurePanelPrimitive,
+  Disclosure as DisclosurePrimitive,
+  DisclosureStateContext,
+  Button as TriggerButton,
+} from 'react-aria-components';
+import { LuChevronRight, LuGripVertical, LuLock, LuX } from 'react-icons/lu';
 
 import { cn } from '../lib/utils';
 import { AutoSizeInput } from './AutoSizeInput';
@@ -46,12 +53,37 @@ export interface FieldConfigCardProps {
   className?: string;
   /** Whether the card is locked (non-editable, no drag handle or remove button) */
   locked?: boolean;
+  /** Extra content rendered in the header row after the label (e.g. points badge) */
+  headerExtra?: ReactNode;
+
+  // --- Collapsible (accordion) props ---
+
+  /**
+   * Enable accordion/collapsible behavior. When true, the body (description +
+   * children) is hidden behind a disclosure toggle and animates open/closed.
+   * The card must be placed inside an `<Accordion>` (DisclosureGroup) for
+   * group-level expand control, or used standalone with controlled/uncontrolled
+   * expansion via `isExpanded` / `defaultExpanded`.
+   */
+  collapsible?: boolean;
+  /** Unique id for this disclosure (required when inside an Accordion group) */
+  disclosureId?: Key;
+  /** Controlled expansion state */
+  isExpanded?: boolean;
+  /** Default expansion state (uncontrolled) */
+  defaultExpanded?: boolean;
+  /** Callback when expansion changes */
+  onExpandedChange?: (isExpanded: boolean) => void;
 }
 
 /**
  * A configurable card component for form builders.
  * Features a header with drag handle, icon, editable label, and remove button,
  * plus an optional description field and slot for additional configuration.
+ *
+ * When `collapsible` is true the body content is wrapped in a React Aria
+ * Disclosure panel with smooth height animation, and a chevron toggle is
+ * added to the header.
  */
 export function FieldConfigCard({
   icon: Icon,
@@ -70,6 +102,12 @@ export function FieldConfigCard({
   children,
   className,
   locked = false,
+  headerExtra,
+  collapsible = false,
+  disclosureId,
+  isExpanded,
+  defaultExpanded,
+  onExpandedChange,
 }: FieldConfigCardProps) {
   const isDragging = controls?.isDragging ?? false;
   const labelInputRef = useRef<HTMLInputElement>(null!);
@@ -94,88 +132,198 @@ export function FieldConfigCard({
             {iconTooltip && <Tooltip>{iconTooltip}</Tooltip>}
           </TooltipTrigger>
           <span className="flex-1 text-neutral-charcoal">{label}</span>
+          {headerExtra}
         </div>
         {children}
       </div>
     );
   }
 
+  const header = (
+    <div className="flex w-full items-center gap-2">
+      <div className="flex min-w-0 grow items-center gap-2">
+        {controls && (
+          <DragHandle
+            {...controls.dragHandleProps}
+            aria-label={dragHandleAriaLabel}
+          />
+        )}
+        {collapsible && <CollapsibleIndicator />}
+        <div className="flex min-w-0 items-center gap-2 rounded border border-neutral-gray1 bg-neutral-gray1 px-2 py-1 focus-within:border-neutral-gray2 focus-within:bg-white">
+          <TooltipTrigger>
+            <AriaButton
+              className="flex shrink-0 items-center text-neutral-gray4"
+              onPress={() => labelInputRef.current?.focus()}
+            >
+              <Icon className="size-4" />
+            </AriaButton>
+            {iconTooltip && <Tooltip>{iconTooltip}</Tooltip>}
+          </TooltipTrigger>
+          <div className="min-w-0 overflow-hidden">
+            <AutoSizeInput
+              inputRef={labelInputRef}
+              value={label}
+              onChange={(value) => onLabelChange?.(value)}
+              className="text-neutral-charcoal"
+              aria-label={labelInputAriaLabel}
+            />
+          </div>
+        </div>
+        {headerExtra}
+      </div>
+      {onRemove && (
+        <Button
+          color="ghost"
+          size="small"
+          aria-label={removeAriaLabel}
+          onPress={onRemove}
+          className="p-2 text-neutral-gray4 hover:text-neutral-charcoal"
+        >
+          <LuX className="size-4" />
+        </Button>
+      )}
+    </div>
+  );
+
+  const body = (
+    <div className="px-8">
+      {onDescriptionChange && (
+        <div className="mt-4">
+          <TextField
+            label={descriptionLabel}
+            value={description ?? ''}
+            onChange={onDescriptionChange}
+            useTextArea
+            textareaProps={{
+              placeholder: descriptionPlaceholder,
+              className: 'min-h-24 resize-none',
+            }}
+          />
+        </div>
+      )}
+      {children}
+    </div>
+  );
+
+  // Non-collapsible variant: render header + body directly
+  if (!collapsible) {
+    return (
+      <div
+        className={cn(
+          'rounded-lg border bg-white px-3 py-4',
+          isDragging && 'opacity-50',
+          className,
+        )}
+      >
+        {header}
+        {body}
+      </div>
+    );
+  }
+
+  // Collapsible variant: wrap in Disclosure primitive
   return (
-    <div
+    <DisclosurePrimitive
+      id={disclosureId}
+      isExpanded={isExpanded}
+      defaultExpanded={defaultExpanded}
+      onExpandedChange={onExpandedChange}
       className={cn(
-        'rounded-lg border bg-white px-3 py-4',
+        'group/field-config rounded-lg border bg-white px-3 py-4',
         isDragging && 'opacity-50',
         className,
       )}
     >
-      {/* Header: drag handle, icon, label input, remove button */}
-      <div className="flex w-full items-center gap-2">
-        <div className="flex min-w-0 grow items-center gap-2">
-          {controls && (
-            <DragHandle
-              {...controls.dragHandleProps}
-              aria-label={dragHandleAriaLabel}
-            />
-          )}
-          <div className="flex min-w-0 items-center gap-2 rounded border border-neutral-gray1 bg-neutral-gray1 px-2 py-1 focus-within:border-neutral-gray2 focus-within:bg-white">
-            <TooltipTrigger>
-              <AriaButton
-                className="flex shrink-0 items-center text-neutral-gray4"
-                onPress={() => labelInputRef.current?.focus()}
-              >
-                <Icon className="size-4" />
-              </AriaButton>
-              {iconTooltip && <Tooltip>{iconTooltip}</Tooltip>}
-            </TooltipTrigger>
-            <div className="min-w-0 overflow-hidden">
-              <AutoSizeInput
-                inputRef={labelInputRef}
-                value={label}
-                onChange={(value) => onLabelChange?.(value)}
-                className="text-neutral-charcoal"
-                aria-label={labelInputAriaLabel}
-              />
-            </div>
-          </div>
-        </div>
-        {onRemove && (
-          <Button
-            color="ghost"
-            size="small"
-            aria-label={removeAriaLabel}
-            onPress={onRemove}
-            className="p-2 text-neutral-gray4 hover:text-neutral-charcoal"
-          >
-            <LuX className="size-4" />
-          </Button>
-        )}
-      </div>
+      {header}
+      <AnimatedDisclosurePanel>{body}</AnimatedDisclosurePanel>
+    </DisclosurePrimitive>
+  );
+}
 
-      {/* Body: description and custom config */}
-      <div className="px-8">
-        {/* Description field */}
-        {onDescriptionChange && (
-          <div className="mt-4">
-            <TextField
-              label={descriptionLabel}
-              value={description ?? ''}
-              onChange={onDescriptionChange}
-              useTextArea
-              textareaProps={{
-                placeholder: descriptionPlaceholder,
-                className: 'min-h-24 resize-none',
-              }}
-            />
-          </div>
-        )}
+// ---------------------------------------------------------------------------
+// Collapsible sub-components
+// ---------------------------------------------------------------------------
 
-        {/* Additional config slot */}
-        {children}
-      </div>
-    </div>
+/**
+ * Chevron indicator that toggles the disclosure. Rotates 90° when expanded.
+ * Rendered as a React Aria `Button` with `slot="trigger"` so it integrates
+ * with the parent `Disclosure` primitive.
+ */
+function CollapsibleIndicator() {
+  return (
+    <TriggerButton
+      slot="trigger"
+      className="flex shrink-0 cursor-pointer items-center rounded p-0.5 text-neutral-gray4 outline-none hover:text-neutral-charcoal focus-visible:ring-2 focus-visible:ring-ring"
+    >
+      <LuChevronRight className="size-4 transition-transform duration-200 group-data-[expanded]/field-config:rotate-90" />
+    </TriggerButton>
   );
 }
 
+/**
+ * Animated disclosure panel that mirrors the height-transition logic from
+ * the Accordion component. Uses the `--disclosure-panel-height` CSS custom
+ * property for smooth expand/collapse animations.
+ */
+function AnimatedDisclosurePanel({ children }: { children: ReactNode }) {
+  const state = use(DisclosureStateContext);
+  const panelRef = useRef<HTMLDivElement>(null);
+  const isFirstRender = useRef(true);
+
+  useLayoutEffect(() => {
+    const panel = panelRef.current;
+    if (!panel) {
+      return;
+    }
+
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      if (state?.isExpanded) {
+        panel.style.setProperty('--disclosure-panel-height', 'auto');
+      } else {
+        panel.style.setProperty('--disclosure-panel-height', '0px');
+      }
+      return;
+    }
+
+    if (state?.isExpanded) {
+      if (
+        panel.style.getPropertyValue('--disclosure-panel-height') === 'auto'
+      ) {
+        return;
+      }
+
+      panel.removeAttribute('hidden');
+      const height = panel.scrollHeight;
+      panel.style.setProperty('--disclosure-panel-height', `${height}px`);
+
+      const onTransitionEnd = () => {
+        panel.style.setProperty('--disclosure-panel-height', 'auto');
+        panel.removeEventListener('transitionend', onTransitionEnd);
+      };
+      panel.addEventListener('transitionend', onTransitionEnd);
+    } else {
+      const height = panel.scrollHeight;
+      panel.style.setProperty('--disclosure-panel-height', `${height}px`);
+      void panel.offsetHeight;
+      panel.style.setProperty('--disclosure-panel-height', '0px');
+    }
+  }, [state?.isExpanded]);
+
+  return (
+    <DisclosurePanelPrimitive
+      ref={panelRef}
+      className="h-[var(--disclosure-panel-height)] overflow-hidden transition-[height] duration-200 ease-out motion-reduce:transition-none [&[hidden]]:![content-visibility:visible]"
+    >
+      {children}
+    </DisclosurePanelPrimitive>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Drag preview
+// ---------------------------------------------------------------------------
+
 export interface FieldConfigCardDragPreviewProps {
   /** Icon component to display next to the label */
   icon: React.ComponentType<{ className?: string }>;

From 2e930c8be4e968e84c9d7bed926ad2c393abb1fc Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 12:59:43 -0500
Subject: [PATCH 02/38] Add rubric editor UI with collapsible criterion cards
 and auto-save

- Create RubricCriterionCard with collapsible FieldConfigCard, inline
  criterion type radio selector, scored/dropdown/yes-no/long-text configs
- Create RubricEditorContent with Accordion+Sortable for drag-to-reorder,
  debounced auto-save to API, live RubricParticipantPreview, and empty state
- Wire RubricEditorContent into CriteriaSection behind rubric_builder flag
---
 .../stepContent/rubric/CriteriaSection.tsx    |  14 +-
 .../rubric/RubricCriterionCard.tsx            | 476 ++++++++++++++++++
 .../rubric/RubricEditorContent.tsx            | 318 ++++++++++++
 3 files changed, 797 insertions(+), 11 deletions(-)
 create mode 100644 apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
 create mode 100644 apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
index 509c08ac0..bcd6ba78e 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
@@ -7,8 +7,7 @@ import { useTranslations } from '@/lib/i18n';
 
 import type { SectionProps } from '../../contentRegistry';
 import { CodeAnimation } from './RubricComingSoonAnimation';
-import { RubricParticipantPreview } from './RubricParticipantPreview';
-import { DUMMY_RUBRIC_TEMPLATE } from './dummyRubricTemplate';
+import { RubricEditorContent } from './RubricEditorContent';
 
 export default function CriteriaSection(props: SectionProps) {
   return (
@@ -18,19 +17,12 @@ export default function CriteriaSection(props: SectionProps) {
   );
 }
 
-function CriteriaSectionContent(_props: SectionProps) {
+function CriteriaSectionContent(props: SectionProps) {
   const t = useTranslations();
   const rubricBuilderEnabled = useFeatureFlag('rubric_builder');
 
   if (rubricBuilderEnabled) {
-    return (
-      <div className="flex h-full flex-col md:flex-row">
-        {/* Left panel — placeholder for the future rubric builder */}
-        <main className="flex-1 basis-1/2 overflow-y-auto p-4 pb-24 md:p-8 md:pb-8" />
-
-        <RubricParticipantPreview template={DUMMY_RUBRIC_TEMPLATE} />
-      </div>
-    );
+    return <RubricEditorContent {...props} />;
   }
 
   return (
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
new file mode 100644
index 000000000..4c48d9609
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -0,0 +1,476 @@
+'use client';
+
+import type { XFormatPropertySchema } from '@op/common/client';
+import { Button } from '@op/ui/Button';
+import {
+  FieldConfigCard,
+  FieldConfigCardDragPreview,
+} from '@op/ui/FieldConfigCard';
+import { NumberField } from '@op/ui/NumberField';
+import { Radio, RadioGroup } from '@op/ui/RadioGroup';
+import { DragHandle, Sortable } from '@op/ui/Sortable';
+import type { SortableItemControls } from '@op/ui/Sortable';
+import { TextField } from '@op/ui/TextField';
+import { ToggleButton } from '@op/ui/ToggleButton';
+import { Tooltip, TooltipTrigger } from '@op/ui/Tooltip';
+import { useEffect, useRef, useState } from 'react';
+import { LuGripVertical, LuPlus, LuX } from 'react-icons/lu';
+
+import { useTranslations } from '@/lib/i18n';
+
+import type {
+  CriterionView,
+  RubricCriterionType,
+} from '../../../../decisions/rubricTemplate';
+import {
+  CRITERION_TYPES,
+  CRITERION_TYPE_REGISTRY,
+  getCriterionIcon,
+} from './rubricCriterionRegistry';
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+interface RubricCriterionCardProps {
+  criterion: CriterionView;
+  errors?: string[];
+  controls?: SortableItemControls;
+  onRemove?: (criterionId: string) => void;
+  onBlur?: (criterionId: string) => void;
+  onUpdateLabel?: (criterionId: string, label: string) => void;
+  onUpdateDescription?: (criterionId: string, description: string) => void;
+  onUpdateRequired?: (criterionId: string, isRequired: boolean) => void;
+  onChangeType?: (criterionId: string, newType: RubricCriterionType) => void;
+  onUpdateJsonSchema?: (
+    criterionId: string,
+    updates: Partial<XFormatPropertySchema>,
+  ) => void;
+  onUpdateMaxPoints?: (criterionId: string, maxPoints: number) => void;
+  onUpdateScoreLabel?: (
+    criterionId: string,
+    scoreIndex: number,
+    label: string,
+  ) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Main component
+// ---------------------------------------------------------------------------
+
+/**
+ * A collapsible card representing a single rubric criterion in the builder.
+ * Uses FieldConfigCard with `collapsible` prop for accordion behaviour.
+ *
+ * Collapsed: drag handle + chevron + icon + label + badge + remove
+ * Expanded: description, criterion type radio, type-specific config, required toggle
+ */
+export function RubricCriterionCard({
+  criterion,
+  errors = [],
+  controls,
+  onRemove,
+  onBlur,
+  onUpdateLabel,
+  onUpdateDescription,
+  onUpdateRequired,
+  onChangeType,
+  onUpdateJsonSchema,
+  onUpdateMaxPoints,
+  onUpdateScoreLabel,
+}: RubricCriterionCardProps) {
+  const t = useTranslations();
+  const cardRef = useRef<HTMLDivElement>(null);
+
+  const Icon = getCriterionIcon(criterion.criterionType);
+
+  const handleBlur = (e: React.FocusEvent) => {
+    if (cardRef.current && !cardRef.current.contains(e.relatedTarget as Node)) {
+      onBlur?.(criterion.id);
+    }
+  };
+
+  // Badge for the header
+  const headerBadge = (() => {
+    switch (criterion.criterionType) {
+      case 'scored':
+        return (
+          <span className="bg-primary-mint/20 text-primary-tealDark shrink-0 rounded-sm px-1.5 py-0.5 text-xs">
+            {criterion.maxPoints} {t('pts')}
+          </span>
+        );
+      case 'yes_no':
+        return (
+          <span className="shrink-0 rounded-sm bg-neutral-gray1 px-1.5 py-0.5 text-xs text-neutral-charcoal">
+            {t('Yes / No')}
+          </span>
+        );
+      default:
+        return null;
+    }
+  })();
+
+  return (
+    <div ref={cardRef} onBlur={handleBlur}>
+      <FieldConfigCard
+        collapsible
+        icon={Icon}
+        iconTooltip={t(
+          CRITERION_TYPE_REGISTRY[criterion.criterionType].labelKey,
+        )}
+        label={criterion.label}
+        onLabelChange={(newLabel) => onUpdateLabel?.(criterion.id, newLabel)}
+        labelInputAriaLabel={t('Criterion label')}
+        description={criterion.description}
+        onDescriptionChange={(desc) =>
+          onUpdateDescription?.(criterion.id, desc)
+        }
+        descriptionLabel={t('Description')}
+        descriptionPlaceholder={t(
+          'Provide guidance for reviewers on how to evaluate this criterion...',
+        )}
+        onRemove={onRemove ? () => onRemove(criterion.id) : undefined}
+        removeAriaLabel={t('Remove criterion')}
+        dragHandleAriaLabel={t('Drag to reorder {field}', {
+          field: criterion.label,
+        })}
+        controls={controls}
+        headerExtra={headerBadge}
+        className={errors.length > 0 ? 'border-functional-red' : undefined}
+      >
+        {/* Criterion type selector */}
+        <div className="mt-4">
+          <CriterionTypeSelector
+            value={criterion.criterionType}
+            onChange={(newType) => onChangeType?.(criterion.id, newType)}
+          />
+        </div>
+
+        {/* Type-specific configuration */}
+        {criterion.criterionType === 'scored' && (
+          <div className="mt-4">
+            <ScoredCriterionConfig
+              criterion={criterion}
+              onUpdateMaxPoints={(max) =>
+                onUpdateMaxPoints?.(criterion.id, max)
+              }
+              onUpdateScoreLabel={(index, label) =>
+                onUpdateScoreLabel?.(criterion.id, index, label)
+              }
+            />
+          </div>
+        )}
+
+        {criterion.criterionType === 'dropdown' && (
+          <div className="mt-4">
+            <DropdownCriterionConfig
+              criterion={criterion}
+              onUpdateJsonSchema={(updates) =>
+                onUpdateJsonSchema?.(criterion.id, updates)
+              }
+            />
+          </div>
+        )}
+
+        {/* Validation errors */}
+        {errors.length > 0 && (
+          <div className="mt-4 space-y-1">
+            {errors.map((error) => (
+              <p key={error} className="text-functional-red">
+                {t(error)}
+              </p>
+            ))}
+          </div>
+        )}
+
+        {/* Required toggle */}
+        <div className="mt-4 flex items-center justify-between">
+          <span className="text-neutral-charcoal">{t('Required?')}</span>
+          <ToggleButton
+            size="small"
+            isSelected={criterion.required}
+            onChange={(isSelected) =>
+              onUpdateRequired?.(criterion.id, isSelected)
+            }
+            aria-label={t('Required')}
+          />
+        </div>
+      </FieldConfigCard>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Criterion type radio selector
+// ---------------------------------------------------------------------------
+
+function CriterionTypeSelector({
+  value,
+  onChange,
+}: {
+  value: RubricCriterionType;
+  onChange: (type: RubricCriterionType) => void;
+}) {
+  const t = useTranslations();
+
+  return (
+    <RadioGroup
+      label={t('Criterion type')}
+      value={value}
+      onChange={(newValue) => onChange(newValue as RubricCriterionType)}
+      orientation="vertical"
+    >
+      {CRITERION_TYPES.map((type) => {
+        const entry = CRITERION_TYPE_REGISTRY[type];
+        const TypeIcon = entry.icon;
+        return (
+          <Radio
+            key={type}
+            value={type}
+            className="group flex items-start gap-2 py-1.5"
+          >
+            <div className="flex items-center gap-2">
+              <TypeIcon className="size-4 text-neutral-gray4" />
+              <span className="text-sm font-medium">{t(entry.labelKey)}</span>
+              <span className="text-xs text-neutral-gray4">
+                {t(entry.descriptionKey)}
+              </span>
+            </div>
+          </Radio>
+        );
+      })}
+    </RadioGroup>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Scored criterion config (max points + score labels)
+// ---------------------------------------------------------------------------
+
+function ScoredCriterionConfig({
+  criterion,
+  onUpdateMaxPoints,
+  onUpdateScoreLabel,
+}: {
+  criterion: CriterionView;
+  onUpdateMaxPoints: (max: number) => void;
+  onUpdateScoreLabel: (index: number, label: string) => void;
+}) {
+  const t = useTranslations();
+  const max = criterion.maxPoints ?? 5;
+
+  return (
+    <div className="space-y-4">
+      <NumberField
+        label={t('Max points')}
+        value={max}
+        onChange={(value) => {
+          if (value !== null && value >= 2 && value <= 10) {
+            onUpdateMaxPoints(value);
+          }
+        }}
+        inputProps={{ className: 'w-20' }}
+      />
+
+      <div className="space-y-2">
+        <h4 className="text-sm text-neutral-charcoal">{t('Score labels')}</h4>
+        {criterion.scoreLabels.map((label, index) => (
+          <div key={index} className="flex items-center gap-2">
+            <span className="w-6 shrink-0 text-right text-sm text-neutral-gray4">
+              {index + 1}
+            </span>
+            <TextField
+              value={label}
+              onChange={(value) => onUpdateScoreLabel(index, value)}
+              inputProps={{
+                placeholder: t('Label for score {number}', {
+                  number: index + 1,
+                }),
+              }}
+              className="w-full"
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Dropdown criterion config (custom options list)
+// Reuses the same sortable options pattern as FieldConfigDropdown
+// ---------------------------------------------------------------------------
+
+interface DropdownOption {
+  id: string;
+  value: string;
+}
+
+function DropdownCriterionConfig({
+  criterion,
+  onUpdateJsonSchema,
+}: {
+  criterion: CriterionView;
+  onUpdateJsonSchema: (updates: Partial<XFormatPropertySchema>) => void;
+}) {
+  const t = useTranslations();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const shouldFocusNewRef = useRef(false);
+
+  const [options, setOptions] = useState<DropdownOption[]>(() =>
+    criterion.options.map((o) => ({ ...o, id: crypto.randomUUID() })),
+  );
+
+  const updateOptions = (next: DropdownOption[]) => {
+    setOptions(next);
+    const oneOfValues = next.map((o) => ({
+      const: o.value,
+      title: o.value,
+    }));
+    onUpdateJsonSchema({ oneOf: oneOfValues });
+  };
+
+  // Focus the last input when a new option is added
+  useEffect(() => {
+    if (shouldFocusNewRef.current && containerRef.current) {
+      const inputs = containerRef.current.querySelectorAll(
+        'input[type="text"]',
+      ) as NodeListOf<HTMLInputElement>;
+      const lastInput = inputs[inputs.length - 1];
+      lastInput?.focus();
+      shouldFocusNewRef.current = false;
+    }
+  }, [options.length]);
+
+  const handleAddOption = () => {
+    shouldFocusNewRef.current = true;
+    updateOptions([...options, { id: crypto.randomUUID(), value: '' }]);
+  };
+
+  const handleUpdateOption = (id: string, value: string) => {
+    updateOptions(
+      options.map((opt) => (opt.id === id ? { ...opt, value } : opt)),
+    );
+  };
+
+  const handleRemoveOption = (id: string) => {
+    updateOptions(options.filter((opt) => opt.id !== id));
+  };
+
+  const handleKeyDown = (e: React.KeyboardEvent, option: DropdownOption) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const isLastOption = options[options.length - 1]?.id === option.id;
+      if (isLastOption && option.value.trim()) {
+        handleAddOption();
+      }
+    }
+  };
+
+  return (
+    <div ref={containerRef} className="space-y-2">
+      <h4 className="text-sm text-neutral-charcoal">{t('Options')}</h4>
+
+      <Sortable
+        items={options}
+        onChange={updateOptions}
+        dragTrigger="handle"
+        getItemLabel={(item) => item.value || t('Option')}
+        renderDragPreview={(items) => {
+          const item = items[0];
+          if (!item) {
+            return null;
+          }
+          return (
+            <div className="flex items-center gap-2">
+              <LuGripVertical className="size-4 text-neutral-gray3" />
+              <span className="mr-12 grow rounded-lg border border-neutral-gray2 bg-white px-4 py-3 text-neutral-charcoal shadow-lg">
+                {item.value || t('Option')}
+              </span>
+            </div>
+          );
+        }}
+        className="gap-2"
+        aria-label={t('Dropdown options')}
+      >
+        {(option, controls) => {
+          const index = options.findIndex((o) => o.id === option.id);
+          return (
+            <div className="flex items-center gap-2">
+              <DragHandle
+                {...controls.dragHandleProps}
+                aria-label={t('Drag to reorder option')}
+                className="text-neutral-gray3 hover:text-neutral-gray4"
+              />
+              <TextField
+                value={option.value}
+                onChange={(value) => handleUpdateOption(option.id, value)}
+                onKeyDown={(e) => handleKeyDown(e, option)}
+                inputProps={{
+                  placeholder: t('Option {number}', { number: index + 1 }),
+                }}
+                className="w-full"
+              />
+              <TooltipTrigger isDisabled={options.length > 2}>
+                <Button
+                  color="ghost"
+                  size="small"
+                  aria-label={t('Remove option')}
+                  aria-disabled={options.length <= 2 || undefined}
+                  aria-description={
+                    options.length <= 2
+                      ? t('At least two options are required')
+                      : undefined
+                  }
+                  excludeFromTabOrder={options.length <= 2}
+                  onPress={() => {
+                    if (options.length > 2) {
+                      handleRemoveOption(option.id);
+                    }
+                  }}
+                  className={`p-2 ${
+                    options.length <= 2
+                      ? 'cursor-default text-neutral-gray3 opacity-30'
+                      : 'text-neutral-gray3 hover:text-neutral-charcoal'
+                  }`}
+                >
+                  <LuX className="size-4" />
+                </Button>
+                <Tooltip>{t('At least two options are required')}</Tooltip>
+              </TooltipTrigger>
+            </div>
+          );
+        }}
+      </Sortable>
+
+      <Button
+        color="ghost"
+        size="small"
+        onPress={handleAddOption}
+        className="hover:text-primary-tealDark gap-1 p-0 text-primary-teal"
+      >
+        <LuPlus className="size-4" />
+        <span>{t('Add option')}</span>
+      </Button>
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Drag preview
+// ---------------------------------------------------------------------------
+
+export function RubricCriterionDragPreview({
+  criterion,
+}: {
+  criterion: CriterionView;
+}) {
+  const Icon = getCriterionIcon(criterion.criterionType);
+  return <FieldConfigCardDragPreview icon={Icon} label={criterion.label} />;
+}
+
+export function RubricCriterionDropIndicator() {
+  return (
+    <div className="flex h-12 items-center gap-2 rounded-lg border bg-neutral-offWhite" />
+  );
+}
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
new file mode 100644
index 000000000..59d0357af
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -0,0 +1,318 @@
+'use client';
+
+import { trpc } from '@op/api/client';
+import type { RubricTemplateSchema } from '@op/common/client';
+import { useDebouncedCallback } from '@op/hooks';
+import { Accordion } from '@op/ui/Accordion';
+import { Button } from '@op/ui/Button';
+import { Header2 } from '@op/ui/Header';
+import type { Key } from '@op/ui/RAC';
+import { Sortable } from '@op/ui/Sortable';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { LuPlus } from 'react-icons/lu';
+
+import { useTranslations } from '@/lib/i18n';
+
+import type {
+  CriterionView,
+  RubricCriterionType,
+} from '../../../../decisions/rubricTemplate';
+import {
+  addCriterion,
+  changeCriterionType,
+  createEmptyRubricTemplate,
+  getCriteria,
+  getCriterion,
+  getCriterionErrors,
+  removeCriterion,
+  reorderCriteria,
+  setCriterionRequired,
+  updateCriterionDescription,
+  updateCriterionJsonSchema,
+  updateCriterionLabel,
+  updateScoreLabel,
+  updateScoredMaxPoints,
+} from '../../../../decisions/rubricTemplate';
+import { SaveStatusIndicator } from '../../components/SaveStatusIndicator';
+import type { SectionProps } from '../../contentRegistry';
+import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
+import {
+  RubricCriterionCard,
+  RubricCriterionDragPreview,
+  RubricCriterionDropIndicator,
+} from './RubricCriterionCard';
+import { RubricParticipantPreview } from './RubricParticipantPreview';
+
+const AUTOSAVE_DEBOUNCE_MS = 1000;
+
+export function RubricEditorContent({
+  decisionProfileId,
+  instanceId,
+}: SectionProps) {
+  const t = useTranslations();
+
+  // Load instance data from the backend
+  const [instance] = trpc.decision.getInstance.useSuspenseQuery({ instanceId });
+  const isDraft = instance.status === 'draft';
+  const utils = trpc.useUtils();
+  const instanceData = instance.instanceData;
+
+  const initialTemplate = useMemo(() => {
+    const saved = instanceData?.rubricTemplate;
+    if (saved && Object.keys(saved.properties ?? {}).length > 0) {
+      return saved as RubricTemplateSchema;
+    }
+    return createEmptyRubricTemplate();
+  }, [instanceData?.rubricTemplate]);
+
+  const [template, setTemplate] =
+    useState<RubricTemplateSchema>(initialTemplate);
+  const isInitialLoadRef = useRef(true);
+
+  // Validation: "show on blur, clear on change"
+  const [criterionErrors, setCriterionErrors] = useState<Map<string, string[]>>(
+    new Map(),
+  );
+
+  // Accordion expansion state
+  const [expandedKeys, setExpandedKeys] = useState<Set<Key>>(new Set());
+
+  const setRubricTemplateSchema = useProcessBuilderStore(
+    (s) => s.setRubricTemplateSchema,
+  );
+  const setSaveStatus = useProcessBuilderStore((s) => s.setSaveStatus);
+  const markSaved = useProcessBuilderStore((s) => s.markSaved);
+  const saveState = useProcessBuilderStore((s) =>
+    s.getSaveState(decisionProfileId),
+  );
+
+  const debouncedSaveRef = useRef<() => boolean>(null);
+  const updateInstance = trpc.decision.updateDecisionInstance.useMutation({
+    onSuccess: () => markSaved(decisionProfileId),
+    onError: () => setSaveStatus(decisionProfileId, 'error'),
+    onSettled: () => {
+      if (debouncedSaveRef.current?.()) {
+        return;
+      }
+      void utils.decision.getInstance.invalidate({ instanceId });
+    },
+  });
+
+  // Derive criterion views from the template
+  const criteria = useMemo(() => getCriteria(template), [template]);
+
+  // Debounced auto-save
+  const debouncedSave = useDebouncedCallback(
+    (updatedTemplate: RubricTemplateSchema) => {
+      setRubricTemplateSchema(decisionProfileId, updatedTemplate);
+
+      if (isDraft) {
+        updateInstance.mutate({
+          instanceId,
+          rubricTemplate: updatedTemplate,
+        });
+      } else {
+        markSaved(decisionProfileId);
+      }
+    },
+    AUTOSAVE_DEBOUNCE_MS,
+  );
+  debouncedSaveRef.current = () => debouncedSave.isPending();
+
+  // Trigger debounced save when template changes (skip initial load)
+  useEffect(() => {
+    if (isInitialLoadRef.current) {
+      isInitialLoadRef.current = false;
+      return;
+    }
+
+    setSaveStatus(decisionProfileId, 'saving');
+    debouncedSave(template);
+  }, [template, decisionProfileId, setSaveStatus, debouncedSave]);
+
+  // --- Handlers ---
+
+  const handleAddCriterion = useCallback(() => {
+    const criterionId = crypto.randomUUID().slice(0, 8);
+    const label = t('New criterion');
+    setTemplate((prev) => addCriterion(prev, criterionId, 'scored', label));
+    setExpandedKeys((prev) => new Set([...prev, criterionId]));
+  }, [t]);
+
+  const handleRemoveCriterion = useCallback((criterionId: string) => {
+    setTemplate((prev) => removeCriterion(prev, criterionId));
+    setCriterionErrors((prev) => {
+      const next = new Map(prev);
+      next.delete(criterionId);
+      return next;
+    });
+  }, []);
+
+  const handleReorderCriteria = useCallback((newItems: CriterionView[]) => {
+    setTemplate((prev) =>
+      reorderCriteria(
+        prev,
+        newItems.map((item) => item.id),
+      ),
+    );
+  }, []);
+
+  const handleUpdateLabel = useCallback(
+    (criterionId: string, label: string) => {
+      setTemplate((prev) => updateCriterionLabel(prev, criterionId, label));
+    },
+    [],
+  );
+
+  const handleUpdateDescription = useCallback(
+    (criterionId: string, description: string) => {
+      setTemplate((prev) =>
+        updateCriterionDescription(prev, criterionId, description || undefined),
+      );
+    },
+    [],
+  );
+
+  const handleUpdateRequired = useCallback(
+    (criterionId: string, required: boolean) => {
+      setTemplate((prev) => setCriterionRequired(prev, criterionId, required));
+    },
+    [],
+  );
+
+  const handleChangeType = useCallback(
+    (criterionId: string, newType: RubricCriterionType) => {
+      setTemplate((prev) => changeCriterionType(prev, criterionId, newType));
+    },
+    [],
+  );
+
+  const handleUpdateJsonSchema = useCallback(
+    (criterionId: string, updates: Record<string, unknown>) => {
+      setTemplate((prev) =>
+        updateCriterionJsonSchema(prev, criterionId, updates),
+      );
+    },
+    [],
+  );
+
+  const handleUpdateMaxPoints = useCallback(
+    (criterionId: string, maxPoints: number) => {
+      setTemplate((prev) =>
+        updateScoredMaxPoints(prev, criterionId, maxPoints),
+      );
+    },
+    [],
+  );
+
+  const handleUpdateScoreLabel = useCallback(
+    (criterionId: string, scoreIndex: number, label: string) => {
+      setTemplate((prev) =>
+        updateScoreLabel(prev, criterionId, scoreIndex, label),
+      );
+    },
+    [],
+  );
+
+  const handleCriterionBlur = useCallback(
+    (criterionId: string) => {
+      const criterion = getCriterion(template, criterionId);
+      if (criterion) {
+        setCriterionErrors((prev) =>
+          new Map(prev).set(criterionId, getCriterionErrors(criterion)),
+        );
+      }
+    },
+    [template],
+  );
+
+  return (
+    <div className="flex h-full flex-col md:flex-row">
+      <main className="flex-1 basis-1/2 overflow-y-auto p-4 pb-24 md:p-8 md:pb-8">
+        <div className="mx-auto max-w-160 space-y-4">
+          <div className="flex items-center justify-between">
+            <Header2 className="font-serif text-title-sm">
+              {t('Rubric criteria')}
+            </Header2>
+            <SaveStatusIndicator
+              status={saveState.status}
+              savedAt={saveState.savedAt}
+            />
+          </div>
+          <p className="text-neutral-charcoal">
+            {t('Define how reviewers will evaluate proposals')}
+          </p>
+          <hr />
+
+          {criteria.length === 0 ? (
+            <div className="rounded-lg border border-dashed border-neutral-gray3 p-8 text-center">
+              <p className="text-neutral-gray4">{t('No criteria defined')}</p>
+            </div>
+          ) : (
+            <Accordion
+              allowsMultipleExpanded
+              variant="unstyled"
+              expandedKeys={expandedKeys}
+              onExpandedChange={setExpandedKeys}
+            >
+              <Sortable
+                items={criteria}
+                onChange={handleReorderCriteria}
+                dragTrigger="handle"
+                getItemLabel={(criterion) => criterion.label}
+                className="gap-3"
+                renderDragPreview={(items) => {
+                  const criterion = items[0];
+                  if (!criterion) {
+                    return null;
+                  }
+                  return <RubricCriterionDragPreview criterion={criterion} />;
+                }}
+                renderDropIndicator={RubricCriterionDropIndicator}
+                aria-label={t('Rubric criteria')}
+              >
+                {(criterion, controls) => {
+                  const snapshotErrors =
+                    criterionErrors.get(criterion.id) ?? [];
+                  const liveErrors = getCriterionErrors(criterion);
+                  const displayedErrors = snapshotErrors.filter((e) =>
+                    liveErrors.includes(e),
+                  );
+
+                  return (
+                    <RubricCriterionCard
+                      key={criterion.id}
+                      criterion={criterion}
+                      errors={displayedErrors}
+                      controls={controls}
+                      onRemove={handleRemoveCriterion}
+                      onBlur={handleCriterionBlur}
+                      onUpdateLabel={handleUpdateLabel}
+                      onUpdateDescription={handleUpdateDescription}
+                      onUpdateRequired={handleUpdateRequired}
+                      onChangeType={handleChangeType}
+                      onUpdateJsonSchema={handleUpdateJsonSchema}
+                      onUpdateMaxPoints={handleUpdateMaxPoints}
+                      onUpdateScoreLabel={handleUpdateScoreLabel}
+                    />
+                  );
+                }}
+              </Sortable>
+            </Accordion>
+          )}
+
+          <Button
+            color="secondary"
+            className="w-full text-primary-teal hover:text-primary-tealBlack"
+            onPress={handleAddCriterion}
+          >
+            <LuPlus className="size-4" />
+            {t('Add criterion')}
+          </Button>
+        </div>
+      </main>
+
+      <RubricParticipantPreview template={template} />
+    </div>
+  );
+}

From 7750e29f62926cf7711f75cf285582452fe480e8 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 13:02:46 -0500
Subject: [PATCH 03/38] Add translation keys for rubric editor UI to all
 language files

---
 apps/app/src/lib/i18n/dictionaries/bn.json | 20 +++++++++++++++++++-
 apps/app/src/lib/i18n/dictionaries/en.json | 20 +++++++++++++++++++-
 apps/app/src/lib/i18n/dictionaries/es.json | 20 +++++++++++++++++++-
 apps/app/src/lib/i18n/dictionaries/fr.json | 20 +++++++++++++++++++-
 apps/app/src/lib/i18n/dictionaries/pt.json | 20 +++++++++++++++++++-
 5 files changed, 95 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/lib/i18n/dictionaries/bn.json b/apps/app/src/lib/i18n/dictionaries/bn.json
index aeaf1e2ea..7ccd4ce63 100644
--- a/apps/app/src/lib/i18n/dictionaries/bn.json
+++ b/apps/app/src/lib/i18n/dictionaries/bn.json
@@ -884,5 +884,23 @@
   "Proposal Title": "প্রস্তাবের শিরোনাম",
   "Start typing...": "টাইপ করা শুরু করুন...",
   "Reason(s) and Insight(s)": "কারণ এবং অন্তর্দৃষ্টি",
-  "Placeholder": "প্লেসহোল্ডার"
+  "Placeholder": "প্লেসহোল্ডার",
+  "Add criterion": "মানদণ্ড যোগ করুন",
+  "Criterion label": "মানদণ্ডের লেবেল",
+  "Criterion type": "মানদণ্ডের ধরন",
+  "Define how reviewers will evaluate proposals": "পর্যালোচকরা কীভাবে প্রস্তাবগুলি মূল্যায়ন করবেন তা নির্ধারণ করুন",
+  "Label for score {number}": "স্কোর {number} এর লেবেল",
+  "Max points": "সর্বোচ্চ পয়েন্ট",
+  "New criterion": "নতুন মানদণ্ড",
+  "No criteria defined": "কোনো মানদণ্ড নির্ধারিত হয়নি",
+  "Open-ended written feedback": "উন্মুক্ত লিখিত প্রতিক্রিয়া",
+  "Provide guidance for reviewers on how to evaluate this criterion...": "পর্যালোচকদের জন্য এই মানদণ্ড মূল্যায়নের নির্দেশিকা প্রদান করুন...",
+  "Rate on a numeric scale with points": "পয়েন্ট সহ সংখ্যাসূচক স্কেলে রেটিং করুন",
+  "Remove criterion": "মানদণ্ড সরান",
+  "Rubric criteria": "রুব্রিক মানদণ্ড",
+  "Score labels": "স্কোর লেবেল",
+  "Scored": "স্কোরযুক্ত",
+  "Select from custom options": "কাস্টম বিকল্প থেকে নির্বাচন করুন",
+  "Simple yes or no answer": "সহজ হ্যাঁ বা না উত্তর",
+  "Yes / No": "হ্যাঁ / না"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/en.json b/apps/app/src/lib/i18n/dictionaries/en.json
index dfaadf48d..86abd4c8a 100644
--- a/apps/app/src/lib/i18n/dictionaries/en.json
+++ b/apps/app/src/lib/i18n/dictionaries/en.json
@@ -877,5 +877,23 @@
   "Proposal Title": "Proposal Title",
   "Start typing...": "Start typing...",
   "Reason(s) and Insight(s)": "Reason(s) and Insight(s)",
-  "Placeholder": "Placeholder"
+  "Placeholder": "Placeholder",
+  "Add criterion": "Add criterion",
+  "Criterion label": "Criterion label",
+  "Criterion type": "Criterion type",
+  "Define how reviewers will evaluate proposals": "Define how reviewers will evaluate proposals",
+  "Label for score {number}": "Label for score {number}",
+  "Max points": "Max points",
+  "New criterion": "New criterion",
+  "No criteria defined": "No criteria defined",
+  "Open-ended written feedback": "Open-ended written feedback",
+  "Provide guidance for reviewers on how to evaluate this criterion...": "Provide guidance for reviewers on how to evaluate this criterion...",
+  "Rate on a numeric scale with points": "Rate on a numeric scale with points",
+  "Remove criterion": "Remove criterion",
+  "Rubric criteria": "Rubric criteria",
+  "Score labels": "Score labels",
+  "Scored": "Scored",
+  "Select from custom options": "Select from custom options",
+  "Simple yes or no answer": "Simple yes or no answer",
+  "Yes / No": "Yes / No"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/es.json b/apps/app/src/lib/i18n/dictionaries/es.json
index d87539f70..fb0a50c46 100644
--- a/apps/app/src/lib/i18n/dictionaries/es.json
+++ b/apps/app/src/lib/i18n/dictionaries/es.json
@@ -877,5 +877,23 @@
   "Proposal Title": "Título de la Propuesta",
   "Start typing...": "Empieza a escribir...",
   "Reason(s) and Insight(s)": "Razón(es) y perspectiva(s)",
-  "Placeholder": "Marcador de posición"
+  "Placeholder": "Marcador de posición",
+  "Add criterion": "Agregar criterio",
+  "Criterion label": "Etiqueta del criterio",
+  "Criterion type": "Tipo de criterio",
+  "Define how reviewers will evaluate proposals": "Define cómo los revisores evaluarán las propuestas",
+  "Label for score {number}": "Etiqueta para puntuación {number}",
+  "Max points": "Puntos máximos",
+  "New criterion": "Nuevo criterio",
+  "No criteria defined": "No hay criterios definidos",
+  "Open-ended written feedback": "Retroalimentación escrita abierta",
+  "Provide guidance for reviewers on how to evaluate this criterion...": "Proporcione orientación a los revisores sobre cómo evaluar este criterio...",
+  "Rate on a numeric scale with points": "Calificar en una escala numérica con puntos",
+  "Remove criterion": "Eliminar criterio",
+  "Rubric criteria": "Criterios de rúbrica",
+  "Score labels": "Etiquetas de puntuación",
+  "Scored": "Puntuado",
+  "Select from custom options": "Seleccionar entre opciones personalizadas",
+  "Simple yes or no answer": "Respuesta simple de sí o no",
+  "Yes / No": "Sí / No"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/fr.json b/apps/app/src/lib/i18n/dictionaries/fr.json
index 538bef132..fb310138d 100644
--- a/apps/app/src/lib/i18n/dictionaries/fr.json
+++ b/apps/app/src/lib/i18n/dictionaries/fr.json
@@ -877,5 +877,23 @@
   "Proposal Title": "Titre de la Proposition",
   "Start typing...": "Commencez à taper...",
   "Reason(s) and Insight(s)": "Raison(s) et aperçu(s)",
-  "Placeholder": "Espace réservé"
+  "Placeholder": "Espace réservé",
+  "Add criterion": "Ajouter un critère",
+  "Criterion label": "Libellé du critère",
+  "Criterion type": "Type de critère",
+  "Define how reviewers will evaluate proposals": "Définissez comment les évaluateurs noteront les propositions",
+  "Label for score {number}": "Libellé pour la note {number}",
+  "Max points": "Points maximum",
+  "New criterion": "Nouveau critère",
+  "No criteria defined": "Aucun critère défini",
+  "Open-ended written feedback": "Commentaire écrit libre",
+  "Provide guidance for reviewers on how to evaluate this criterion...": "Fournissez des conseils aux évaluateurs sur la manière d'évaluer ce critère...",
+  "Rate on a numeric scale with points": "Noter sur une échelle numérique avec des points",
+  "Remove criterion": "Supprimer le critère",
+  "Rubric criteria": "Critères de la grille",
+  "Score labels": "Libellés des notes",
+  "Scored": "Noté",
+  "Select from custom options": "Sélectionner parmi des options personnalisées",
+  "Simple yes or no answer": "Réponse simple oui ou non",
+  "Yes / No": "Oui / Non"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/pt.json b/apps/app/src/lib/i18n/dictionaries/pt.json
index 7fc1f8c44..9de09cd86 100644
--- a/apps/app/src/lib/i18n/dictionaries/pt.json
+++ b/apps/app/src/lib/i18n/dictionaries/pt.json
@@ -877,5 +877,23 @@
   "Proposal Title": "Título da Proposta",
   "Start typing...": "Comece a digitar...",
   "Reason(s) and Insight(s)": "Razão(ões) e percepção(ões)",
-  "Placeholder": "Espaço reservado"
+  "Placeholder": "Espaço reservado",
+  "Add criterion": "Adicionar critério",
+  "Criterion label": "Rótulo do critério",
+  "Criterion type": "Tipo de critério",
+  "Define how reviewers will evaluate proposals": "Defina como os avaliadores irão avaliar as propostas",
+  "Label for score {number}": "Rótulo para a nota {number}",
+  "Max points": "Pontos máximos",
+  "New criterion": "Novo critério",
+  "No criteria defined": "Nenhum critério definido",
+  "Open-ended written feedback": "Feedback escrito aberto",
+  "Provide guidance for reviewers on how to evaluate this criterion...": "Forneça orientação aos avaliadores sobre como avaliar este critério...",
+  "Rate on a numeric scale with points": "Avaliar numa escala numérica com pontos",
+  "Remove criterion": "Remover critério",
+  "Rubric criteria": "Critérios da rubrica",
+  "Score labels": "Rótulos das notas",
+  "Scored": "Pontuado",
+  "Select from custom options": "Selecionar entre opções personalizadas",
+  "Simple yes or no answer": "Resposta simples de sim ou não",
+  "Yes / No": "Sim / Não"
 }

From 8ba1a9c79b6107c779670317b8f449dce83bb641 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 14:38:09 -0500
Subject: [PATCH 04/38] Update rubric empty state to match ProposalCategories
 pattern

Use EmptyState component with leaf icon, descriptive title/subtitle,
and primary CTA button. Rename section title to 'Review Criteria'.
---
 .../rubric/RubricEditorContent.tsx            | 150 ++++++++++--------
 apps/app/src/lib/i18n/dictionaries/bn.json    |   6 +-
 apps/app/src/lib/i18n/dictionaries/en.json    |   6 +-
 apps/app/src/lib/i18n/dictionaries/es.json    |   6 +-
 apps/app/src/lib/i18n/dictionaries/fr.json    |   6 +-
 apps/app/src/lib/i18n/dictionaries/pt.json    |   6 +-
 6 files changed, 109 insertions(+), 71 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 59d0357af..335e6e52d 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -5,11 +5,12 @@ import type { RubricTemplateSchema } from '@op/common/client';
 import { useDebouncedCallback } from '@op/hooks';
 import { Accordion } from '@op/ui/Accordion';
 import { Button } from '@op/ui/Button';
+import { EmptyState } from '@op/ui/EmptyState';
 import { Header2 } from '@op/ui/Header';
 import type { Key } from '@op/ui/RAC';
 import { Sortable } from '@op/ui/Sortable';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { LuPlus } from 'react-icons/lu';
+import { LuLeaf, LuPlus } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
 
@@ -232,83 +233,100 @@ export function RubricEditorContent({
         <div className="mx-auto max-w-160 space-y-4">
           <div className="flex items-center justify-between">
             <Header2 className="font-serif text-title-sm">
-              {t('Rubric criteria')}
+              {t('Review Criteria')}
             </Header2>
             <SaveStatusIndicator
               status={saveState.status}
               savedAt={saveState.savedAt}
             />
           </div>
-          <p className="text-neutral-charcoal">
-            {t('Define how reviewers will evaluate proposals')}
-          </p>
-          <hr />
 
           {criteria.length === 0 ? (
-            <div className="rounded-lg border border-dashed border-neutral-gray3 p-8 text-center">
-              <p className="text-neutral-gray4">{t('No criteria defined')}</p>
+            <div className="rounded-lg border p-16">
+              <EmptyState icon={<LuLeaf className="size-5" />}>
+                <div className="flex flex-col items-center gap-2 text-center">
+                  <span className="font-medium text-neutral-charcoal">
+                    {t('No review criteria yet')}
+                  </span>
+                  <span>
+                    {t(
+                      'Add criteria to help reviewers evaluate proposals consistently',
+                    )}
+                  </span>
+                  <Button
+                    color="primary"
+                    className="mt-2"
+                    onPress={handleAddCriterion}
+                  >
+                    <LuPlus className="size-4" />
+                    {t('Add your first criterion')}
+                  </Button>
+                </div>
+              </EmptyState>
             </div>
           ) : (
-            <Accordion
-              allowsMultipleExpanded
-              variant="unstyled"
-              expandedKeys={expandedKeys}
-              onExpandedChange={setExpandedKeys}
-            >
-              <Sortable
-                items={criteria}
-                onChange={handleReorderCriteria}
-                dragTrigger="handle"
-                getItemLabel={(criterion) => criterion.label}
-                className="gap-3"
-                renderDragPreview={(items) => {
-                  const criterion = items[0];
-                  if (!criterion) {
-                    return null;
-                  }
-                  return <RubricCriterionDragPreview criterion={criterion} />;
-                }}
-                renderDropIndicator={RubricCriterionDropIndicator}
-                aria-label={t('Rubric criteria')}
+            <>
+              <Accordion
+                allowsMultipleExpanded
+                variant="unstyled"
+                expandedKeys={expandedKeys}
+                onExpandedChange={setExpandedKeys}
               >
-                {(criterion, controls) => {
-                  const snapshotErrors =
-                    criterionErrors.get(criterion.id) ?? [];
-                  const liveErrors = getCriterionErrors(criterion);
-                  const displayedErrors = snapshotErrors.filter((e) =>
-                    liveErrors.includes(e),
-                  );
-
-                  return (
-                    <RubricCriterionCard
-                      key={criterion.id}
-                      criterion={criterion}
-                      errors={displayedErrors}
-                      controls={controls}
-                      onRemove={handleRemoveCriterion}
-                      onBlur={handleCriterionBlur}
-                      onUpdateLabel={handleUpdateLabel}
-                      onUpdateDescription={handleUpdateDescription}
-                      onUpdateRequired={handleUpdateRequired}
-                      onChangeType={handleChangeType}
-                      onUpdateJsonSchema={handleUpdateJsonSchema}
-                      onUpdateMaxPoints={handleUpdateMaxPoints}
-                      onUpdateScoreLabel={handleUpdateScoreLabel}
-                    />
-                  );
-                }}
-              </Sortable>
-            </Accordion>
+                <Sortable
+                  items={criteria}
+                  onChange={handleReorderCriteria}
+                  dragTrigger="handle"
+                  getItemLabel={(criterion) => criterion.label}
+                  className="gap-3"
+                  renderDragPreview={(items) => {
+                    const criterion = items[0];
+                    if (!criterion) {
+                      return null;
+                    }
+                    return <RubricCriterionDragPreview criterion={criterion} />;
+                  }}
+                  renderDropIndicator={RubricCriterionDropIndicator}
+                  aria-label={t('Rubric criteria')}
+                >
+                  {(criterion, controls) => {
+                    const snapshotErrors =
+                      criterionErrors.get(criterion.id) ?? [];
+                    const liveErrors = getCriterionErrors(criterion);
+                    const displayedErrors = snapshotErrors.filter((e) =>
+                      liveErrors.includes(e),
+                    );
+
+                    return (
+                      <RubricCriterionCard
+                        key={criterion.id}
+                        criterion={criterion}
+                        errors={displayedErrors}
+                        controls={controls}
+                        onRemove={handleRemoveCriterion}
+                        onBlur={handleCriterionBlur}
+                        onUpdateLabel={handleUpdateLabel}
+                        onUpdateDescription={handleUpdateDescription}
+                        onUpdateRequired={handleUpdateRequired}
+                        onChangeType={handleChangeType}
+                        onUpdateJsonSchema={handleUpdateJsonSchema}
+                        onUpdateMaxPoints={handleUpdateMaxPoints}
+                        onUpdateScoreLabel={handleUpdateScoreLabel}
+                      />
+                    );
+                  }}
+                </Sortable>
+              </Accordion>
+
+              <Button
+                color="secondary"
+                className="w-full text-primary-teal hover:text-primary-tealBlack"
+                onPress={handleAddCriterion}
+              >
+                <LuPlus className="size-4" />
+                {t('Add criterion')}
+              </Button>
+            </>
           )}
-
-          <Button
-            color="secondary"
-            className="w-full text-primary-teal hover:text-primary-tealBlack"
-            onPress={handleAddCriterion}
-          >
-            <LuPlus className="size-4" />
-            {t('Add criterion')}
-          </Button>
         </div>
       </main>
 
diff --git a/apps/app/src/lib/i18n/dictionaries/bn.json b/apps/app/src/lib/i18n/dictionaries/bn.json
index 7ccd4ce63..ccbb3fa60 100644
--- a/apps/app/src/lib/i18n/dictionaries/bn.json
+++ b/apps/app/src/lib/i18n/dictionaries/bn.json
@@ -902,5 +902,9 @@
   "Scored": "স্কোরযুক্ত",
   "Select from custom options": "কাস্টম বিকল্প থেকে নির্বাচন করুন",
   "Simple yes or no answer": "সহজ হ্যাঁ বা না উত্তর",
-  "Yes / No": "হ্যাঁ / না"
+  "Yes / No": "হ্যাঁ / না",
+  "Review Criteria": "পর্যালোচনার মানদণ্ড",
+  "No review criteria yet": "এখনো কোনো পর্যালোচনার মানদণ্ড নেই",
+  "Add criteria to help reviewers evaluate proposals consistently": "পর্যালোচকদের ধারাবাহিকভাবে প্রস্তাব মূল্যায়নে সহায়তার জন্য মানদণ্ড যোগ করুন",
+  "Add your first criterion": "আপনার প্রথম মানদণ্ড যোগ করুন"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/en.json b/apps/app/src/lib/i18n/dictionaries/en.json
index 86abd4c8a..a82a52385 100644
--- a/apps/app/src/lib/i18n/dictionaries/en.json
+++ b/apps/app/src/lib/i18n/dictionaries/en.json
@@ -895,5 +895,9 @@
   "Scored": "Scored",
   "Select from custom options": "Select from custom options",
   "Simple yes or no answer": "Simple yes or no answer",
-  "Yes / No": "Yes / No"
+  "Yes / No": "Yes / No",
+  "Review Criteria": "Review Criteria",
+  "No review criteria yet": "No review criteria yet",
+  "Add criteria to help reviewers evaluate proposals consistently": "Add criteria to help reviewers evaluate proposals consistently",
+  "Add your first criterion": "Add your first criterion"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/es.json b/apps/app/src/lib/i18n/dictionaries/es.json
index fb0a50c46..7ab2ca004 100644
--- a/apps/app/src/lib/i18n/dictionaries/es.json
+++ b/apps/app/src/lib/i18n/dictionaries/es.json
@@ -895,5 +895,9 @@
   "Scored": "Puntuado",
   "Select from custom options": "Seleccionar entre opciones personalizadas",
   "Simple yes or no answer": "Respuesta simple de sí o no",
-  "Yes / No": "Sí / No"
+  "Yes / No": "Sí / No",
+  "Review Criteria": "Criterios de revisión",
+  "No review criteria yet": "Aún no hay criterios de revisión",
+  "Add criteria to help reviewers evaluate proposals consistently": "Agregue criterios para ayudar a los revisores a evaluar propuestas de manera consistente",
+  "Add your first criterion": "Agregue su primer criterio"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/fr.json b/apps/app/src/lib/i18n/dictionaries/fr.json
index fb310138d..a6a1b41f4 100644
--- a/apps/app/src/lib/i18n/dictionaries/fr.json
+++ b/apps/app/src/lib/i18n/dictionaries/fr.json
@@ -895,5 +895,9 @@
   "Scored": "Noté",
   "Select from custom options": "Sélectionner parmi des options personnalisées",
   "Simple yes or no answer": "Réponse simple oui ou non",
-  "Yes / No": "Oui / Non"
+  "Yes / No": "Oui / Non",
+  "Review Criteria": "Critères d'évaluation",
+  "No review criteria yet": "Pas encore de critères d'évaluation",
+  "Add criteria to help reviewers evaluate proposals consistently": "Ajoutez des critères pour aider les évaluateurs à évaluer les propositions de manière cohérente",
+  "Add your first criterion": "Ajoutez votre premier critère"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/pt.json b/apps/app/src/lib/i18n/dictionaries/pt.json
index 9de09cd86..a98b27692 100644
--- a/apps/app/src/lib/i18n/dictionaries/pt.json
+++ b/apps/app/src/lib/i18n/dictionaries/pt.json
@@ -895,5 +895,9 @@
   "Scored": "Pontuado",
   "Select from custom options": "Selecionar entre opções personalizadas",
   "Simple yes or no answer": "Resposta simples de sim ou não",
-  "Yes / No": "Sim / Não"
+  "Yes / No": "Sim / Não",
+  "Review Criteria": "Critérios de avaliação",
+  "No review criteria yet": "Ainda não há critérios de avaliação",
+  "Add criteria to help reviewers evaluate proposals consistently": "Adicione critérios para ajudar os avaliadores a avaliar propostas de forma consistente",
+  "Add your first criterion": "Adicione seu primeiro critério"
 }

From 6dd96fe5fc507dbad9e2ac277858faad65b2f9bd Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 14:40:23 -0500
Subject: [PATCH 05/38] Fix rubric editor saving on initial page load

Only trigger auto-save after a user-initiated edit, not on mount.
Use a hasUserEditedRef guard so the debounced save effect doesn't fire
from dependency reference changes or initial template hydration.
---
 .../rubric/RubricEditorContent.tsx            | 91 ++++++++++++-------
 1 file changed, 56 insertions(+), 35 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 335e6e52d..4caf72e0c 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -69,6 +69,7 @@ export function RubricEditorContent({
   const [template, setTemplate] =
     useState<RubricTemplateSchema>(initialTemplate);
   const isInitialLoadRef = useRef(true);
+  const hasUserEditedRef = useRef(false);
 
   // Validation: "show on blur, clear on change"
   const [criterionErrors, setCriterionErrors] = useState<Map<string, string[]>>(
@@ -120,12 +121,17 @@ export function RubricEditorContent({
   );
   debouncedSaveRef.current = () => debouncedSave.isPending();
 
-  // Trigger debounced save when template changes (skip initial load)
+  // Trigger debounced save when template changes.
+  // Only saves after a user-initiated edit — not on initial load or when
+  // the debounced callback reference changes.
   useEffect(() => {
     if (isInitialLoadRef.current) {
       isInitialLoadRef.current = false;
       return;
     }
+    if (!hasUserEditedRef.current) {
+      return;
+    }
 
     setSaveStatus(decisionProfileId, 'saving');
     debouncedSave(template);
@@ -133,86 +139,101 @@ export function RubricEditorContent({
 
   // --- Handlers ---
 
+  /** Mark as user-edited and update template state. */
+  const editTemplate = useCallback(
+    (updater: (prev: RubricTemplateSchema) => RubricTemplateSchema) => {
+      hasUserEditedRef.current = true;
+      setTemplate(updater);
+    },
+    [],
+  );
+
   const handleAddCriterion = useCallback(() => {
     const criterionId = crypto.randomUUID().slice(0, 8);
     const label = t('New criterion');
-    setTemplate((prev) => addCriterion(prev, criterionId, 'scored', label));
+    editTemplate((prev) => addCriterion(prev, criterionId, 'scored', label));
     setExpandedKeys((prev) => new Set([...prev, criterionId]));
-  }, [t]);
-
-  const handleRemoveCriterion = useCallback((criterionId: string) => {
-    setTemplate((prev) => removeCriterion(prev, criterionId));
-    setCriterionErrors((prev) => {
-      const next = new Map(prev);
-      next.delete(criterionId);
-      return next;
-    });
-  }, []);
-
-  const handleReorderCriteria = useCallback((newItems: CriterionView[]) => {
-    setTemplate((prev) =>
-      reorderCriteria(
-        prev,
-        newItems.map((item) => item.id),
-      ),
-    );
-  }, []);
+  }, [t, editTemplate]);
+
+  const handleRemoveCriterion = useCallback(
+    (criterionId: string) => {
+      editTemplate((prev) => removeCriterion(prev, criterionId));
+      setCriterionErrors((prev) => {
+        const next = new Map(prev);
+        next.delete(criterionId);
+        return next;
+      });
+    },
+    [editTemplate],
+  );
+
+  const handleReorderCriteria = useCallback(
+    (newItems: CriterionView[]) => {
+      editTemplate((prev) =>
+        reorderCriteria(
+          prev,
+          newItems.map((item) => item.id),
+        ),
+      );
+    },
+    [editTemplate],
+  );
 
   const handleUpdateLabel = useCallback(
     (criterionId: string, label: string) => {
-      setTemplate((prev) => updateCriterionLabel(prev, criterionId, label));
+      editTemplate((prev) => updateCriterionLabel(prev, criterionId, label));
     },
-    [],
+    [editTemplate],
   );
 
   const handleUpdateDescription = useCallback(
     (criterionId: string, description: string) => {
-      setTemplate((prev) =>
+      editTemplate((prev) =>
         updateCriterionDescription(prev, criterionId, description || undefined),
       );
     },
-    [],
+    [editTemplate],
   );
 
   const handleUpdateRequired = useCallback(
     (criterionId: string, required: boolean) => {
-      setTemplate((prev) => setCriterionRequired(prev, criterionId, required));
+      editTemplate((prev) => setCriterionRequired(prev, criterionId, required));
     },
-    [],
+    [editTemplate],
   );
 
   const handleChangeType = useCallback(
     (criterionId: string, newType: RubricCriterionType) => {
-      setTemplate((prev) => changeCriterionType(prev, criterionId, newType));
+      editTemplate((prev) => changeCriterionType(prev, criterionId, newType));
     },
-    [],
+    [editTemplate],
   );
 
   const handleUpdateJsonSchema = useCallback(
     (criterionId: string, updates: Record<string, unknown>) => {
-      setTemplate((prev) =>
+      editTemplate((prev) =>
         updateCriterionJsonSchema(prev, criterionId, updates),
       );
     },
-    [],
+    [editTemplate],
   );
 
   const handleUpdateMaxPoints = useCallback(
     (criterionId: string, maxPoints: number) => {
-      setTemplate((prev) =>
+      editTemplate((prev) =>
         updateScoredMaxPoints(prev, criterionId, maxPoints),
       );
     },
-    [],
+    [editTemplate],
   );
 
   const handleUpdateScoreLabel = useCallback(
     (criterionId: string, scoreIndex: number, label: string) => {
-      setTemplate((prev) =>
+      editTemplate((prev) =>
         updateScoreLabel(prev, criterionId, scoreIndex, label),
       );
     },
-    [],
+    [editTemplate],
   );
 
   const handleCriterionBlur = useCallback(

From f565771db08a3dc475d66344134fa851307227f8 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 14:41:28 -0500
Subject: [PATCH 06/38] Revert "Fix rubric editor saving on initial page load"

This reverts commit ddf1466de595a96458f5d1267f967a6709d1d49d.
---
 .../rubric/RubricEditorContent.tsx            | 91 +++++++------------
 1 file changed, 35 insertions(+), 56 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 4caf72e0c..335e6e52d 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -69,7 +69,6 @@ export function RubricEditorContent({
   const [template, setTemplate] =
     useState<RubricTemplateSchema>(initialTemplate);
   const isInitialLoadRef = useRef(true);
-  const hasUserEditedRef = useRef(false);
 
   // Validation: "show on blur, clear on change"
   const [criterionErrors, setCriterionErrors] = useState<Map<string, string[]>>(
@@ -121,17 +120,12 @@ export function RubricEditorContent({
   );
   debouncedSaveRef.current = () => debouncedSave.isPending();
 
-  // Trigger debounced save when template changes.
-  // Only saves after a user-initiated edit — not on initial load or when
-  // the debounced callback reference changes.
+  // Trigger debounced save when template changes (skip initial load)
   useEffect(() => {
     if (isInitialLoadRef.current) {
       isInitialLoadRef.current = false;
       return;
     }
-    if (!hasUserEditedRef.current) {
-      return;
-    }
 
     setSaveStatus(decisionProfileId, 'saving');
     debouncedSave(template);
@@ -139,101 +133,86 @@ export function RubricEditorContent({
 
   // --- Handlers ---
 
-  /** Mark as user-edited and update template state. */
-  const editTemplate = useCallback(
-    (updater: (prev: RubricTemplateSchema) => RubricTemplateSchema) => {
-      hasUserEditedRef.current = true;
-      setTemplate(updater);
-    },
-    [],
-  );
-
   const handleAddCriterion = useCallback(() => {
     const criterionId = crypto.randomUUID().slice(0, 8);
     const label = t('New criterion');
-    editTemplate((prev) => addCriterion(prev, criterionId, 'scored', label));
+    setTemplate((prev) => addCriterion(prev, criterionId, 'scored', label));
     setExpandedKeys((prev) => new Set([...prev, criterionId]));
-  }, [t, editTemplate]);
-
-  const handleRemoveCriterion = useCallback(
-    (criterionId: string) => {
-      editTemplate((prev) => removeCriterion(prev, criterionId));
-      setCriterionErrors((prev) => {
-        const next = new Map(prev);
-        next.delete(criterionId);
-        return next;
-      });
-    },
-    [editTemplate],
-  );
-
-  const handleReorderCriteria = useCallback(
-    (newItems: CriterionView[]) => {
-      editTemplate((prev) =>
-        reorderCriteria(
-          prev,
-          newItems.map((item) => item.id),
-        ),
-      );
-    },
-    [editTemplate],
-  );
+  }, [t]);
+
+  const handleRemoveCriterion = useCallback((criterionId: string) => {
+    setTemplate((prev) => removeCriterion(prev, criterionId));
+    setCriterionErrors((prev) => {
+      const next = new Map(prev);
+      next.delete(criterionId);
+      return next;
+    });
+  }, []);
+
+  const handleReorderCriteria = useCallback((newItems: CriterionView[]) => {
+    setTemplate((prev) =>
+      reorderCriteria(
+        prev,
+        newItems.map((item) => item.id),
+      ),
+    );
+  }, []);
 
   const handleUpdateLabel = useCallback(
     (criterionId: string, label: string) => {
-      editTemplate((prev) => updateCriterionLabel(prev, criterionId, label));
+      setTemplate((prev) => updateCriterionLabel(prev, criterionId, label));
     },
-    [editTemplate],
+    [],
   );
 
   const handleUpdateDescription = useCallback(
     (criterionId: string, description: string) => {
-      editTemplate((prev) =>
+      setTemplate((prev) =>
         updateCriterionDescription(prev, criterionId, description || undefined),
       );
     },
-    [editTemplate],
+    [],
   );
 
   const handleUpdateRequired = useCallback(
     (criterionId: string, required: boolean) => {
-      editTemplate((prev) => setCriterionRequired(prev, criterionId, required));
+      setTemplate((prev) => setCriterionRequired(prev, criterionId, required));
     },
-    [editTemplate],
+    [],
   );
 
   const handleChangeType = useCallback(
     (criterionId: string, newType: RubricCriterionType) => {
-      editTemplate((prev) => changeCriterionType(prev, criterionId, newType));
+      setTemplate((prev) => changeCriterionType(prev, criterionId, newType));
     },
-    [editTemplate],
+    [],
   );
 
   const handleUpdateJsonSchema = useCallback(
     (criterionId: string, updates: Record<string, unknown>) => {
-      editTemplate((prev) =>
+      setTemplate((prev) =>
         updateCriterionJsonSchema(prev, criterionId, updates),
       );
     },
-    [editTemplate],
+    [],
   );
 
   const handleUpdateMaxPoints = useCallback(
     (criterionId: string, maxPoints: number) => {
-      editTemplate((prev) =>
+      setTemplate((prev) =>
         updateScoredMaxPoints(prev, criterionId, maxPoints),
       );
     },
-    [editTemplate],
+    [],
   );
 
   const handleUpdateScoreLabel = useCallback(
     (criterionId: string, scoreIndex: number, label: string) => {
-      editTemplate((prev) =>
+      setTemplate((prev) =>
         updateScoreLabel(prev, criterionId, scoreIndex, label),
       );
     },
-    [editTemplate],
+    [],
   );
 
   const handleCriterionBlur = useCallback(

From 532e4393795fdf86dc9602c111786be57fd69585 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 14:46:20 -0500
Subject: [PATCH 07/38] Remove coming soon tag for users with rubric access

---
 .../decisions/ProcessBuilder/ProcessBuilderHeader.tsx       | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx b/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx
index a58b4e1b2..7ddc35177 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import { useFeatureFlag } from '@/hooks/useFeatureFlag';
 import { trpc } from '@op/api/client';
 import { ProcessStatus } from '@op/api/encoders';
 import { Button } from '@op/ui/Button';
@@ -87,6 +88,7 @@ const ProcessBuilderHeaderContent = ({
   slug?: string;
 }) => {
   const t = useTranslations();
+  const rubricBuilderEnabled = useFeatureFlag('rubric_builder');
   const router = useRouter();
   const navigationConfig = useNavigationConfig(instanceId);
   const { visibleSteps, currentStep, setStep } =
@@ -239,7 +241,9 @@ const ProcessBuilderHeaderContent = ({
                   className="flex h-full cursor-pointer items-center gap-2"
                 >
                   {t(step.labelKey)}
-                  {step.id === 'rubric' && <ComingSoonIndicator />}
+                  {step.id === 'rubric' && !rubricBuilderEnabled && (
+                    <ComingSoonIndicator />
+                  )}
                 </Tab>
               ))}
             </TabList>

From 559f6361ee34c84252b276d8f23ee734addbe05b Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 15:52:31 -0500
Subject: [PATCH 08/38] Rewrite criterion card with Accordion primitives and
 remove dropdown type

- Remove 'dropdown' criterion type, leaving only scored/yes_no/long_text
- Rewrite RubricCriterionCard to use Accordion primitives directly (not FieldConfigCard)
  with static 'Criterion N' header, separate name/description fields, and type radio
- Wrap criteria in AccordionItem in RubricEditorContent (matching PhasesSectionContent pattern)
- Update rubricCriterionRegistry with new labels (Rating Scale, Yes/No, Text response only)
- Clean up unused handlers and imports from RubricEditorContent
- Add 15 new translation keys to all 5 language files
---
 .../rubric/RubricCriterionCard.tsx            | 435 +++++-------------
 .../rubric/RubricEditorContent.tsx            |  78 ++--
 .../rubric/rubricCriterionRegistry.tsx        |  39 +-
 .../components/decisions/rubricTemplate.ts    |  57 +--
 apps/app/src/lib/i18n/dictionaries/bn.json    |  18 +-
 apps/app/src/lib/i18n/dictionaries/en.json    |  18 +-
 apps/app/src/lib/i18n/dictionaries/es.json    |  18 +-
 apps/app/src/lib/i18n/dictionaries/fr.json    |  18 +-
 apps/app/src/lib/i18n/dictionaries/pt.json    |  18 +-
 9 files changed, 249 insertions(+), 450 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index 4c48d9609..cd99d6c6c 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -1,20 +1,18 @@
 'use client';
 
-import type { XFormatPropertySchema } from '@op/common/client';
-import { Button } from '@op/ui/Button';
 import {
-  FieldConfigCard,
-  FieldConfigCardDragPreview,
-} from '@op/ui/FieldConfigCard';
+  AccordionContent,
+  AccordionHeader,
+  AccordionIndicator,
+  AccordionTrigger,
+} from '@op/ui/Accordion';
+import { Button } from '@op/ui/Button';
 import { NumberField } from '@op/ui/NumberField';
 import { Radio, RadioGroup } from '@op/ui/RadioGroup';
-import { DragHandle, Sortable } from '@op/ui/Sortable';
+import { DragHandle } from '@op/ui/Sortable';
 import type { SortableItemControls } from '@op/ui/Sortable';
 import { TextField } from '@op/ui/TextField';
-import { ToggleButton } from '@op/ui/ToggleButton';
-import { Tooltip, TooltipTrigger } from '@op/ui/Tooltip';
-import { useEffect, useRef, useState } from 'react';
-import { LuGripVertical, LuPlus, LuX } from 'react-icons/lu';
+import { LuGripVertical, LuTrash2 } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
 
@@ -25,7 +23,6 @@ import type {
 import {
   CRITERION_TYPES,
   CRITERION_TYPE_REGISTRY,
-  getCriterionIcon,
 } from './rubricCriterionRegistry';
 
 // ---------------------------------------------------------------------------
@@ -34,18 +31,14 @@ import {
 
 interface RubricCriterionCardProps {
   criterion: CriterionView;
+  /** 1-based display index for the header (e.g. "Criterion 1") */
+  index: number;
   errors?: string[];
   controls?: SortableItemControls;
   onRemove?: (criterionId: string) => void;
-  onBlur?: (criterionId: string) => void;
   onUpdateLabel?: (criterionId: string, label: string) => void;
   onUpdateDescription?: (criterionId: string, description: string) => void;
-  onUpdateRequired?: (criterionId: string, isRequired: boolean) => void;
   onChangeType?: (criterionId: string, newType: RubricCriterionType) => void;
-  onUpdateJsonSchema?: (
-    criterionId: string,
-    updates: Partial<XFormatPropertySchema>,
-  ) => void;
   onUpdateMaxPoints?: (criterionId: string, maxPoints: number) => void;
   onUpdateScoreLabel?: (
     criterionId: string,
@@ -59,144 +52,127 @@ interface RubricCriterionCardProps {
 // ---------------------------------------------------------------------------
 
 /**
- * A collapsible card representing a single rubric criterion in the builder.
- * Uses FieldConfigCard with `collapsible` prop for accordion behaviour.
+ * A collapsible accordion card for a single rubric criterion.
+ *
+ * Built directly with Accordion primitives (not FieldConfigCard) to match
+ * the mockup: static "Criterion N" header, separate name/description fields
+ * in the body, and a criterion type radio selector.
  *
- * Collapsed: drag handle + chevron + icon + label + badge + remove
- * Expanded: description, criterion type radio, type-specific config, required toggle
+ * Must be rendered inside an `<AccordionItem>` which is inside an `<Accordion>`.
  */
 export function RubricCriterionCard({
   criterion,
+  index,
   errors = [],
   controls,
   onRemove,
-  onBlur,
   onUpdateLabel,
   onUpdateDescription,
-  onUpdateRequired,
   onChangeType,
-  onUpdateJsonSchema,
   onUpdateMaxPoints,
   onUpdateScoreLabel,
 }: RubricCriterionCardProps) {
   const t = useTranslations();
-  const cardRef = useRef<HTMLDivElement>(null);
-
-  const Icon = getCriterionIcon(criterion.criterionType);
-
-  const handleBlur = (e: React.FocusEvent) => {
-    if (cardRef.current && !cardRef.current.contains(e.relatedTarget as Node)) {
-      onBlur?.(criterion.id);
-    }
-  };
-
-  // Badge for the header
-  const headerBadge = (() => {
-    switch (criterion.criterionType) {
-      case 'scored':
-        return (
-          <span className="bg-primary-mint/20 text-primary-tealDark shrink-0 rounded-sm px-1.5 py-0.5 text-xs">
-            {criterion.maxPoints} {t('pts')}
-          </span>
-        );
-      case 'yes_no':
-        return (
-          <span className="shrink-0 rounded-sm bg-neutral-gray1 px-1.5 py-0.5 text-xs text-neutral-charcoal">
-            {t('Yes / No')}
-          </span>
-        );
-      default:
-        return null;
-    }
-  })();
 
   return (
-    <div ref={cardRef} onBlur={handleBlur}>
-      <FieldConfigCard
-        collapsible
-        icon={Icon}
-        iconTooltip={t(
-          CRITERION_TYPE_REGISTRY[criterion.criterionType].labelKey,
+    <>
+      {/* Header: drag handle + chevron + "Criterion N" + delete button */}
+      <AccordionHeader className="flex items-center gap-2 px-3 py-2">
+        {controls && (
+          <DragHandle
+            {...controls.dragHandleProps}
+            aria-label={t('Drag to reorder criterion')}
+          />
         )}
-        label={criterion.label}
-        onLabelChange={(newLabel) => onUpdateLabel?.(criterion.id, newLabel)}
-        labelInputAriaLabel={t('Criterion label')}
-        description={criterion.description}
-        onDescriptionChange={(desc) =>
-          onUpdateDescription?.(criterion.id, desc)
-        }
-        descriptionLabel={t('Description')}
-        descriptionPlaceholder={t(
-          'Provide guidance for reviewers on how to evaluate this criterion...',
+        <AccordionTrigger className="flex cursor-pointer items-center">
+          <AccordionIndicator />
+        </AccordionTrigger>
+        <span className="flex-1 font-medium text-neutral-charcoal">
+          {t('Criterion {number}', { number: index })}
+        </span>
+        {onRemove && (
+          <Button
+            color="ghost"
+            size="small"
+            aria-label={t('Remove criterion')}
+            onPress={() => onRemove(criterion.id)}
+            className="p-2 text-neutral-gray4 hover:text-functional-red"
+          >
+            <LuTrash2 className="size-4" />
+          </Button>
         )}
-        onRemove={onRemove ? () => onRemove(criterion.id) : undefined}
-        removeAriaLabel={t('Remove criterion')}
-        dragHandleAriaLabel={t('Drag to reorder {field}', {
-          field: criterion.label,
-        })}
-        controls={controls}
-        headerExtra={headerBadge}
-        className={errors.length > 0 ? 'border-functional-red' : undefined}
-      >
-        {/* Criterion type selector */}
-        <div className="mt-4">
-          <CriterionTypeSelector
-            value={criterion.criterionType}
-            onChange={(newType) => onChangeType?.(criterion.id, newType)}
+      </AccordionHeader>
+
+      {/* Collapsible body */}
+      <AccordionContent>
+        <div className="space-y-4 px-4 pb-4">
+          {/* Criterion name */}
+          <TextField
+            label={t('Criterion name')}
+            isRequired
+            value={criterion.label}
+            onChange={(value) => onUpdateLabel?.(criterion.id, value)}
+            inputProps={{
+              placeholder: t('e.g., Goal Alignment'),
+            }}
+            description={t(
+              'Add a short, clear name for this evaluation criterion',
+            )}
           />
-        </div>
 
-        {/* Type-specific configuration */}
-        {criterion.criterionType === 'scored' && (
-          <div className="mt-4">
-            <ScoredCriterionConfig
-              criterion={criterion}
-              onUpdateMaxPoints={(max) =>
-                onUpdateMaxPoints?.(criterion.id, max)
-              }
-              onUpdateScoreLabel={(index, label) =>
-                onUpdateScoreLabel?.(criterion.id, index, label)
-              }
-            />
-          </div>
-        )}
-
-        {criterion.criterionType === 'dropdown' && (
-          <div className="mt-4">
-            <DropdownCriterionConfig
-              criterion={criterion}
-              onUpdateJsonSchema={(updates) =>
-                onUpdateJsonSchema?.(criterion.id, updates)
-              }
-            />
-          </div>
-        )}
+          {/* Description */}
+          <TextField
+            label={t('Description')}
+            isRequired
+            useTextArea
+            value={criterion.description ?? ''}
+            onChange={(value) => onUpdateDescription?.(criterion.id, value)}
+            textareaProps={{
+              placeholder: t(
+                "What should reviewers evaluate? Be specific about what you're looking for.",
+              ),
+              className: 'min-h-24 resize-none',
+            }}
+            description={t('Help reviewers understand what to assess')}
+          />
 
-        {/* Validation errors */}
-        {errors.length > 0 && (
-          <div className="mt-4 space-y-1">
-            {errors.map((error) => (
-              <p key={error} className="text-functional-red">
-                {t(error)}
-              </p>
-            ))}
-          </div>
-        )}
+          <hr />
 
-        {/* Required toggle */}
-        <div className="mt-4 flex items-center justify-between">
-          <span className="text-neutral-charcoal">{t('Required?')}</span>
-          <ToggleButton
-            size="small"
-            isSelected={criterion.required}
-            onChange={(isSelected) =>
-              onUpdateRequired?.(criterion.id, isSelected)
-            }
-            aria-label={t('Required')}
+          {/* Criterion type radio selector */}
+          <CriterionTypeSelector
+            value={criterion.criterionType}
+            onChange={(newType) => onChangeType?.(criterion.id, newType)}
           />
+
+          {/* Type-specific configuration */}
+          {criterion.criterionType === 'scored' && (
+            <>
+              <hr />
+              <ScoredCriterionConfig
+                criterion={criterion}
+                onUpdateMaxPoints={(max) =>
+                  onUpdateMaxPoints?.(criterion.id, max)
+                }
+                onUpdateScoreLabel={(scoreIndex, label) =>
+                  onUpdateScoreLabel?.(criterion.id, scoreIndex, label)
+                }
+              />
+            </>
+          )}
+
+          {/* Validation errors */}
+          {errors.length > 0 && (
+            <div className="space-y-1">
+              {errors.map((error) => (
+                <p key={error} className="text-sm text-functional-red">
+                  {t(error)}
+                </p>
+              ))}
+            </div>
+          )}
         </div>
-      </FieldConfigCard>
-    </div>
+      </AccordionContent>
+    </>
   );
 }
 
@@ -215,26 +191,26 @@ function CriterionTypeSelector({
 
   return (
     <RadioGroup
-      label={t('Criterion type')}
+      label={t('How should reviewers score this?')}
       value={value}
       onChange={(newValue) => onChange(newValue as RubricCriterionType)}
       orientation="vertical"
     >
       {CRITERION_TYPES.map((type) => {
         const entry = CRITERION_TYPE_REGISTRY[type];
-        const TypeIcon = entry.icon;
         return (
           <Radio
             key={type}
             value={type}
-            className="group flex items-start gap-2 py-1.5"
+            className="group flex items-start gap-2 py-2"
           >
-            <div className="flex items-center gap-2">
-              <TypeIcon className="size-4 text-neutral-gray4" />
-              <span className="text-sm font-medium">{t(entry.labelKey)}</span>
-              <span className="text-xs text-neutral-gray4">
-                {t(entry.descriptionKey)}
+            <div>
+              <span className="text-sm font-medium text-neutral-charcoal">
+                {t(entry.labelKey)}
               </span>
+              <p className="text-sm text-neutral-gray4">
+                {t(entry.descriptionKey)}
+              </p>
             </div>
           </Radio>
         );
@@ -274,17 +250,17 @@ function ScoredCriterionConfig({
 
       <div className="space-y-2">
         <h4 className="text-sm text-neutral-charcoal">{t('Score labels')}</h4>
-        {criterion.scoreLabels.map((label, index) => (
-          <div key={index} className="flex items-center gap-2">
+        {criterion.scoreLabels.map((label, scoreIndex) => (
+          <div key={scoreIndex} className="flex items-center gap-2">
             <span className="w-6 shrink-0 text-right text-sm text-neutral-gray4">
-              {index + 1}
+              {scoreIndex + 1}
             </span>
             <TextField
               value={label}
-              onChange={(value) => onUpdateScoreLabel(index, value)}
+              onChange={(value) => onUpdateScoreLabel(scoreIndex, value)}
               inputProps={{
                 placeholder: t('Label for score {number}', {
-                  number: index + 1,
+                  number: scoreIndex + 1,
                 }),
               }}
               className="w-full"
@@ -297,178 +273,21 @@ function ScoredCriterionConfig({
 }
 
 // ---------------------------------------------------------------------------
-// Dropdown criterion config (custom options list)
-// Reuses the same sortable options pattern as FieldConfigDropdown
+// Drag preview
 // ---------------------------------------------------------------------------
 
-interface DropdownOption {
-  id: string;
-  value: string;
-}
-
-function DropdownCriterionConfig({
-  criterion,
-  onUpdateJsonSchema,
-}: {
-  criterion: CriterionView;
-  onUpdateJsonSchema: (updates: Partial<XFormatPropertySchema>) => void;
-}) {
+export function RubricCriterionDragPreview({ index }: { index: number }) {
   const t = useTranslations();
-  const containerRef = useRef<HTMLDivElement>(null);
-  const shouldFocusNewRef = useRef(false);
-
-  const [options, setOptions] = useState<DropdownOption[]>(() =>
-    criterion.options.map((o) => ({ ...o, id: crypto.randomUUID() })),
-  );
-
-  const updateOptions = (next: DropdownOption[]) => {
-    setOptions(next);
-    const oneOfValues = next.map((o) => ({
-      const: o.value,
-      title: o.value,
-    }));
-    onUpdateJsonSchema({ oneOf: oneOfValues });
-  };
-
-  // Focus the last input when a new option is added
-  useEffect(() => {
-    if (shouldFocusNewRef.current && containerRef.current) {
-      const inputs = containerRef.current.querySelectorAll(
-        'input[type="text"]',
-      ) as NodeListOf<HTMLInputElement>;
-      const lastInput = inputs[inputs.length - 1];
-      lastInput?.focus();
-      shouldFocusNewRef.current = false;
-    }
-  }, [options.length]);
-
-  const handleAddOption = () => {
-    shouldFocusNewRef.current = true;
-    updateOptions([...options, { id: crypto.randomUUID(), value: '' }]);
-  };
-
-  const handleUpdateOption = (id: string, value: string) => {
-    updateOptions(
-      options.map((opt) => (opt.id === id ? { ...opt, value } : opt)),
-    );
-  };
-
-  const handleRemoveOption = (id: string) => {
-    updateOptions(options.filter((opt) => opt.id !== id));
-  };
-
-  const handleKeyDown = (e: React.KeyboardEvent, option: DropdownOption) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      const isLastOption = options[options.length - 1]?.id === option.id;
-      if (isLastOption && option.value.trim()) {
-        handleAddOption();
-      }
-    }
-  };
-
   return (
-    <div ref={containerRef} className="space-y-2">
-      <h4 className="text-sm text-neutral-charcoal">{t('Options')}</h4>
-
-      <Sortable
-        items={options}
-        onChange={updateOptions}
-        dragTrigger="handle"
-        getItemLabel={(item) => item.value || t('Option')}
-        renderDragPreview={(items) => {
-          const item = items[0];
-          if (!item) {
-            return null;
-          }
-          return (
-            <div className="flex items-center gap-2">
-              <LuGripVertical className="size-4 text-neutral-gray3" />
-              <span className="mr-12 grow rounded-lg border border-neutral-gray2 bg-white px-4 py-3 text-neutral-charcoal shadow-lg">
-                {item.value || t('Option')}
-              </span>
-            </div>
-          );
-        }}
-        className="gap-2"
-        aria-label={t('Dropdown options')}
-      >
-        {(option, controls) => {
-          const index = options.findIndex((o) => o.id === option.id);
-          return (
-            <div className="flex items-center gap-2">
-              <DragHandle
-                {...controls.dragHandleProps}
-                aria-label={t('Drag to reorder option')}
-                className="text-neutral-gray3 hover:text-neutral-gray4"
-              />
-              <TextField
-                value={option.value}
-                onChange={(value) => handleUpdateOption(option.id, value)}
-                onKeyDown={(e) => handleKeyDown(e, option)}
-                inputProps={{
-                  placeholder: t('Option {number}', { number: index + 1 }),
-                }}
-                className="w-full"
-              />
-              <TooltipTrigger isDisabled={options.length > 2}>
-                <Button
-                  color="ghost"
-                  size="small"
-                  aria-label={t('Remove option')}
-                  aria-disabled={options.length <= 2 || undefined}
-                  aria-description={
-                    options.length <= 2
-                      ? t('At least two options are required')
-                      : undefined
-                  }
-                  excludeFromTabOrder={options.length <= 2}
-                  onPress={() => {
-                    if (options.length > 2) {
-                      handleRemoveOption(option.id);
-                    }
-                  }}
-                  className={`p-2 ${
-                    options.length <= 2
-                      ? 'cursor-default text-neutral-gray3 opacity-30'
-                      : 'text-neutral-gray3 hover:text-neutral-charcoal'
-                  }`}
-                >
-                  <LuX className="size-4" />
-                </Button>
-                <Tooltip>{t('At least two options are required')}</Tooltip>
-              </TooltipTrigger>
-            </div>
-          );
-        }}
-      </Sortable>
-
-      <Button
-        color="ghost"
-        size="small"
-        onPress={handleAddOption}
-        className="hover:text-primary-tealDark gap-1 p-0 text-primary-teal"
-      >
-        <LuPlus className="size-4" />
-        <span>{t('Add option')}</span>
-      </Button>
+    <div className="flex items-center gap-2 rounded-lg border bg-white px-3 py-2 shadow-lg">
+      <LuGripVertical className="size-4 text-neutral-gray4" />
+      <span className="font-medium text-neutral-charcoal">
+        {t('Criterion {number}', { number: index })}
+      </span>
     </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Drag preview
-// ---------------------------------------------------------------------------
-
-export function RubricCriterionDragPreview({
-  criterion,
-}: {
-  criterion: CriterionView;
-}) {
-  const Icon = getCriterionIcon(criterion.criterionType);
-  return <FieldConfigCardDragPreview icon={Icon} label={criterion.label} />;
-}
-
 export function RubricCriterionDropIndicator() {
   return (
     <div className="flex h-12 items-center gap-2 rounded-lg border bg-neutral-offWhite" />
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 335e6e52d..9f108f13a 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -3,12 +3,13 @@
 import { trpc } from '@op/api/client';
 import type { RubricTemplateSchema } from '@op/common/client';
 import { useDebouncedCallback } from '@op/hooks';
-import { Accordion } from '@op/ui/Accordion';
+import { Accordion, AccordionItem } from '@op/ui/Accordion';
 import { Button } from '@op/ui/Button';
 import { EmptyState } from '@op/ui/EmptyState';
 import { Header2 } from '@op/ui/Header';
 import type { Key } from '@op/ui/RAC';
 import { Sortable } from '@op/ui/Sortable';
+import { cn } from '@op/ui/utils';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LuLeaf, LuPlus } from 'react-icons/lu';
 
@@ -23,13 +24,10 @@ import {
   changeCriterionType,
   createEmptyRubricTemplate,
   getCriteria,
-  getCriterion,
   getCriterionErrors,
   removeCriterion,
   reorderCriteria,
-  setCriterionRequired,
   updateCriterionDescription,
-  updateCriterionJsonSchema,
   updateCriterionLabel,
   updateScoreLabel,
   updateScoredMaxPoints,
@@ -174,13 +172,6 @@ export function RubricEditorContent({
     [],
   );
 
-  const handleUpdateRequired = useCallback(
-    (criterionId: string, required: boolean) => {
-      setTemplate((prev) => setCriterionRequired(prev, criterionId, required));
-    },
-    [],
-  );
-
   const handleChangeType = useCallback(
     (criterionId: string, newType: RubricCriterionType) => {
       setTemplate((prev) => changeCriterionType(prev, criterionId, newType));
@@ -188,15 +179,6 @@ export function RubricEditorContent({
     [],
   );
 
-  const handleUpdateJsonSchema = useCallback(
-    (criterionId: string, updates: Record<string, unknown>) => {
-      setTemplate((prev) =>
-        updateCriterionJsonSchema(prev, criterionId, updates),
-      );
-    },
-    [],
-  );
-
   const handleUpdateMaxPoints = useCallback(
     (criterionId: string, maxPoints: number) => {
       setTemplate((prev) =>
@@ -215,18 +197,6 @@ export function RubricEditorContent({
     [],
   );
 
-  const handleCriterionBlur = useCallback(
-    (criterionId: string) => {
-      const criterion = getCriterion(template, criterionId);
-      if (criterion) {
-        setCriterionErrors((prev) =>
-          new Map(prev).set(criterionId, getCriterionErrors(criterion)),
-        );
-      }
-    },
-    [template],
-  );
-
   return (
     <div className="flex h-full flex-col md:flex-row">
       <main className="flex-1 basis-1/2 overflow-y-auto p-4 pb-24 md:p-8 md:pb-8">
@@ -279,16 +249,19 @@ export function RubricEditorContent({
                   getItemLabel={(criterion) => criterion.label}
                   className="gap-3"
                   renderDragPreview={(items) => {
-                    const criterion = items[0];
-                    if (!criterion) {
+                    const item = items[0];
+                    if (!item) {
                       return null;
                     }
-                    return <RubricCriterionDragPreview criterion={criterion} />;
+                    const idx = criteria.findIndex((c) => c.id === item.id) + 1;
+                    return <RubricCriterionDragPreview index={idx} />;
                   }}
                   renderDropIndicator={RubricCriterionDropIndicator}
                   aria-label={t('Rubric criteria')}
                 >
                   {(criterion, controls) => {
+                    const idx =
+                      criteria.findIndex((c) => c.id === criterion.id) + 1;
                     const snapshotErrors =
                       criterionErrors.get(criterion.id) ?? [];
                     const liveErrors = getCriterionErrors(criterion);
@@ -297,21 +270,26 @@ export function RubricEditorContent({
                     );
 
                     return (
-                      <RubricCriterionCard
-                        key={criterion.id}
-                        criterion={criterion}
-                        errors={displayedErrors}
-                        controls={controls}
-                        onRemove={handleRemoveCriterion}
-                        onBlur={handleCriterionBlur}
-                        onUpdateLabel={handleUpdateLabel}
-                        onUpdateDescription={handleUpdateDescription}
-                        onUpdateRequired={handleUpdateRequired}
-                        onChangeType={handleChangeType}
-                        onUpdateJsonSchema={handleUpdateJsonSchema}
-                        onUpdateMaxPoints={handleUpdateMaxPoints}
-                        onUpdateScoreLabel={handleUpdateScoreLabel}
-                      />
+                      <AccordionItem
+                        id={criterion.id}
+                        className={cn(
+                          'rounded-lg border bg-white',
+                          controls.isDragging && 'opacity-50',
+                        )}
+                      >
+                        <RubricCriterionCard
+                          criterion={criterion}
+                          index={idx}
+                          errors={displayedErrors}
+                          controls={controls}
+                          onRemove={handleRemoveCriterion}
+                          onUpdateLabel={handleUpdateLabel}
+                          onUpdateDescription={handleUpdateDescription}
+                          onChangeType={handleChangeType}
+                          onUpdateMaxPoints={handleUpdateMaxPoints}
+                          onUpdateScoreLabel={handleUpdateScoreLabel}
+                        />
+                      </AccordionItem>
                     );
                   }}
                 </Sortable>
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
index ebcd4ce7e..d8a060254 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
@@ -1,18 +1,9 @@
-import type { IconType } from 'react-icons';
-import {
-  LuChevronDown,
-  LuHash,
-  LuLetterText,
-  LuToggleRight,
-} from 'react-icons/lu';
-
 import type { RubricCriterionType } from '../../../../decisions/rubricTemplate';
 
 /**
  * Display metadata for each rubric criterion type.
  */
 interface CriterionTypeRegistryEntry {
-  icon: IconType;
   /** Translation key for the type label */
   labelKey: string;
   /** Translation key for a short description shown in the radio selector */
@@ -24,24 +15,17 @@ export const CRITERION_TYPE_REGISTRY: Record<
   CriterionTypeRegistryEntry
 > = {
   scored: {
-    icon: LuHash,
-    labelKey: 'Scored',
-    descriptionKey: 'Rate on a numeric scale with points',
+    labelKey: 'Rating Scale',
+    descriptionKey:
+      'Reviewers select a number with descriptions for each point value',
   },
   yes_no: {
-    icon: LuToggleRight,
-    labelKey: 'Yes / No',
-    descriptionKey: 'Simple yes or no answer',
-  },
-  dropdown: {
-    icon: LuChevronDown,
-    labelKey: 'Dropdown',
-    descriptionKey: 'Select from custom options',
+    labelKey: 'Yes/No',
+    descriptionKey: 'Simple binary assessment',
   },
   long_text: {
-    icon: LuLetterText,
-    labelKey: 'Long text',
-    descriptionKey: 'Open-ended written feedback',
+    labelKey: 'Text response only',
+    descriptionKey: 'No score, just written feedback',
   },
 };
 
@@ -51,14 +35,5 @@ export const CRITERION_TYPE_REGISTRY: Record<
 export const CRITERION_TYPES: RubricCriterionType[] = [
   'scored',
   'yes_no',
-  'dropdown',
   'long_text',
 ];
-
-export function getCriterionIcon(type: RubricCriterionType): IconType {
-  return CRITERION_TYPE_REGISTRY[type].icon;
-}
-
-export function getCriterionLabelKey(type: RubricCriterionType): string {
-  return CRITERION_TYPE_REGISTRY[type].labelKey;
-}
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index 696f1b679..9405979c7 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -6,7 +6,7 @@
  * `x-format` on each property (consumed by the renderer's rubric field logic).
  *
  * Mirrors the architecture of `proposalTemplate.ts` but tailored to rubric
- * criteria: scored dropdowns, yes/no, custom dropdowns, and long text.
+ * criteria: rating scale, yes/no, and text response.
  */
 import type {
   RubricTemplateSchema,
@@ -19,11 +19,7 @@ export type { RubricTemplateSchema };
 // Criterion types
 // ---------------------------------------------------------------------------
 
-export type RubricCriterionType =
-  | 'scored'
-  | 'yes_no'
-  | 'dropdown'
-  | 'long_text';
+export type RubricCriterionType = 'scored' | 'yes_no' | 'long_text';
 
 /**
  * Flat read-only view of a single rubric criterion, derived from the template.
@@ -40,8 +36,6 @@ export interface CriterionView {
   maxPoints?: number;
   /** Labels for each score level (index 0 = score 1). Scored criteria only. */
   scoreLabels: string[];
-  /** Options for dropdown criteria. */
-  options: { id: string; value: string }[];
 }
 
 // ---------------------------------------------------------------------------
@@ -88,15 +82,6 @@ export function createCriterionJsonSchema(
           { const: 'no', title: 'No' },
         ],
       };
-    case 'dropdown':
-      return {
-        type: 'string',
-        'x-format': 'dropdown',
-        oneOf: [
-          { const: 'Option 1', title: 'Option 1' },
-          { const: 'Option 2', title: 'Option 2' },
-        ],
-      };
     case 'long_text':
       return {
         type: 'string',
@@ -143,11 +128,6 @@ export function inferCriterionType(
         return 'yes_no';
       }
     }
-
-    // Generic dropdown
-    if (schema.type === 'string') {
-      return 'dropdown';
-    }
   }
 
   return undefined;
@@ -249,29 +229,6 @@ export function getCriterionScoreLabels(
     .map((e) => e.title);
 }
 
-export function getCriterionOptions(
-  template: RubricTemplateSchema,
-  criterionId: string,
-): { id: string; value: string }[] {
-  const schema = getCriterionSchema(template, criterionId);
-  if (!schema || schema.type !== 'string' || !Array.isArray(schema.oneOf)) {
-    return [];
-  }
-  return schema.oneOf
-    .filter(
-      (e): e is { const: string; title: string } =>
-        typeof e === 'object' &&
-        e !== null &&
-        'const' in e &&
-        'title' in e &&
-        typeof (e as { const: unknown }).const === 'string',
-    )
-    .map((e, i) => ({
-      id: `${criterionId}-opt-${i}`,
-      value: e.title,
-    }));
-}
-
 // ---------------------------------------------------------------------------
 // Composite readers
 // ---------------------------------------------------------------------------
@@ -293,7 +250,6 @@ export function getCriterion(
     required: isCriterionRequired(template, criterionId),
     maxPoints: getCriterionMaxPoints(template, criterionId),
     scoreLabels: getCriterionScoreLabels(template, criterionId),
-    options: getCriterionOptions(template, criterionId),
   };
 }
 
@@ -324,15 +280,6 @@ export function getCriterionErrors(criterion: CriterionView): string[] {
     errors.push('Criterion label is required');
   }
 
-  if (criterion.criterionType === 'dropdown') {
-    if (criterion.options.length < 2) {
-      errors.push('At least two options are required');
-    }
-    if (criterion.options.some((o) => !o.value.trim())) {
-      errors.push('Options cannot be empty');
-    }
-  }
-
   if (criterion.criterionType === 'scored') {
     if (criterion.scoreLabels.some((l) => !l.trim())) {
       errors.push('Score labels cannot be empty');
diff --git a/apps/app/src/lib/i18n/dictionaries/bn.json b/apps/app/src/lib/i18n/dictionaries/bn.json
index ccbb3fa60..2e0ee25f0 100644
--- a/apps/app/src/lib/i18n/dictionaries/bn.json
+++ b/apps/app/src/lib/i18n/dictionaries/bn.json
@@ -906,5 +906,21 @@
   "Review Criteria": "পর্যালোচনার মানদণ্ড",
   "No review criteria yet": "এখনো কোনো পর্যালোচনার মানদণ্ড নেই",
   "Add criteria to help reviewers evaluate proposals consistently": "পর্যালোচকদের ধারাবাহিকভাবে প্রস্তাব মূল্যায়নে সহায়তার জন্য মানদণ্ড যোগ করুন",
-  "Add your first criterion": "আপনার প্রথম মানদণ্ড যোগ করুন"
+  "Add your first criterion": "আপনার প্রথম মানদণ্ড যোগ করুন",
+  "Criterion {number}": "মানদণ্ড {number}",
+  "Criterion name": "মানদণ্ডের নাম",
+  "Criterion label is required": "মানদণ্ডের লেবেল আবশ্যক",
+  "Drag to reorder criterion": "মানদণ্ড পুনর্বিন্যাস করতে টানুন",
+  "e.g., Goal Alignment": "যেমন, লক্ষ্য সারিবদ্ধকরণ",
+  "Add a short, clear name for this evaluation criterion": "এই মূল্যায়ন মানদণ্ডের জন্য একটি সংক্ষিপ্ত, স্পষ্ট নাম যোগ করুন",
+  "What should reviewers evaluate? Be specific about what you're looking for.": "পর্যালোচকদের কী মূল্যায়ন করা উচিত? আপনি কী খুঁজছেন সে সম্পর্কে সুনির্দিষ্ট হন।",
+  "Help reviewers understand what to assess": "পর্যালোচকদের কী মূল্যায়ন করতে হবে তা বুঝতে সাহায্য করুন",
+  "How should reviewers score this?": "পর্যালোচকরা কীভাবে এটি স্কোর করবেন?",
+  "Rating Scale": "রেটিং স্কেল",
+  "Reviewers select a number with descriptions for each point value": "পর্যালোচকরা প্রতিটি পয়েন্ট মানের বিবরণ সহ একটি সংখ্যা নির্বাচন করেন",
+  "Simple binary assessment": "সহজ বাইনারি মূল্যায়ন",
+  "Text response only": "শুধুমাত্র পাঠ্য প্রতিক্রিয়া",
+  "No score, just written feedback": "কোনো স্কোর নেই, শুধু লিখিত প্রতিক্রিয়া",
+  "Score labels cannot be empty": "স্কোর লেবেল খালি রাখা যাবে না",
+  "Start typing...": "টাইপ শুরু করুন..."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/en.json b/apps/app/src/lib/i18n/dictionaries/en.json
index a82a52385..f4fe3f98c 100644
--- a/apps/app/src/lib/i18n/dictionaries/en.json
+++ b/apps/app/src/lib/i18n/dictionaries/en.json
@@ -899,5 +899,21 @@
   "Review Criteria": "Review Criteria",
   "No review criteria yet": "No review criteria yet",
   "Add criteria to help reviewers evaluate proposals consistently": "Add criteria to help reviewers evaluate proposals consistently",
-  "Add your first criterion": "Add your first criterion"
+  "Add your first criterion": "Add your first criterion",
+  "Criterion {number}": "Criterion {number}",
+  "Criterion name": "Criterion name",
+  "Criterion label is required": "Criterion label is required",
+  "Drag to reorder criterion": "Drag to reorder criterion",
+  "e.g., Goal Alignment": "e.g., Goal Alignment",
+  "Add a short, clear name for this evaluation criterion": "Add a short, clear name for this evaluation criterion",
+  "What should reviewers evaluate? Be specific about what you're looking for.": "What should reviewers evaluate? Be specific about what you're looking for.",
+  "Help reviewers understand what to assess": "Help reviewers understand what to assess",
+  "How should reviewers score this?": "How should reviewers score this?",
+  "Rating Scale": "Rating Scale",
+  "Reviewers select a number with descriptions for each point value": "Reviewers select a number with descriptions for each point value",
+  "Simple binary assessment": "Simple binary assessment",
+  "Text response only": "Text response only",
+  "No score, just written feedback": "No score, just written feedback",
+  "Score labels cannot be empty": "Score labels cannot be empty",
+  "Start typing...": "Start typing..."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/es.json b/apps/app/src/lib/i18n/dictionaries/es.json
index 7ab2ca004..d658a39bc 100644
--- a/apps/app/src/lib/i18n/dictionaries/es.json
+++ b/apps/app/src/lib/i18n/dictionaries/es.json
@@ -899,5 +899,21 @@
   "Review Criteria": "Criterios de revisión",
   "No review criteria yet": "Aún no hay criterios de revisión",
   "Add criteria to help reviewers evaluate proposals consistently": "Agregue criterios para ayudar a los revisores a evaluar propuestas de manera consistente",
-  "Add your first criterion": "Agregue su primer criterio"
+  "Add your first criterion": "Agregue su primer criterio",
+  "Criterion {number}": "Criterio {number}",
+  "Criterion name": "Nombre del criterio",
+  "Criterion label is required": "La etiqueta del criterio es obligatoria",
+  "Drag to reorder criterion": "Arrastrar para reordenar criterio",
+  "e.g., Goal Alignment": "p. ej., Alineación con objetivos",
+  "Add a short, clear name for this evaluation criterion": "Agregue un nombre corto y claro para este criterio de evaluación",
+  "What should reviewers evaluate? Be specific about what you're looking for.": "¿Qué deben evaluar los revisores? Sea específico sobre lo que busca.",
+  "Help reviewers understand what to assess": "Ayude a los revisores a entender qué evaluar",
+  "How should reviewers score this?": "¿Cómo deben puntuar esto los revisores?",
+  "Rating Scale": "Escala de calificación",
+  "Reviewers select a number with descriptions for each point value": "Los revisores seleccionan un número con descripciones para cada valor de punto",
+  "Simple binary assessment": "Evaluación binaria simple",
+  "Text response only": "Solo respuesta de texto",
+  "No score, just written feedback": "Sin puntuación, solo retroalimentación escrita",
+  "Score labels cannot be empty": "Las etiquetas de puntuación no pueden estar vacías",
+  "Start typing...": "Comience a escribir..."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/fr.json b/apps/app/src/lib/i18n/dictionaries/fr.json
index a6a1b41f4..6baf3f318 100644
--- a/apps/app/src/lib/i18n/dictionaries/fr.json
+++ b/apps/app/src/lib/i18n/dictionaries/fr.json
@@ -899,5 +899,21 @@
   "Review Criteria": "Critères d'évaluation",
   "No review criteria yet": "Pas encore de critères d'évaluation",
   "Add criteria to help reviewers evaluate proposals consistently": "Ajoutez des critères pour aider les évaluateurs à évaluer les propositions de manière cohérente",
-  "Add your first criterion": "Ajoutez votre premier critère"
+  "Add your first criterion": "Ajoutez votre premier critère",
+  "Criterion {number}": "Critère {number}",
+  "Criterion name": "Nom du critère",
+  "Criterion label is required": "Le libellé du critère est obligatoire",
+  "Drag to reorder criterion": "Glisser pour réordonner le critère",
+  "e.g., Goal Alignment": "p. ex., Alignement des objectifs",
+  "Add a short, clear name for this evaluation criterion": "Ajoutez un nom court et clair pour ce critère d'évaluation",
+  "What should reviewers evaluate? Be specific about what you're looking for.": "Que doivent évaluer les évaluateurs ? Soyez précis sur ce que vous recherchez.",
+  "Help reviewers understand what to assess": "Aidez les évaluateurs à comprendre quoi évaluer",
+  "How should reviewers score this?": "Comment les évaluateurs doivent-ils noter ceci ?",
+  "Rating Scale": "Échelle de notation",
+  "Reviewers select a number with descriptions for each point value": "Les évaluateurs sélectionnent un nombre avec des descriptions pour chaque valeur de point",
+  "Simple binary assessment": "Évaluation binaire simple",
+  "Text response only": "Réponse textuelle uniquement",
+  "No score, just written feedback": "Pas de note, uniquement des commentaires écrits",
+  "Score labels cannot be empty": "Les libellés des notes ne peuvent pas être vides",
+  "Start typing...": "Commencez à écrire..."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/pt.json b/apps/app/src/lib/i18n/dictionaries/pt.json
index a98b27692..62aa2bc8a 100644
--- a/apps/app/src/lib/i18n/dictionaries/pt.json
+++ b/apps/app/src/lib/i18n/dictionaries/pt.json
@@ -899,5 +899,21 @@
   "Review Criteria": "Critérios de avaliação",
   "No review criteria yet": "Ainda não há critérios de avaliação",
   "Add criteria to help reviewers evaluate proposals consistently": "Adicione critérios para ajudar os avaliadores a avaliar propostas de forma consistente",
-  "Add your first criterion": "Adicione seu primeiro critério"
+  "Add your first criterion": "Adicione seu primeiro critério",
+  "Criterion {number}": "Critério {number}",
+  "Criterion name": "Nome do critério",
+  "Criterion label is required": "O rótulo do critério é obrigatório",
+  "Drag to reorder criterion": "Arrastar para reordenar critério",
+  "e.g., Goal Alignment": "p. ex., Alinhamento de objetivos",
+  "Add a short, clear name for this evaluation criterion": "Adicione um nome curto e claro para este critério de avaliação",
+  "What should reviewers evaluate? Be specific about what you're looking for.": "O que os avaliadores devem avaliar? Seja específico sobre o que procura.",
+  "Help reviewers understand what to assess": "Ajude os avaliadores a entender o que avaliar",
+  "How should reviewers score this?": "Como os avaliadores devem pontuar isto?",
+  "Rating Scale": "Escala de classificação",
+  "Reviewers select a number with descriptions for each point value": "Os avaliadores selecionam um número com descrições para cada valor de ponto",
+  "Simple binary assessment": "Avaliação binária simples",
+  "Text response only": "Apenas resposta de texto",
+  "No score, just written feedback": "Sem pontuação, apenas feedback escrito",
+  "Score labels cannot be empty": "Os rótulos das notas não podem estar vazios",
+  "Start typing...": "Comece a digitar..."
 }

From 77844a73451716b47c3c2da8a87040e86a3dd492 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 16:03:10 -0500
Subject: [PATCH 09/38] Add confirmation modal when deleting a rubric criterion

Follows the same pattern as PhasesSectionContent: clicking the trash
button now opens a dismissable modal asking the user to confirm before
the criterion is removed. Adds translation keys for the modal to all
5 language files.
---
 .../rubric/RubricEditorContent.tsx            | 55 ++++++++++++++++++-
 apps/app/src/lib/i18n/dictionaries/bn.json    |  4 +-
 apps/app/src/lib/i18n/dictionaries/en.json    |  4 +-
 apps/app/src/lib/i18n/dictionaries/es.json    |  4 +-
 apps/app/src/lib/i18n/dictionaries/fr.json    |  4 +-
 apps/app/src/lib/i18n/dictionaries/pt.json    |  4 +-
 6 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 9f108f13a..9c76db70b 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -7,6 +7,7 @@ import { Accordion, AccordionItem } from '@op/ui/Accordion';
 import { Button } from '@op/ui/Button';
 import { EmptyState } from '@op/ui/EmptyState';
 import { Header2 } from '@op/ui/Header';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@op/ui/Modal';
 import type { Key } from '@op/ui/RAC';
 import { Sortable } from '@op/ui/Sortable';
 import { cn } from '@op/ui/utils';
@@ -76,6 +77,11 @@ export function RubricEditorContent({
   // Accordion expansion state
   const [expandedKeys, setExpandedKeys] = useState<Set<Key>>(new Set());
 
+  // Delete confirmation modal
+  const [criterionToDelete, setCriterionToDelete] = useState<string | null>(
+    null,
+  );
+
   const setRubricTemplateSchema = useProcessBuilderStore(
     (s) => s.setRubricTemplateSchema,
   );
@@ -139,13 +145,21 @@ export function RubricEditorContent({
   }, [t]);
 
   const handleRemoveCriterion = useCallback((criterionId: string) => {
-    setTemplate((prev) => removeCriterion(prev, criterionId));
+    setCriterionToDelete(criterionId);
+  }, []);
+
+  const confirmRemoveCriterion = useCallback(() => {
+    if (!criterionToDelete) {
+      return;
+    }
+    setTemplate((prev) => removeCriterion(prev, criterionToDelete));
     setCriterionErrors((prev) => {
       const next = new Map(prev);
-      next.delete(criterionId);
+      next.delete(criterionToDelete);
       return next;
     });
-  }, []);
+    setCriterionToDelete(null);
+  }, [criterionToDelete]);
 
   const handleReorderCriteria = useCallback((newItems: CriterionView[]) => {
     setTemplate((prev) =>
@@ -309,6 +323,41 @@ export function RubricEditorContent({
       </main>
 
       <RubricParticipantPreview template={template} />
+
+      <Modal
+        isDismissable
+        isOpen={criterionToDelete !== null}
+        onOpenChange={(open) => {
+          if (!open) {
+            setCriterionToDelete(null);
+          }
+        }}
+      >
+        <ModalHeader>{t('Delete criterion')}</ModalHeader>
+        <ModalBody>
+          <p>
+            {t(
+              'Are you sure you want to delete this criterion? This action cannot be undone.',
+            )}
+          </p>
+        </ModalBody>
+        <ModalFooter>
+          <Button
+            color="secondary"
+            className="w-full sm:w-fit"
+            onPress={() => setCriterionToDelete(null)}
+          >
+            {t('Cancel')}
+          </Button>
+          <Button
+            color="destructive"
+            className="w-full sm:w-fit"
+            onPress={confirmRemoveCriterion}
+          >
+            {t('Delete')}
+          </Button>
+        </ModalFooter>
+      </Modal>
     </div>
   );
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/bn.json b/apps/app/src/lib/i18n/dictionaries/bn.json
index 2e0ee25f0..7e82473e5 100644
--- a/apps/app/src/lib/i18n/dictionaries/bn.json
+++ b/apps/app/src/lib/i18n/dictionaries/bn.json
@@ -922,5 +922,7 @@
   "Text response only": "শুধুমাত্র পাঠ্য প্রতিক্রিয়া",
   "No score, just written feedback": "কোনো স্কোর নেই, শুধু লিখিত প্রতিক্রিয়া",
   "Score labels cannot be empty": "স্কোর লেবেল খালি রাখা যাবে না",
-  "Start typing...": "টাইপ শুরু করুন..."
+  "Start typing...": "টাইপ শুরু করুন...",
+  "Delete criterion": "মানদণ্ড মুছুন",
+  "Are you sure you want to delete this criterion? This action cannot be undone.": "আপনি কি নিশ্চিত যে এই মানদণ্ডটি মুছতে চান? এই কাজটি পূর্বাবস্থায় ফেরানো যাবে না।"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/en.json b/apps/app/src/lib/i18n/dictionaries/en.json
index f4fe3f98c..022fc7b46 100644
--- a/apps/app/src/lib/i18n/dictionaries/en.json
+++ b/apps/app/src/lib/i18n/dictionaries/en.json
@@ -915,5 +915,7 @@
   "Text response only": "Text response only",
   "No score, just written feedback": "No score, just written feedback",
   "Score labels cannot be empty": "Score labels cannot be empty",
-  "Start typing...": "Start typing..."
+  "Start typing...": "Start typing...",
+  "Delete criterion": "Delete criterion",
+  "Are you sure you want to delete this criterion? This action cannot be undone.": "Are you sure you want to delete this criterion? This action cannot be undone."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/es.json b/apps/app/src/lib/i18n/dictionaries/es.json
index d658a39bc..61145d9d3 100644
--- a/apps/app/src/lib/i18n/dictionaries/es.json
+++ b/apps/app/src/lib/i18n/dictionaries/es.json
@@ -915,5 +915,7 @@
   "Text response only": "Solo respuesta de texto",
   "No score, just written feedback": "Sin puntuación, solo retroalimentación escrita",
   "Score labels cannot be empty": "Las etiquetas de puntuación no pueden estar vacías",
-  "Start typing...": "Comience a escribir..."
+  "Start typing...": "Comience a escribir...",
+  "Delete criterion": "Eliminar criterio",
+  "Are you sure you want to delete this criterion? This action cannot be undone.": "¿Está seguro de que desea eliminar este criterio? Esta acción no se puede deshacer."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/fr.json b/apps/app/src/lib/i18n/dictionaries/fr.json
index 6baf3f318..42805064d 100644
--- a/apps/app/src/lib/i18n/dictionaries/fr.json
+++ b/apps/app/src/lib/i18n/dictionaries/fr.json
@@ -915,5 +915,7 @@
   "Text response only": "Réponse textuelle uniquement",
   "No score, just written feedback": "Pas de note, uniquement des commentaires écrits",
   "Score labels cannot be empty": "Les libellés des notes ne peuvent pas être vides",
-  "Start typing...": "Commencez à écrire..."
+  "Start typing...": "Commencez à écrire...",
+  "Delete criterion": "Supprimer le critère",
+  "Are you sure you want to delete this criterion? This action cannot be undone.": "Êtes-vous sûr de vouloir supprimer ce critère ? Cette action est irréversible."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/pt.json b/apps/app/src/lib/i18n/dictionaries/pt.json
index 62aa2bc8a..010fd0f3f 100644
--- a/apps/app/src/lib/i18n/dictionaries/pt.json
+++ b/apps/app/src/lib/i18n/dictionaries/pt.json
@@ -915,5 +915,7 @@
   "Text response only": "Apenas resposta de texto",
   "No score, just written feedback": "Sem pontuação, apenas feedback escrito",
   "Score labels cannot be empty": "Os rótulos das notas não podem estar vazios",
-  "Start typing...": "Comece a digitar..."
+  "Start typing...": "Comece a digitar...",
+  "Delete criterion": "Excluir critério",
+  "Are you sure you want to delete this criterion? This action cannot be undone.": "Tem certeza de que deseja excluir este critério? Esta ação não pode ser desfeita."
 }

From 4bb3ae4e5c3770258afd29d739138f5b5429f2dc Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 16:05:08 -0500
Subject: [PATCH 10/38] Make entire criterion header row trigger accordion
 expand/collapse

Move the 'Criterion N' label inside AccordionTrigger so clicking
anywhere on the header (except drag handle and delete button)
toggles the accordion.
---
 .../stepContent/rubric/RubricCriterionCard.tsx            | 8 ++++----
 .../stepContent/rubric/RubricEditorContent.tsx            | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index cd99d6c6c..074f44221 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -84,12 +84,12 @@ export function RubricCriterionCard({
             aria-label={t('Drag to reorder criterion')}
           />
         )}
-        <AccordionTrigger className="flex cursor-pointer items-center">
+        <AccordionTrigger className="flex flex-1 cursor-pointer items-center gap-2">
           <AccordionIndicator />
+          <span className="flex-1 font-medium text-neutral-charcoal">
+            {t('Criterion {number}', { number: index })}
+          </span>
         </AccordionTrigger>
-        <span className="flex-1 font-medium text-neutral-charcoal">
-          {t('Criterion {number}', { number: index })}
-        </span>
         {onRemove && (
           <Button
             color="ghost"
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 9c76db70b..603b849b9 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -213,7 +213,7 @@ export function RubricEditorContent({
 
   return (
     <div className="flex h-full flex-col md:flex-row">
-      <main className="flex-1 basis-1/2 overflow-y-auto p-4 pb-24 md:p-8 md:pb-8">
+      <main className="flex-1 basis-1/2 overflow-y-auto p-4 pb-24 [scrollbar-gutter:stable] md:p-8 md:pb-8">
         <div className="mx-auto max-w-160 space-y-4">
           <div className="flex items-center justify-between">
             <Header2 className="font-serif text-title-sm">

From 2b18038597e76c0295e116ff9330bf270d4b0851 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 16:09:54 -0500
Subject: [PATCH 11/38] Show criterion name, type badge, and score in collapsed
 header

The accordion header now displays: 'Criterion N' (always), the
criterion name in muted text (once set and not the default), a type
badge (Rating Scale / Yes/No / Text response only), and a points
badge for scored criteria (e.g. '5 pts'). The name truncates
gracefully when the header is narrow.
---
 .../rubric/RubricCriterionCard.tsx            | 20 +++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index 074f44221..b9ce6413e 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -84,11 +84,27 @@ export function RubricCriterionCard({
             aria-label={t('Drag to reorder criterion')}
           />
         )}
-        <AccordionTrigger className="flex flex-1 cursor-pointer items-center gap-2">
+        <AccordionTrigger className="flex flex-1 cursor-pointer items-center gap-2 overflow-hidden">
           <AccordionIndicator />
-          <span className="flex-1 font-medium text-neutral-charcoal">
+          <span className="shrink-0 text-left font-medium text-neutral-charcoal">
             {t('Criterion {number}', { number: index })}
           </span>
+          {criterion.label.trim() !== '' &&
+            criterion.label !== t('New criterion') && (
+              <span className="truncate text-left text-neutral-gray4">
+                {criterion.label}
+              </span>
+            )}
+          <span className="ml-auto flex shrink-0 items-center gap-1.5">
+            <span className="rounded-sm bg-neutral-gray1 px-1.5 py-0.5 text-xs text-neutral-charcoal">
+              {t(CRITERION_TYPE_REGISTRY[criterion.criterionType].labelKey)}
+            </span>
+            {criterion.criterionType === 'scored' && criterion.maxPoints && (
+              <span className="bg-primary-mint/20 text-primary-tealDark rounded-sm px-1.5 py-0.5 text-xs">
+                {criterion.maxPoints} {t('pts')}
+              </span>
+            )}
+          </span>
         </AccordionTrigger>
         {onRemove && (
           <Button

From cfd1ea7b44ef1d20cffff9564b1acd0edcc031c8 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Fri, 27 Feb 2026 16:11:49 -0500
Subject: [PATCH 12/38] Always show criterion name in header, fallback to 'New
 criterion'

---
 .../stepContent/rubric/RubricCriterionCard.tsx        | 11 ++++-------
 1 file changed, 4 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index b9ce6413e..dd740301c 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -86,15 +86,12 @@ export function RubricCriterionCard({
         )}
         <AccordionTrigger className="flex flex-1 cursor-pointer items-center gap-2 overflow-hidden">
           <AccordionIndicator />
-          <span className="shrink-0 text-left font-medium text-neutral-charcoal">
+          <span className="shrink-0 text-left font-serif text-neutral-charcoal">
             {t('Criterion {number}', { number: index })}
           </span>
-          {criterion.label.trim() !== '' &&
-            criterion.label !== t('New criterion') && (
-              <span className="truncate text-left text-neutral-gray4">
-                {criterion.label}
-              </span>
-            )}
+          <span className="truncate text-left text-neutral-gray4">
+            {criterion.label || t('New criterion')}
+          </span>
           <span className="ml-auto flex shrink-0 items-center gap-1.5">
             <span className="rounded-sm bg-neutral-gray1 px-1.5 py-0.5 text-xs text-neutral-charcoal">
               {t(CRITERION_TYPE_REGISTRY[criterion.criterionType].labelKey)}

From d3658092334d8341d0298fada5421a16e4a26bee Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Mon, 2 Mar 2026 11:27:14 -0500
Subject: [PATCH 13/38] Update translations for revised score labels section

Replace 'Score labels' and 'Label for score {number}' with new keys:
- 'Define what each score means'
- 'Help reviewers score consistently by describing what each point value represents'
- 'Describe what earns {number} points...'

Updated across all 5 language files (en, es, fr, pt, bn).
---
 .../rubric/RubricCriterionCard.tsx            | 53 +++++++++++--------
 .../components/decisions/rubricTemplate.ts    |  2 +-
 apps/app/src/lib/i18n/dictionaries/bn.json    |  5 +-
 apps/app/src/lib/i18n/dictionaries/en.json    |  5 +-
 apps/app/src/lib/i18n/dictionaries/es.json    |  5 +-
 apps/app/src/lib/i18n/dictionaries/fr.json    |  5 +-
 apps/app/src/lib/i18n/dictionaries/pt.json    |  5 +-
 packages/ui/src/components/RadioGroup.tsx     |  4 +-
 8 files changed, 50 insertions(+), 34 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index dd740301c..d6c03f844 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -208,6 +208,7 @@ function CriterionTypeSelector({
       value={value}
       onChange={(newValue) => onChange(newValue as RubricCriterionType)}
       orientation="vertical"
+      labelClassName="text-base"
     >
       {CRITERION_TYPES.map((type) => {
         const entry = CRITERION_TYPE_REGISTRY[type];
@@ -217,10 +218,8 @@ function CriterionTypeSelector({
             value={type}
             className="group flex items-start gap-2 py-2"
           >
-            <div>
-              <span className="text-sm font-medium text-neutral-charcoal">
-                {t(entry.labelKey)}
-              </span>
+            <div className="relative -top-0.5">
+              <span>{t(entry.labelKey)}</span>
               <p className="text-sm text-neutral-gray4">
                 {t(entry.descriptionKey)}
               </p>
@@ -262,24 +261,34 @@ function ScoredCriterionConfig({
       />
 
       <div className="space-y-2">
-        <h4 className="text-sm text-neutral-charcoal">{t('Score labels')}</h4>
-        {criterion.scoreLabels.map((label, scoreIndex) => (
-          <div key={scoreIndex} className="flex items-center gap-2">
-            <span className="w-6 shrink-0 text-right text-sm text-neutral-gray4">
-              {scoreIndex + 1}
-            </span>
-            <TextField
-              value={label}
-              onChange={(value) => onUpdateScoreLabel(scoreIndex, value)}
-              inputProps={{
-                placeholder: t('Label for score {number}', {
-                  number: scoreIndex + 1,
-                }),
-              }}
-              className="w-full"
-            />
-          </div>
-        ))}
+        <h4 className="text-neutral-charcoal">
+          {t('Define what each score means')}
+        </h4>
+        <p className="text-sm">
+          {t(
+            'Help reviewers score consistently by describing what each point value represents',
+          )}
+        </p>
+        <div className="space-y-4">
+          {criterion.scoreLabels.map((label, scoreIndex) => (
+            <div key={scoreIndex} className="flex items-start gap-2">
+              <span className="flex size-8 shrink-0 items-center justify-center rounded bg-neutral-gray1 text-center text-right font-serif text-title-base text-neutral-gray4">
+                {scoreIndex + 1}
+              </span>
+              <TextField
+                useTextArea
+                value={label}
+                onChange={(value) => onUpdateScoreLabel(scoreIndex, value)}
+                textareaProps={{
+                  placeholder: t('Describe what earns {number} points...', {
+                    number: scoreIndex + 1,
+                  }),
+                }}
+                className="w-full"
+              />
+            </div>
+          ))}
+        </div>
       </div>
     </div>
   );
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index 9405979c7..33072bb28 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -225,7 +225,7 @@ export function getCriterionScoreLabels(
         'title' in e &&
         typeof (e as { title: unknown }).title === 'string',
     )
-    .sort((a, b) => a.const - b.const)
+    .sort((a, b) => b.const - a.const)
     .map((e) => e.title);
 }
 
diff --git a/apps/app/src/lib/i18n/dictionaries/bn.json b/apps/app/src/lib/i18n/dictionaries/bn.json
index 7e82473e5..e419d3af1 100644
--- a/apps/app/src/lib/i18n/dictionaries/bn.json
+++ b/apps/app/src/lib/i18n/dictionaries/bn.json
@@ -889,7 +889,8 @@
   "Criterion label": "মানদণ্ডের লেবেল",
   "Criterion type": "মানদণ্ডের ধরন",
   "Define how reviewers will evaluate proposals": "পর্যালোচকরা কীভাবে প্রস্তাবগুলি মূল্যায়ন করবেন তা নির্ধারণ করুন",
-  "Label for score {number}": "স্কোর {number} এর লেবেল",
+  "Describe what earns {number} points...": "{number} পয়েন্ট পেতে কী প্রয়োজন তা বর্ণনা করুন...",
+  "Define what each score means": "প্রতিটি স্কোরের অর্থ নির্ধারণ করুন",
   "Max points": "সর্বোচ্চ পয়েন্ট",
   "New criterion": "নতুন মানদণ্ড",
   "No criteria defined": "কোনো মানদণ্ড নির্ধারিত হয়নি",
@@ -898,7 +899,7 @@
   "Rate on a numeric scale with points": "পয়েন্ট সহ সংখ্যাসূচক স্কেলে রেটিং করুন",
   "Remove criterion": "মানদণ্ড সরান",
   "Rubric criteria": "রুব্রিক মানদণ্ড",
-  "Score labels": "স্কোর লেবেল",
+  "Help reviewers score consistently by describing what each point value represents": "প্রতিটি পয়েন্ট মান কী বোঝায় তা বর্ণনা করে পর্যালোচকদের ধারাবাহিকভাবে স্কোর করতে সাহায্য করুন",
   "Scored": "স্কোরযুক্ত",
   "Select from custom options": "কাস্টম বিকল্প থেকে নির্বাচন করুন",
   "Simple yes or no answer": "সহজ হ্যাঁ বা না উত্তর",
diff --git a/apps/app/src/lib/i18n/dictionaries/en.json b/apps/app/src/lib/i18n/dictionaries/en.json
index 022fc7b46..67a8b1102 100644
--- a/apps/app/src/lib/i18n/dictionaries/en.json
+++ b/apps/app/src/lib/i18n/dictionaries/en.json
@@ -882,7 +882,8 @@
   "Criterion label": "Criterion label",
   "Criterion type": "Criterion type",
   "Define how reviewers will evaluate proposals": "Define how reviewers will evaluate proposals",
-  "Label for score {number}": "Label for score {number}",
+  "Describe what earns {number} points...": "Describe what earns {number} points...",
+  "Define what each score means": "Define what each score means",
   "Max points": "Max points",
   "New criterion": "New criterion",
   "No criteria defined": "No criteria defined",
@@ -891,7 +892,7 @@
   "Rate on a numeric scale with points": "Rate on a numeric scale with points",
   "Remove criterion": "Remove criterion",
   "Rubric criteria": "Rubric criteria",
-  "Score labels": "Score labels",
+  "Help reviewers score consistently by describing what each point value represents": "Help reviewers score consistently by describing what each point value represents",
   "Scored": "Scored",
   "Select from custom options": "Select from custom options",
   "Simple yes or no answer": "Simple yes or no answer",
diff --git a/apps/app/src/lib/i18n/dictionaries/es.json b/apps/app/src/lib/i18n/dictionaries/es.json
index 61145d9d3..484c1f8bd 100644
--- a/apps/app/src/lib/i18n/dictionaries/es.json
+++ b/apps/app/src/lib/i18n/dictionaries/es.json
@@ -882,7 +882,8 @@
   "Criterion label": "Etiqueta del criterio",
   "Criterion type": "Tipo de criterio",
   "Define how reviewers will evaluate proposals": "Define cómo los revisores evaluarán las propuestas",
-  "Label for score {number}": "Etiqueta para puntuación {number}",
+  "Describe what earns {number} points...": "Describa qué merece {number} puntos...",
+  "Define what each score means": "Defina qué significa cada puntuación",
   "Max points": "Puntos máximos",
   "New criterion": "Nuevo criterio",
   "No criteria defined": "No hay criterios definidos",
@@ -891,7 +892,7 @@
   "Rate on a numeric scale with points": "Calificar en una escala numérica con puntos",
   "Remove criterion": "Eliminar criterio",
   "Rubric criteria": "Criterios de rúbrica",
-  "Score labels": "Etiquetas de puntuación",
+  "Help reviewers score consistently by describing what each point value represents": "Ayude a los revisores a puntuar de manera consistente describiendo lo que representa cada valor de punto",
   "Scored": "Puntuado",
   "Select from custom options": "Seleccionar entre opciones personalizadas",
   "Simple yes or no answer": "Respuesta simple de sí o no",
diff --git a/apps/app/src/lib/i18n/dictionaries/fr.json b/apps/app/src/lib/i18n/dictionaries/fr.json
index 42805064d..2d2214e4f 100644
--- a/apps/app/src/lib/i18n/dictionaries/fr.json
+++ b/apps/app/src/lib/i18n/dictionaries/fr.json
@@ -882,7 +882,8 @@
   "Criterion label": "Libellé du critère",
   "Criterion type": "Type de critère",
   "Define how reviewers will evaluate proposals": "Définissez comment les évaluateurs noteront les propositions",
-  "Label for score {number}": "Libellé pour la note {number}",
+  "Describe what earns {number} points...": "Décrivez ce qui mérite {number} points...",
+  "Define what each score means": "Définissez ce que signifie chaque note",
   "Max points": "Points maximum",
   "New criterion": "Nouveau critère",
   "No criteria defined": "Aucun critère défini",
@@ -891,7 +892,7 @@
   "Rate on a numeric scale with points": "Noter sur une échelle numérique avec des points",
   "Remove criterion": "Supprimer le critère",
   "Rubric criteria": "Critères de la grille",
-  "Score labels": "Libellés des notes",
+  "Help reviewers score consistently by describing what each point value represents": "Aidez les évaluateurs à noter de manière cohérente en décrivant ce que représente chaque valeur de point",
   "Scored": "Noté",
   "Select from custom options": "Sélectionner parmi des options personnalisées",
   "Simple yes or no answer": "Réponse simple oui ou non",
diff --git a/apps/app/src/lib/i18n/dictionaries/pt.json b/apps/app/src/lib/i18n/dictionaries/pt.json
index 010fd0f3f..6276b4d1d 100644
--- a/apps/app/src/lib/i18n/dictionaries/pt.json
+++ b/apps/app/src/lib/i18n/dictionaries/pt.json
@@ -882,7 +882,8 @@
   "Criterion label": "Rótulo do critério",
   "Criterion type": "Tipo de critério",
   "Define how reviewers will evaluate proposals": "Defina como os avaliadores irão avaliar as propostas",
-  "Label for score {number}": "Rótulo para a nota {number}",
+  "Describe what earns {number} points...": "Descreva o que merece {number} pontos...",
+  "Define what each score means": "Defina o que cada nota significa",
   "Max points": "Pontos máximos",
   "New criterion": "Novo critério",
   "No criteria defined": "Nenhum critério definido",
@@ -891,7 +892,7 @@
   "Rate on a numeric scale with points": "Avaliar numa escala numérica com pontos",
   "Remove criterion": "Remover critério",
   "Rubric criteria": "Critérios da rubrica",
-  "Score labels": "Rótulos das notas",
+  "Help reviewers score consistently by describing what each point value represents": "Ajude os avaliadores a pontuar de forma consistente descrevendo o que cada valor de ponto representa",
   "Scored": "Pontuado",
   "Select from custom options": "Selecionar entre opções personalizadas",
   "Simple yes or no answer": "Resposta simples de sim ou não",
diff --git a/packages/ui/src/components/RadioGroup.tsx b/packages/ui/src/components/RadioGroup.tsx
index 679358e66..bad6f6418 100644
--- a/packages/ui/src/components/RadioGroup.tsx
+++ b/packages/ui/src/components/RadioGroup.tsx
@@ -12,6 +12,7 @@ import type {
 } from 'react-aria-components';
 import { tv } from 'tailwind-variants';
 
+import { cn } from '../lib/utils';
 import { composeTailwindRenderProps } from '../utils';
 import { Description, FieldError, Label } from './Field';
 
@@ -20,6 +21,7 @@ export interface RadioGroupProps extends Omit<RACRadioGroupProps, 'children'> {
   children?: ReactNode;
   description?: string;
   errorMessage?: string | ((validation: ValidationResult) => string);
+  labelClassName?: string;
 }
 
 export const RadioGroup = (props: RadioGroupProps) => {
@@ -31,7 +33,7 @@ export const RadioGroup = (props: RadioGroupProps) => {
         'group flex flex-col gap-2',
       )}
     >
-      <Label className="text-neutral-charcoal">
+      <Label className={cn(props.labelClassName, 'text-functional-charcoal')}>
         {props.label}
         {props.isRequired && <span className="text-functional-red"> *</span>}
       </Label>

From 146bc73510b32e65fb46138eb54eb5e178ef74b4 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Mon, 2 Mar 2026 11:29:01 -0500
Subject: [PATCH 14/38] Remove default score labels for scored criteria

New scored criteria now start with empty label strings instead of
'Poor/Below Average/Average/Good/Excellent'. The placeholder text
in the textareas guides the user on what to fill in.
---
 apps/app/src/components/decisions/rubricTemplate.ts | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index 33072bb28..98dab63a4 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -44,14 +44,6 @@ export interface CriterionView {
 
 const DEFAULT_MAX_POINTS = 5;
 
-const DEFAULT_SCORE_LABELS: Record<number, string> = {
-  1: 'Poor',
-  2: 'Below Average',
-  3: 'Average',
-  4: 'Good',
-  5: 'Excellent',
-};
-
 /**
  * Create the JSON Schema for a given criterion type.
  */
@@ -63,7 +55,7 @@ export function createCriterionJsonSchema(
       const max = DEFAULT_MAX_POINTS;
       const oneOf = Array.from({ length: max }, (_, i) => ({
         const: i + 1,
-        title: DEFAULT_SCORE_LABELS[i + 1] ?? `${i + 1}`,
+        title: '',
       }));
       return {
         type: 'integer',
@@ -472,7 +464,7 @@ export function updateScoredMaxPoints(
 
   const oneOf = Array.from({ length: clampedMax }, (_, i) => ({
     const: i + 1,
-    title: existingLabels[i] ?? DEFAULT_SCORE_LABELS[i + 1] ?? `${i + 1}`,
+    title: existingLabels[i] ?? '',
   }));
 
   return {

From 057ba731ce53b3ac1495ae09f04fc9e2d153870f Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Mon, 2 Mar 2026 12:06:24 -0500
Subject: [PATCH 15/38] Fix score labels jumping between textareas on edit

getCriterionScoreLabels was sorting oneOf entries descending
(b.const - a.const) so score 5 appeared at index 0, but
updateScoreLabel writes by raw oneOf array index where score 1
is at index 0. Changed to ascending sort (a.const - b.const)
so the displayed order matches the storage order.
---
 apps/app/src/components/decisions/rubricTemplate.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index 98dab63a4..817b44d66 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -217,7 +217,7 @@ export function getCriterionScoreLabels(
         'title' in e &&
         typeof (e as { title: unknown }).title === 'string',
     )
-    .sort((a, b) => b.const - a.const)
+    .sort((a, b) => a.const - b.const)
     .map((e) => e.title);
 }
 

From 5bb2ea81e4162a5095083b6be041faaf9b54cee2 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Mon, 2 Mar 2026 12:09:14 -0500
Subject: [PATCH 16/38] Fix score labels jumping: use score value instead of
 array index

Restore descending sort in getCriterionScoreLabels (highest score
first) and change updateScoreLabel to match oneOf entries by their
.const value rather than array position. The UI now derives the
score value from the descending index (max - i) and passes it
through, so edits land on the correct score level.
---
 .../rubric/RubricCriterionCard.tsx            | 47 ++++++++++---------
 .../rubric/RubricEditorContent.tsx            |  4 +-
 .../components/decisions/rubricTemplate.ts    | 15 ++++--
 3 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index d6c03f844..f00b9fa92 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -42,7 +42,7 @@ interface RubricCriterionCardProps {
   onUpdateMaxPoints?: (criterionId: string, maxPoints: number) => void;
   onUpdateScoreLabel?: (
     criterionId: string,
-    scoreIndex: number,
+    scoreValue: number,
     label: string,
   ) => void;
 }
@@ -166,8 +166,8 @@ export function RubricCriterionCard({
                 onUpdateMaxPoints={(max) =>
                   onUpdateMaxPoints?.(criterion.id, max)
                 }
-                onUpdateScoreLabel={(scoreIndex, label) =>
-                  onUpdateScoreLabel?.(criterion.id, scoreIndex, label)
+                onUpdateScoreLabel={(scoreValue, label) =>
+                  onUpdateScoreLabel?.(criterion.id, scoreValue, label)
                 }
               />
             </>
@@ -242,7 +242,7 @@ function ScoredCriterionConfig({
 }: {
   criterion: CriterionView;
   onUpdateMaxPoints: (max: number) => void;
-  onUpdateScoreLabel: (index: number, label: string) => void;
+  onUpdateScoreLabel: (scoreValue: number, label: string) => void;
 }) {
   const t = useTranslations();
   const max = criterion.maxPoints ?? 5;
@@ -270,24 +270,27 @@ function ScoredCriterionConfig({
           )}
         </p>
         <div className="space-y-4">
-          {criterion.scoreLabels.map((label, scoreIndex) => (
-            <div key={scoreIndex} className="flex items-start gap-2">
-              <span className="flex size-8 shrink-0 items-center justify-center rounded bg-neutral-gray1 text-center text-right font-serif text-title-base text-neutral-gray4">
-                {scoreIndex + 1}
-              </span>
-              <TextField
-                useTextArea
-                value={label}
-                onChange={(value) => onUpdateScoreLabel(scoreIndex, value)}
-                textareaProps={{
-                  placeholder: t('Describe what earns {number} points...', {
-                    number: scoreIndex + 1,
-                  }),
-                }}
-                className="w-full"
-              />
-            </div>
-          ))}
+          {criterion.scoreLabels.map((label, i) => {
+            const scoreValue = max - i;
+            return (
+              <div key={scoreValue} className="flex items-start gap-2">
+                <span className="flex size-8 shrink-0 items-center justify-center rounded bg-neutral-gray1 text-center text-right font-serif text-title-base text-neutral-gray4">
+                  {scoreValue}
+                </span>
+                <TextField
+                  useTextArea
+                  value={label}
+                  onChange={(value) => onUpdateScoreLabel(scoreValue, value)}
+                  textareaProps={{
+                    placeholder: t('Describe what earns {number} points...', {
+                      number: scoreValue,
+                    }),
+                  }}
+                  className="w-full"
+                />
+              </div>
+            );
+          })}
         </div>
       </div>
     </div>
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 603b849b9..f017c88b8 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -203,9 +203,9 @@ export function RubricEditorContent({
   );
 
   const handleUpdateScoreLabel = useCallback(
-    (criterionId: string, scoreIndex: number, label: string) => {
+    (criterionId: string, scoreValue: number, label: string) => {
       setTemplate((prev) =>
-        updateScoreLabel(prev, criterionId, scoreIndex, label),
+        updateScoreLabel(prev, criterionId, scoreValue, label),
       );
     },
     [],
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index 817b44d66..6070b56ec 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -217,7 +217,7 @@ export function getCriterionScoreLabels(
         'title' in e &&
         typeof (e as { title: unknown }).title === 'string',
     )
-    .sort((a, b) => a.const - b.const)
+    .sort((a, b) => b.const - a.const)
     .map((e) => e.title);
 }
 
@@ -482,11 +482,13 @@ export function updateScoredMaxPoints(
 
 /**
  * Update a single score label for a scored criterion.
+ * `scoreValue` is the 1-based score (the `.const` in the oneOf entry),
+ * not an array index.
  */
 export function updateScoreLabel(
   template: RubricTemplateSchema,
   criterionId: string,
-  scoreIndex: number,
+  scoreValue: number,
   label: string,
 ): RubricTemplateSchema {
   const schema = getCriterionSchema(template, criterionId);
@@ -494,8 +496,13 @@ export function updateScoreLabel(
     return template;
   }
 
-  const oneOf = schema.oneOf.map((entry, i) => {
-    if (i === scoreIndex && typeof entry === 'object' && entry !== null) {
+  const oneOf = schema.oneOf.map((entry) => {
+    if (
+      typeof entry === 'object' &&
+      entry !== null &&
+      'const' in entry &&
+      (entry as { const: number }).const === scoreValue
+    ) {
       return { ...entry, title: label };
     }
     return entry;

From 45aa385cc1a81443488c9343e0887c7810253218 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Mon, 2 Mar 2026 16:55:08 -0500
Subject: [PATCH 17/38] Preserve scored config when switching criterion type
 and back

Cache the scored criterion's max points and score labels in a ref
when the user switches away from 'scored'. If they switch back,
the cached config is restored instead of generating blank defaults.
The cache is cleared when a criterion is deleted.
---
 .../rubric/RubricEditorContent.tsx            | 22 ++++++++-
 .../components/decisions/rubricTemplate.ts    | 49 +++++++++++++++++++
 2 files changed, 70 insertions(+), 1 deletion(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index f017c88b8..63ccdfc05 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -19,6 +19,7 @@ import { useTranslations } from '@/lib/i18n';
 import type {
   CriterionView,
   RubricCriterionType,
+  ScoredConfig,
 } from '../../../../decisions/rubricTemplate';
 import {
   addCriterion,
@@ -26,6 +27,7 @@ import {
   createEmptyRubricTemplate,
   getCriteria,
   getCriterionErrors,
+  getScoredConfig,
   removeCriterion,
   reorderCriteria,
   updateCriterionDescription,
@@ -82,6 +84,9 @@ export function RubricEditorContent({
     null,
   );
 
+  // Cache scored config so switching type and back doesn't lose score labels
+  const scoredConfigCacheRef = useRef<Map<string, ScoredConfig>>(new Map());
+
   const setRubricTemplateSchema = useProcessBuilderStore(
     (s) => s.setRubricTemplateSchema,
   );
@@ -158,6 +163,7 @@ export function RubricEditorContent({
       next.delete(criterionToDelete);
       return next;
     });
+    scoredConfigCacheRef.current.delete(criterionToDelete);
     setCriterionToDelete(null);
   }, [criterionToDelete]);
 
@@ -188,7 +194,21 @@ export function RubricEditorContent({
 
   const handleChangeType = useCallback(
     (criterionId: string, newType: RubricCriterionType) => {
-      setTemplate((prev) => changeCriterionType(prev, criterionId, newType));
+      setTemplate((prev) => {
+        // Stash scored config before switching away from scored
+        const currentConfig = getScoredConfig(prev, criterionId);
+        if (currentConfig) {
+          scoredConfigCacheRef.current.set(criterionId, currentConfig);
+        }
+
+        // Restore cached scored config when switching back to scored
+        const cached =
+          newType === 'scored'
+            ? scoredConfigCacheRef.current.get(criterionId)
+            : undefined;
+
+        return changeCriterionType(prev, criterionId, newType, cached);
+      });
     },
     [],
   );
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index 6070b56ec..135796b78 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -390,14 +390,57 @@ export function setCriterionRequired(
   };
 }
 
+/**
+ * Scored configuration that can be cached in component state so the user
+ * doesn't lose their score labels when temporarily switching criterion type.
+ */
+export interface ScoredConfig {
+  maximum: number;
+  oneOf: { const: number; title: string }[];
+}
+
+/**
+ * Extract the scored configuration from a criterion's schema.
+ * Returns `undefined` if the criterion is not a scored type.
+ */
+export function getScoredConfig(
+  template: RubricTemplateSchema,
+  criterionId: string,
+): ScoredConfig | undefined {
+  const schema = getCriterionSchema(template, criterionId);
+  if (
+    !schema ||
+    schema.type !== 'integer' ||
+    typeof schema.maximum !== 'number'
+  ) {
+    return undefined;
+  }
+  const oneOf = (Array.isArray(schema.oneOf) ? schema.oneOf : [])
+    .filter(
+      (e): e is { const: number; title: string } =>
+        typeof e === 'object' &&
+        e !== null &&
+        'const' in e &&
+        'title' in e &&
+        typeof (e as { title: unknown }).title === 'string',
+    )
+    .sort((a, b) => a.const - b.const);
+
+  return { maximum: schema.maximum, oneOf };
+}
+
 /**
  * Change a criterion's type while preserving its label, description, and
  * required status. The schema is rebuilt from scratch for the new type.
+ *
+ * If switching back to `scored` and a `cachedScoredConfig` is provided,
+ * the cached maximum / oneOf are restored instead of generating blank defaults.
  */
 export function changeCriterionType(
   template: RubricTemplateSchema,
   criterionId: string,
   newType: RubricCriterionType,
+  cachedScoredConfig?: ScoredConfig,
 ): RubricTemplateSchema {
   const existing = getCriterionSchema(template, criterionId);
   if (!existing) {
@@ -412,6 +455,12 @@ export function changeCriterionType(
     newSchema.description = existing.description;
   }
 
+  // Restore cached scored config when switching back to scored
+  if (newType === 'scored' && cachedScoredConfig) {
+    newSchema.maximum = cachedScoredConfig.maximum;
+    newSchema.oneOf = cachedScoredConfig.oneOf;
+  }
+
   return {
     ...template,
     properties: {

From 99826ee00f9b6693c28dfa770dae8df466d21efc Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 09:51:52 -0500
Subject: [PATCH 18/38] Move scored config caching from rubricTemplate into
 RubricEditorContent

The ScoredConfig type and getScoredConfig helper were domain utilities
but only served the UI caching concern. Move this logic into the
component that owns it, keeping rubricTemplate.ts focused on pure
schema operations.
---
 .../rubric/RubricEditorContent.tsx            | 39 ++++++++++-----
 .../components/decisions/rubricTemplate.ts    | 49 -------------------
 2 files changed, 28 insertions(+), 60 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 63ccdfc05..69a0d338d 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -19,7 +19,6 @@ import { useTranslations } from '@/lib/i18n';
 import type {
   CriterionView,
   RubricCriterionType,
-  ScoredConfig,
 } from '../../../../decisions/rubricTemplate';
 import {
   addCriterion,
@@ -27,10 +26,11 @@ import {
   createEmptyRubricTemplate,
   getCriteria,
   getCriterionErrors,
-  getScoredConfig,
+  getCriterionSchema,
   removeCriterion,
   reorderCriteria,
   updateCriterionDescription,
+  updateCriterionJsonSchema,
   updateCriterionLabel,
   updateScoreLabel,
   updateScoredMaxPoints,
@@ -85,7 +85,9 @@ export function RubricEditorContent({
   );
 
   // Cache scored config so switching type and back doesn't lose score labels
-  const scoredConfigCacheRef = useRef<Map<string, ScoredConfig>>(new Map());
+  const scoredConfigCacheRef = useRef<
+    Map<string, { maximum: number; oneOf: unknown[] }>
+  >(new Map());
 
   const setRubricTemplateSchema = useProcessBuilderStore(
     (s) => s.setRubricTemplateSchema,
@@ -196,18 +198,33 @@ export function RubricEditorContent({
     (criterionId: string, newType: RubricCriterionType) => {
       setTemplate((prev) => {
         // Stash scored config before switching away from scored
-        const currentConfig = getScoredConfig(prev, criterionId);
-        if (currentConfig) {
-          scoredConfigCacheRef.current.set(criterionId, currentConfig);
+        const schema = getCriterionSchema(prev, criterionId);
+        if (
+          schema?.type === 'integer' &&
+          typeof schema.maximum === 'number' &&
+          Array.isArray(schema.oneOf)
+        ) {
+          scoredConfigCacheRef.current.set(criterionId, {
+            maximum: schema.maximum,
+            oneOf: schema.oneOf,
+          });
         }
 
+        // Change the type (rebuilds schema from scratch)
+        let updated = changeCriterionType(prev, criterionId, newType);
+
         // Restore cached scored config when switching back to scored
-        const cached =
-          newType === 'scored'
-            ? scoredConfigCacheRef.current.get(criterionId)
-            : undefined;
+        if (newType === 'scored') {
+          const cached = scoredConfigCacheRef.current.get(criterionId);
+          if (cached) {
+            updated = updateCriterionJsonSchema(updated, criterionId, {
+              maximum: cached.maximum,
+              oneOf: cached.oneOf as { const: number; title: string }[],
+            });
+          }
+        }
 
-        return changeCriterionType(prev, criterionId, newType, cached);
+        return updated;
       });
     },
     [],
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index 135796b78..6070b56ec 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -390,57 +390,14 @@ export function setCriterionRequired(
   };
 }
 
-/**
- * Scored configuration that can be cached in component state so the user
- * doesn't lose their score labels when temporarily switching criterion type.
- */
-export interface ScoredConfig {
-  maximum: number;
-  oneOf: { const: number; title: string }[];
-}
-
-/**
- * Extract the scored configuration from a criterion's schema.
- * Returns `undefined` if the criterion is not a scored type.
- */
-export function getScoredConfig(
-  template: RubricTemplateSchema,
-  criterionId: string,
-): ScoredConfig | undefined {
-  const schema = getCriterionSchema(template, criterionId);
-  if (
-    !schema ||
-    schema.type !== 'integer' ||
-    typeof schema.maximum !== 'number'
-  ) {
-    return undefined;
-  }
-  const oneOf = (Array.isArray(schema.oneOf) ? schema.oneOf : [])
-    .filter(
-      (e): e is { const: number; title: string } =>
-        typeof e === 'object' &&
-        e !== null &&
-        'const' in e &&
-        'title' in e &&
-        typeof (e as { title: unknown }).title === 'string',
-    )
-    .sort((a, b) => a.const - b.const);
-
-  return { maximum: schema.maximum, oneOf };
-}
-
 /**
  * Change a criterion's type while preserving its label, description, and
  * required status. The schema is rebuilt from scratch for the new type.
- *
- * If switching back to `scored` and a `cachedScoredConfig` is provided,
- * the cached maximum / oneOf are restored instead of generating blank defaults.
  */
 export function changeCriterionType(
   template: RubricTemplateSchema,
   criterionId: string,
   newType: RubricCriterionType,
-  cachedScoredConfig?: ScoredConfig,
 ): RubricTemplateSchema {
   const existing = getCriterionSchema(template, criterionId);
   if (!existing) {
@@ -455,12 +412,6 @@ export function changeCriterionType(
     newSchema.description = existing.description;
   }
 
-  // Restore cached scored config when switching back to scored
-  if (newType === 'scored' && cachedScoredConfig) {
-    newSchema.maximum = cachedScoredConfig.maximum;
-    newSchema.oneOf = cachedScoredConfig.oneOf;
-  }
-
   return {
     ...template,
     properties: {

From d8776a3654373eafb0ab528e93b7a9ebf4c5da4d Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 10:05:25 -0500
Subject: [PATCH 19/38] Hide coming soon on mobile

---
 .../decisions/ProcessBuilder/ProcessBuilderHeader.tsx        | 5 ++++-
 packages/ui/src/components/RadioGroup.tsx                    | 2 +-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx b/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx
index 7ddc35177..223213e9b 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/ProcessBuilderHeader.tsx
@@ -256,6 +256,7 @@ const ProcessBuilderHeaderContent = ({
 
 const MobileSidebar = ({ instanceId }: { instanceId: string }) => {
   const t = useTranslations();
+  const rubricBuilderEnabled = useFeatureFlag('rubric_builder');
   const navigationConfig = useNavigationConfig(instanceId);
   const { visibleSteps, currentStep, setStep } =
     useProcessNavigation(navigationConfig);
@@ -297,7 +298,9 @@ const MobileSidebar = ({ instanceId }: { instanceId: string }) => {
                 className="flex h-8 items-center gap-2 bg-transparent selected:bg-neutral-offWhite"
               >
                 {t(step.labelKey)}
-                {step.id === 'rubric' && <ComingSoonIndicator />}
+                {step.id === 'rubric' && !rubricBuilderEnabled && (
+                  <ComingSoonIndicator />
+                )}
               </Tab>
             ))}
           </TabList>
diff --git a/packages/ui/src/components/RadioGroup.tsx b/packages/ui/src/components/RadioGroup.tsx
index bad6f6418..1d1f006df 100644
--- a/packages/ui/src/components/RadioGroup.tsx
+++ b/packages/ui/src/components/RadioGroup.tsx
@@ -33,7 +33,7 @@ export const RadioGroup = (props: RadioGroupProps) => {
         'group flex flex-col gap-2',
       )}
     >
-      <Label className={cn(props.labelClassName, 'text-functional-charcoal')}>
+      <Label className={cn('text-functional-charcoal', props.labelClassName)}>
         {props.label}
         {props.isRequired && <span className="text-functional-red"> *</span>}
       </Label>

From 95adf71239d47632161040fe662dd14ad1a3bb1a Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 10:18:21 -0500
Subject: [PATCH 20/38] Adapt rubric editor to typed translations

Use TranslationKey instead of string for translation keys in the
criterion registry, validation errors, and error display props to
satisfy the strict typing introduced by the Typed Translations PR.
---
 .../stepContent/rubric/RubricCriterionCard.tsx             | 3 ++-
 .../stepContent/rubric/RubricEditorContent.tsx             | 7 ++++---
 .../stepContent/rubric/rubricCriterionRegistry.tsx         | 6 ++++--
 apps/app/src/components/decisions/rubricTemplate.ts        | 6 ++++--
 4 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index f00b9fa92..0ea84b919 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -15,6 +15,7 @@ import { TextField } from '@op/ui/TextField';
 import { LuGripVertical, LuTrash2 } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
+import type { TranslationKey } from '@/lib/i18n/routing';
 
 import type {
   CriterionView,
@@ -33,7 +34,7 @@ interface RubricCriterionCardProps {
   criterion: CriterionView;
   /** 1-based display index for the header (e.g. "Criterion 1") */
   index: number;
-  errors?: string[];
+  errors?: TranslationKey[];
   controls?: SortableItemControls;
   onRemove?: (criterionId: string) => void;
   onUpdateLabel?: (criterionId: string, label: string) => void;
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 69a0d338d..ff5eea00c 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -15,6 +15,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LuLeaf, LuPlus } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
+import type { TranslationKey } from '@/lib/i18n/routing';
 
 import type {
   CriterionView,
@@ -72,9 +73,9 @@ export function RubricEditorContent({
   const isInitialLoadRef = useRef(true);
 
   // Validation: "show on blur, clear on change"
-  const [criterionErrors, setCriterionErrors] = useState<Map<string, string[]>>(
-    new Map(),
-  );
+  const [criterionErrors, setCriterionErrors] = useState<
+    Map<string, TranslationKey[]>
+  >(new Map());
 
   // Accordion expansion state
   const [expandedKeys, setExpandedKeys] = useState<Set<Key>>(new Set());
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
index d8a060254..f07629338 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
@@ -1,3 +1,5 @@
+import type { TranslationKey } from '@/lib/i18n/routing';
+
 import type { RubricCriterionType } from '../../../../decisions/rubricTemplate';
 
 /**
@@ -5,9 +7,9 @@ import type { RubricCriterionType } from '../../../../decisions/rubricTemplate';
  */
 interface CriterionTypeRegistryEntry {
   /** Translation key for the type label */
-  labelKey: string;
+  labelKey: TranslationKey;
   /** Translation key for a short description shown in the radio selector */
-  descriptionKey: string;
+  descriptionKey: TranslationKey;
 }
 
 export const CRITERION_TYPE_REGISTRY: Record<
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index 6070b56ec..ce9986d0e 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -13,6 +13,8 @@ import type {
   XFormatPropertySchema,
 } from '@op/common/client';
 
+import type { TranslationKey } from '@/lib/i18n/routing';
+
 export type { RubricTemplateSchema };
 
 // ---------------------------------------------------------------------------
@@ -265,8 +267,8 @@ export function getCriteria(template: RubricTemplateSchema): CriterionView[] {
  * Returns translation keys for validation errors on a criterion.
  * Pass each key through `t()` in the UI layer.
  */
-export function getCriterionErrors(criterion: CriterionView): string[] {
-  const errors: string[] = [];
+export function getCriterionErrors(criterion: CriterionView): TranslationKey[] {
+  const errors: TranslationKey[] = [];
 
   if (!criterion.label.trim()) {
     errors.push('Criterion label is required');

From c130127aa440cad04e0ab2e8852b19c2389d1137 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 11:09:05 -0500
Subject: [PATCH 21/38] Fix label sorting

---
 .../ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx | 2 +-
 apps/app/src/components/decisions/rubricTemplate.ts           | 4 ++--
 apps/app/src/lib/i18n/dictionaries/bn.json                    | 1 -
 apps/app/src/lib/i18n/dictionaries/en.json                    | 1 -
 apps/app/src/lib/i18n/dictionaries/es.json                    | 1 -
 apps/app/src/lib/i18n/dictionaries/fr.json                    | 1 -
 apps/app/src/lib/i18n/dictionaries/pt.json                    | 1 -
 7 files changed, 3 insertions(+), 8 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index 0ea84b919..9de0a3ab6 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -271,7 +271,7 @@ function ScoredCriterionConfig({
           )}
         </p>
         <div className="space-y-4">
-          {criterion.scoreLabels.map((label, i) => {
+          {[...criterion.scoreLabels].reverse().map((label, i) => {
             const scoreValue = max - i;
             return (
               <div key={scoreValue} className="flex items-start gap-2">
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index ce9986d0e..a1b4e2097 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -36,7 +36,7 @@ export interface CriterionView {
   required: boolean;
   /** Maximum points for scored criteria. */
   maxPoints?: number;
-  /** Labels for each score level (index 0 = score 1). Scored criteria only. */
+  /** Labels for each score level (index 0 = score 1, ascending). Scored criteria only. */
   scoreLabels: string[];
 }
 
@@ -219,7 +219,7 @@ export function getCriterionScoreLabels(
         'title' in e &&
         typeof (e as { title: unknown }).title === 'string',
     )
-    .sort((a, b) => b.const - a.const)
+    .sort((a, b) => a.const - b.const)
     .map((e) => e.title);
 }
 
diff --git a/apps/app/src/lib/i18n/dictionaries/bn.json b/apps/app/src/lib/i18n/dictionaries/bn.json
index e419d3af1..acc35f944 100644
--- a/apps/app/src/lib/i18n/dictionaries/bn.json
+++ b/apps/app/src/lib/i18n/dictionaries/bn.json
@@ -923,7 +923,6 @@
   "Text response only": "শুধুমাত্র পাঠ্য প্রতিক্রিয়া",
   "No score, just written feedback": "কোনো স্কোর নেই, শুধু লিখিত প্রতিক্রিয়া",
   "Score labels cannot be empty": "স্কোর লেবেল খালি রাখা যাবে না",
-  "Start typing...": "টাইপ শুরু করুন...",
   "Delete criterion": "মানদণ্ড মুছুন",
   "Are you sure you want to delete this criterion? This action cannot be undone.": "আপনি কি নিশ্চিত যে এই মানদণ্ডটি মুছতে চান? এই কাজটি পূর্বাবস্থায় ফেরানো যাবে না।"
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/en.json b/apps/app/src/lib/i18n/dictionaries/en.json
index 67a8b1102..a81b9ec3c 100644
--- a/apps/app/src/lib/i18n/dictionaries/en.json
+++ b/apps/app/src/lib/i18n/dictionaries/en.json
@@ -916,7 +916,6 @@
   "Text response only": "Text response only",
   "No score, just written feedback": "No score, just written feedback",
   "Score labels cannot be empty": "Score labels cannot be empty",
-  "Start typing...": "Start typing...",
   "Delete criterion": "Delete criterion",
   "Are you sure you want to delete this criterion? This action cannot be undone.": "Are you sure you want to delete this criterion? This action cannot be undone."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/es.json b/apps/app/src/lib/i18n/dictionaries/es.json
index 484c1f8bd..51c898230 100644
--- a/apps/app/src/lib/i18n/dictionaries/es.json
+++ b/apps/app/src/lib/i18n/dictionaries/es.json
@@ -916,7 +916,6 @@
   "Text response only": "Solo respuesta de texto",
   "No score, just written feedback": "Sin puntuación, solo retroalimentación escrita",
   "Score labels cannot be empty": "Las etiquetas de puntuación no pueden estar vacías",
-  "Start typing...": "Comience a escribir...",
   "Delete criterion": "Eliminar criterio",
   "Are you sure you want to delete this criterion? This action cannot be undone.": "¿Está seguro de que desea eliminar este criterio? Esta acción no se puede deshacer."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/fr.json b/apps/app/src/lib/i18n/dictionaries/fr.json
index 2d2214e4f..9e4587b86 100644
--- a/apps/app/src/lib/i18n/dictionaries/fr.json
+++ b/apps/app/src/lib/i18n/dictionaries/fr.json
@@ -916,7 +916,6 @@
   "Text response only": "Réponse textuelle uniquement",
   "No score, just written feedback": "Pas de note, uniquement des commentaires écrits",
   "Score labels cannot be empty": "Les libellés des notes ne peuvent pas être vides",
-  "Start typing...": "Commencez à écrire...",
   "Delete criterion": "Supprimer le critère",
   "Are you sure you want to delete this criterion? This action cannot be undone.": "Êtes-vous sûr de vouloir supprimer ce critère ? Cette action est irréversible."
 }
diff --git a/apps/app/src/lib/i18n/dictionaries/pt.json b/apps/app/src/lib/i18n/dictionaries/pt.json
index 6276b4d1d..079723ca3 100644
--- a/apps/app/src/lib/i18n/dictionaries/pt.json
+++ b/apps/app/src/lib/i18n/dictionaries/pt.json
@@ -916,7 +916,6 @@
   "Text response only": "Apenas resposta de texto",
   "No score, just written feedback": "Sem pontuação, apenas feedback escrito",
   "Score labels cannot be empty": "Os rótulos das notas não podem estar vazios",
-  "Start typing...": "Comece a digitar...",
   "Delete criterion": "Excluir critério",
   "Are you sure you want to delete this criterion? This action cannot be undone.": "Tem certeza de que deseja excluir este critério? Esta ação não pode ser desfeita."
 }

From ae0305d34e7dd9b990a95a104ac6db76aed97645 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 11:28:15 -0500
Subject: [PATCH 22/38] Update styling

---
 .../rubric/RubricCriterionCard.tsx            | 38 ++++++++++++++++---
 .../rubric/RubricEditorContent.tsx            |  7 +++-
 2 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index 9de0a3ab6..b8e8e4883 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -12,7 +12,7 @@ import { Radio, RadioGroup } from '@op/ui/RadioGroup';
 import { DragHandle } from '@op/ui/Sortable';
 import type { SortableItemControls } from '@op/ui/Sortable';
 import { TextField } from '@op/ui/TextField';
-import { LuGripVertical, LuTrash2 } from 'react-icons/lu';
+import { LuChevronRight, LuGripVertical, LuTrash2 } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
 import type { TranslationKey } from '@/lib/i18n/routing';
@@ -119,7 +119,8 @@ export function RubricCriterionCard({
 
       {/* Collapsible body */}
       <AccordionContent>
-        <div className="space-y-4 px-4 pb-4">
+        <hr />
+        <div className="space-y-4 px-4 pt-4 pb-4">
           {/* Criterion name */}
           <TextField
             label={t('Criterion name')}
@@ -302,14 +303,39 @@ function ScoredCriterionConfig({
 // Drag preview
 // ---------------------------------------------------------------------------
 
-export function RubricCriterionDragPreview({ index }: { index: number }) {
+export function RubricCriterionDragPreview({
+  criterion,
+  index,
+}: {
+  criterion: CriterionView;
+  index: number;
+}) {
   const t = useTranslations();
   return (
-    <div className="flex items-center gap-2 rounded-lg border bg-white px-3 py-2 shadow-lg">
-      <LuGripVertical className="size-4 text-neutral-gray4" />
-      <span className="font-medium text-neutral-charcoal">
+    <div className="flex items-center gap-2 rounded-lg border bg-white px-3 py-3 shadow-lg">
+      <div className="grid size-6 place-items-center rounded bg-neutral-offWhite">
+        <LuGripVertical className="size-4 shrink-0 text-neutral-gray4" />
+      </div>
+      <LuChevronRight className="size-4 shrink-0 text-neutral-gray4" />
+      <span className="shrink-0 font-serif text-neutral-charcoal">
         {t('Criterion {number}', { number: index })}
       </span>
+      <span className="truncate text-neutral-gray4">
+        {criterion.label || t('New criterion')}
+      </span>
+      <span className="ml-auto flex shrink-0 items-center gap-1.5">
+        <span className="rounded-sm bg-neutral-gray1 px-1.5 py-0.5 text-xs text-neutral-charcoal">
+          {t(CRITERION_TYPE_REGISTRY[criterion.criterionType].labelKey)}
+        </span>
+        {criterion.criterionType === 'scored' && criterion.maxPoints && (
+          <span className="bg-primary-mint/20 text-primary-tealDark rounded-sm px-1.5 py-0.5 text-xs">
+            {criterion.maxPoints} {t('pts')}
+          </span>
+        )}
+        <div className="ml-0.5 grid w-8 place-items-center rounded">
+          <LuTrash2 className="size-4 shrink-0 text-neutral-gray3" />
+        </div>
+      </span>
     </div>
   );
 }
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index ff5eea00c..0658ba6ad 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -306,7 +306,12 @@ export function RubricEditorContent({
                       return null;
                     }
                     const idx = criteria.findIndex((c) => c.id === item.id) + 1;
-                    return <RubricCriterionDragPreview index={idx} />;
+                    return (
+                      <RubricCriterionDragPreview
+                        criterion={item}
+                        index={idx}
+                      />
+                    );
                   }}
                   renderDropIndicator={RubricCriterionDropIndicator}
                   aria-label={t('Rubric criteria')}

From ad97b3a7e9e3de86ad718baae37885e8a2cf822e Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 11:35:50 -0500
Subject: [PATCH 23/38] Error boundary and types

---
 .../stepContent/rubric/CriteriaSection.tsx             | 10 +++++++---
 .../ProcessBuilder/stores/useProcessBuilderStore.ts    |  5 +++--
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
index bcd6ba78e..124267eaf 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
@@ -5,15 +5,19 @@ import { Suspense } from 'react';
 
 import { useTranslations } from '@/lib/i18n';
 
+import ErrorBoundary from '@/components/ErrorBoundary';
+
 import type { SectionProps } from '../../contentRegistry';
 import { CodeAnimation } from './RubricComingSoonAnimation';
 import { RubricEditorContent } from './RubricEditorContent';
 
 export default function CriteriaSection(props: SectionProps) {
   return (
-    <Suspense>
-      <CriteriaSectionContent {...props} />
-    </Suspense>
+    <ErrorBoundary>
+      <Suspense>
+        <CriteriaSectionContent {...props} />
+      </Suspense>
+    </ErrorBoundary>
   );
 }
 
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stores/useProcessBuilderStore.ts b/apps/app/src/components/decisions/ProcessBuilder/stores/useProcessBuilderStore.ts
index f6edba442..eddfab236 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stores/useProcessBuilderStore.ts
+++ b/apps/app/src/components/decisions/ProcessBuilder/stores/useProcessBuilderStore.ts
@@ -45,14 +45,15 @@ import { createJSONStorage, persist } from 'zustand/middleware';
  * `stewardProfileId`) that live outside the JSON blob.
  */
 export interface ProcessBuilderInstanceData
-  extends Omit<Partial<InstanceData>, 'proposalTemplate'> {
+  extends Omit<Partial<InstanceData>, 'proposalTemplate' | 'rubricTemplate'> {
   // Instance columns (not in instanceData JSON)
   name?: string;
   description?: string;
   stewardProfileId?: string;
 
-  // Override InstanceData's proposalTemplate with form-specific type
+  // Override InstanceData's generic JSON Schema types with specific ones
   proposalTemplate?: ProposalTemplateSchema;
+  rubricTemplate?: RubricTemplateSchema;
 }
 
 // ============ UI-only Types ============

From 3817060bc4cf7e20a8ace54e17585d3d76f07d81 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 12:34:47 -0500
Subject: [PATCH 24/38] Simplify

---
 .../rubric/RubricCriterionCard.tsx            | 52 ++++++++++---------
 .../rubric/RubricEditorContent.tsx            |  9 ++--
 apps/app/src/lib/i18n/dictionaries/bn.json    | 11 ----
 apps/app/src/lib/i18n/dictionaries/en.json    | 11 ----
 apps/app/src/lib/i18n/dictionaries/es.json    | 11 ----
 apps/app/src/lib/i18n/dictionaries/fr.json    | 11 ----
 apps/app/src/lib/i18n/dictionaries/pt.json    | 11 ----
 packages/ui/src/components/RadioGroup.tsx     |  2 +-
 8 files changed, 35 insertions(+), 83 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index b8e8e4883..a01f01eda 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -93,16 +93,7 @@ export function RubricCriterionCard({
           <span className="truncate text-left text-neutral-gray4">
             {criterion.label || t('New criterion')}
           </span>
-          <span className="ml-auto flex shrink-0 items-center gap-1.5">
-            <span className="rounded-sm bg-neutral-gray1 px-1.5 py-0.5 text-xs text-neutral-charcoal">
-              {t(CRITERION_TYPE_REGISTRY[criterion.criterionType].labelKey)}
-            </span>
-            {criterion.criterionType === 'scored' && criterion.maxPoints && (
-              <span className="bg-primary-mint/20 text-primary-tealDark rounded-sm px-1.5 py-0.5 text-xs">
-                {criterion.maxPoints} {t('pts')}
-              </span>
-            )}
-          </span>
+          <CriterionBadges criterion={criterion} />
         </AccordionTrigger>
         {onRemove && (
           <Button
@@ -272,7 +263,9 @@ function ScoredCriterionConfig({
           )}
         </p>
         <div className="space-y-4">
-          {[...criterion.scoreLabels].reverse().map((label, i) => {
+          {criterion.scoreLabels.map((_, i) => {
+            const revIdx = criterion.scoreLabels.length - 1 - i;
+            const label = criterion.scoreLabels[revIdx]!;
             const scoreValue = max - i;
             return (
               <div key={scoreValue} className="flex items-start gap-2">
@@ -299,6 +292,26 @@ function ScoredCriterionConfig({
   );
 }
 
+// ---------------------------------------------------------------------------
+// Shared criterion badges (type + points)
+// ---------------------------------------------------------------------------
+
+function CriterionBadges({ criterion }: { criterion: CriterionView }) {
+  const t = useTranslations();
+  return (
+    <span className="ml-auto flex shrink-0 items-center gap-1.5">
+      <span className="rounded-sm bg-neutral-gray1 px-1.5 py-0.5 text-xs text-neutral-charcoal">
+        {t(CRITERION_TYPE_REGISTRY[criterion.criterionType].labelKey)}
+      </span>
+      {criterion.criterionType === 'scored' && criterion.maxPoints && (
+        <span className="bg-primary-mint/20 text-primary-tealDark rounded-sm px-1.5 py-0.5 text-xs">
+          {criterion.maxPoints} {t('pts')}
+        </span>
+      )}
+    </span>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Drag preview
 // ---------------------------------------------------------------------------
@@ -323,19 +336,10 @@ export function RubricCriterionDragPreview({
       <span className="truncate text-neutral-gray4">
         {criterion.label || t('New criterion')}
       </span>
-      <span className="ml-auto flex shrink-0 items-center gap-1.5">
-        <span className="rounded-sm bg-neutral-gray1 px-1.5 py-0.5 text-xs text-neutral-charcoal">
-          {t(CRITERION_TYPE_REGISTRY[criterion.criterionType].labelKey)}
-        </span>
-        {criterion.criterionType === 'scored' && criterion.maxPoints && (
-          <span className="bg-primary-mint/20 text-primary-tealDark rounded-sm px-1.5 py-0.5 text-xs">
-            {criterion.maxPoints} {t('pts')}
-          </span>
-        )}
-        <div className="ml-0.5 grid w-8 place-items-center rounded">
-          <LuTrash2 className="size-4 shrink-0 text-neutral-gray3" />
-        </div>
-      </span>
+      <CriterionBadges criterion={criterion} />
+      <div className="grid w-8 place-items-center rounded">
+        <LuTrash2 className="size-4 shrink-0 text-neutral-gray3" />
+      </div>
     </div>
   );
 }
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 0658ba6ad..09277672b 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -113,6 +113,10 @@ export function RubricEditorContent({
 
   // Derive criterion views from the template
   const criteria = useMemo(() => getCriteria(template), [template]);
+  const criteriaIndexMap = useMemo(
+    () => new Map(criteria.map((c, i) => [c.id, i + 1])),
+    [criteria],
+  );
 
   // Debounced auto-save
   const debouncedSave = useDebouncedCallback(
@@ -305,7 +309,7 @@ export function RubricEditorContent({
                     if (!item) {
                       return null;
                     }
-                    const idx = criteria.findIndex((c) => c.id === item.id) + 1;
+                    const idx = criteriaIndexMap.get(item.id) ?? 1;
                     return (
                       <RubricCriterionDragPreview
                         criterion={item}
@@ -317,8 +321,7 @@ export function RubricEditorContent({
                   aria-label={t('Rubric criteria')}
                 >
                   {(criterion, controls) => {
-                    const idx =
-                      criteria.findIndex((c) => c.id === criterion.id) + 1;
+                    const idx = criteriaIndexMap.get(criterion.id) ?? 1;
                     const snapshotErrors =
                       criterionErrors.get(criterion.id) ?? [];
                     const liveErrors = getCriterionErrors(criterion);
diff --git a/apps/app/src/lib/i18n/dictionaries/bn.json b/apps/app/src/lib/i18n/dictionaries/bn.json
index acc35f944..35d025c13 100644
--- a/apps/app/src/lib/i18n/dictionaries/bn.json
+++ b/apps/app/src/lib/i18n/dictionaries/bn.json
@@ -886,24 +886,13 @@
   "Reason(s) and Insight(s)": "কারণ এবং অন্তর্দৃষ্টি",
   "Placeholder": "প্লেসহোল্ডার",
   "Add criterion": "মানদণ্ড যোগ করুন",
-  "Criterion label": "মানদণ্ডের লেবেল",
-  "Criterion type": "মানদণ্ডের ধরন",
-  "Define how reviewers will evaluate proposals": "পর্যালোচকরা কীভাবে প্রস্তাবগুলি মূল্যায়ন করবেন তা নির্ধারণ করুন",
   "Describe what earns {number} points...": "{number} পয়েন্ট পেতে কী প্রয়োজন তা বর্ণনা করুন...",
   "Define what each score means": "প্রতিটি স্কোরের অর্থ নির্ধারণ করুন",
   "Max points": "সর্বোচ্চ পয়েন্ট",
   "New criterion": "নতুন মানদণ্ড",
-  "No criteria defined": "কোনো মানদণ্ড নির্ধারিত হয়নি",
-  "Open-ended written feedback": "উন্মুক্ত লিখিত প্রতিক্রিয়া",
-  "Provide guidance for reviewers on how to evaluate this criterion...": "পর্যালোচকদের জন্য এই মানদণ্ড মূল্যায়নের নির্দেশিকা প্রদান করুন...",
-  "Rate on a numeric scale with points": "পয়েন্ট সহ সংখ্যাসূচক স্কেলে রেটিং করুন",
   "Remove criterion": "মানদণ্ড সরান",
   "Rubric criteria": "রুব্রিক মানদণ্ড",
   "Help reviewers score consistently by describing what each point value represents": "প্রতিটি পয়েন্ট মান কী বোঝায় তা বর্ণনা করে পর্যালোচকদের ধারাবাহিকভাবে স্কোর করতে সাহায্য করুন",
-  "Scored": "স্কোরযুক্ত",
-  "Select from custom options": "কাস্টম বিকল্প থেকে নির্বাচন করুন",
-  "Simple yes or no answer": "সহজ হ্যাঁ বা না উত্তর",
-  "Yes / No": "হ্যাঁ / না",
   "Review Criteria": "পর্যালোচনার মানদণ্ড",
   "No review criteria yet": "এখনো কোনো পর্যালোচনার মানদণ্ড নেই",
   "Add criteria to help reviewers evaluate proposals consistently": "পর্যালোচকদের ধারাবাহিকভাবে প্রস্তাব মূল্যায়নে সহায়তার জন্য মানদণ্ড যোগ করুন",
diff --git a/apps/app/src/lib/i18n/dictionaries/en.json b/apps/app/src/lib/i18n/dictionaries/en.json
index a81b9ec3c..a92ffda57 100644
--- a/apps/app/src/lib/i18n/dictionaries/en.json
+++ b/apps/app/src/lib/i18n/dictionaries/en.json
@@ -879,24 +879,13 @@
   "Reason(s) and Insight(s)": "Reason(s) and Insight(s)",
   "Placeholder": "Placeholder",
   "Add criterion": "Add criterion",
-  "Criterion label": "Criterion label",
-  "Criterion type": "Criterion type",
-  "Define how reviewers will evaluate proposals": "Define how reviewers will evaluate proposals",
   "Describe what earns {number} points...": "Describe what earns {number} points...",
   "Define what each score means": "Define what each score means",
   "Max points": "Max points",
   "New criterion": "New criterion",
-  "No criteria defined": "No criteria defined",
-  "Open-ended written feedback": "Open-ended written feedback",
-  "Provide guidance for reviewers on how to evaluate this criterion...": "Provide guidance for reviewers on how to evaluate this criterion...",
-  "Rate on a numeric scale with points": "Rate on a numeric scale with points",
   "Remove criterion": "Remove criterion",
   "Rubric criteria": "Rubric criteria",
   "Help reviewers score consistently by describing what each point value represents": "Help reviewers score consistently by describing what each point value represents",
-  "Scored": "Scored",
-  "Select from custom options": "Select from custom options",
-  "Simple yes or no answer": "Simple yes or no answer",
-  "Yes / No": "Yes / No",
   "Review Criteria": "Review Criteria",
   "No review criteria yet": "No review criteria yet",
   "Add criteria to help reviewers evaluate proposals consistently": "Add criteria to help reviewers evaluate proposals consistently",
diff --git a/apps/app/src/lib/i18n/dictionaries/es.json b/apps/app/src/lib/i18n/dictionaries/es.json
index 51c898230..119f10b33 100644
--- a/apps/app/src/lib/i18n/dictionaries/es.json
+++ b/apps/app/src/lib/i18n/dictionaries/es.json
@@ -879,24 +879,13 @@
   "Reason(s) and Insight(s)": "Razón(es) y perspectiva(s)",
   "Placeholder": "Marcador de posición",
   "Add criterion": "Agregar criterio",
-  "Criterion label": "Etiqueta del criterio",
-  "Criterion type": "Tipo de criterio",
-  "Define how reviewers will evaluate proposals": "Define cómo los revisores evaluarán las propuestas",
   "Describe what earns {number} points...": "Describa qué merece {number} puntos...",
   "Define what each score means": "Defina qué significa cada puntuación",
   "Max points": "Puntos máximos",
   "New criterion": "Nuevo criterio",
-  "No criteria defined": "No hay criterios definidos",
-  "Open-ended written feedback": "Retroalimentación escrita abierta",
-  "Provide guidance for reviewers on how to evaluate this criterion...": "Proporcione orientación a los revisores sobre cómo evaluar este criterio...",
-  "Rate on a numeric scale with points": "Calificar en una escala numérica con puntos",
   "Remove criterion": "Eliminar criterio",
   "Rubric criteria": "Criterios de rúbrica",
   "Help reviewers score consistently by describing what each point value represents": "Ayude a los revisores a puntuar de manera consistente describiendo lo que representa cada valor de punto",
-  "Scored": "Puntuado",
-  "Select from custom options": "Seleccionar entre opciones personalizadas",
-  "Simple yes or no answer": "Respuesta simple de sí o no",
-  "Yes / No": "Sí / No",
   "Review Criteria": "Criterios de revisión",
   "No review criteria yet": "Aún no hay criterios de revisión",
   "Add criteria to help reviewers evaluate proposals consistently": "Agregue criterios para ayudar a los revisores a evaluar propuestas de manera consistente",
diff --git a/apps/app/src/lib/i18n/dictionaries/fr.json b/apps/app/src/lib/i18n/dictionaries/fr.json
index 9e4587b86..df411aec2 100644
--- a/apps/app/src/lib/i18n/dictionaries/fr.json
+++ b/apps/app/src/lib/i18n/dictionaries/fr.json
@@ -879,24 +879,13 @@
   "Reason(s) and Insight(s)": "Raison(s) et aperçu(s)",
   "Placeholder": "Espace réservé",
   "Add criterion": "Ajouter un critère",
-  "Criterion label": "Libellé du critère",
-  "Criterion type": "Type de critère",
-  "Define how reviewers will evaluate proposals": "Définissez comment les évaluateurs noteront les propositions",
   "Describe what earns {number} points...": "Décrivez ce qui mérite {number} points...",
   "Define what each score means": "Définissez ce que signifie chaque note",
   "Max points": "Points maximum",
   "New criterion": "Nouveau critère",
-  "No criteria defined": "Aucun critère défini",
-  "Open-ended written feedback": "Commentaire écrit libre",
-  "Provide guidance for reviewers on how to evaluate this criterion...": "Fournissez des conseils aux évaluateurs sur la manière d'évaluer ce critère...",
-  "Rate on a numeric scale with points": "Noter sur une échelle numérique avec des points",
   "Remove criterion": "Supprimer le critère",
   "Rubric criteria": "Critères de la grille",
   "Help reviewers score consistently by describing what each point value represents": "Aidez les évaluateurs à noter de manière cohérente en décrivant ce que représente chaque valeur de point",
-  "Scored": "Noté",
-  "Select from custom options": "Sélectionner parmi des options personnalisées",
-  "Simple yes or no answer": "Réponse simple oui ou non",
-  "Yes / No": "Oui / Non",
   "Review Criteria": "Critères d'évaluation",
   "No review criteria yet": "Pas encore de critères d'évaluation",
   "Add criteria to help reviewers evaluate proposals consistently": "Ajoutez des critères pour aider les évaluateurs à évaluer les propositions de manière cohérente",
diff --git a/apps/app/src/lib/i18n/dictionaries/pt.json b/apps/app/src/lib/i18n/dictionaries/pt.json
index 079723ca3..920e65f39 100644
--- a/apps/app/src/lib/i18n/dictionaries/pt.json
+++ b/apps/app/src/lib/i18n/dictionaries/pt.json
@@ -879,24 +879,13 @@
   "Reason(s) and Insight(s)": "Razão(ões) e percepção(ões)",
   "Placeholder": "Espaço reservado",
   "Add criterion": "Adicionar critério",
-  "Criterion label": "Rótulo do critério",
-  "Criterion type": "Tipo de critério",
-  "Define how reviewers will evaluate proposals": "Defina como os avaliadores irão avaliar as propostas",
   "Describe what earns {number} points...": "Descreva o que merece {number} pontos...",
   "Define what each score means": "Defina o que cada nota significa",
   "Max points": "Pontos máximos",
   "New criterion": "Novo critério",
-  "No criteria defined": "Nenhum critério definido",
-  "Open-ended written feedback": "Feedback escrito aberto",
-  "Provide guidance for reviewers on how to evaluate this criterion...": "Forneça orientação aos avaliadores sobre como avaliar este critério...",
-  "Rate on a numeric scale with points": "Avaliar numa escala numérica com pontos",
   "Remove criterion": "Remover critério",
   "Rubric criteria": "Critérios da rubrica",
   "Help reviewers score consistently by describing what each point value represents": "Ajude os avaliadores a pontuar de forma consistente descrevendo o que cada valor de ponto representa",
-  "Scored": "Pontuado",
-  "Select from custom options": "Selecionar entre opções personalizadas",
-  "Simple yes or no answer": "Resposta simples de sim ou não",
-  "Yes / No": "Sim / Não",
   "Review Criteria": "Critérios de avaliação",
   "No review criteria yet": "Ainda não há critérios de avaliação",
   "Add criteria to help reviewers evaluate proposals consistently": "Adicione critérios para ajudar os avaliadores a avaliar propostas de forma consistente",
diff --git a/packages/ui/src/components/RadioGroup.tsx b/packages/ui/src/components/RadioGroup.tsx
index 1d1f006df..8916f4c97 100644
--- a/packages/ui/src/components/RadioGroup.tsx
+++ b/packages/ui/src/components/RadioGroup.tsx
@@ -33,7 +33,7 @@ export const RadioGroup = (props: RadioGroupProps) => {
         'group flex flex-col gap-2',
       )}
     >
-      <Label className={cn('text-functional-charcoal', props.labelClassName)}>
+      <Label className={cn('text-neutral-charcoal', props.labelClassName)}>
         {props.label}
         {props.isRequired && <span className="text-functional-red"> *</span>}
       </Label>

From ca411f41e4b8b0f5a402532a69dcf0e8f1d988b6 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 14:14:01 -0500
Subject: [PATCH 25/38] reuse delete modal

---
 .../components/ConfirmDeleteModal.tsx         | 54 +++++++++++++++++++
 .../general/PhasesSectionContent.tsx          | 43 ++++-----------
 .../rubric/RubricEditorContent.tsx            | 43 ++++-----------
 3 files changed, 72 insertions(+), 68 deletions(-)
 create mode 100644 apps/app/src/components/decisions/ProcessBuilder/components/ConfirmDeleteModal.tsx

diff --git a/apps/app/src/components/decisions/ProcessBuilder/components/ConfirmDeleteModal.tsx b/apps/app/src/components/decisions/ProcessBuilder/components/ConfirmDeleteModal.tsx
new file mode 100644
index 000000000..503c279b1
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/components/ConfirmDeleteModal.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { Button } from '@op/ui/Button';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@op/ui/Modal';
+
+import { useTranslations } from '@/lib/i18n';
+
+export function ConfirmDeleteModal({
+  isOpen,
+  title,
+  message,
+  onConfirm,
+  onCancel,
+}: {
+  isOpen: boolean;
+  title: string;
+  message: string;
+  onConfirm: () => void;
+  onCancel: () => void;
+}) {
+  const t = useTranslations();
+  return (
+    <Modal
+      isDismissable
+      isOpen={isOpen}
+      onOpenChange={(open) => {
+        if (!open) {
+          onCancel();
+        }
+      }}
+    >
+      <ModalHeader>{title}</ModalHeader>
+      <ModalBody>
+        <p>{message}</p>
+      </ModalBody>
+      <ModalFooter>
+        <Button
+          color="secondary"
+          className="w-full sm:w-fit"
+          onPress={onCancel}
+        >
+          {t('Cancel')}
+        </Button>
+        <Button
+          color="destructive"
+          className="w-full sm:w-fit"
+          onPress={onConfirm}
+        >
+          {t('Delete')}
+        </Button>
+      </ModalFooter>
+    </Modal>
+  );
+}
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
index 72087d1f6..daea9dfae 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
@@ -15,7 +15,7 @@ import {
 import { AutoSizeInput } from '@op/ui/AutoSizeInput';
 import { Button } from '@op/ui/Button';
 import { DatePicker } from '@op/ui/DatePicker';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@op/ui/Modal';
+import { ConfirmDeleteModal } from '../../components/ConfirmDeleteModal';
 import type { Key } from '@op/ui/RAC';
 import { DisclosureStateContext } from '@op/ui/RAC';
 import { DragHandle, Sortable } from '@op/ui/Sortable';
@@ -489,40 +489,15 @@ export const PhaseEditor = ({
         <LuPlus className="size-4" />
         {t('Add phase')}
       </Button>
-      <Modal
-        isDismissable
+      <ConfirmDeleteModal
         isOpen={phaseToDelete !== null}
-        onOpenChange={(open) => {
-          if (!open) {
-            setPhaseToDelete(null);
-          }
-        }}
-      >
-        <ModalHeader>{t('Delete phase')}</ModalHeader>
-        <ModalBody>
-          <p>
-            {t(
-              'Are you sure you want to delete this phase? This action cannot be undone.',
-            )}
-          </p>
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            color="secondary"
-            className="w-full sm:w-fit"
-            onPress={() => setPhaseToDelete(null)}
-          >
-            {t('Cancel')}
-          </Button>
-          <Button
-            color="destructive"
-            className="w-full sm:w-fit"
-            onPress={confirmRemovePhase}
-          >
-            {t('Delete')}
-          </Button>
-        </ModalFooter>
-      </Modal>
+        title={t('Delete phase')}
+        message={t(
+          'Are you sure you want to delete this phase? This action cannot be undone.',
+        )}
+        onConfirm={confirmRemovePhase}
+        onCancel={() => setPhaseToDelete(null)}
+      />
     </div>
   );
 };
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 09277672b..b6c1170ed 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -7,7 +7,7 @@ import { Accordion, AccordionItem } from '@op/ui/Accordion';
 import { Button } from '@op/ui/Button';
 import { EmptyState } from '@op/ui/EmptyState';
 import { Header2 } from '@op/ui/Header';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from '@op/ui/Modal';
+import { ConfirmDeleteModal } from '../../components/ConfirmDeleteModal';
 import type { Key } from '@op/ui/RAC';
 import { Sortable } from '@op/ui/Sortable';
 import { cn } from '@op/ui/utils';
@@ -370,40 +370,15 @@ export function RubricEditorContent({
 
       <RubricParticipantPreview template={template} />
 
-      <Modal
-        isDismissable
+      <ConfirmDeleteModal
         isOpen={criterionToDelete !== null}
-        onOpenChange={(open) => {
-          if (!open) {
-            setCriterionToDelete(null);
-          }
-        }}
-      >
-        <ModalHeader>{t('Delete criterion')}</ModalHeader>
-        <ModalBody>
-          <p>
-            {t(
-              'Are you sure you want to delete this criterion? This action cannot be undone.',
-            )}
-          </p>
-        </ModalBody>
-        <ModalFooter>
-          <Button
-            color="secondary"
-            className="w-full sm:w-fit"
-            onPress={() => setCriterionToDelete(null)}
-          >
-            {t('Cancel')}
-          </Button>
-          <Button
-            color="destructive"
-            className="w-full sm:w-fit"
-            onPress={confirmRemoveCriterion}
-          >
-            {t('Delete')}
-          </Button>
-        </ModalFooter>
-      </Modal>
+        title={t('Delete criterion')}
+        message={t(
+          'Are you sure you want to delete this criterion? This action cannot be undone.',
+        )}
+        onConfirm={confirmRemoveCriterion}
+        onCancel={() => setCriterionToDelete(null)}
+      />
     </div>
   );
 }

From 703f0078d964e95619cd3d6e0ca85e6081bcc8ae Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 14:20:23 -0500
Subject: [PATCH 26/38] Revert feild config card changes

---
 .../ui/src/components/FieldConfigCard.tsx     | 284 +++++-------------
 1 file changed, 68 insertions(+), 216 deletions(-)

diff --git a/packages/ui/src/components/FieldConfigCard.tsx b/packages/ui/src/components/FieldConfigCard.tsx
index e29790470..2c2572327 100644
--- a/packages/ui/src/components/FieldConfigCard.tsx
+++ b/packages/ui/src/components/FieldConfigCard.tsx
@@ -1,16 +1,9 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { use, useLayoutEffect, useRef } from 'react';
-import type { Key } from 'react-aria-components';
-import {
-  Button as AriaButton,
-  DisclosurePanel as DisclosurePanelPrimitive,
-  Disclosure as DisclosurePrimitive,
-  DisclosureStateContext,
-  Button as TriggerButton,
-} from 'react-aria-components';
-import { LuChevronRight, LuGripVertical, LuLock, LuX } from 'react-icons/lu';
+import { useRef } from 'react';
+import { Button as AriaButton } from 'react-aria-components';
+import { LuGripVertical, LuLock, LuX } from 'react-icons/lu';
 
 import { cn } from '../lib/utils';
 import { AutoSizeInput } from './AutoSizeInput';
@@ -53,37 +46,12 @@ export interface FieldConfigCardProps {
   className?: string;
   /** Whether the card is locked (non-editable, no drag handle or remove button) */
   locked?: boolean;
-  /** Extra content rendered in the header row after the label (e.g. points badge) */
-  headerExtra?: ReactNode;
-
-  // --- Collapsible (accordion) props ---
-
-  /**
-   * Enable accordion/collapsible behavior. When true, the body (description +
-   * children) is hidden behind a disclosure toggle and animates open/closed.
-   * The card must be placed inside an `<Accordion>` (DisclosureGroup) for
-   * group-level expand control, or used standalone with controlled/uncontrolled
-   * expansion via `isExpanded` / `defaultExpanded`.
-   */
-  collapsible?: boolean;
-  /** Unique id for this disclosure (required when inside an Accordion group) */
-  disclosureId?: Key;
-  /** Controlled expansion state */
-  isExpanded?: boolean;
-  /** Default expansion state (uncontrolled) */
-  defaultExpanded?: boolean;
-  /** Callback when expansion changes */
-  onExpandedChange?: (isExpanded: boolean) => void;
 }
 
 /**
  * A configurable card component for form builders.
  * Features a header with drag handle, icon, editable label, and remove button,
  * plus an optional description field and slot for additional configuration.
- *
- * When `collapsible` is true the body content is wrapped in a React Aria
- * Disclosure panel with smooth height animation, and a chevron toggle is
- * added to the header.
  */
 export function FieldConfigCard({
   icon: Icon,
@@ -102,12 +70,6 @@ export function FieldConfigCard({
   children,
   className,
   locked = false,
-  headerExtra,
-  collapsible = false,
-  disclosureId,
-  isExpanded,
-  defaultExpanded,
-  onExpandedChange,
 }: FieldConfigCardProps) {
   const isDragging = controls?.isDragging ?? false;
   const labelInputRef = useRef<HTMLInputElement>(null!);
@@ -132,198 +94,88 @@ export function FieldConfigCard({
             {iconTooltip && <Tooltip>{iconTooltip}</Tooltip>}
           </TooltipTrigger>
           <span className="flex-1 text-neutral-charcoal">{label}</span>
-          {headerExtra}
         </div>
         {children}
       </div>
     );
   }
 
-  const header = (
-    <div className="flex w-full items-center gap-2">
-      <div className="flex min-w-0 grow items-center gap-2">
-        {controls && (
-          <DragHandle
-            {...controls.dragHandleProps}
-            aria-label={dragHandleAriaLabel}
-          />
-        )}
-        {collapsible && <CollapsibleIndicator />}
-        <div className="flex min-w-0 items-center gap-2 rounded border border-neutral-gray1 bg-neutral-gray1 px-2 py-1 focus-within:border-neutral-gray2 focus-within:bg-white">
-          <TooltipTrigger>
-            <AriaButton
-              className="flex shrink-0 items-center text-neutral-gray4"
-              onPress={() => labelInputRef.current?.focus()}
-            >
-              <Icon className="size-4" />
-            </AriaButton>
-            {iconTooltip && <Tooltip>{iconTooltip}</Tooltip>}
-          </TooltipTrigger>
-          <div className="min-w-0 overflow-hidden">
-            <AutoSizeInput
-              inputRef={labelInputRef}
-              value={label}
-              onChange={(value) => onLabelChange?.(value)}
-              className="text-neutral-charcoal"
-              aria-label={labelInputAriaLabel}
-            />
-          </div>
-        </div>
-        {headerExtra}
-      </div>
-      {onRemove && (
-        <Button
-          color="ghost"
-          size="small"
-          aria-label={removeAriaLabel}
-          onPress={onRemove}
-          className="p-2 text-neutral-gray4 hover:text-neutral-charcoal"
-        >
-          <LuX className="size-4" />
-        </Button>
-      )}
-    </div>
-  );
-
-  const body = (
-    <div className="px-8">
-      {onDescriptionChange && (
-        <div className="mt-4">
-          <TextField
-            label={descriptionLabel}
-            value={description ?? ''}
-            onChange={onDescriptionChange}
-            useTextArea
-            textareaProps={{
-              placeholder: descriptionPlaceholder,
-              className: 'min-h-24 resize-none',
-            }}
-          />
-        </div>
-      )}
-      {children}
-    </div>
-  );
-
-  // Non-collapsible variant: render header + body directly
-  if (!collapsible) {
-    return (
-      <div
-        className={cn(
-          'rounded-lg border bg-white px-3 py-4',
-          isDragging && 'opacity-50',
-          className,
-        )}
-      >
-        {header}
-        {body}
-      </div>
-    );
-  }
-
-  // Collapsible variant: wrap in Disclosure primitive
   return (
-    <DisclosurePrimitive
-      id={disclosureId}
-      isExpanded={isExpanded}
-      defaultExpanded={defaultExpanded}
-      onExpandedChange={onExpandedChange}
+    <div
       className={cn(
-        'group/field-config rounded-lg border bg-white px-3 py-4',
+        'rounded-lg border bg-white px-3 py-4',
         isDragging && 'opacity-50',
         className,
       )}
     >
-      {header}
-      <AnimatedDisclosurePanel>{body}</AnimatedDisclosurePanel>
-    </DisclosurePrimitive>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Collapsible sub-components
-// ---------------------------------------------------------------------------
-
-/**
- * Chevron indicator that toggles the disclosure. Rotates 90° when expanded.
- * Rendered as a React Aria `Button` with `slot="trigger"` so it integrates
- * with the parent `Disclosure` primitive.
- */
-function CollapsibleIndicator() {
-  return (
-    <TriggerButton
-      slot="trigger"
-      className="flex shrink-0 cursor-pointer items-center rounded p-0.5 text-neutral-gray4 outline-none hover:text-neutral-charcoal focus-visible:ring-2 focus-visible:ring-ring"
-    >
-      <LuChevronRight className="size-4 transition-transform duration-200 group-data-[expanded]/field-config:rotate-90" />
-    </TriggerButton>
-  );
-}
-
-/**
- * Animated disclosure panel that mirrors the height-transition logic from
- * the Accordion component. Uses the `--disclosure-panel-height` CSS custom
- * property for smooth expand/collapse animations.
- */
-function AnimatedDisclosurePanel({ children }: { children: ReactNode }) {
-  const state = use(DisclosureStateContext);
-  const panelRef = useRef<HTMLDivElement>(null);
-  const isFirstRender = useRef(true);
-
-  useLayoutEffect(() => {
-    const panel = panelRef.current;
-    if (!panel) {
-      return;
-    }
-
-    if (isFirstRender.current) {
-      isFirstRender.current = false;
-      if (state?.isExpanded) {
-        panel.style.setProperty('--disclosure-panel-height', 'auto');
-      } else {
-        panel.style.setProperty('--disclosure-panel-height', '0px');
-      }
-      return;
-    }
-
-    if (state?.isExpanded) {
-      if (
-        panel.style.getPropertyValue('--disclosure-panel-height') === 'auto'
-      ) {
-        return;
-      }
-
-      panel.removeAttribute('hidden');
-      const height = panel.scrollHeight;
-      panel.style.setProperty('--disclosure-panel-height', `${height}px`);
+      {/* Header: drag handle, icon, label input, remove button */}
+      <div className="flex w-full items-center gap-2">
+        <div className="flex min-w-0 grow items-center gap-2">
+          {controls && (
+            <DragHandle
+              {...controls.dragHandleProps}
+              aria-label={dragHandleAriaLabel}
+            />
+          )}
+          <div className="flex min-w-0 items-center gap-2 rounded border border-neutral-gray1 bg-neutral-gray1 px-2 py-1 focus-within:border-neutral-gray2 focus-within:bg-white">
+            <TooltipTrigger>
+              <AriaButton
+                className="flex shrink-0 items-center text-neutral-gray4"
+                onPress={() => labelInputRef.current?.focus()}
+              >
+                <Icon className="size-4" />
+              </AriaButton>
+              {iconTooltip && <Tooltip>{iconTooltip}</Tooltip>}
+            </TooltipTrigger>
+            <div className="min-w-0 overflow-hidden">
+              <AutoSizeInput
+                inputRef={labelInputRef}
+                value={label}
+                onChange={(value) => onLabelChange?.(value)}
+                className="text-neutral-charcoal"
+                aria-label={labelInputAriaLabel}
+              />
+            </div>
+          </div>
+        </div>
+        {onRemove && (
+          <Button
+            color="ghost"
+            size="small"
+            aria-label={removeAriaLabel}
+            onPress={onRemove}
+            className="p-2 text-neutral-gray4 hover:text-neutral-charcoal"
+          >
+            <LuX className="size-4" />
+          </Button>
+        )}
+      </div>
 
-      const onTransitionEnd = () => {
-        panel.style.setProperty('--disclosure-panel-height', 'auto');
-        panel.removeEventListener('transitionend', onTransitionEnd);
-      };
-      panel.addEventListener('transitionend', onTransitionEnd);
-    } else {
-      const height = panel.scrollHeight;
-      panel.style.setProperty('--disclosure-panel-height', `${height}px`);
-      void panel.offsetHeight;
-      panel.style.setProperty('--disclosure-panel-height', '0px');
-    }
-  }, [state?.isExpanded]);
+      {/* Body: description and custom config */}
+      <div className="px-8">
+        {/* Description field */}
+        {onDescriptionChange && (
+          <div className="mt-4">
+            <TextField
+              label={descriptionLabel}
+              value={description ?? ''}
+              onChange={onDescriptionChange}
+              useTextArea
+              textareaProps={{
+                placeholder: descriptionPlaceholder,
+                className: 'min-h-24 resize-none',
+              }}
+            />
+          </div>
+        )}
 
-  return (
-    <DisclosurePanelPrimitive
-      ref={panelRef}
-      className="h-[var(--disclosure-panel-height)] overflow-hidden transition-[height] duration-200 ease-out motion-reduce:transition-none [&[hidden]]:![content-visibility:visible]"
-    >
-      {children}
-    </DisclosurePanelPrimitive>
+        {/* Additional config slot */}
+        {children}
+      </div>
+    </div>
   );
 }
 
-// ---------------------------------------------------------------------------
-// Drag preview
-// ---------------------------------------------------------------------------
-
 export interface FieldConfigCardDragPreviewProps {
   /** Icon component to display next to the label */
   icon: React.ComponentType<{ className?: string }>;

From d027689caa49b01684ac5b451d971897676ab5f5 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 14:20:27 -0500
Subject: [PATCH 27/38] format

---
 .../ProcessBuilder/stepContent/general/PhasesSectionContent.tsx | 2 +-
 .../ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
index daea9dfae..d222c3274 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
@@ -15,7 +15,6 @@ import {
 import { AutoSizeInput } from '@op/ui/AutoSizeInput';
 import { Button } from '@op/ui/Button';
 import { DatePicker } from '@op/ui/DatePicker';
-import { ConfirmDeleteModal } from '../../components/ConfirmDeleteModal';
 import type { Key } from '@op/ui/RAC';
 import { DisclosureStateContext } from '@op/ui/RAC';
 import { DragHandle, Sortable } from '@op/ui/Sortable';
@@ -35,6 +34,7 @@ import { useTranslations } from '@/lib/i18n';
 
 import { RichTextEditorWithToolbar } from '@/components/RichTextEditor/RichTextEditorWithToolbar';
 
+import { ConfirmDeleteModal } from '../../components/ConfirmDeleteModal';
 import { SaveStatusIndicator } from '../../components/SaveStatusIndicator';
 import { ToggleRow } from '../../components/ToggleRow';
 import type { SectionProps } from '../../contentRegistry';
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index b6c1170ed..880315bb5 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -7,7 +7,6 @@ import { Accordion, AccordionItem } from '@op/ui/Accordion';
 import { Button } from '@op/ui/Button';
 import { EmptyState } from '@op/ui/EmptyState';
 import { Header2 } from '@op/ui/Header';
-import { ConfirmDeleteModal } from '../../components/ConfirmDeleteModal';
 import type { Key } from '@op/ui/RAC';
 import { Sortable } from '@op/ui/Sortable';
 import { cn } from '@op/ui/utils';
@@ -36,6 +35,7 @@ import {
   updateScoreLabel,
   updateScoredMaxPoints,
 } from '../../../../decisions/rubricTemplate';
+import { ConfirmDeleteModal } from '../../components/ConfirmDeleteModal';
 import { SaveStatusIndicator } from '../../components/SaveStatusIndicator';
 import type { SectionProps } from '../../contentRegistry';
 import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';

From 46c69b4be3ac02fb12634d26e896312d8585fa54 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 14:26:31 -0500
Subject: [PATCH 28/38] simplify

---
 .../stepContent/rubric/RubricEditorContent.tsx      | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 880315bb5..1309c0a37 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -27,6 +27,7 @@ import {
   getCriteria,
   getCriterionErrors,
   getCriterionSchema,
+  getCriterionType,
   removeCriterion,
   reorderCriteria,
   updateCriterionDescription,
@@ -203,15 +204,11 @@ export function RubricEditorContent({
     (criterionId: string, newType: RubricCriterionType) => {
       setTemplate((prev) => {
         // Stash scored config before switching away from scored
-        const schema = getCriterionSchema(prev, criterionId);
-        if (
-          schema?.type === 'integer' &&
-          typeof schema.maximum === 'number' &&
-          Array.isArray(schema.oneOf)
-        ) {
+        if (getCriterionType(prev, criterionId) === 'scored') {
+          const schema = getCriterionSchema(prev, criterionId);
           scoredConfigCacheRef.current.set(criterionId, {
-            maximum: schema.maximum,
-            oneOf: schema.oneOf,
+            maximum: (schema?.maximum as number) ?? 5,
+            oneOf: (schema?.oneOf as unknown[]) ?? [],
           });
         }
 

From 760649da8093ba576891cbd334f17bee867a02ec Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 14:37:31 -0500
Subject: [PATCH 29/38] Improve rubricTemplate, less casting, more functional

---
 .../components/decisions/rubricTemplate.ts    | 217 +++++++-----------
 1 file changed, 88 insertions(+), 129 deletions(-)

diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index a1b4e2097..cb0e2a790 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -12,6 +12,7 @@ import type {
   RubricTemplateSchema,
   XFormatPropertySchema,
 } from '@op/common/client';
+import type { JSONSchema7 } from 'json-schema';
 
 import type { TranslationKey } from '@/lib/i18n/routing';
 
@@ -41,11 +42,56 @@ export interface CriterionView {
 }
 
 // ---------------------------------------------------------------------------
-// Criterion type ↔ JSON Schema mapping
+// Internal helpers
 // ---------------------------------------------------------------------------
 
 const DEFAULT_MAX_POINTS = 5;
 
+/**
+ * Type guard that narrows a `JSONSchema7Definition` (which is
+ * `JSONSchema7 | boolean`) to `JSONSchema7`.
+ */
+function isSchemaObject(entry: JSONSchema7 | boolean): entry is JSONSchema7 {
+  return typeof entry !== 'boolean';
+}
+
+/**
+ * Extract oneOf entries as typed `JSONSchema7[]`, filtering out boolean
+ * definitions.
+ */
+function getOneOfEntries(schema: XFormatPropertySchema): JSONSchema7[] {
+  if (!Array.isArray(schema.oneOf)) {
+    return [];
+  }
+  return schema.oneOf.filter(isSchemaObject);
+}
+
+/**
+ * Update a single criterion's schema within a template. Returns the template
+ * unchanged if the criterion doesn't exist.
+ */
+function updateProperty(
+  template: RubricTemplateSchema,
+  criterionId: string,
+  updater: (schema: XFormatPropertySchema) => XFormatPropertySchema,
+): RubricTemplateSchema {
+  const schema = getCriterionSchema(template, criterionId);
+  if (!schema) {
+    return template;
+  }
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [criterionId]: updater(schema),
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Criterion type ↔ JSON Schema mapping
+// ---------------------------------------------------------------------------
+
 /**
  * Create the JSON Schema for a given criterion type.
  */
@@ -101,19 +147,12 @@ export function inferCriterionType(
   }
 
   if (xFormat === 'dropdown') {
-    // Scored: integer type with maximum
-    if (schema.type === 'integer' && typeof schema.maximum === 'number') {
+    if (schema.type === 'integer' && schema.maximum != null) {
       return 'scored';
     }
 
-    // Yes/No: string with exactly two oneOf entries (yes, no)
-    if (schema.type === 'string' && Array.isArray(schema.oneOf)) {
-      const values = schema.oneOf
-        .filter(
-          (e): e is { const: string } =>
-            typeof e === 'object' && e !== null && 'const' in e,
-        )
-        .map((e) => e.const);
+    if (schema.type === 'string') {
+      const values = getOneOfEntries(schema).map((e) => e.const);
       if (
         values.length === 2 &&
         values.includes('yes') &&
@@ -131,26 +170,15 @@ export function inferCriterionType(
 // Readers
 // ---------------------------------------------------------------------------
 
-function asSchema(def: unknown): XFormatPropertySchema | undefined {
-  if (typeof def === 'object' && def !== null) {
-    return def as XFormatPropertySchema;
-  }
-  return undefined;
-}
-
 export function getCriterionOrder(template: RubricTemplateSchema): string[] {
-  return (template['x-field-order'] as string[] | undefined) ?? [];
+  return template['x-field-order'] ?? [];
 }
 
 export function getCriterionSchema(
   template: RubricTemplateSchema,
   criterionId: string,
 ): XFormatPropertySchema | undefined {
-  const props = template.properties;
-  if (!props) {
-    return undefined;
-  }
-  return asSchema(props[criterionId]);
+  return template.properties?.[criterionId];
 }
 
 export function getCriterionType(
@@ -168,27 +196,21 @@ export function getCriterionLabel(
   template: RubricTemplateSchema,
   criterionId: string,
 ): string {
-  const schema = getCriterionSchema(template, criterionId);
-  return (schema?.title as string | undefined) ?? '';
+  return getCriterionSchema(template, criterionId)?.title ?? '';
 }
 
 export function getCriterionDescription(
   template: RubricTemplateSchema,
   criterionId: string,
 ): string | undefined {
-  const schema = getCriterionSchema(template, criterionId);
-  return schema?.description;
+  return getCriterionSchema(template, criterionId)?.description;
 }
 
 export function isCriterionRequired(
   template: RubricTemplateSchema,
   criterionId: string,
 ): boolean {
-  const required = template.required;
-  if (!Array.isArray(required)) {
-    return false;
-  }
-  return required.includes(criterionId);
+  return template.required?.includes(criterionId) ?? false;
 }
 
 export function getCriterionMaxPoints(
@@ -207,17 +229,13 @@ export function getCriterionScoreLabels(
   criterionId: string,
 ): string[] {
   const schema = getCriterionSchema(template, criterionId);
-  if (!schema || schema.type !== 'integer' || !Array.isArray(schema.oneOf)) {
+  if (!schema || schema.type !== 'integer') {
     return [];
   }
-  return schema.oneOf
+  return getOneOfEntries(schema)
     .filter(
-      (e): e is { const: number; title: string } =>
-        typeof e === 'object' &&
-        e !== null &&
-        'const' in e &&
-        'title' in e &&
-        typeof (e as { title: unknown }).title === 'string',
+      (e): e is JSONSchema7 & { const: number; title: string } =>
+        typeof e.const === 'number' && typeof e.title === 'string',
     )
     .sort((a, b) => a.const - b.const)
     .map((e) => e.title);
@@ -337,18 +355,7 @@ export function updateCriterionLabel(
   criterionId: string,
   label: string,
 ): RubricTemplateSchema {
-  const schema = getCriterionSchema(template, criterionId);
-  if (!schema) {
-    return template;
-  }
-
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [criterionId]: { ...schema, title: label },
-    },
-  };
+  return updateProperty(template, criterionId, (s) => ({ ...s, title: label }));
 }
 
 export function updateCriterionDescription(
@@ -356,25 +363,15 @@ export function updateCriterionDescription(
   criterionId: string,
   description: string | undefined,
 ): RubricTemplateSchema {
-  const schema = getCriterionSchema(template, criterionId);
-  if (!schema) {
-    return template;
-  }
-
-  const updated = { ...schema };
-  if (description) {
-    updated.description = description;
-  } else {
-    delete updated.description;
-  }
-
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [criterionId]: updated,
-    },
-  };
+  return updateProperty(template, criterionId, (s) => {
+    const updated = { ...s };
+    if (description) {
+      updated.description = description;
+    } else {
+      delete updated.description;
+    }
+    return updated;
+  });
 }
 
 export function setCriterionRequired(
@@ -401,49 +398,28 @@ export function changeCriterionType(
   criterionId: string,
   newType: RubricCriterionType,
 ): RubricTemplateSchema {
-  const existing = getCriterionSchema(template, criterionId);
-  if (!existing) {
-    return template;
-  }
-
-  const newSchema: XFormatPropertySchema = {
-    ...createCriterionJsonSchema(newType),
-    title: existing.title,
-  };
-  if (existing.description) {
-    newSchema.description = existing.description;
-  }
-
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [criterionId]: newSchema,
-    },
-  };
+  return updateProperty(template, criterionId, (existing) => {
+    const newSchema: XFormatPropertySchema = {
+      ...createCriterionJsonSchema(newType),
+      title: existing.title,
+    };
+    if (existing.description) {
+      newSchema.description = existing.description;
+    }
+    return newSchema;
+  });
 }
 
 /**
  * Low-level updater for the raw JSON Schema of a criterion.
- * Used for updating score labels, max points, dropdown options, etc.
+ * Used for restoring cached scored config, etc.
  */
 export function updateCriterionJsonSchema(
   template: RubricTemplateSchema,
   criterionId: string,
   updates: Partial<XFormatPropertySchema>,
 ): RubricTemplateSchema {
-  const existing = getCriterionSchema(template, criterionId);
-  if (!existing) {
-    return template;
-  }
-
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [criterionId]: { ...existing, ...updates },
-    },
-  };
+  return updateProperty(template, criterionId, (s) => ({ ...s, ...updates }));
 }
 
 /**
@@ -469,17 +445,11 @@ export function updateScoredMaxPoints(
     title: existingLabels[i] ?? '',
   }));
 
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [criterionId]: {
-        ...schema,
-        maximum: clampedMax,
-        oneOf,
-      },
-    },
-  };
+  return updateProperty(template, criterionId, (s) => ({
+    ...s,
+    maximum: clampedMax,
+    oneOf,
+  }));
 }
 
 /**
@@ -499,24 +469,13 @@ export function updateScoreLabel(
   }
 
   const oneOf = schema.oneOf.map((entry) => {
-    if (
-      typeof entry === 'object' &&
-      entry !== null &&
-      'const' in entry &&
-      (entry as { const: number }).const === scoreValue
-    ) {
+    if (isSchemaObject(entry) && entry.const === scoreValue) {
       return { ...entry, title: label };
     }
     return entry;
   });
 
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [criterionId]: { ...schema, oneOf },
-    },
-  };
+  return updateProperty(template, criterionId, (s) => ({ ...s, oneOf }));
 }
 
 // ---------------------------------------------------------------------------

From 183600b8a5c8d307361364fbdd709b73263f016d Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Tue, 3 Mar 2026 15:49:49 -0500
Subject: [PATCH 30/38] Show rubric preview at smaller breakpoints

---
 .../stepContent/rubric/RubricParticipantPreview.tsx             | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricParticipantPreview.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricParticipantPreview.tsx
index 647d1725f..04f04262b 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricParticipantPreview.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricParticipantPreview.tsx
@@ -30,7 +30,7 @@ export function RubricParticipantPreview({
   }
 
   return (
-    <aside className="hidden flex-1 basis-1/2 overflow-y-auto border-l bg-neutral-offWhite p-14 xl:block">
+    <aside className="xxl:p-14 hidden flex-1 basis-1/2 overflow-y-auto border-l bg-neutral-offWhite p-8 lg:block xl:p-12">
       <div className="rounded-lg bg-white p-6">
         <div className="mb-6 flex items-center gap-2 text-sm text-neutral-500">
           <LuEye className="size-4" />

From b50a2cbf07b37ff8cdf6031c91d4df4f520fcd94 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Wed, 4 Mar 2026 10:22:06 -0500
Subject: [PATCH 31/38] Extract shared JSON Schema template utilities

- Create templateUtils.ts with generic operations shared between rubric and proposal templates
- Refactor rubricTemplate.ts to delegate to shared utils
- Refactor proposalTemplate.ts to delegate to shared utils
- Removes code duplication for property readers and mutators
---
 .../components/decisions/proposalTemplate.ts  | 102 +++------
 .../components/decisions/rubricTemplate.ts    | 113 +++-------
 .../src/components/decisions/templateUtils.ts | 202 ++++++++++++++++++
 3 files changed, 263 insertions(+), 154 deletions(-)
 create mode 100644 apps/app/src/components/decisions/templateUtils.ts

diff --git a/apps/app/src/components/decisions/proposalTemplate.ts b/apps/app/src/components/decisions/proposalTemplate.ts
index 996eddc8c..33042a46c 100644
--- a/apps/app/src/components/decisions/proposalTemplate.ts
+++ b/apps/app/src/components/decisions/proposalTemplate.ts
@@ -5,6 +5,10 @@
  * top-level `x-field-order` array. Per-field widget selection is driven by `x-format`
  * on each property (consumed by the renderer's FORMAT_REGISTRY).
  *
+ * Generic JSON Schema operations are delegated to `templateUtils.ts`.
+ * This file adds proposal-specific logic: field types, options, locked fields,
+ * and category management.
+ *
  * No separate uiSchema is stored — everything lives in the JSON Schema itself
  * via vendor extensions (`x-*` properties).
  */
@@ -16,6 +20,19 @@ import {
   schemaHasOptions,
 } from '@op/common/client';
 
+import {
+  addProperty,
+  getPropertyDescription,
+  getPropertyLabel,
+  getPropertyOrder,
+  isPropertyRequired,
+  removeProperty,
+  reorderProperties,
+  setPropertyRequired,
+  updatePropertyDescription,
+  updatePropertyLabel,
+} from './templateUtils';
+
 export type { ProposalTemplateSchema };
 
 export type FieldType = 'short_text' | 'long_text' | 'dropdown';
@@ -90,13 +107,15 @@ function asSchema(def: unknown): ProposalTemplateSchema | undefined {
 }
 
 export function getFieldOrder(template: ProposalTemplateSchema): string[] {
-  return (template['x-field-order'] as string[] | undefined) ?? [];
+  return getPropertyOrder(template);
 }
 
 export function getFieldSchema(
   template: ProposalTemplateSchema,
   fieldId: string,
 ): ProposalTemplateSchema | undefined {
+  // Use asSchema to handle legacy schemas where properties may not match
+  // the XFormatPropertySchema type exactly.
   const props = template.properties;
   if (!props) {
     return undefined;
@@ -123,27 +142,21 @@ export function getFieldLabel(
   template: ProposalTemplateSchema,
   fieldId: string,
 ): string {
-  const schema = getFieldSchema(template, fieldId);
-  return (schema?.title as string | undefined) ?? '';
+  return getPropertyLabel(template, fieldId);
 }
 
 export function getFieldDescription(
   template: ProposalTemplateSchema,
   fieldId: string,
 ): string | undefined {
-  const schema = getFieldSchema(template, fieldId);
-  return schema?.description;
+  return getPropertyDescription(template, fieldId);
 }
 
 export function isFieldRequired(
   template: ProposalTemplateSchema,
   fieldId: string,
 ): boolean {
-  const required = template.required;
-  if (!Array.isArray(required)) {
-    return false;
-  }
-  return required.includes(fieldId);
+  return isPropertyRequired(template, fieldId);
 }
 
 export function getFieldOptions(
@@ -268,42 +281,21 @@ export function addField(
   label: string,
 ): ProposalTemplateSchema {
   const jsonSchema = { ...createFieldJsonSchema(type), title: label };
-  const order = getFieldOrder(template);
-
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [fieldId]: jsonSchema,
-    },
-    'x-field-order': [...order, fieldId],
-  };
+  return addProperty(template, fieldId, jsonSchema);
 }
 
 export function removeField(
   template: ProposalTemplateSchema,
   fieldId: string,
 ): ProposalTemplateSchema {
-  const { [fieldId]: _removed, ...restProps } = template.properties ?? {};
-  const order = getFieldOrder(template).filter((id) => id !== fieldId);
-  const required = (template.required ?? []).filter((id) => id !== fieldId);
-
-  return {
-    ...template,
-    properties: restProps,
-    required: required.length > 0 ? required : undefined,
-    'x-field-order': order,
-  };
+  return removeProperty(template, fieldId);
 }
 
 export function reorderFields(
   template: ProposalTemplateSchema,
   newOrder: string[],
 ): ProposalTemplateSchema {
-  return {
-    ...template,
-    'x-field-order': newOrder,
-  };
+  return reorderProperties(template, newOrder);
 }
 
 export function updateFieldLabel(
@@ -311,18 +303,7 @@ export function updateFieldLabel(
   fieldId: string,
   label: string,
 ): ProposalTemplateSchema {
-  const schema = getFieldSchema(template, fieldId);
-  if (!schema) {
-    return template;
-  }
-
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [fieldId]: { ...schema, title: label },
-    },
-  };
+  return updatePropertyLabel(template, fieldId, label);
 }
 
 export function updateFieldDescription(
@@ -330,25 +311,7 @@ export function updateFieldDescription(
   fieldId: string,
   description: string | undefined,
 ): ProposalTemplateSchema {
-  const schema = getFieldSchema(template, fieldId);
-  if (!schema) {
-    return template;
-  }
-
-  const updated = { ...schema };
-  if (description) {
-    updated.description = description;
-  } else {
-    delete updated.description;
-  }
-
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [fieldId]: updated,
-    },
-  };
+  return updatePropertyDescription(template, fieldId, description);
 }
 
 export function setFieldRequired(
@@ -356,14 +319,7 @@ export function setFieldRequired(
   fieldId: string,
   required: boolean,
 ): ProposalTemplateSchema {
-  const current = template.required ?? [];
-  const filtered = current.filter((id) => id !== fieldId);
-  const next = required ? [...filtered, fieldId] : filtered;
-
-  return {
-    ...template,
-    required: next.length > 0 ? next : undefined,
-  };
+  return setPropertyRequired(template, fieldId, required);
 }
 
 // ---------------------------------------------------------------------------
diff --git a/apps/app/src/components/decisions/rubricTemplate.ts b/apps/app/src/components/decisions/rubricTemplate.ts
index cb0e2a790..ba863ebc8 100644
--- a/apps/app/src/components/decisions/rubricTemplate.ts
+++ b/apps/app/src/components/decisions/rubricTemplate.ts
@@ -5,8 +5,9 @@
  * top-level `x-field-order` array. Per-criterion widget selection is driven by
  * `x-format` on each property (consumed by the renderer's rubric field logic).
  *
- * Mirrors the architecture of `proposalTemplate.ts` but tailored to rubric
- * criteria: rating scale, yes/no, and text response.
+ * Generic JSON Schema operations are delegated to `templateUtils.ts`.
+ * This file adds rubric-specific logic: criterion types, scored config, and
+ * type inference from schema shape.
  */
 import type {
   RubricTemplateSchema,
@@ -16,6 +17,22 @@ import type { JSONSchema7 } from 'json-schema';
 
 import type { TranslationKey } from '@/lib/i18n/routing';
 
+import {
+  addProperty,
+  getPropertyDescription,
+  getPropertyLabel,
+  getPropertyOrder,
+  getPropertySchema,
+  isPropertyRequired,
+  isSchemaObject,
+  removeProperty,
+  reorderProperties,
+  setPropertyRequired,
+  updateProperty,
+  updatePropertyDescription,
+  updatePropertyLabel,
+} from './templateUtils';
+
 export type { RubricTemplateSchema };
 
 // ---------------------------------------------------------------------------
@@ -47,14 +64,6 @@ export interface CriterionView {
 
 const DEFAULT_MAX_POINTS = 5;
 
-/**
- * Type guard that narrows a `JSONSchema7Definition` (which is
- * `JSONSchema7 | boolean`) to `JSONSchema7`.
- */
-function isSchemaObject(entry: JSONSchema7 | boolean): entry is JSONSchema7 {
-  return typeof entry !== 'boolean';
-}
-
 /**
  * Extract oneOf entries as typed `JSONSchema7[]`, filtering out boolean
  * definitions.
@@ -66,28 +75,6 @@ function getOneOfEntries(schema: XFormatPropertySchema): JSONSchema7[] {
   return schema.oneOf.filter(isSchemaObject);
 }
 
-/**
- * Update a single criterion's schema within a template. Returns the template
- * unchanged if the criterion doesn't exist.
- */
-function updateProperty(
-  template: RubricTemplateSchema,
-  criterionId: string,
-  updater: (schema: XFormatPropertySchema) => XFormatPropertySchema,
-): RubricTemplateSchema {
-  const schema = getCriterionSchema(template, criterionId);
-  if (!schema) {
-    return template;
-  }
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [criterionId]: updater(schema),
-    },
-  };
-}
-
 // ---------------------------------------------------------------------------
 // Criterion type ↔ JSON Schema mapping
 // ---------------------------------------------------------------------------
@@ -167,18 +154,18 @@ export function inferCriterionType(
 }
 
 // ---------------------------------------------------------------------------
-// Readers
+// Readers (delegating to shared utils where possible)
 // ---------------------------------------------------------------------------
 
 export function getCriterionOrder(template: RubricTemplateSchema): string[] {
-  return template['x-field-order'] ?? [];
+  return getPropertyOrder(template);
 }
 
 export function getCriterionSchema(
   template: RubricTemplateSchema,
   criterionId: string,
 ): XFormatPropertySchema | undefined {
-  return template.properties?.[criterionId];
+  return getPropertySchema(template, criterionId);
 }
 
 export function getCriterionType(
@@ -196,21 +183,21 @@ export function getCriterionLabel(
   template: RubricTemplateSchema,
   criterionId: string,
 ): string {
-  return getCriterionSchema(template, criterionId)?.title ?? '';
+  return getPropertyLabel(template, criterionId);
 }
 
 export function getCriterionDescription(
   template: RubricTemplateSchema,
   criterionId: string,
 ): string | undefined {
-  return getCriterionSchema(template, criterionId)?.description;
+  return getPropertyDescription(template, criterionId);
 }
 
 export function isCriterionRequired(
   template: RubricTemplateSchema,
   criterionId: string,
 ): boolean {
-  return template.required?.includes(criterionId) ?? false;
+  return isPropertyRequired(template, criterionId);
 }
 
 export function getCriterionMaxPoints(
@@ -312,42 +299,21 @@ export function addCriterion(
   label: string,
 ): RubricTemplateSchema {
   const jsonSchema = { ...createCriterionJsonSchema(type), title: label };
-  const order = getCriterionOrder(template);
-
-  return {
-    ...template,
-    properties: {
-      ...template.properties,
-      [criterionId]: jsonSchema,
-    },
-    'x-field-order': [...order, criterionId],
-  };
+  return addProperty(template, criterionId, jsonSchema);
 }
 
 export function removeCriterion(
   template: RubricTemplateSchema,
   criterionId: string,
 ): RubricTemplateSchema {
-  const { [criterionId]: _removed, ...restProps } = template.properties ?? {};
-  const order = getCriterionOrder(template).filter((id) => id !== criterionId);
-  const required = (template.required ?? []).filter((id) => id !== criterionId);
-
-  return {
-    ...template,
-    properties: restProps,
-    required: required.length > 0 ? required : undefined,
-    'x-field-order': order,
-  };
+  return removeProperty(template, criterionId);
 }
 
 export function reorderCriteria(
   template: RubricTemplateSchema,
   newOrder: string[],
 ): RubricTemplateSchema {
-  return {
-    ...template,
-    'x-field-order': newOrder,
-  };
+  return reorderProperties(template, newOrder);
 }
 
 export function updateCriterionLabel(
@@ -355,7 +321,7 @@ export function updateCriterionLabel(
   criterionId: string,
   label: string,
 ): RubricTemplateSchema {
-  return updateProperty(template, criterionId, (s) => ({ ...s, title: label }));
+  return updatePropertyLabel(template, criterionId, label);
 }
 
 export function updateCriterionDescription(
@@ -363,15 +329,7 @@ export function updateCriterionDescription(
   criterionId: string,
   description: string | undefined,
 ): RubricTemplateSchema {
-  return updateProperty(template, criterionId, (s) => {
-    const updated = { ...s };
-    if (description) {
-      updated.description = description;
-    } else {
-      delete updated.description;
-    }
-    return updated;
-  });
+  return updatePropertyDescription(template, criterionId, description);
 }
 
 export function setCriterionRequired(
@@ -379,14 +337,7 @@ export function setCriterionRequired(
   criterionId: string,
   required: boolean,
 ): RubricTemplateSchema {
-  const current = template.required ?? [];
-  const filtered = current.filter((id) => id !== criterionId);
-  const next = required ? [...filtered, criterionId] : filtered;
-
-  return {
-    ...template,
-    required: next.length > 0 ? next : undefined,
-  };
+  return setPropertyRequired(template, criterionId, required);
 }
 
 /**
@@ -437,7 +388,7 @@ export function updateScoredMaxPoints(
     return template;
   }
 
-  const clampedMax = Math.max(2, Math.min(newMax, 10));
+  const clampedMax = Math.max(2, newMax);
   const existingLabels = getCriterionScoreLabels(template, criterionId);
 
   const oneOf = Array.from({ length: clampedMax }, (_, i) => ({
diff --git a/apps/app/src/components/decisions/templateUtils.ts b/apps/app/src/components/decisions/templateUtils.ts
new file mode 100644
index 000000000..a8bdaf9d3
--- /dev/null
+++ b/apps/app/src/components/decisions/templateUtils.ts
@@ -0,0 +1,202 @@
+/**
+ * Shared JSON Schema template utilities.
+ *
+ * Provides generic, type-safe operations for templates that store their
+ * properties in a JSON Schema `properties` object and maintain ordering
+ * via a top-level `x-field-order` array. Both proposal and rubric
+ * templates share this structure.
+ *
+ * Domain-specific logic (e.g. scored criteria, locked proposal fields)
+ * lives in `rubricTemplate.ts` and `proposalTemplate.ts` respectively.
+ */
+import type { XFormatPropertySchema } from '@op/common/client';
+import type { JSONSchema7 } from 'json-schema';
+
+// ---------------------------------------------------------------------------
+// Base template shape
+// ---------------------------------------------------------------------------
+
+/**
+ * Minimal contract that both `ProposalTemplateSchema` and
+ * `RubricTemplateSchema` satisfy. All shared utilities are generic
+ * over this interface.
+ */
+export interface BaseTemplateSchema extends JSONSchema7 {
+  [key: string]: unknown;
+  properties?: Record<string, XFormatPropertySchema>;
+  'x-field-order'?: string[];
+}
+
+// ---------------------------------------------------------------------------
+// Type guards
+// ---------------------------------------------------------------------------
+
+/**
+ * Type guard that narrows a `JSONSchema7Definition` (which is
+ * `JSONSchema7 | boolean`) to `JSONSchema7`.
+ */
+export function isSchemaObject(
+  entry: JSONSchema7 | boolean,
+): entry is JSONSchema7 {
+  return typeof entry !== 'boolean';
+}
+
+// ---------------------------------------------------------------------------
+// Readers
+// ---------------------------------------------------------------------------
+
+/** Returns the ordered list of property IDs in the template. */
+export function getPropertyOrder<T extends BaseTemplateSchema>(
+  template: T,
+): string[] {
+  return template['x-field-order'] ?? [];
+}
+
+/** Returns the raw JSON Schema for a single property. */
+export function getPropertySchema<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+): XFormatPropertySchema | undefined {
+  return template.properties?.[propertyId];
+}
+
+/** Returns the `title` of a property, falling back to `''`. */
+export function getPropertyLabel<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+): string {
+  return getPropertySchema(template, propertyId)?.title ?? '';
+}
+
+/** Returns the `description` of a property. */
+export function getPropertyDescription<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+): string | undefined {
+  return getPropertySchema(template, propertyId)?.description;
+}
+
+/** Returns whether a property is listed in the `required` array. */
+export function isPropertyRequired<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+): boolean {
+  return template.required?.includes(propertyId) ?? false;
+}
+
+// ---------------------------------------------------------------------------
+// Immutable updater (internal building block)
+// ---------------------------------------------------------------------------
+
+/**
+ * Update a single property's schema within a template. Returns the
+ * template unchanged if the property doesn't exist.
+ */
+export function updateProperty<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+  updater: (schema: XFormatPropertySchema) => XFormatPropertySchema,
+): T {
+  const schema = getPropertySchema(template, propertyId);
+  if (!schema) {
+    return template;
+  }
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [propertyId]: updater(schema),
+    },
+  };
+}
+
+// ---------------------------------------------------------------------------
+// Immutable mutators
+// ---------------------------------------------------------------------------
+
+/** Add a property with the given schema and append it to the order. */
+export function addProperty<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+  schema: XFormatPropertySchema,
+): T {
+  const order = getPropertyOrder(template);
+  return {
+    ...template,
+    properties: {
+      ...template.properties,
+      [propertyId]: schema,
+    },
+    'x-field-order': [...order, propertyId],
+  };
+}
+
+/** Remove a property from the template, including from `required` and order. */
+export function removeProperty<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+): T {
+  const { [propertyId]: _removed, ...restProps } = template.properties ?? {};
+  const order = getPropertyOrder(template).filter((id) => id !== propertyId);
+  const required = (template.required ?? []).filter((id) => id !== propertyId);
+
+  return {
+    ...template,
+    properties: restProps,
+    required: required.length > 0 ? required : undefined,
+    'x-field-order': order,
+  };
+}
+
+/** Replace the property order with the given array. */
+export function reorderProperties<T extends BaseTemplateSchema>(
+  template: T,
+  newOrder: string[],
+): T {
+  return {
+    ...template,
+    'x-field-order': newOrder,
+  };
+}
+
+/** Update the `title` of a property. */
+export function updatePropertyLabel<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+  label: string,
+): T {
+  return updateProperty(template, propertyId, (s) => ({ ...s, title: label }));
+}
+
+/** Update the `description` of a property. Removes the key when empty. */
+export function updatePropertyDescription<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+  description: string | undefined,
+): T {
+  return updateProperty(template, propertyId, (s) => {
+    const updated = { ...s };
+    if (description) {
+      updated.description = description;
+    } else {
+      delete updated.description;
+    }
+    return updated;
+  });
+}
+
+/** Set or unset a property as required. */
+export function setPropertyRequired<T extends BaseTemplateSchema>(
+  template: T,
+  propertyId: string,
+  required: boolean,
+): T {
+  const current = template.required ?? [];
+  const filtered = current.filter((id) => id !== propertyId);
+  const next = required ? [...filtered, propertyId] : filtered;
+
+  return {
+    ...template,
+    required: next.length > 0 ? next : undefined,
+  };
+}

From 66e507508f6f9b70d03edc11b6eee81b1590a18d Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Wed, 4 Mar 2026 10:22:11 -0500
Subject: [PATCH 32/38] Add typed rubricTemplateEncoder for better type safety

- Create rubricTemplateEncoder Zod schema for the read path
- Provides proper typing for instanceData.rubricTemplate
- Keep jsonSchemaEncoder for write path to maintain compatibility
- Update test to work with new encoder types
---
 services/api/src/encoders/decision.ts         | 40 ++++++++++++++++++-
 .../instances/updateDecisionInstance.test.ts  |  4 +-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/services/api/src/encoders/decision.ts b/services/api/src/encoders/decision.ts
index b439db543..64839f2fe 100644
--- a/services/api/src/encoders/decision.ts
+++ b/services/api/src/encoders/decision.ts
@@ -19,6 +19,42 @@ import { baseProfileEncoder } from './profiles';
 // JSON Schema types
 const jsonSchemaEncoder = z.record(z.string(), z.unknown());
 
+/**
+ * Typed encoder for rubric templates. Matches the `RubricTemplateSchema`
+ * interface from `@op/common` so the frontend receives properly typed data
+ * without needing type assertions.
+ */
+const rubricTemplateEncoder = z
+  .object({
+    type: z.literal('object'),
+    properties: z
+      .record(
+        z.string(),
+        z
+          .object({
+            type: z.string().optional(),
+            title: z.string().optional(),
+            description: z.string().optional(),
+            minimum: z.number().optional(),
+            maximum: z.number().optional(),
+            oneOf: z
+              .array(
+                z.object({
+                  const: z.union([z.number(), z.string()]),
+                  title: z.string(),
+                }),
+              )
+              .optional(),
+            'x-format': z.string().optional(),
+          })
+          .passthrough(),
+      )
+      .optional(),
+    required: z.array(z.string()).optional(),
+    'x-field-order': z.array(z.string()).optional(),
+  })
+  .passthrough();
+
 // ============================================================================
 // ProcessPhase encoder (for frontend UI components)
 // ============================================================================
@@ -198,7 +234,7 @@ const instanceDataWithSchemaEncoder = z.object({
     .optional(),
   phases: z.array(instancePhaseDataEncoder).optional(),
   proposalTemplate: jsonSchemaEncoder.optional(),
-  rubricTemplate: jsonSchemaEncoder.optional(),
+  rubricTemplate: rubricTemplateEncoder.optional(),
 });
 
 /** Decision access permissions encoder */
@@ -420,7 +456,7 @@ export const documentContentEncoder = z.discriminatedUnion('type', [
     fragments: z.record(
       z.string(),
       z.object({
-        type: z.string(),
+        type: z.string().optional(),
         content: z.array(z.unknown()).optional(),
       }),
     ),
diff --git a/services/api/src/routers/decision/instances/updateDecisionInstance.test.ts b/services/api/src/routers/decision/instances/updateDecisionInstance.test.ts
index 2f9d5640d..ca3646196 100644
--- a/services/api/src/routers/decision/instances/updateDecisionInstance.test.ts
+++ b/services/api/src/routers/decision/instances/updateDecisionInstance.test.ts
@@ -537,7 +537,9 @@ describe.concurrent('updateDecisionInstance', () => {
 
     const result = await caller.decision.updateDecisionInstance({
       instanceId: instance.instance.id,
-      rubricTemplate: validRubricTemplate,
+      rubricTemplate: validRubricTemplate as typeof validRubricTemplate & {
+        type: 'object';
+      },
     });
 
     expect(result.processInstance.id).toBe(instance.instance.id);

From 176e53dbdf9c4edcd16793c6f4ca3835bbcfd1ad Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Wed, 4 Mar 2026 10:22:16 -0500
Subject: [PATCH 33/38] Move ConfirmDeleteModal to shared location

- Move component from ProcessBuilder-specific to shared @/components
- Remove 'use client' directive (not needed, parent is client component)
- Delete old re-export file as all imports updated
---
 .../ProcessBuilder/components => }/ConfirmDeleteModal.tsx       | 2 --
 1 file changed, 2 deletions(-)
 rename apps/app/src/components/{decisions/ProcessBuilder/components => }/ConfirmDeleteModal.tsx (98%)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/components/ConfirmDeleteModal.tsx b/apps/app/src/components/ConfirmDeleteModal.tsx
similarity index 98%
rename from apps/app/src/components/decisions/ProcessBuilder/components/ConfirmDeleteModal.tsx
rename to apps/app/src/components/ConfirmDeleteModal.tsx
index 503c279b1..19c782373 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/components/ConfirmDeleteModal.tsx
+++ b/apps/app/src/components/ConfirmDeleteModal.tsx
@@ -1,5 +1,3 @@
-'use client';
-
 import { Button } from '@op/ui/Button';
 import { Modal, ModalBody, ModalFooter, ModalHeader } from '@op/ui/Modal';
 

From 665899097a30ae0a66d81cbf97f5411399a6a893 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Wed, 4 Mar 2026 10:22:21 -0500
Subject: [PATCH 34/38] Add Suspense and ErrorBoundary fallbacks to
 CriteriaSection

- Create RubricEditorSkeleton for loading state
- Add ErrorMessage fallback to ErrorBoundary
- Add RubricEditorSkeleton fallback to Suspense
---
 .../stepContent/rubric/CriteriaSection.tsx    |  8 ++--
 .../rubric/RubricEditorSkeleton.tsx           | 44 +++++++++++++++++++
 2 files changed, 49 insertions(+), 3 deletions(-)
 create mode 100644 apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorSkeleton.tsx

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
index 124267eaf..396fa85f5 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx
@@ -6,15 +6,17 @@ import { Suspense } from 'react';
 import { useTranslations } from '@/lib/i18n';
 
 import ErrorBoundary from '@/components/ErrorBoundary';
+import { ErrorMessage } from '@/components/ErrorMessage';
+import type { SectionProps } from '@/components/decisions/ProcessBuilder/contentRegistry';
 
-import type { SectionProps } from '../../contentRegistry';
 import { CodeAnimation } from './RubricComingSoonAnimation';
 import { RubricEditorContent } from './RubricEditorContent';
+import { RubricEditorSkeleton } from './RubricEditorSkeleton';
 
 export default function CriteriaSection(props: SectionProps) {
   return (
-    <ErrorBoundary>
-      <Suspense>
+    <ErrorBoundary fallback={<ErrorMessage />}>
+      <Suspense fallback={<RubricEditorSkeleton />}>
         <CriteriaSectionContent {...props} />
       </Suspense>
     </ErrorBoundary>
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorSkeleton.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorSkeleton.tsx
new file mode 100644
index 000000000..42d9e1295
--- /dev/null
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorSkeleton.tsx
@@ -0,0 +1,44 @@
+import { Skeleton } from '@op/ui/Skeleton';
+
+/**
+ * Skeleton loading state for the rubric criteria editor.
+ */
+export function RubricEditorSkeleton() {
+  return (
+    <div className="flex h-full flex-col md:flex-row">
+      {/* Main content skeleton */}
+      <div className="flex-1 basis-1/2 p-4 md:p-8">
+        <div className="mx-auto max-w-160 space-y-4">
+          <div className="flex items-center justify-between">
+            <Skeleton className="h-7 w-40" />
+            <Skeleton className="h-5 w-20" />
+          </div>
+
+          {/* Criterion card skeletons */}
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="rounded-lg border p-4">
+              <div className="flex items-center gap-3">
+                <Skeleton className="size-6" />
+                <Skeleton className="size-4" />
+                <Skeleton className="h-6 flex-1" />
+                <Skeleton className="h-5 w-16 rounded-full" />
+              </div>
+            </div>
+          ))}
+
+          <Skeleton className="h-10 w-full rounded-md" />
+        </div>
+      </div>
+
+      {/* Preview skeleton */}
+      <div className="hidden basis-1/2 border-l p-4 md:block md:p-8">
+        <div className="mx-auto max-w-120 space-y-4">
+          <Skeleton className="h-6 w-32" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-10 w-full" />
+          <Skeleton className="h-24 w-full" />
+        </div>
+      </div>
+    </div>
+  );
+}

From 19cc460ad7b65e2c02a2bb6186f82f0e51eb0819 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Wed, 4 Mar 2026 10:22:38 -0500
Subject: [PATCH 35/38] Use ProcessStatus enum instead of string literals

- Replace instance.status === 'draft' with ProcessStatus.DRAFT
- Update imports to use @/ path aliases
- Affects 5 ProcessBuilder section files
---
 .../stepContent/general/OverviewSectionForm.tsx    | 12 ++++++------
 .../stepContent/general/PhasesSectionContent.tsx   | 14 +++++++-------
 .../general/ProposalCategoriesSectionContent.tsx   |  9 +++++----
 .../stepContent/template/TemplateEditorContent.tsx | 10 ++++++----
 4 files changed, 24 insertions(+), 21 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/OverviewSectionForm.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/OverviewSectionForm.tsx
index 3a26ad90b..32c4c0a9a 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/OverviewSectionForm.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/OverviewSectionForm.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { trpc } from '@op/api/client';
+import { ProcessStatus } from '@op/api/encoders';
 import { useDebouncedCallback } from '@op/hooks';
 import { SelectItem } from '@op/ui/Select';
 import { useEffect, useRef } from 'react';
@@ -9,13 +10,12 @@ import { z } from 'zod';
 import { useTranslations } from '@/lib/i18n';
 import type { TranslateFn } from '@/lib/i18n';
 
+import { SaveStatusIndicator } from '@/components/decisions/ProcessBuilder/components/SaveStatusIndicator';
+import { ToggleRow } from '@/components/decisions/ProcessBuilder/components/ToggleRow';
+import type { SectionProps } from '@/components/decisions/ProcessBuilder/contentRegistry';
+import { useProcessBuilderStore } from '@/components/decisions/ProcessBuilder/stores/useProcessBuilderStore';
 import { getFieldErrorMessage, useAppForm } from '@/components/form/utils';
 
-import { SaveStatusIndicator } from '../../components/SaveStatusIndicator';
-import { ToggleRow } from '../../components/ToggleRow';
-import type { SectionProps } from '../../contentRegistry';
-import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
-
 const AUTOSAVE_DEBOUNCE_MS = 1000;
 
 const createOverviewValidator = (t: TranslateFn) =>
@@ -78,7 +78,7 @@ export function OverviewSectionForm({
   const utils = trpc.useUtils();
 
   const [instance] = trpc.decision.getInstance.useSuspenseQuery({ instanceId });
-  const isDraft = instance.status === 'draft';
+  const isDraft = instance.status === ProcessStatus.DRAFT;
 
   // Store: used as a localStorage buffer for non-draft edits only
   const instanceData = useProcessBuilderStore(
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
index d222c3274..586bc221a 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/PhasesSectionContent.tsx
@@ -2,6 +2,7 @@
 
 import { parseDate } from '@internationalized/date';
 import { trpc } from '@op/api/client';
+import { ProcessStatus } from '@op/api/encoders';
 import type { PhaseDefinition, PhaseRules } from '@op/api/encoders';
 import { useDebouncedCallback } from '@op/hooks';
 import {
@@ -32,13 +33,12 @@ import {
 
 import { useTranslations } from '@/lib/i18n';
 
+import { ConfirmDeleteModal } from '@/components/ConfirmDeleteModal';
 import { RichTextEditorWithToolbar } from '@/components/RichTextEditor/RichTextEditorWithToolbar';
-
-import { ConfirmDeleteModal } from '../../components/ConfirmDeleteModal';
-import { SaveStatusIndicator } from '../../components/SaveStatusIndicator';
-import { ToggleRow } from '../../components/ToggleRow';
-import type { SectionProps } from '../../contentRegistry';
-import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
+import { SaveStatusIndicator } from '@/components/decisions/ProcessBuilder/components/SaveStatusIndicator';
+import { ToggleRow } from '@/components/decisions/ProcessBuilder/components/ToggleRow';
+import type { SectionProps } from '@/components/decisions/ProcessBuilder/contentRegistry';
+import { useProcessBuilderStore } from '@/components/decisions/ProcessBuilder/stores/useProcessBuilderStore';
 
 const AUTOSAVE_DEBOUNCE_MS = 1000;
 
@@ -49,7 +49,7 @@ export function PhasesSectionContent({
   const [instance] = trpc.decision.getInstance.useSuspenseQuery({ instanceId });
   const instancePhases = instance.instanceData?.phases;
   const templatePhases = instance.process?.processSchema?.phases;
-  const isDraft = instance.status === 'draft';
+  const isDraft = instance.status === ProcessStatus.DRAFT;
 
   // Store: used as a localStorage buffer for non-draft edits only
   const storePhases = useProcessBuilderStore(
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/ProposalCategoriesSectionContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/ProposalCategoriesSectionContent.tsx
index e35f42944..03722b305 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/ProposalCategoriesSectionContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/general/ProposalCategoriesSectionContent.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { trpc } from '@op/api/client';
+import { ProcessStatus } from '@op/api/encoders';
 import type { ProposalCategory } from '@op/common';
 import { useDebouncedCallback } from '@op/hooks';
 import { Button } from '@op/ui/Button';
@@ -14,9 +15,9 @@ import { LuLeaf, LuPencil, LuPlus, LuTrash2 } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
 
-import { ensureLockedFields } from '../../../proposalTemplate';
-import type { SectionProps } from '../../contentRegistry';
-import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
+import type { SectionProps } from '@/components/decisions/ProcessBuilder/contentRegistry';
+import { useProcessBuilderStore } from '@/components/decisions/ProcessBuilder/stores/useProcessBuilderStore';
+import { ensureLockedFields } from '@/components/decisions/proposalTemplate';
 
 const AUTOSAVE_DEBOUNCE_MS = 1000;
 const CATEGORY_TITLE_MAX_LENGTH = 40;
@@ -36,7 +37,7 @@ export function ProposalCategoriesSectionContent({
 
   // Fetch server data for seeding
   const [instance] = trpc.decision.getInstance.useSuspenseQuery({ instanceId });
-  const isDraft = instance.status === 'draft';
+  const isDraft = instance.status === ProcessStatus.DRAFT;
   const serverConfig = instance.instanceData?.config;
 
   const storeData = useProcessBuilderStore(
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorContent.tsx
index 9b1c9d0b1..60e0e2d33 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/template/TemplateEditorContent.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { trpc } from '@op/api/client';
+import { ProcessStatus } from '@op/api/encoders';
 import { SYSTEM_FIELD_KEYS } from '@op/common/client';
 import type {
   ProposalTemplateSchema,
@@ -18,6 +19,8 @@ import { LuAlignLeft, LuChevronDown, LuHash } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
 
+import type { SectionProps } from '@/components/decisions/ProcessBuilder/contentRegistry';
+import { useProcessBuilderStore } from '@/components/decisions/ProcessBuilder/stores/useProcessBuilderStore';
 import {
   type FieldType,
   type FieldView,
@@ -33,9 +36,8 @@ import {
   setFieldRequired,
   updateFieldDescription,
   updateFieldLabel,
-} from '../../../proposalTemplate';
-import type { SectionProps } from '../../contentRegistry';
-import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
+} from '@/components/decisions/proposalTemplate';
+
 import { AddFieldMenu } from './AddFieldMenu';
 import { BudgetFieldConfig } from './BudgetFieldConfig';
 import {
@@ -62,7 +64,7 @@ export function TemplateEditorContent({
 
   // Load instance data from the backend
   const [instance] = trpc.decision.getInstance.useSuspenseQuery({ instanceId });
-  const isDraft = instance.status === 'draft';
+  const isDraft = instance.status === ProcessStatus.DRAFT;
   const utils = trpc.useUtils();
   const instanceData = instance.instanceData;
 

From 259a3d823a9001b66bd81668428e9726a289b9ff Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Wed, 4 Mar 2026 10:22:44 -0500
Subject: [PATCH 36/38] Improve RubricCriterionCard styling and validation

- Use @/ path aliases for imports
- Add explicit border-neutral-gray1 to hr separator
- Simplify padding: px-4 pt-4 pb-4 to p-4, px-3 py-3 to p-3
- Remove max points upper limit of 10, add error message for min 2
- Add 'Minimum is 2' translation to all locales
---
 .../stepContent/rubric/RubricCriterionCard.tsx       | 12 +++++++-----
 .../stepContent/rubric/rubricCriterionRegistry.tsx   |  2 +-
 apps/app/src/lib/i18n/dictionaries/bn.json           |  1 +
 apps/app/src/lib/i18n/dictionaries/en.json           |  1 +
 apps/app/src/lib/i18n/dictionaries/es.json           |  1 +
 apps/app/src/lib/i18n/dictionaries/fr.json           |  1 +
 apps/app/src/lib/i18n/dictionaries/pt.json           |  1 +
 7 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index a01f01eda..5944adc27 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -20,7 +20,8 @@ import type { TranslationKey } from '@/lib/i18n/routing';
 import type {
   CriterionView,
   RubricCriterionType,
-} from '../../../../decisions/rubricTemplate';
+} from '@/components/decisions/rubricTemplate';
+
 import {
   CRITERION_TYPES,
   CRITERION_TYPE_REGISTRY,
@@ -110,8 +111,8 @@ export function RubricCriterionCard({
 
       {/* Collapsible body */}
       <AccordionContent>
-        <hr />
-        <div className="space-y-4 px-4 pt-4 pb-4">
+        <hr className="border-neutral-gray1" />
+        <div className="space-y-4 p-4">
           {/* Criterion name */}
           <TextField
             label={t('Criterion name')}
@@ -246,10 +247,11 @@ function ScoredCriterionConfig({
         label={t('Max points')}
         value={max}
         onChange={(value) => {
-          if (value !== null && value >= 2 && value <= 10) {
+          if (value !== null && value >= 2) {
             onUpdateMaxPoints(value);
           }
         }}
+        errorMessage={max < 2 ? t('Minimum is 2') : undefined}
         inputProps={{ className: 'w-20' }}
       />
 
@@ -325,7 +327,7 @@ export function RubricCriterionDragPreview({
 }) {
   const t = useTranslations();
   return (
-    <div className="flex items-center gap-2 rounded-lg border bg-white px-3 py-3 shadow-lg">
+    <div className="flex items-center gap-2 rounded-lg border bg-white p-3 shadow-lg">
       <div className="grid size-6 place-items-center rounded bg-neutral-offWhite">
         <LuGripVertical className="size-4 shrink-0 text-neutral-gray4" />
       </div>
diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
index f07629338..c34a3f2ea 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/rubricCriterionRegistry.tsx
@@ -1,6 +1,6 @@
 import type { TranslationKey } from '@/lib/i18n/routing';
 
-import type { RubricCriterionType } from '../../../../decisions/rubricTemplate';
+import type { RubricCriterionType } from '@/components/decisions/rubricTemplate';
 
 /**
  * Display metadata for each rubric criterion type.
diff --git a/apps/app/src/lib/i18n/dictionaries/bn.json b/apps/app/src/lib/i18n/dictionaries/bn.json
index 35d025c13..798a8a195 100644
--- a/apps/app/src/lib/i18n/dictionaries/bn.json
+++ b/apps/app/src/lib/i18n/dictionaries/bn.json
@@ -889,6 +889,7 @@
   "Describe what earns {number} points...": "{number} পয়েন্ট পেতে কী প্রয়োজন তা বর্ণনা করুন...",
   "Define what each score means": "প্রতিটি স্কোরের অর্থ নির্ধারণ করুন",
   "Max points": "সর্বোচ্চ পয়েন্ট",
+  "Minimum is 2": "সর্বনিম্ন 2",
   "New criterion": "নতুন মানদণ্ড",
   "Remove criterion": "মানদণ্ড সরান",
   "Rubric criteria": "রুব্রিক মানদণ্ড",
diff --git a/apps/app/src/lib/i18n/dictionaries/en.json b/apps/app/src/lib/i18n/dictionaries/en.json
index a92ffda57..e044c4867 100644
--- a/apps/app/src/lib/i18n/dictionaries/en.json
+++ b/apps/app/src/lib/i18n/dictionaries/en.json
@@ -882,6 +882,7 @@
   "Describe what earns {number} points...": "Describe what earns {number} points...",
   "Define what each score means": "Define what each score means",
   "Max points": "Max points",
+  "Minimum is 2": "Minimum is 2",
   "New criterion": "New criterion",
   "Remove criterion": "Remove criterion",
   "Rubric criteria": "Rubric criteria",
diff --git a/apps/app/src/lib/i18n/dictionaries/es.json b/apps/app/src/lib/i18n/dictionaries/es.json
index 119f10b33..d75b98a57 100644
--- a/apps/app/src/lib/i18n/dictionaries/es.json
+++ b/apps/app/src/lib/i18n/dictionaries/es.json
@@ -882,6 +882,7 @@
   "Describe what earns {number} points...": "Describa qué merece {number} puntos...",
   "Define what each score means": "Defina qué significa cada puntuación",
   "Max points": "Puntos máximos",
+  "Minimum is 2": "El mínimo es 2",
   "New criterion": "Nuevo criterio",
   "Remove criterion": "Eliminar criterio",
   "Rubric criteria": "Criterios de rúbrica",
diff --git a/apps/app/src/lib/i18n/dictionaries/fr.json b/apps/app/src/lib/i18n/dictionaries/fr.json
index df411aec2..2d3705c9f 100644
--- a/apps/app/src/lib/i18n/dictionaries/fr.json
+++ b/apps/app/src/lib/i18n/dictionaries/fr.json
@@ -882,6 +882,7 @@
   "Describe what earns {number} points...": "Décrivez ce qui mérite {number} points...",
   "Define what each score means": "Définissez ce que signifie chaque note",
   "Max points": "Points maximum",
+  "Minimum is 2": "Le minimum est 2",
   "New criterion": "Nouveau critère",
   "Remove criterion": "Supprimer le critère",
   "Rubric criteria": "Critères de la grille",
diff --git a/apps/app/src/lib/i18n/dictionaries/pt.json b/apps/app/src/lib/i18n/dictionaries/pt.json
index 920e65f39..62eca8966 100644
--- a/apps/app/src/lib/i18n/dictionaries/pt.json
+++ b/apps/app/src/lib/i18n/dictionaries/pt.json
@@ -882,6 +882,7 @@
   "Describe what earns {number} points...": "Descreva o que merece {number} pontos...",
   "Define what each score means": "Defina o que cada nota significa",
   "Max points": "Pontos máximos",
+  "Minimum is 2": "O mínimo é 2",
   "New criterion": "Novo critério",
   "Remove criterion": "Remover critério",
   "Rubric criteria": "Critérios da rubrica",

From 0d9585e245c197077ca9cb50bd532167018cc8e2 Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Wed, 4 Mar 2026 10:22:51 -0500
Subject: [PATCH 37/38] Improve RubricEditorContent typing and patterns

- Type scoredConfigCacheRef with { const: number; title: string }[]
- Remove 'as' type casts by using proper type guards
- Use useShallow from zustand for destructured store selectors
- Switch criteriaIndexMap to 0-based, add +1 at display points
- Remove manual teal color overrides on secondary button
- Add TODO for useAutoSave hook extraction
- Use @/ path aliases and ProcessStatus enum
---
 .../rubric/RubricEditorContent.tsx            | 67 ++++++++++++-------
 services/api/src/encoders/decision.ts         | 19 ++++--
 2 files changed, 56 insertions(+), 30 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
index 1309c0a37..981e04d9e 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricEditorContent.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { trpc } from '@op/api/client';
+import { ProcessStatus } from '@op/api/encoders';
 import type { RubricTemplateSchema } from '@op/common/client';
 import { useDebouncedCallback } from '@op/hooks';
 import { Accordion, AccordionItem } from '@op/ui/Accordion';
@@ -12,14 +13,19 @@ import { Sortable } from '@op/ui/Sortable';
 import { cn } from '@op/ui/utils';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { LuLeaf, LuPlus } from 'react-icons/lu';
+import { useShallow } from 'zustand/react/shallow';
 
 import { useTranslations } from '@/lib/i18n';
 import type { TranslationKey } from '@/lib/i18n/routing';
 
+import { ConfirmDeleteModal } from '@/components/ConfirmDeleteModal';
+import { SaveStatusIndicator } from '@/components/decisions/ProcessBuilder/components/SaveStatusIndicator';
+import type { SectionProps } from '@/components/decisions/ProcessBuilder/contentRegistry';
+import { useProcessBuilderStore } from '@/components/decisions/ProcessBuilder/stores/useProcessBuilderStore';
 import type {
   CriterionView,
   RubricCriterionType,
-} from '../../../../decisions/rubricTemplate';
+} from '@/components/decisions/rubricTemplate';
 import {
   addCriterion,
   changeCriterionType,
@@ -35,11 +41,8 @@ import {
   updateCriterionLabel,
   updateScoreLabel,
   updateScoredMaxPoints,
-} from '../../../../decisions/rubricTemplate';
-import { ConfirmDeleteModal } from '../../components/ConfirmDeleteModal';
-import { SaveStatusIndicator } from '../../components/SaveStatusIndicator';
-import type { SectionProps } from '../../contentRegistry';
-import { useProcessBuilderStore } from '../../stores/useProcessBuilderStore';
+} from '@/components/decisions/rubricTemplate';
+
 import {
   RubricCriterionCard,
   RubricCriterionDragPreview,
@@ -57,7 +60,7 @@ export function RubricEditorContent({
 
   // Load instance data from the backend
   const [instance] = trpc.decision.getInstance.useSuspenseQuery({ instanceId });
-  const isDraft = instance.status === 'draft';
+  const isDraft = instance.status === ProcessStatus.DRAFT;
   const utils = trpc.useUtils();
   const instanceData = instance.instanceData;
 
@@ -88,17 +91,19 @@ export function RubricEditorContent({
 
   // Cache scored config so switching type and back doesn't lose score labels
   const scoredConfigCacheRef = useRef<
-    Map<string, { maximum: number; oneOf: unknown[] }>
+    Map<string, { maximum: number; oneOf: { const: number; title: string }[] }>
   >(new Map());
 
-  const setRubricTemplateSchema = useProcessBuilderStore(
-    (s) => s.setRubricTemplateSchema,
-  );
-  const setSaveStatus = useProcessBuilderStore((s) => s.setSaveStatus);
-  const markSaved = useProcessBuilderStore((s) => s.markSaved);
-  const saveState = useProcessBuilderStore((s) =>
-    s.getSaveState(decisionProfileId),
-  );
+  const { setRubricTemplateSchema, setSaveStatus, markSaved, getSaveState } =
+    useProcessBuilderStore(
+      useShallow((s) => ({
+        setRubricTemplateSchema: s.setRubricTemplateSchema,
+        setSaveStatus: s.setSaveStatus,
+        markSaved: s.markSaved,
+        getSaveState: s.getSaveState,
+      })),
+    );
+  const saveState = getSaveState(decisionProfileId);
 
   const debouncedSaveRef = useRef<() => boolean>(null);
   const updateInstance = trpc.decision.updateDecisionInstance.useMutation({
@@ -115,11 +120,12 @@ export function RubricEditorContent({
   // Derive criterion views from the template
   const criteria = useMemo(() => getCriteria(template), [template]);
   const criteriaIndexMap = useMemo(
-    () => new Map(criteria.map((c, i) => [c.id, i + 1])),
+    () => new Map(criteria.map((c, i) => [c.id, i])),
     [criteria],
   );
 
-  // Debounced auto-save
+  // TODO: Extract this debounced auto-save pattern into a shared useAutoSave() hook
+  // (same pattern is used in TemplateEditorContent and useProposalDraft)
   const debouncedSave = useDebouncedCallback(
     (updatedTemplate: RubricTemplateSchema) => {
       setRubricTemplateSchema(decisionProfileId, updatedTemplate);
@@ -206,9 +212,18 @@ export function RubricEditorContent({
         // Stash scored config before switching away from scored
         if (getCriterionType(prev, criterionId) === 'scored') {
           const schema = getCriterionSchema(prev, criterionId);
+          const oneOfEntries = (schema?.oneOf ?? []).filter(
+            (e): e is { const: number; title: string } =>
+              typeof e === 'object' &&
+              e !== null &&
+              'const' in e &&
+              typeof (e as Record<string, unknown>).const === 'number' &&
+              'title' in e &&
+              typeof (e as Record<string, unknown>).title === 'string',
+          );
           scoredConfigCacheRef.current.set(criterionId, {
-            maximum: (schema?.maximum as number) ?? 5,
-            oneOf: (schema?.oneOf as unknown[]) ?? [],
+            maximum: schema?.maximum ?? 5,
+            oneOf: oneOfEntries,
           });
         }
 
@@ -221,7 +236,7 @@ export function RubricEditorContent({
           if (cached) {
             updated = updateCriterionJsonSchema(updated, criterionId, {
               maximum: cached.maximum,
-              oneOf: cached.oneOf as { const: number; title: string }[],
+              oneOf: cached.oneOf,
             });
           }
         }
@@ -306,11 +321,11 @@ export function RubricEditorContent({
                     if (!item) {
                       return null;
                     }
-                    const idx = criteriaIndexMap.get(item.id) ?? 1;
+                    const idx = criteriaIndexMap.get(item.id) ?? 0;
                     return (
                       <RubricCriterionDragPreview
                         criterion={item}
-                        index={idx}
+                        index={idx + 1}
                       />
                     );
                   }}
@@ -318,7 +333,7 @@ export function RubricEditorContent({
                   aria-label={t('Rubric criteria')}
                 >
                   {(criterion, controls) => {
-                    const idx = criteriaIndexMap.get(criterion.id) ?? 1;
+                    const idx = criteriaIndexMap.get(criterion.id) ?? 0;
                     const snapshotErrors =
                       criterionErrors.get(criterion.id) ?? [];
                     const liveErrors = getCriterionErrors(criterion);
@@ -336,7 +351,7 @@ export function RubricEditorContent({
                       >
                         <RubricCriterionCard
                           criterion={criterion}
-                          index={idx}
+                          index={idx + 1}
                           errors={displayedErrors}
                           controls={controls}
                           onRemove={handleRemoveCriterion}
@@ -354,7 +369,7 @@ export function RubricEditorContent({
 
               <Button
                 color="secondary"
-                className="w-full text-primary-teal hover:text-primary-tealBlack"
+                className="w-full"
                 onPress={handleAddCriterion}
               >
                 <LuPlus className="size-4" />
diff --git a/services/api/src/encoders/decision.ts b/services/api/src/encoders/decision.ts
index 64839f2fe..564f545e0 100644
--- a/services/api/src/encoders/decision.ts
+++ b/services/api/src/encoders/decision.ts
@@ -20,9 +20,15 @@ import { baseProfileEncoder } from './profiles';
 const jsonSchemaEncoder = z.record(z.string(), z.unknown());
 
 /**
- * Typed encoder for rubric templates. Matches the `RubricTemplateSchema`
- * interface from `@op/common` so the frontend receives properly typed data
- * without needing type assertions.
+ * Typed encoder for rubric templates (READ path only).
+ *
+ * This provides strict typing so the frontend receives properly typed data
+ * from `instanceData.rubricTemplate` without needing type assertions.
+ *
+ * For the WRITE path (mutations), we use `jsonSchemaEncoder` instead because
+ * the frontend sends `RubricTemplateSchema` which extends `JSONSchema7` - a
+ * much broader type that doesn't fit this strict schema. Runtime validation
+ * still occurs via Zod; this encoder is primarily for TypeScript inference.
  */
 const rubricTemplateEncoder = z
   .object({
@@ -632,7 +638,12 @@ export const updateDecisionInstanceInputSchema = z.object({
   phases: z.array(instancePhaseDataInputEncoder).optional(),
   /** Proposal template (JSON Schema) */
   proposalTemplate: jsonSchemaEncoder.optional(),
-  /** Rubric template (JSON Schema defining evaluation criteria) */
+  /**
+   * Rubric template (JSON Schema defining evaluation criteria).
+   * Uses loose jsonSchemaEncoder for input because the frontend sends
+   * RubricTemplateSchema (extends JSONSchema7). See rubricTemplateEncoder
+   * for the typed read path.
+   */
   rubricTemplate: jsonSchemaEncoder.optional(),
 });
 

From 663cdb5d6db7b42c1165aca6f9a9f1c7d49a62da Mon Sep 17 00:00:00 2001
From: Nour Malaeb <nourmalaeb@gmail.com>
Date: Wed, 4 Mar 2026 11:04:41 -0500
Subject: [PATCH 38/38] Fix max points data loss with description caching

- Cache score label descriptions when maxPoints decreases so they can be
  restored if the user increases maxPoints again
- Cache persists only while the criterion card is mounted
- Uses onChange (responsive) instead of onBlur since caching prevents data loss
---
 .../rubric/RubricCriterionCard.tsx            | 59 +++++++++++++++++--
 1 file changed, 54 insertions(+), 5 deletions(-)

diff --git a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
index 5944adc27..8dfa445ad 100644
--- a/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
+++ b/apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/RubricCriterionCard.tsx
@@ -12,6 +12,7 @@ import { Radio, RadioGroup } from '@op/ui/RadioGroup';
 import { DragHandle } from '@op/ui/Sortable';
 import type { SortableItemControls } from '@op/ui/Sortable';
 import { TextField } from '@op/ui/TextField';
+import { useState } from 'react';
 import { LuChevronRight, LuGripVertical, LuTrash2 } from 'react-icons/lu';
 
 import { useTranslations } from '@/lib/i18n';
@@ -241,16 +242,64 @@ function ScoredCriterionConfig({
   const t = useTranslations();
   const max = criterion.maxPoints ?? 5;
 
+  // Cache descriptions that would be lost when maxPoints decreases.
+  // Key is 1-based score value, value is the description text.
+  // Cache persists until user navigates away from this criterion card.
+  const [cachedDescriptions, setCachedDescriptions] = useState<
+    Record<number, string>
+  >({});
+
+  const handleMaxPointsChange = (value: number | null) => {
+    if (value === null || value < 2) {
+      return;
+    }
+
+    const newMax = value;
+
+    if (newMax < max) {
+      // Decreasing - cache descriptions that will be removed
+      const toCache: Record<number, string> = { ...cachedDescriptions };
+      for (let i = newMax + 1; i <= max; i++) {
+        const label = criterion.scoreLabels[i - 1]; // scoreLabels is 0-indexed
+        if (label) {
+          toCache[i] = label;
+        }
+      }
+      setCachedDescriptions(toCache);
+    } else if (newMax > max) {
+      // Increasing - restore cached descriptions after update
+      const labelsToRestore: Array<{ score: number; label: string }> = [];
+      for (let i = max + 1; i <= newMax; i++) {
+        const cached = cachedDescriptions[i];
+        if (cached) {
+          labelsToRestore.push({ score: i, label: cached });
+        }
+      }
+
+      // Clear restored items from cache
+      if (labelsToRestore.length > 0) {
+        const newCache = { ...cachedDescriptions };
+        labelsToRestore.forEach(({ score }) => delete newCache[score]);
+        setCachedDescriptions(newCache);
+
+        // Restore labels after state update
+        setTimeout(() => {
+          labelsToRestore.forEach(({ score, label }) => {
+            onUpdateScoreLabel(score, label);
+          });
+        }, 0);
+      }
+    }
+
+    onUpdateMaxPoints(newMax);
+  };
+
   return (
     <div className="space-y-4">
       <NumberField
         label={t('Max points')}
         value={max}
-        onChange={(value) => {
-          if (value !== null && value >= 2) {
-            onUpdateMaxPoints(value);
-          }
-        }}
+        onChange={handleMaxPointsChange}
         errorMessage={max < 2 ? t('Minimum is 2') : undefined}
         inputProps={{ className: 'w-20' }}
       />