Questionnaire v2: fill experience rebuild (stack base)

package.json

@@ -36,7 +36,7 @@
     "build": "npm run build:meta && npm run supported-browsers && npm run build:react",
     "postinstall": "tsx scripts/install-platform-deps.ts && tsx scripts/generate-headers.ts",
     "test": "snyk test",
-    "test:unit": "node --import tsx --test \"plugins/**/*.test.ts\"",
+    "test:unit": "node --import tsx --test \"plugins/**/*.test.ts\" \"src/**/*.test.ts\"",
     "playwright:test": "playwright test",
     "playwright:test:ui": "playwright test --ui",
     "playwright:test:headed": "playwright test --headed",

src/PluginEngine.tsx

@@ -15,6 +15,7 @@ import React, { Suspense, useEffect, useMemo, useRef } from "react";
 import ErrorBoundary from "@/components/Common/ErrorBoundary";
 import Loading from "@/components/Common/Loading";
 import { PluginErrorBoundary } from "@/components/Common/PluginErrorBoundary";
+import { registerPluginStructuredType } from "@/components/QuestionnaireV2/structured/pluginRegistry";
 import { addOverride } from "@/lib/override";
 import { PlugConfig, PlugConfigMeta } from "@/types/plugConfig";
 import plugConfigApi from "@/types/plugConfig/plugConfigApi";
@@ -96,7 +97,17 @@ export default function PluginEngine({
           return { ...config, isLoading: true as const };
         }
 
-        return { ...config, isLoading: false as const, ...data! };
+        // `data` is the remote's OWN manifest — untrusted. `slug` spreads
+        // in AFTER `...data!` so nothing the manifest declares (a stray
+        // `slug` field, or reusing `plugin.plugin`) can shadow the
+        // backend-issued `config.slug` this query was actually fetched
+        // for. That's the identity namespace ownership checks rely on.
+        return {
+          ...config,
+          isLoading: false as const,
+          ...data!,
+          slug: config.slug,
+        };
       }),
   });
 
@@ -116,7 +127,7 @@ export default function PluginEngine({
     window.__CARE_PLUGIN_RUNTIME__ = deepFreeze({ meta: pluginMeta });
   }, [pluginMeta]);
 
-  // Register plugin overrides
+  // Register plugin overrides and structured question types
   const overrideCleanupRef = useRef<(() => void)[]>([]);
 
   useEffect(() => {
@@ -126,9 +137,9 @@ export default function PluginEngine({
 
     // Register new overrides from all loaded plugins
     for (const plugin of pluginsQuery) {
-      if (plugin.isLoading || !plugin.overrides) continue;
+      if (plugin.isLoading) continue;
 
-      for (const override of plugin.overrides) {
+      for (const override of plugin.overrides ?? []) {
         const cleanup = addOverride(override.component, {
           component: override.replacement,
           condition: override.condition,
@@ -138,6 +149,28 @@ export default function PluginEngine({
         });
         overrideCleanupRef.current.push(cleanup);
       }
+
+      // Structured question types the plugin contributes. Registration
+      // throws on a non-namespaced id — one malformed definition is logged
+      // and skipped, never fatal to the app. The registering plugin's slug
+      // goes in so the registry can verify the `{plugin_slug}.` half of the
+      // id actually belongs to it: namespacing is the isolation guarantee,
+      // and it is only a guarantee if someone checks. `plugin.slug` is the
+      // trusted, backend-issued identity (see the combine above) — never
+      // `plugin.plugin`, which is a field the remote manifest declares
+      // about itself and could spoof another plugin's namespace with.
+      for (const definition of plugin.structuredQuestionTypes ?? []) {
+        try {
+          overrideCleanupRef.current.push(
+            registerPluginStructuredType(definition, plugin.slug),
+          );
+        } catch (error) {
+          console.error(
+            `Invalid structured type from plugin ${plugin.plugin}`,
+            error,
+          );
+        }
+      }
     }
 
     // Cleanup on unmount

src/Providers/AuthUserProvider.tsx

@@ -5,13 +5,18 @@ import { navigate, usePath } from "raviger";
 import { useCallback, useEffect, useState } from "react";
 
 import Loading from "@/components/Common/Loading";
+import {
+  clearOtherUsersFillDrafts,
+  clearQuestionnaireFillDrafts,
+  sweepExpiredFillDrafts,
+} from "@/components/QuestionnaireV2/fill/draft/fillDraftCache";
 
 import { AuthUserContext } from "@/hooks/useAuthUser";
 
 import { LocalStorageKeys } from "@/common/constants";
 
 import mutate from "@/Utils/request/mutate";
-import query from "@/Utils/request/query";
+import query, { callApi } from "@/Utils/request/query";
 import { userAtom } from "@/atoms/user-atom";
 import {
   JwtTokenObtainPair,
@@ -65,6 +70,14 @@ export default function AuthUserProvider({
   useEffect(() => {
     setUser(user);
   }, [user, setUser]);
+
+  // Boot-time housekeeping — drop any fill drafts that outlived their TTL,
+  // regardless of which user (or logged-out session) wrote them. Fresh
+  // drafts (e.g. one saved from the login form) are left alone.
+  useEffect(() => {
+    sweepExpiredFillDrafts();
+  }, []);
+
   const refreshToken = localStorage.getItem(LocalStorageKeys.refreshToken);
 
   const tokenRefreshQuery = useQuery({
@@ -79,6 +92,11 @@ export default function AuthUserProvider({
 
   useEffect(() => {
     if (tokenRefreshQuery.isError) {
+      // Tokens only — this query has retry:false, so a single transient
+      // network blip trips this branch. Clearing drafts here would
+      // destroy exactly the recovery scenario this feature exists for
+      // (a phone call blocking the network mid-refresh); signOut() is the
+      // deliberate, user-initiated place drafts get wiped on session end.
       localStorage.removeItem(LocalStorageKeys.accessToken);
       localStorage.removeItem(LocalStorageKeys.refreshToken);
       return;
@@ -91,6 +109,25 @@ export default function AuthUserProvider({
     }
   }, [tokenRefreshQuery.data, tokenRefreshQuery.isError]);
 
+  // The freshly-issued tokens are in localStorage by the time this runs,
+  // but the `user` in scope here is still last render's (possibly none) —
+  // fetch the identity behind the NEW tokens directly rather than wait on
+  // the query hook's next render, so the draft clear below can be scoped
+  // to this exact account at the earliest point it is known, strictly
+  // after credentials were accepted.
+  const clearOtherUsersDrafts = useCallback(async () => {
+    try {
+      const currentUser = await callApi(userApi.currentUser, {
+        silent: true,
+      });
+      clearOtherUsersFillDrafts(currentUser.id);
+    } catch {
+      // Best-effort — an identity lookup failing here must not block
+      // sign-in. Worst case a different user's stale draft lingers until
+      // the next successful login or the boot-time expiry sweep.
+    }
+  }, []);
+
   const { mutateAsync: signIn, isPending: isAuthenticating } = useMutation({
     mutationFn: mutate(authApi.login),
     onSuccess: async (data: LoginResponse) => {
@@ -113,6 +150,12 @@ export default function AuthUserProvider({
         setAccessToken(data.access);
         localStorage.setItem(LocalStorageKeys.accessToken, data.access);
         localStorage.setItem(LocalStorageKeys.refreshToken, data.refresh);
+        // Credentials are accepted — a draft left at the login form by a
+        // DIFFERENT account (e.g. a session expiry on a shared machine)
+        // must not survive into this session. A draft belonging to the
+        // account that just signed in is the recovery case this feature
+        // exists for, so it must survive.
+        await clearOtherUsersDrafts();
 
         await queryClient.invalidateQueries({ queryKey: ["currentUser"] });
         if (path === "/" || path === "/login") {
@@ -130,6 +173,10 @@ export default function AuthUserProvider({
       setAccessToken(data.access);
       localStorage.setItem(LocalStorageKeys.accessToken, data.access);
       localStorage.setItem(LocalStorageKeys.refreshToken, data.refresh);
+      // Same rule as the direct JWT success branch above — the 2FA step
+      // just completed, so this is the first point credentials are fully
+      // accepted.
+      await clearOtherUsersDrafts();
 
       await queryClient.invalidateQueries({ queryKey: ["currentUser"] });
       navigate(getRedirectOr("/"));
@@ -163,6 +210,7 @@ export default function AuthUserProvider({
     localStorage.removeItem(LocalStorageKeys.accessToken);
     localStorage.removeItem(LocalStorageKeys.refreshToken);
     localStorage.removeItem(LocalStorageKeys.patientTokenKey);
+    clearQuestionnaireFillDrafts();
     setAccessToken(null);
     setPatientToken(null);
 

src/Routers/AppRouter.tsx

@@ -50,8 +50,16 @@ const PATHS_WITHOUT_SIDEBAR = [
   /^\/facility\/[^/]+\/locations\/[^/]+\/external_supply\/purchase_orders\/[^/]+\/edit$/,
   /^\/facility\/[^/]+\/locations\/[^/]+\/external_supply\/deliveries\/[^/]+$/,
   /^\/facility\/[^/]+\/queues\/[^/]+\/tokens\/[^/]+$/,
-  // Questionnaire form routes
+  // Questionnaire fill routes (fullscreen v2 fill experience)
   /^\/facility\/[^/]+\/patient\/[^/]+\/encounter\/[^/]+\/questionnaire(\/[^/]+)?$/,
+  /^\/facility\/[^/]+\/patient\/[^/]+\/questionnaire(\/[^/]+)?$/,
+  /^\/facility\/[^/]+\/patient\/[^/]+\/consultation$/,
+  /^\/patient\/[^/]+\/questionnaire(\/[^/]+)?$/,
+  /^\/facility\/[^/]+\/locations\/[^/]+\/questionnaire(\/[^/]+)?$/,
+  /^\/facility\/[^/]+\/settings\/devices\/[^/]+\/questionnaire(\/[^/]+)?$/,
+  // Questionnaire studio (fullscreen builder) routes
+  /^\/facility\/[^/]+\/settings\/questionnaires\/[^/]+\/edit$/,
+  /^\/admin\/questionnaires\/[^/]+\/edit$/,
 ];
 
 export type RouteParams<T extends string> =

src/Routers/routes/ConsultationRoutes.tsx

@@ -2,7 +2,7 @@ import { PrintAllQuestionnaireResponses } from "@/components/Facility/Consultati
 import { PrintQuestionnaireResponse } from "@/components/Facility/ConsultationDetails/PrintQuestionnaireResponse";
 import QuestionnaireResponseView from "@/components/Facility/ConsultationDetails/QuestionnaireResponseView";
 import { PrintMedicationAdministration } from "@/components/Medicine/MedicationAdministration/PrintMedicationAdministration";
-import EncounterQuestionnaire from "@/components/Patient/EncounterQuestionnaire";
+import QuestionnaireFillPage from "@/components/QuestionnaireV2/fill/QuestionnaireFillPage";
 
 import { AppRoutes } from "@/Routers/AppRouter";
 import { EncounterShow } from "@/pages/Encounters/EncounterShow";
@@ -95,22 +95,16 @@ const consultationRoutes: AppRoutes = {
     ),
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire":
     ({ facilityId, encounterId, patientId }) => (
-      <EncounterQuestionnaire
-        facilityId={facilityId}
-        encounterId={encounterId}
-        patientId={patientId}
-        subjectType="encounter"
+      <QuestionnaireFillPage
+        subject={{ type: "encounter", facilityId, patientId, encounterId }}
       />
     ),
 
   "/facility/:facilityId/patient/:patientId/encounter/:encounterId/questionnaire/:questionnaireId":
     ({ facilityId, encounterId, questionnaireId, patientId }) => (
-      <EncounterQuestionnaire
-        facilityId={facilityId}
-        encounterId={encounterId}
+      <QuestionnaireFillPage
+        subject={{ type: "encounter", facilityId, patientId, encounterId }}
         questionnaireId={questionnaireId}
-        patientId={patientId}
-        subjectType="encounter"
       />
     ),
 
@@ -131,29 +125,54 @@ const consultationRoutes: AppRoutes = {
       );
     return acc;
   }, {}),
+  // Legacy pre-encounter URL, kept so old links resolve. Nothing in the app
+  // links here any more — encounters are created by CreateEncounterForm, not
+  // by this questionnaire — so the SUBJECT is the patient and the fixed
+  // "encounter" question reports that it needs an encounter in scope. The
+  // picker keeps offering encounter-subject forms, as it did before the
+  // subject union landed.
   "/facility/:facilityId/patient/:patientId/consultation": ({
     facilityId,
     patientId,
   }) => (
-    <EncounterQuestionnaire
-      facilityId={facilityId}
-      patientId={patientId}
+    <QuestionnaireFillPage
+      subject={{ type: "patient", facilityId, patientId }}
       questionnaireId="encounter"
-      subjectType="encounter"
+      pickerSubjectType="encounter"
     />
   ),
   "/facility/:facilityId/patient/:patientId/questionnaire": ({
     facilityId,
     patientId,
   }) => (
-    <EncounterQuestionnaire
-      facilityId={facilityId}
-      patientId={patientId}
-      subjectType="patient"
+    <QuestionnaireFillPage
+      subject={{ type: "patient", facilityId, patientId }}
+    />
+  ),
+  // The patient-subject picker needs an id route to land on — the legacy
+  // form appended picked questionnaires in-session instead of navigating,
+  // so these two shapes are new alongside the v2 single-questionnaire fill.
+  "/facility/:facilityId/patient/:patientId/questionnaire/:questionnaireId": ({
+    facilityId,
+    patientId,
+    questionnaireId,
+  }) => (
+    <QuestionnaireFillPage
+      subject={{ type: "patient", facilityId, patientId }}
+      questionnaireId={questionnaireId}
     />
   ),
   "/patient/:patientId/questionnaire": ({ patientId }) => (
-    <EncounterQuestionnaire patientId={patientId} subjectType="patient" />
+    <QuestionnaireFillPage subject={{ type: "patient", patientId }} />
+  ),
+  "/patient/:patientId/questionnaire/:questionnaireId": ({
+    patientId,
+    questionnaireId,
+  }) => (
+    <QuestionnaireFillPage
+      subject={{ type: "patient", patientId }}
+      questionnaireId={questionnaireId}
+    />
   ),
 };
 

src/Routers/routes/adminRoutes.tsx

@@ -1,10 +1,10 @@
 import { navigate } from "raviger";
 
-import { QuestionnaireBuilderPage } from "@/components/QuestionnaireV2/builder/QuestionnaireBuilderPage";
 import { QuestionnaireCreatePage } from "@/components/QuestionnaireV2/manage/QuestionnaireCreatePage";
 import { QuestionnaireDetailPage } from "@/components/QuestionnaireV2/manage/QuestionnaireDetailPage";
 import { QuestionnaireListPage } from "@/components/QuestionnaireV2/manage/QuestionnaireListPage";
 import { QuestionnaireRevisionPage } from "@/components/QuestionnaireV2/manage/QuestionnaireRevisionPage";
+import { QuestionnaireStudioPage } from "@/components/QuestionnaireV2/studio/QuestionnaireStudioPage";
 import { ValueSetEditor } from "@/components/ValueSet/ValueSetEditor";
 import { ValueSetList } from "@/components/ValueSet/ValueSetList";
 
@@ -36,7 +36,7 @@ const AdminRoutes: AppRoutes = {
   // Must be registered before "/admin/questionnaires/:id" for the same
   // reason — otherwise "edit" would be captured as an :id.
   "/admin/questionnaires/:id/edit": ({ id }) => (
-    <QuestionnaireBuilderPage scope={INSTANCE_SCOPE} id={id} />
+    <QuestionnaireStudioPage scope={INSTANCE_SCOPE} id={id} />
   ),
   // Registered before "/admin/questionnaires/:id" like the routes above.
   "/admin/questionnaires/:id/versions/:revisionId": ({ id, revisionId }) => (

src/atoms/scheduleServiceTypeAtom.ts

@@ -6,12 +6,30 @@ import { SchedulableResourceType } from "@/types/scheduling/schedule";
  * Atom for caching the last selected schedule service type (practitioner/healthservice/location)
  * Uses localStorage to persist across sessions and logouts
  * Only clears on cache/localStorage clear
+ *
+ * `getOnInit: true` — REVIEW FIX. Without it, `atomWithStorage` resolves to
+ * `initialValue` (Practitioner) on the very FIRST render and only reads
+ * `localStorage` in its `onMount`, which runs after mount. Any consumer
+ * that reads this atom to seed its OWN first-render state (`AppointmentEditor`'s
+ * `useState(() => initialResource(serviceType, currentUser))`,
+ * `AppointmentQuestion.tsx`'s identical pattern) captures the pre-hydration
+ * default and never sees the real persisted value unless it also runs a
+ * reconciling effect after the atom updates. `getOnInit: true` makes
+ * `atomWithStorage` read `localStorage` synchronously ONCE, right here,
+ * when this module loads and constructs the atom — not per store, per
+ * mount, or per consumer. That one read becomes the atom's resolved
+ * initial value in the jotai store; every `useAtom(scheduleServiceTypeAtom)`
+ * call anywhere thereafter just reads THAT value like any other atom
+ * state, so every consumer's first render already reflects the real
+ * preference — no race, no reconciling effect required.
  */
 export const SCHEDULE_SERVICE_TYPE_KEY = "care_schedule_service_type";
 
 export const scheduleServiceTypeAtom = atomWithStorage<SchedulableResourceType>(
   SCHEDULE_SERVICE_TYPE_KEY,
   SchedulableResourceType.Practitioner,
+  undefined,
+  { getOnInit: true },
 );
 
 /**