experiment: facilitator panel beside workspace (Exp 05)

- Replace stacked landing with responsive two-column layout
- Left panel (1/3 desktop): facilitator intro card with dismiss checkbox
- Right panel (2/3 desktop): Tell me what's happening textarea + Analyse
- Mobile/tablet stack vertically as before
- 'Don't show' uses sessionStorage; future: user profile settings
- Close Exp 04 (Partially confirmed) in evolution log
- Add Exp 05 entry + Facilitator Behaviour UX section

.claude/ux-guidelines.md

@@ -336,3 +336,15 @@ Complexity appears progressively.
 Users begin with observations rather than conclusions.
 
 The Confidence Engine behaves like a facilitator introducing a workshop — calm, patient, and focused on understanding before acting.
+
+## Facilitator Behaviour
+
+Orientation should support work, not interrupt it.
+
+The facilitator is present by invitation, not obligation.
+
+Returning users should control repeated guidance.
+
+The workspace should remain the primary visual focus.
+
+Information should naturally flow from left to right.

components/scenario-form.jsx

@@ -218,6 +218,7 @@ export default function ScenarioForm() {
   const [lastSubmittedAnswer, setLastSubmittedAnswer] = useState("");
   const [currentUnderstanding, setCurrentUnderstanding] = useState(null);
   const [mockScenario, setMockScenario] = useState("");
+  const [hideFacilitatorOnLanding, setHideFacilitatorOnLanding] = useState(false);
   const textareaRef = useRef(null);
 
   /* Restore persisted session on mount (Phase 3) ─────────── */
@@ -231,6 +232,15 @@ export default function ScenarioForm() {
     setStatus("success");
   }, []);
 
+  /* Restore facilitator dismiss preference (Experiment 05) ─── */
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const pref = sessionStorage.getItem("ce-facilitator-dismissed");
+      setHideFacilitatorOnLanding(pref === "true");
+    } catch (_) {}
+  }, []);
+
   /* Inject mock globals so the interceptor can read them at runtime */
   useMockGlobals();
 
@@ -379,50 +389,71 @@ export default function ScenarioForm() {
       {status === "idle" && (
         <form onSubmit={handleSubmit} className="space-y-6">
 
-          {/* Welcome introduction */}
+          {/* Two-column landing workspace */}
-          <div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6">
+          <div className="grid grid-cols-1 gap-6 md:grid-cols-3">
-            <h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Before we begin</h2>
-            <p className="text-sm leading-relaxed text-gray-700 mb-4">
-              The Confidence Engine helps build confidence by understanding situations before deciding what to do.
-            </p>
-            <p className="text-sm leading-relaxed text-gray-700 mb-3">
-              You do not need to know exactly what the problem is.
-            </p>
-            <p className="text-sm leading-relaxed text-gray-700">
-              Simply describe what you have observed. We will work through it together, one question at a time.
-            </p>
-          </div>
 
-          {/* Scenario input */}
+            {/* Left panel — Facilitator (1/3 on desktop) */}
-          <div className="space-y-2">
+            {!hideFacilitatorOnLanding && (
-            <textarea
+              <div className="md:col-span-1">
-              ref={textareaRef}
+                <div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6 sticky top-6">
-              value={scenario}
+                  <h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Before we begin</h2>
-              onChange={(e) => setScenario(e.target.value)}
+                  <p className="text-sm leading-relaxed text-gray-700 mb-4">
-              placeholder="Describe the scenario you want analysed..."
+                    The Confidence Engine helps build confidence by understanding situations before deciding what to do.
-              rows={6}
+                  </p>
-              className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
+                  <p className="text-sm leading-relaxed text-gray-700 mb-3">
-            />
+                    You do not need to know exactly what the problem is.
-            <div className="flex items-center justify-between">
+                  </p>
-              <span className="text-xs text-gray-400">{scenario.length}/{MAX_LENGTH}</span>
+                  <p className="text-sm leading-relaxed text-gray-700 mb-6">
-              <button
+                    Simply describe what you have observed. We will work through it together, one question at a time.
-                type="submit"
+                  </p>
-                disabled={!scenario.trim()}
+                  <div className="flex items-center gap-2 pt-4 border-t border-gray-200">
-                className="rounded-lg bg-blue-700 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
+                    <input
-              >
+                      type="checkbox"
-                Analyse
+                      id="dismiss-facilitator"
-              </button>
+                      onChange={(e) => {
+                        if (e.target.checked) {
+                          setHideFacilitatorOnLanding(true);
+                          try { sessionStorage.setItem("ce-facilitator-dismissed", "true"); } catch (_) {}
+                        }
+                      }}
+                      className="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+                    />
+                    <label htmlFor="dismiss-facilitator" className="text-xs text-gray-500">
+                      Don't show this introduction again
+                    </label>
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* Right panel — Workspace (2/3 on desktop) */}
+            <div className={hideFacilitatorOnLanding ? "md:col-span-3" : "md:col-span-2"}>
+              <h2 className="mb-3 text-sm font-semibold tracking-wide text-gray-500 uppercase">Tell me what's happening</h2>
+              <textarea
+                ref={textareaRef}
+                value={scenario}
+                onChange={(e) => setScenario(e.target.value)}
+                placeholder="Describe the scenario you want analysed..."
+                rows={6}
+                className="w-full rounded-lg border border-gray-300 px-4 py-3 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400 mb-3"
+              />
+              <div className="flex items-center justify-between">
+                <span className="text-xs text-gray-400">{scenario.length}/{MAX_LENGTH}</span>
+                <button
+                  type="submit"
+                  disabled={!scenario.trim()}
+                  className="rounded-lg bg-blue-700 px-6 py-2.5 text-sm font-medium text-white transition hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-40"
+                >
+                  Analyse
+                </button>
+              </div>
+              <p className="mt-3 text-xs italic text-gray-400">
+                You do not need all the answers yet.
+              </p>
             </div>
+
           </div>
 
-          {/* Reassurance */}
-          <p className="text-xs italic text-gray-400">
-            You do not need all the answers yet.
-          </p>
-
-        </form>
-      )}
-
       {status === "idle" && MOCK_ENABLED && (
         <details className="rounded-lg border border-gray-200 bg-gray-50">
           <summary className="cursor-pointer px-4 py-2 text-sm font-medium text-gray-600">Developer details</summary>

docs/design-evolution-log.md

@@ -255,6 +255,47 @@ Questions
 Status:
 Experimental.
 
+Result:
+Partially confirmed.
+
+Learning:
+
+The facilitator introduction reduced the intimidation of the first screen.
+
+Replacing the empty landing page with a guided introduction improved the emotional tone.
+
+However, stacking the introduction above the input still gives the introduction excessive visual prominence.
+
+Repeat users may not want to repeatedly read the same introduction.
+
+Orientation should remain available without dominating the workflow.
+
+Decision:
+
+Keep the introduction concept but change its spatial relationship to the workspace — move it from above to beside, making it optional rather than mandatory.
+
+Next question:
+Does a horizontal facilitator/workspace layout feel more natural?
+
+### Experiment 05 — Facilitator Panel and Adaptive Landing Workspace
+
+Hypothesis
+
+Placing the facilitator beside the working area will feel more like entering a facilitated workshop than stacking instructional content above the workspace.
+
+Allowing the user to dismiss the facilitator will reduce friction for returning users while preserving onboarding for new users.
+
+Questions
+
+- Does a horizontal facilitator/workspace layout feel more natural?
+- Does the user's eye move naturally from facilitator to workspace?
+- Does the workspace become the primary focus?
+- Does "Don't show again" feel preferable to automatically hiding the introduction?
+- Should the facilitator panel become an optional workspace companion rather than mandatory onboarding?
+
+Status:
+Experimental.
+
 No conclusions.
 
 ---
@@ -269,3 +310,11 @@ The following are active explorations rather than decisions.
 - What information belongs in shared understanding?
 - What should the Investigation Map eventually become?
 - How should wide thinking be reflected in the interface?
+
+## Backlog — Experiment 05 Persistence Note
+
+The "Don't show this introduction again" checkbox uses sessionStorage as a placeholder.
+
+This preference should eventually be handled through user preferences or settings rather than local component state.
+
+TODO: When user accounts are introduced, persist this preference to the user profile so it travels across devices and sessions.