@wireai/activation 0.7.0 → 0.9.0

package/src/questionnaire/QuestionnaireGate.tsx

@@ -1,46 +1,76 @@
 /**
- * QuestionnaireGate - the skippable pre-onboarding questionnaire popup.
+ * QuestionnaireGate - the multi-step questionnaire popup.
  *
- * A centered popup (over the shared `CenteredModal` shell) with three inputs:
- *   • a MANDATORY multiline "what do you think about the app" box (~4 lines), and
- *   • two OPTIONAL smaller boxes ("help us improve" + "suggestions").
- * Send is disabled ONLY until the opinion box has text; the two optional boxes never gate it.
- * The gate is ALWAYS skippable (a "Not now"/"Skip" link plays the popup exit), so it is never
- * a dead end. On send it builds the contract body and fire-and-forgets it to the Wire server,
- * then shows a warm thank-you until the user taps the backdrop to close.
+ * ONE question per step. Steps 1-2 are skippable; the LAST step is REQUIRED (Malik's
+ * device test 2026-07-16: "i want at least something forced"). The user chooses which
+ * thing they tell us, not whether they tell us anything. `steps.ts` owns that rule and
+ * every transition as pure functions, unit-tested under node:test without mounting React;
+ * this component is a thin renderer over that machine.
+ *
+ * The CHROME (back icon + step dots) is a static header, deliberately NOT part of the
+ * sliding pane - see the four notes below. Only the question, its box and its controls move.
+ *
+ *  - No title. The gate used to render `questionnaire.title` as a heading ON EVERY STEP,
+ *    directly above the step's own question. Two asking-texts stacked, one of them the same
+ *    string three times, and mid-slide the outgoing and incoming panes each drew their own
+ *    copy so it was briefly on screen TWICE. Malik saw it on the last step, where the
+ *    forced question most needs the focus. The question IS the heading now; it renders once.
+ *  - No "Question 2 of 3" counter. `StepDots` says it without spending a line next to the
+ *    question, which is what the user is supposed to be reading.
+ *  - Back is a top-left icon, not a link in the button stack, and it is simply absent on
+ *    step 1 rather than present-but-dead.
+ *  - No "Not now". Per-step Skip is the only in-card opt-out. `questionnaire_dismissed`
+ *    moved to the modal's dismiss path (backdrop tap / Android back) - see `handleDismissed`.
+ *
+ * The wire shape is UNCHANGED. `buildQuestionnaireSubmission` still builds the exact same
+ * `POST /v1/questionnaires/{id}/responses` body from the same three answers; a skipped
+ * step is simply an empty answer, which is what the builder already handled.
+ *
+ * ⚠️ This gate now REQUIRES the server to accept an empty `answers.opinion` - step 1 is
+ * skippable and the live endpoint still 422s a blank opinion, silently (the transport is
+ * fire-and-forget). See the REQUIRED_STEPS note in steps.ts. Server fix, not a client one.
+ *
+ * Motion: `ModalPaneHost` slides step→step (and mirrors the slide on Back) and resizes the
+ * card; `StepDots` fills; `DoneCheck` plays the submit payoff. All shared, all reduce-motion
+ * aware. Haptics are lazy + optional (`haptics/haptics.ts`) and silently absent otherwise.
  *
  * The form NEVER asks for identity (no name / email / contact field): the host already
  * identifies the user via `sessionId` + `meta` (user_id, device_key, session_count), which is
  * all the POST body carries alongside the answers. Every visual value comes from the
  * OnboardingTheme; analytics are callback-based (no PII - answers go ONLY in the POST body).
  */
-import React, { useCallback, useMemo, useState } from "react";
+import React, { useCallback, useMemo, useRef, useState } from "react";
 import { Pressable, StyleSheet, Text, TextInput, View } from "react-native";
 
 import { Button } from "../components/Button";
 import { CenteredModal, type CenteredModalHandle } from "../components/CenteredModal";
+import { DoneCheck } from "../components/DoneCheck";
+import { ModalPaneHost } from "../components/ModalPaneHost";
+import { StepDots } from "../components/StepDots";
+import { playHaptic } from "../haptics/haptics";
 import { feedbackInputHeights } from "../reviews/feedbackForm";
+import { mergeThemeOver } from "../theme/mergeThemeOver";
 import { useOnboardingTheme } from "../theme/ThemeContext";
-import type { OnboardingTheme } from "../theme/types";
 import { bodyStyle, captionStyle, headingStyle } from "../theme/typography";
 import { buildQuestionnaireSubmission } from "./decision";
+import {
+  buildQuestionnaireSteps,
+  canGoBack,
+  canSkipStep,
+  commitStep,
+  currentStep,
+  goBack,
+  initialStepState,
+  isLastStep,
+  skipStep,
+  stashDraft,
+  toAnswers,
+  type QuestionnaireStepState,
+  type StepDrafts,
+} from "./steps";
 import { submitQuestionnaireResponse } from "./transport";
 import type { QuestionnaireGateProps } from "./types";
 
-const mergeThemeOver = (
-  base: OnboardingTheme,
-  override?: Partial<OnboardingTheme>,
-): OnboardingTheme => {
-  if (!override) return base;
-  return {
-    colors: { ...base.colors, ...override.colors },
-    fonts: { ...base.fonts, ...override.fonts },
-    radius: { ...base.radius, ...override.radius },
-    spacing: { ...base.spacing, ...override.spacing },
-    button: { ...base.button, ...override.button },
-  };
-};
-
 type Phase = "form" | "thanks";
 
 const _QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
@@ -56,21 +86,64 @@ const _QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
 }) => {
   const active = useOnboardingTheme();
   const t = useMemo(() => mergeThemeOver(active, themeOverride), [active, themeOverride]);
-  const modalRef = React.useRef<CenteredModalHandle>(null);
+  const modalRef = useRef<CenteredModalHandle>(null);
 
   const id = questionnaire.id;
+  const steps = useMemo(
+    () =>
+      buildQuestionnaireSteps({
+        opinion_label: questionnaire.opinion_label,
+        improve_label: questionnaire.improve_label,
+        suggestions_label: questionnaire.suggestions_label,
+      }),
+    [questionnaire.opinion_label, questionnaire.improve_label, questionnaire.suggestions_label],
+  );
+
   const [phase, setPhase] = useState<Phase>("form");
-  const [opinion, setOpinion] = useState("");
-  const [improve, setImprove] = useState("");
-  const [suggestions, setSuggestions] = useState("");
+  const [state, setState] = useState<QuestionnaireStepState>(initialStepState);
+  // Mirrored so the press handlers read the live state without re-subscribing every render
+  // (the same ref-over-callback idiom the fire-once effect below uses).
+  const stateRef = useRef(state);
+  stateRef.current = state;
+
+  // The text for the step ON SCREEN. Deliberately a ref, not state: the inputs stay
+  // UNCONTROLLED (`defaultValue`), so a keystroke never round-trips through React and the
+  // box never lags or flickers on a low-end device. Each step's input is keyed, so it
+  // remounts per step and `defaultValue` restores the earlier answer when the user steps Back.
+  const draftRef = useRef("");
+
+  // ...but the REQUIRED last step does gate Send on the text, and a ref cannot re-render the
+  // button. So we mirror ONE bit - "is there non-whitespace text?" - into state, and set it
+  // only when that bit FLIPS. Typing a 200-character answer costs exactly one re-render (on
+  // the first character), not 200: the middle ground between an uncontrolled box and a
+  // control that has to know about its content.
+  const [answered, setAnswered] = useState(false);
+  const answeredRef = useRef(false);
+
+  /** Point the draft at `value` and resync the flag. Used on every step transition. */
+  const seedDraft = useCallback((value: string) => {
+    draftRef.current = value;
+    const has = value.trim().length > 0;
+    answeredRef.current = has;
+    setAnswered(has);
+  }, []);
+
+  /** Typing: always record, re-render only on the empty↔filled flip. */
+  const handleChangeText = useCallback((text: string) => {
+    draftRef.current = text;
+    const has = text.trim().length > 0;
+    if (has === answeredRef.current) return;
+    answeredRef.current = has;
+    setAnswered(has);
+  }, []);
 
   // Fire questionnaire_prompt_shown exactly ONCE per mount. The callbacks are read through refs
   // (not effect deps) so an inline `onShown`/`onEvent` - recreated every render, as real hosts
   // idiomatically pass - never re-runs the effect. Empty deps + the shownRef guard make this a
   // true fire-once, immune to prop-identity churn.
-  const shownRef = React.useRef(false);
-  const onShownRef = React.useRef(onShown);
-  const onEventRef = React.useRef(onEvent);
+  const shownRef = useRef(false);
+  const onShownRef = useRef(onShown);
+  const onEventRef = useRef(onEvent);
   onShownRef.current = onShown;
   onEventRef.current = onEvent;
   React.useEffect(() => {
@@ -81,7 +154,7 @@ const _QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-  const resolveTimer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+  const resolveTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   React.useEffect(() => {
     return () => {
@@ -89,149 +162,220 @@ const _QuestionnaireGate: React.FC<QuestionnaireGateProps> = ({
     };
   }, []);
 
-  const resolve = useCallback(() => {
+  // Set the instant we POST, so the dismiss path below can tell "the user walked away"
+  // from "the modal closed because the run finished".
+  const submittedRef = useRef(false);
+
+  /**
+   * The modal finished its exit animation. This is now the ONLY source of
+   * `questionnaire_dismissed`.
+   *
+   * WHY it moved: the event used to fire from the in-card "Not now" link, which Malik cut.
+   * Deleting the link without moving the event would have quietly zeroed a metric the
+   * server counts. Dismissal is still very much reachable - `CenteredModal` dismisses on a
+   * backdrop tap and on Android hardware back whenever `dismissible` - so the event belongs
+   * on that path, not on one button that happened to trigger it.
+   *
+   * It also FIXES a hole: backdrop-tap and hardware-back dismissals never fired the event
+   * before, so "dismissed" only ever counted the users who found the link. Every real
+   * dismissal counts now, which means the number will legitimately RISE - it is a fuller
+   * count, not a regression.
+   *
+   * The submit path closes the modal too (after the thank-you), hence the guard: finishing
+   * is not dismissing. Read through `onEventRef` for the same prop-identity reason as the
+   * fire-once effect above.
+   */
+  const handleDismissed = useCallback(() => {
+    if (!submittedRef.current) {
+      onEventRef.current?.({ name: "questionnaire_dismissed", id });
+    }
     onResolved?.();
-  }, [onResolved]);
-
-  // The opinion box is the ONLY gate on Send. The two optional boxes never disable it.
-  const canSend = opinion.trim().length > 0;
-
-  const send = useCallback(() => {
-    if (!canSend) return;
-    // Identity is NEVER collected here - the host already sends user_id / device_key / session
-    // via `sessionId` + `meta`. We POST only the three answers.
-    const submission = buildQuestionnaireSubmission({
-      answers: { opinion, improve, suggestions },
-      sessionId,
-      meta,
-    });
-    submitQuestionnaireResponse(target, id, submission);
-    onEvent?.({ name: "questionnaire_submitted", id });
-    setPhase("thanks");
-    if (resolveTimer.current) clearTimeout(resolveTimer.current);
-    resolveTimer.current = setTimeout(() => {
-      modalRef.current?.close();
-    }, 1500);
-  }, [canSend, opinion, improve, suggestions, sessionId, meta, target, id, onEvent]);
-
-  // The in-card "Not now"/"Skip" link plays the popup's exit animation (which resolves on
-  // completion, the same path a backdrop tap takes). Emit the dismissed moment first.
-  const handleDismissTap = useCallback(() => {
-    onEvent?.({ name: "questionnaire_dismissed", id });
-    modalRef.current?.close();
-  }, [onEvent, id]);
-
-  const title = questionnaire.title ?? "How's it going so far?";
-  const opinionLabel = questionnaire.opinion_label ?? "What do you think about the app?";
-  const improveLabel = questionnaire.improve_label ?? "How can we improve? (optional)";
-  const suggestionsLabel = questionnaire.suggestions_label ?? "Any suggestions? (optional)";
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [id, onResolved]);
+
+  // The run is over: POST the answers and play the payoff. Identity is NEVER collected here -
+  // the host already sends user_id / device_key / session via `sessionId` + `meta`.
+  const finish = useCallback(
+    (drafts: StepDrafts) => {
+      const submission = buildQuestionnaireSubmission({
+        answers: toAnswers(drafts),
+        sessionId,
+        meta,
+      });
+      submitQuestionnaireResponse(target, id, submission);
+      submittedRef.current = true;
+      onEvent?.({ name: "questionnaire_submitted", id });
+      playHaptic("success");
+      setPhase("thanks");
+      if (resolveTimer.current) clearTimeout(resolveTimer.current);
+      resolveTimer.current = setTimeout(() => {
+        modalRef.current?.close();
+      }, 1500);
+    },
+    [sessionId, meta, target, id, onEvent],
+  );
+
+  // Apply a machine transition: either submit (last step) or seed the next step's draft.
+  // A REFUSED transition (blank text on the required step) returns the same state object,
+  // so bail: no haptic, no re-render, nothing to tell the user that the disabled button
+  // already told them.
+  const applyTransition = useCallback(
+    (next: QuestionnaireStepState) => {
+      if (next === stateRef.current) return;
+      setState(next);
+      if (next.done) {
+        finish(next.drafts);
+        return;
+      }
+      seedDraft(next.drafts[steps[next.index]?.key ?? "opinion"] ?? "");
+      playHaptic("light");
+    },
+    [finish, seedDraft, steps],
+  );
+
+  const handleNext = useCallback(() => {
+    applyTransition(commitStep(steps, stateRef.current, draftRef.current));
+  }, [applyTransition, steps]);
+
+  const handleSkip = useCallback(() => {
+    applyTransition(skipStep(steps, stateRef.current));
+  }, [applyTransition, steps]);
+
+  const handleBack = useCallback(() => {
+    // Stash the CURRENT step's text before leaving it. The inputs are uncontrolled, so that
+    // text lives ONLY in draftRef until something folds it into the drafts; Back without this
+    // destroyed it, and the keyed input silently remounted blank when the user stepped
+    // forward again. Same primitive `commitStep` uses for Next — one way to record an answer.
+    const next = goBack(stashDraft(steps, stateRef.current, draftRef.current));
+    setState(next);
+    seedDraft(next.drafts[steps[next.index]?.key ?? "opinion"] ?? "");
+    playHaptic("light");
+  }, [seedDraft, steps]);
+
+  const step = currentStep(steps, state);
+  const last = isLastStep(steps, state.index);
+  // The mandatory last step: no Skip control at all, and Send stays disabled until there is
+  // text. `answered` tracks the live box; `canSkipStep` is the machine's own read of the
+  // same `required` flag it enforces in `commitStep`, so the two can never disagree.
+  const canSkip = canSkipStep(steps, state);
+  const sendDisabled = (step?.required ?? false) && !answered;
 
   // A multiline box ~4 lines tall (capped at ~5), derived from the theme's body line-height so
-  // it scales with the app's font config; padding is folded in so the lines are visible.
-  const opinionBox = feedbackInputHeights(t.fonts, t.spacing.md);
-
-  const content = (
-    <>
-      <Text style={[headingStyle(t.fonts), { color: t.colors.text }]}>{title}</Text>
-
-      {phase === "form" && (
-        <>
-          <Text style={[captionStyle(t.fonts), { color: t.colors.textMuted }]}>
-            A few words is plenty. Only the first box is required.
-          </Text>
-
-          {/* MANDATORY opinion box - the only gate on Send. */}
-          <Text style={[captionStyle(t.fonts), { color: t.colors.textMuted }]}>{opinionLabel}</Text>
-          <TextInput
-            value={opinion}
-            onChangeText={setOpinion}
-            placeholder="e.g. it feels fast and clear"
-            placeholderTextColor={t.colors.textMuted}
-            multiline
-            textAlignVertical="top"
-            style={[
-              bodyStyle(t.fonts),
-              styles.input,
-              {
-                color: t.colors.text,
-                backgroundColor: t.colors.background,
-                borderRadius: t.radius.md,
-                borderColor: t.colors.border,
-                padding: t.spacing.md,
-                minHeight: opinionBox.minHeight,
-                maxHeight: opinionBox.maxHeight,
-              },
-            ]}
-          />
-
-          {/* OPTIONAL "help us improve" box - never gates Send. */}
-          <Text style={[captionStyle(t.fonts), { color: t.colors.textMuted }]}>{improveLabel}</Text>
-          <TextInput
-            value={improve}
-            onChangeText={setImprove}
-            placeholder="e.g. fewer steps to start"
-            placeholderTextColor={t.colors.textMuted}
-            style={[
-              bodyStyle(t.fonts),
-              styles.input,
-              {
-                color: t.colors.text,
-                backgroundColor: t.colors.background,
-                borderRadius: t.radius.md,
-                borderColor: t.colors.border,
-                paddingHorizontal: t.spacing.md,
-                paddingVertical: t.spacing.sm,
-                minHeight: t.button.height,
-              },
-            ]}
-          />
-
-          {/* OPTIONAL "suggestions" box - never gates Send. */}
-          <Text style={[captionStyle(t.fonts), { color: t.colors.textMuted }]}>
-            {suggestionsLabel}
-          </Text>
-          <TextInput
-            value={suggestions}
-            onChangeText={setSuggestions}
-            placeholder="e.g. a dark theme"
-            placeholderTextColor={t.colors.textMuted}
-            style={[
-              bodyStyle(t.fonts),
-              styles.input,
-              {
-                color: t.colors.text,
-                backgroundColor: t.colors.background,
-                borderRadius: t.radius.md,
-                borderColor: t.colors.border,
-                paddingHorizontal: t.spacing.md,
-                paddingVertical: t.spacing.sm,
-                minHeight: t.button.height,
-              },
-            ]}
-          />
-
-          <Button title="Send" onPress={send} variant="primary" fullWidth disabled={!canSend} />
-          {dismissible && (
-            <Pressable onPress={handleDismissTap} hitSlop={8}>
-              <Text style={[captionStyle(t.fonts), styles.link, { color: t.colors.textMuted }]}>
-                Not now
+  // it scales with the app's font config; padding is folded in so the lines are visible. Every
+  // step uses the SAME box, which also keeps the card's height near-steady between steps.
+  const answerBox = feedbackInputHeights(t.fonts, t.spacing.md);
+
+  const linkStyle = [captionStyle(t.fonts), styles.link, { color: t.colors.textMuted }];
+
+  /**
+   * The card's chrome: back icon hard left, dots centred. Handed to `ModalPaneHost`'s
+   * static slot, so it is measured with the pane but never slides and never doubles
+   * mid-handoff. The two side spacers are equal-flex so the dots sit at the true centre
+   * whether or not Back is there — the row must not shift between step 1 and step 2.
+   */
+  const header =
+    phase === "form" ? (
+      <View style={[styles.header, { marginBottom: t.spacing.md }]}>
+        <View style={styles.headerSide}>
+          {/* Absent on step 1 rather than disabled: there is nothing to go back to, and a
+              greyed-out control is just a question the user has to answer. */}
+          {canGoBack(state) && (
+            <Pressable
+              onPress={handleBack}
+              hitSlop={12}
+              accessibilityRole="button"
+              accessibilityLabel="Back to the previous question"
+            >
+              {/* A Text glyph, not an icon component: `react-native-svg` is not a peer of
+                  this kit and no vector library is worth forcing every host into a native
+                  rebuild for one chevron. Same call DoneCheck's ✓ and the review stars made. */}
+              <Text style={[headingStyle(t.fonts), styles.backGlyph, { color: t.colors.textMuted }]}>
+                ‹
               </Text>
             </Pressable>
           )}
-        </>
-      )}
+        </View>
+        <StepDots theme={t} count={steps.length} index={state.index} />
+        <View style={styles.headerSide} />
+      </View>
+    ) : null;
+
+  const formPane = step ? (
+    <View style={{ gap: t.spacing.md }}>
+      {/* The question is the heading. There is no separate title above it — see the file
+          header: that was the text Malik saw repeated. */}
+      <Text style={[headingStyle(t.fonts), { color: t.colors.text }]}>{step.label}</Text>
+      <TextInput
+        // Keyed per step so each question gets a fresh input seeded with its own answer.
+        key={step.key}
+        defaultValue={state.drafts[step.key] ?? ""}
+        onChangeText={handleChangeText}
+        placeholder={step.placeholder}
+        placeholderTextColor={t.colors.textMuted}
+        accessibilityLabel={step.label}
+        multiline
+        textAlignVertical="top"
+        style={[
+          bodyStyle(t.fonts),
+          styles.input,
+          {
+            color: t.colors.text,
+            backgroundColor: t.colors.background,
+            borderRadius: t.radius.md,
+            borderColor: t.colors.border,
+            padding: t.spacing.md,
+            minHeight: answerBox.minHeight,
+            maxHeight: answerBox.maxHeight,
+          },
+        ]}
+      />
 
-      {phase === "thanks" && (
-        <Text style={[bodyStyle(t.fonts), { color: t.colors.textMuted }]}>
-          Thank you. This helps us make it better.
-        </Text>
+      {/* Gated ONLY on the required step. Steps 1-2 send/advance whatever the box holds,
+          because skipping is a first-class answer there and there is nothing to gate on. */}
+      <Button
+        title={last ? "Send" : "Next"}
+        onPress={handleNext}
+        variant="primary"
+        fullWidth
+        disabled={sendDisabled}
+      />
+
+      {/* Skip step — the only in-card opt-out, and gone entirely on the required step
+          rather than rendered as a control that would refuse to do anything. */}
+      {canSkip && (
+        <Pressable
+          onPress={handleSkip}
+          hitSlop={8}
+          accessibilityRole="button"
+          accessibilityLabel="Skip this question"
+        >
+          <Text style={linkStyle}>Skip step</Text>
+        </Pressable>
       )}
-    </>
+    </View>
+  ) : null;
+
+  const thanksPane = (
+    <View style={{ gap: t.spacing.md }}>
+      <DoneCheck theme={t} />
+      <Text style={[headingStyle(t.fonts), styles.centerText, { color: t.colors.text }]}>
+        Thank you
+      </Text>
+      <Text style={[bodyStyle(t.fonts), styles.centerText, { color: t.colors.textMuted }]}>
+        This helps us make it better.
+      </Text>
+    </View>
   );
 
   return (
-    <CenteredModal ref={modalRef} theme={t} dismissible={dismissible} onDismiss={resolve}>
-      {content}
+    <CenteredModal ref={modalRef} theme={t} dismissible={dismissible} onDismiss={handleDismissed}>
+      <ModalPaneHost
+        paneKey={phase === "thanks" ? "thanks" : (step?.key ?? "done")}
+        direction={state.direction}
+        header={header}
+      >
+        {phase === "thanks" ? thanksPane : formPane}
+      </ModalPaneHost>
     </CenteredModal>
   );
 };
@@ -242,6 +386,13 @@ QuestionnaireGate.displayName = "QuestionnaireGate";
 const styles = StyleSheet.create({
   input: { borderWidth: 1 },
   link: { textAlign: "center", textDecorationLine: "underline" },
+  centerText: { textAlign: "center" },
+  header: { flexDirection: "row", alignItems: "center" },
+  // Equal flex on both sides keeps the dots optically centred whether Back is drawn or not.
+  // `flex-start` matters: without it the back Pressable stretches across the whole left
+  // third of the card, so a tap anywhere near the dots would navigate back.
+  headerSide: { flex: 1, alignItems: "flex-start" },
+  backGlyph: { includeFontPadding: false },
 });
 
 export default QuestionnaireGate;

package/src/questionnaire/decision.ts

@@ -34,8 +34,10 @@ export const decideQuestionnaire = (
 ): QuestionnaireDecision => decideReview(local, decision);
 
 /**
- * Build the `POST /v1/questionnaires/{id}/responses` body. `opinion` is the only mandatory
- * answer (trimmed); `improve`/`suggestions` are trimmed and sent as `null` when empty. The
+ * Build the `POST /v1/questionnaires/{id}/responses` body. `opinion` is always sent as a
+ * string (trimmed, possibly "" now that its step is skippable — the live server still
+ * rejects that, see steps.ts REQUIRED_STEPS); `improve`/`suggestions` are trimmed and sent
+ * as `null` when empty. The
  * `meta` bucket carries the non-PII correlation fields (user_id / device_key / session_count),
  * each defaulting to null. Free text lives ONLY here, never in analytics events.
  */

package/src/questionnaire/index.ts

@@ -1,8 +1,9 @@
 /**
- * @wireai/activation/questionnaire - the skippable pre-onboarding questionnaire popup.
+ * @wireai/activation/questionnaire - the multi-step pre-onboarding questionnaire popup.
  *
  * Subpath entry, kept OUT of the main barrel so the core kit stays dependency-free. The gate
- * asks one mandatory question ("what do you think about the app") plus two optional boxes,
+ * asks three questions ONE PER STEP - two skippable, then one REQUIRED last step so every
+ * completed run carries at least one real answer -
  * POSTs the answers to the Wire server, and decides WHEN to show via local rules OR a
  * server-provided decision (the AI seam), gated by the `questionnaire` master switch and shown
  * at most once per user per questionnaire id. It reuses the shared `CenteredModal` shell (never