Questionnaire v2: submit-path hardening and render-failure containment

public/locale/en.json

@@ -2676,6 +2676,7 @@
   "filed_by": "filed by",
   "files": "Files",
   "fill_color": "Fill Color",
+  "fill_context_load_failed": "Couldn't load the patient context for this form. Go back and try again.",
   "fill_draft_form_dropped": "Couldn't restore \"{{title}}\" — the questionnaire changed since the draft was saved.",
   "fill_draft_form_unavailable": "Couldn't load \"{{title}}\" just now — it's still in your saved draft.",
   "fill_draft_includes_added_forms_one": "Includes {{count}} added questionnaire.",
@@ -4802,6 +4803,7 @@
   "questionnaire_updated_successfully": "Questionnaire updated successfully",
   "questions": "Questions",
   "questions_count": "Question count",
+  "questions_outline": "Questions outline",
   "queue": "Queue",
   "queue_board": "Queue board",
   "queue_created_successfully": "Queue created successfully",

src/components/Common/PluginErrorBoundary.tsx

@@ -1,14 +1,21 @@
 import React from "react";
 
+interface PluginErrorBoundaryProps {
+  children: React.ReactNode;
+  pluginName: string;
+  fallback?: React.ReactNode;
+  /** Notified once the boundary has caught. Callers that must react to the
+   *  failure elsewhere in the app use it — the questionnaire fill page
+   *  records the question so submit-time validation stops requiring an
+   *  input that is no longer on screen. */
+  onError?: (error: Error) => void;
+}
+
 export class PluginErrorBoundary extends React.Component<
-  { children: React.ReactNode; pluginName: string; fallback?: React.ReactNode },
+  PluginErrorBoundaryProps,
   { hasError: boolean }
 > {
-  constructor(props: {
-    children: React.ReactNode;
-    pluginName: string;
-    fallback?: React.ReactNode;
-  }) {
+  constructor(props: PluginErrorBoundaryProps) {
     super(props);
     this.state = { hasError: false };
   }
@@ -23,6 +30,7 @@ export class PluginErrorBoundary extends React.Component<
       error,
       errorInfo,
     );
+    this.props.onError?.(error);
   }
 
   render() {

src/components/Questionnaire/QuestionTypes/AllergyQuestion.tsx

@@ -48,7 +48,6 @@ import {
 
 import { CATEGORY_ICONS } from "@/components/Patient/allergy/list";
 import { EntitySelectionDrawer } from "@/components/Questionnaire/EntitySelectionDrawer";
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect";
 
 import useBreakpoints from "@/hooks/useBreakpoints";
@@ -552,7 +551,6 @@ const AllergyItem = ({
 };
 
 export function AllergyQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -676,7 +674,6 @@ export function AllergyQuestion({
 
   return (
     <div className="space-y-4">
-      <QuestionLabel question={question} />
       {allergies.length > 0 && (
         <div className="rounded-lg lg:border lg:border-gray-200">
           <div className="hidden lg:block overflow-x-auto">

src/components/Questionnaire/QuestionTypes/AppointmentQuestion.tsx

@@ -16,7 +16,6 @@ import {
   SheetTrigger,
 } from "@/components/ui/sheet";
 
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import { ScheduleResourceFormState } from "@/components/Schedule/ResourceSelector";
 import useAuthUser from "@/hooks/useAuthUser";
 import { AppointmentDateSelection } from "@/pages/Appointments/BookAppointment/AppointmentDateSelection";
@@ -180,7 +179,6 @@ export function AppointmentQuestion({
 
   return (
     <div className="space-y-4">
-      <QuestionLabel question={question} />
       <AppointmentFormSection
         facilityId={facilityId}
         selectedTags={selectedTags}

src/components/Questionnaire/QuestionTypes/ChargeItemQuestion.tsx

@@ -29,7 +29,6 @@ import {
 import ChargeItemPriceDisplay from "@/components/Billing/ChargeItem/ChargeItemPriceDisplay";
 import { FieldError } from "@/components/Questionnaire/QuestionTypes/FieldError";
 
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import { MonetaryDisplay } from "@/components/ui/monetary-display";
 import { ResourceCategoryResourceType } from "@/types/base/resourceCategory/resourceCategory";
 import { ApplyChargeItemDefinitionRequest } from "@/types/billing/chargeItem/chargeItem";
@@ -201,7 +200,6 @@ export function ChargeItemQuestion({
   facilityId,
   encounterId,
   errors,
-  question,
 }: ChargeItemQuestionProps) {
   const { t } = useTranslation();
   const [selectedChargeItemDefinition, setSelectedChargeItemDefinition] =
@@ -286,7 +284,6 @@ export function ChargeItemQuestion({
 
   return (
     <div className="space-y-4">
-      <QuestionLabel question={question} />
       {chargeItems.length > 0 && (
         <Table>
           <TableHeader>

src/components/Questionnaire/QuestionTypes/DeathQuestion.tsx

@@ -2,8 +2,6 @@ import { format } from "date-fns";
 
 import { DateTimeInput } from "@/components/Common/DateTimeInput";
 
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
-
 import {
   QuestionnaireResponse,
   ResponseValue,
@@ -22,8 +20,7 @@ interface TimeOfDeathQuestionProps {
 }
 
 export function TimeOfDeathQuestion(props: TimeOfDeathQuestionProps) {
-  const { question, questionnaireResponse, updateQuestionnaireResponseCB } =
-    props;
+  const { questionnaireResponse, updateQuestionnaireResponseCB } = props;
 
   const values = (questionnaireResponse.values?.[0]?.value as string[]) || [];
 
@@ -42,7 +39,6 @@ export function TimeOfDeathQuestion(props: TimeOfDeathQuestionProps) {
 
   return (
     <div className="space-y-4">
-      <QuestionLabel question={question} />
       <DateTimeInput
         value={values[0]}
         onDateChange={(val) => val !== undefined && handleUpdate(val)}

src/components/Questionnaire/QuestionTypes/DiagnosisQuestion.tsx

@@ -46,7 +46,6 @@ import {
 
 import { HistoricalRecordSelector } from "@/components/HistoricalRecordSelector";
 import { EntitySelectionDrawer } from "@/components/Questionnaire/EntitySelectionDrawer";
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect";
 
 import useBreakpoints from "@/hooks/useBreakpoints";
@@ -349,7 +348,6 @@ export function DiagnosisQuestion({
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
-  question,
 }: DiagnosisQuestionProps) {
   const { t } = useTranslation();
 
@@ -546,8 +544,7 @@ export function DiagnosisQuestion({
         sortedDiagnoses.length > 0 ? "md:max-w-fit" : "max-w-4xl",
       )}
     >
-      <div className="flex justify-between items-center flex-wrap">
-        <QuestionLabel question={question} />
+      <div className="flex flex-wrap items-center justify-end">
         <HistoricalRecordSelector<DiagnosisRequest>
           title={t("past_diagnoses")}
           structuredTypes={[

src/components/Questionnaire/QuestionTypes/EncounterQuestion.tsx

@@ -16,8 +16,6 @@ import {
 import { Switch } from "@/components/ui/switch";
 import { Textarea } from "@/components/ui/textarea";
 
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
-
 import query from "@/Utils/request/query";
 import { cn } from "@/lib/utils";
 import {
@@ -91,7 +89,6 @@ export function validateEncounterQuestion(
 }
 
 export function EncounterQuestion({
-  question,
   questionnaireResponse,
   updateQuestionnaireResponseCB,
   disabled,
@@ -245,7 +242,6 @@ export function EncounterQuestion({
 
   return (
     <div className="space-y-6">
-      <QuestionLabel question={question} />
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {/* Basic Details */}
         <div className="space-y-2">

src/components/Questionnaire/QuestionTypes/FileQuestion.tsx

@@ -11,7 +11,6 @@ import FileUploadDropdown from "@/components/Files/FileUploadDropdown";
 
 import useFileUpload from "@/hooks/useFileUpload";
 
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import {
   BACKEND_ALLOWED_EXTENSIONS,
   FileCategory,
@@ -153,7 +152,6 @@ export function FilesQuestion(props: FilesQuestionProps) {
 
   return (
     <div className="flex flex-col gap-2">
-      <QuestionLabel question={props.question} />
       {values.map((value, index) => (
         <div key={index} className="flex items-stretch gap-2">
           <Input

src/components/Questionnaire/QuestionTypes/MedicationRequestQuestion.tsx

@@ -116,7 +116,6 @@ import { formatName } from "@/Utils/utils";
 
 import { filterStructuredQuestionnaireSlugs } from "@/components/Questionnaire/data/StructuredFormData";
 import ManageResponseTemplatesSheet from "@/components/Questionnaire/ManageResponseTemplatesSheet";
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Question } from "@/types/questionnaire/question";
 
@@ -349,7 +348,6 @@ export function MedicationRequestQuestion({
   errors,
   questionnaireId: _questionnaireId,
   questionnaireSlug,
-  question,
 }: MedicationRequestQuestionProps) {
   const authUser = useAuthUser();
   const { t } = useTranslation();
@@ -908,9 +906,7 @@ export function MedicationRequestQuestion({
         confirmText={t("remove")}
         variant="destructive"
       />
-      <div className="flex justify-between items-center flex-wrap">
-        <QuestionLabel question={question} />
-
+      <div className="flex flex-wrap items-center justify-end">
         {/* Add to Template Dialog */}
         <AddToTemplateDialog
           open={!!medicationToAddToTemplate}

src/components/Questionnaire/QuestionTypes/MedicationStatementQuestion.tsx

@@ -70,7 +70,6 @@ import {
 } from "@/types/questionnaire/validation";
 
 import { PaginatedResponse } from "@/Utils/request/types";
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import { FieldError } from "./FieldError";
 
 interface MedicationStatementQuestionProps {
@@ -322,8 +321,7 @@ export function MedicationStatementQuestion({
         variant="destructive"
       />
 
-      <div className="flex justify-between items-center flex-wrap">
-        <QuestionLabel question={question} />
+      <div className="flex flex-wrap items-center justify-end">
         <HistoricalRecordSelector<
           MedicationRequestRead | MedicationStatementRead
         >

src/components/Questionnaire/QuestionTypes/ServiceRequestQuestion.tsx

@@ -38,7 +38,6 @@ import { add } from "@/Utils/decimal";
 import mutate from "@/Utils/request/mutate";
 import query from "@/Utils/request/query";
 import { formatName } from "@/Utils/utils";
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import { getBasePrice } from "@/types/base/monetaryComponent/monetaryComponent";
 import { ChargeItemDefinitionBase } from "@/types/billing/chargeItemDefinition/chargeItemDefinition";
 import {
@@ -409,7 +408,6 @@ export function ServiceRequestQuestion({
   encounterId,
   errors,
   questionnaireSlug,
-  question,
 }: ServiceRequestQuestionProps) {
   const { t } = useTranslation();
   const currentUser = useAuthUser() as CurrentUserRead;
@@ -915,7 +913,6 @@ export function ServiceRequestQuestion({
 
   return (
     <div className="space-y-4">
-      <QuestionLabel question={question} />
       <AddToTemplateDialog
         open={!!serviceRequestToAddToTemplate}
         onOpenChange={(open) => {

src/components/Questionnaire/QuestionTypes/SymptomQuestion.tsx

@@ -47,7 +47,6 @@ import {
 
 import { HistoricalRecordSelector } from "@/components/HistoricalRecordSelector";
 import { EntitySelectionDrawer } from "@/components/Questionnaire/EntitySelectionDrawer";
-import { QuestionLabel } from "@/components/Questionnaire/QuestionLabel";
 import ValueSetSelect from "@/components/Questionnaire/ValueSetSelect";
 
 import useBreakpoints from "@/hooks/useBreakpoints";
@@ -653,7 +652,6 @@ export function SymptomQuestion({
   updateQuestionnaireResponseCB,
   disabled,
   encounterId,
-  question,
 }: SymptomQuestionProps) {
   const { t } = useTranslation();
 
@@ -799,8 +797,7 @@ export function SymptomQuestion({
 
   return (
     <div className="space-y-2">
-      <div className="flex justify-between items-center flex-wrap">
-        <QuestionLabel question={question} />
+      <div className="flex flex-wrap items-center justify-end">
         <HistoricalRecordSelector<SymptomRequest>
           title={t("past_symptoms")}
           structuredTypes={[

src/components/QuestionnaireV2/README.md

@@ -42,7 +42,13 @@ questions, that is the bug.
     Nothing here renders layout; `form/` and `fill/` are its consumers.
 - `fill/` — the fill experience mounted on the encounter/patient/resource
   questionnaire routes (fullscreen shell, two tabs: form canvas + embedded
-  clinical history). What it is filling FOR is `subject.ts`'s `FillSubject`
+  clinical history). The outline is an OVERLAY, not a column
+  (`FillOutlineOverlay`): a slim tick rail on the canvas' left edge opens
+  the panel over the full-width canvas on hover/focus/click; scroll-spy
+  (`useFillOutlineNav`) tracks the block topping the viewport. Each form
+  portals its rows (`FillOutline`) and ticks (`FillOutlineRail`) into the
+  overlay's hosts — they must render inside that form's provider. What it
+  is filling FOR is `subject.ts`'s `FillSubject`
   union (encounter/patient/location/device…); `rendererSubjectOf` flattens
   it into the engine's `RendererSubject` and `subjectKeyOf` scopes drafts.
   A session may hold SEVERAL questionnaires: the route-mounted one plus any
@@ -150,7 +156,7 @@ pseudo-questionnaires), `QuestionnaireSearch` (the fill picker state), the
 `QuestionTypes/*` structured components — exclusively via
 `structured/definitions/*`, whose typed adapters replaced the renderer's
 old "one permitted `any`" — and `OrgSelector`. Everything else in that
-directory (`QuestionLabel`, `FieldError`, `EntitySelectionDrawer`,
+directory (`FieldError`, `EntitySelectionDrawer`,
 `ValueSetSearchContent`, the response-template sheets) exists only because
 those structured components use it; nothing in v2 may import it directly.
 A new legacy dependency needs an allowlist entry here, not an ad-hoc
@@ -227,6 +233,7 @@ save it.
 Playwright — authoring: `tests/facility/settings/questionnaires/` and
 `tests/admin/questionnaires/`. Fill:
 `tests/facility/patient/encounter/fill/` (page, validation, autosave,
-multi-form), `tests/facility/patient/encounter/structuredQuestions/`, and
+multi-form, server drafts, outline overlay),
+`tests/facility/patient/encounter/structuredQuestions/`, and
 `tests/facility/{location,device}Questionnaire.spec.ts` for the
 resource-subject mounts. Shared helpers: `tests/helper/questionnaireV2.ts`.