experiment: facilitator progress panel (Version B)

components/reasoning-workspace.jsx

@@ -5,6 +5,7 @@ import DiagnosticsView from "@/components/diagnostics-view";
 import GraphUpdateView from "@/components/graph-update-view";
 import SituationGraphView from "@/components/situation-graph-view";
 import InvestigationSummaryPanel from "@/components/investigation-summary-panel";
+import InvestigationSummaryPanelV2 from "@/components/investigation-summary-panel-v2";
 import InvestigationMap from "@/components/investigation-map";
 
 // ── Technical summary detector (main view filters these) ───
@@ -523,6 +524,8 @@ export default function ReasoningWorkspace({
   const [investigationHistory, setInvestigationHistory] = useState([]);
   const turnCounter = useRef(0);
   const pendingTurnRef = useRef(null);
+  // ── Experiment 11: toggle between progress panel versions ──
+  const [showVersionB, setShowVersionB] = useState(false);
   const { saveSession, loadSession } = useSessionPersistence();
 
   // Persist workspace state on every successful update (Phase 3)
@@ -714,9 +717,32 @@ export default function ReasoningWorkspace({
                 {hasCurrentSummaryCondition && (
                   <>
                     <CurrentUnderstandingCard currentSummary={graph?.currentSummary || result?.updatedSituationGraph?.currentSummary} plainLanguage={propUnderstanding || null} />
-                    <div className="opacity-75">
-                      <InvestigationSummaryPanel graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
-                    </div>
+                    {/* ── Experiment 11: progress panel A / B toggle ── */}
+                    {hasGraph && (
+                      <div className="space-y-2">
+                        <div className="flex items-center gap-2">
+                          <button
+                            onClick={() => setShowVersionB(false)}
+                            className={`text-xs transition ${!showVersionB ? "font-medium text-gray-700 underline" : "text-gray-400 hover:text-gray-500"}`}
+                          >
+                            Panel A
+                          </button>
+                          <span className="text-gray-300">/</span>
+                          <button
+                            onClick={() => setShowVersionB(true)}
+                            className={`text-xs transition ${showVersionB ? "font-medium text-gray-700 underline" : "text-gray-400 hover:text-gray-500"}`}
+                          >
+                            Panel B
+                          </button>
+                        </div>
+                        <div className="opacity-75">
+                          {showVersionB
+                            ? <InvestigationSummaryPanelV2 graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
+                            : <InvestigationSummaryPanel graph={graph} selectedQuestion={selectedQ} result={result} updateStatus={updateStatus} />
+                          }
+                        </div>
+                      </div>
+                    )}
                   </>
                 )}
               </div>