Rubric editor UI

apps/app/src/components/ConfirmDeleteModal.tsx

@@ -0,0 +1,52 @@
+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>
+  );
+}

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>
@@ -252,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);
@@ -293,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>

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(

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 {
@@ -15,7 +16,6 @@ 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 type { Key } from '@op/ui/RAC';
 import { DisclosureStateContext } from '@op/ui/RAC';
 import { DragHandle, Sortable } from '@op/ui/Sortable';
@@ -33,12 +33,12 @@ import {
 
 import { useTranslations } from '@/lib/i18n';
 
+import { ConfirmDeleteModal } from '@/components/ConfirmDeleteModal';
 import { RichTextEditorWithToolbar } from '@/components/RichTextEditor/RichTextEditorWithToolbar';
-
-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(
@@ -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>
   );
 };

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(

apps/app/src/components/decisions/ProcessBuilder/stepContent/rubric/CriteriaSection.tsx

@@ -5,32 +5,30 @@ import { Suspense } from 'react';
 
 import { useTranslations } from '@/lib/i18n';
 
-import type { SectionProps } from '../../contentRegistry';
+import ErrorBoundary from '@/components/ErrorBoundary';
+import { ErrorMessage } from '@/components/ErrorMessage';
+import type { SectionProps } from '@/components/decisions/ProcessBuilder/contentRegistry';
+
 import { CodeAnimation } from './RubricComingSoonAnimation';
-import { RubricParticipantPreview } from './RubricParticipantPreview';
-import { DUMMY_RUBRIC_TEMPLATE } from './dummyRubricTemplate';
+import { RubricEditorContent } from './RubricEditorContent';
+import { RubricEditorSkeleton } from './RubricEditorSkeleton';
 
 export default function CriteriaSection(props: SectionProps) {
   return (
-    <Suspense>
-      <CriteriaSectionContent {...props} />
-    </Suspense>
+    <ErrorBoundary fallback={<ErrorMessage />}>
+      <Suspense fallback={<RubricEditorSkeleton />}>
+        <CriteriaSectionContent {...props} />
+      </Suspense>
+    </ErrorBoundary>
   );
 }
 
-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 (