robbond/confidence-engine
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

experiment: facilitator panel beside workspace (Exp 05)

Browse Source 
- 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
This commit is contained in:
robbond
2026-08-05 12:25:44 +01:00
parent 048f31f43b
commit d1e6c2e032
3 changed files with 132 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/scenario-form.jsx
+71 -40
View File
@@ -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 */}
<div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6">
<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>
{/* Two-column landing workspace */}
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
{/* Scenario input */}
<div className="space-y-2">
<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"
/>
<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>
{/* Left panel — Facilitator (1/3 on desktop) */}
{!hideFacilitatorOnLanding && (
<div className="md:col-span-1">
<div className="rounded-lg border border-gray-100 bg-gray-50/60 px-6 pt-5 pb-6 sticky top-6">
<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 mb-6">
Simply describe what you have observed. We will work through it together, one question at a time.
</p>
<div className="flex items-center gap-2 pt-4 border-t border-gray-200">
<input
type="checkbox"
id="dismiss-facilitator"
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>