test(ui): explore passive branch result indication

components/experimental/branch-switcher.jsx

@@ -0,0 +1,123 @@
+/**
+ * Experimental branch switcher — RTO.25A
+ *
+ * Smallest branch representation needed to test passive late-result indication.
+ * Does NOT replace production branch navigation. Temporary fixture only.
+ */
+
+"use client";
+
+import React, { useState, useEffect } from "react";
+
+/* ── Keyframes (injected once via <style> at render) ───── */
+
+const PulseStyle = () => (
+  <style>{`
+    @keyframes rto-pulse {
+      0%, 100% { opacity: 0.6; }
+      50% { opacity: 1; }
+    }
+  `}</style>
+);
+
+/* ── Status dot (passive new-result indicator) ─────────── */
+
+function NewIndicator({ visible }) {
+  if (!visible) return null;
+
+  return (
+    <span
+      className="ml-2 inline-flex items-center"
+      title="Something new is available here"
+      aria-label="New result available"
+    >
+      <span
+        className="relative inline-block h-[8px] w-[8px]"
+        style={{ animation: "rto-pulse 3s ease-in-out infinite" }}
+      >
+        <span
+          className="absolute inset-0 rounded-full bg-blue-400/70"
+          aria-hidden="true"
+        />
+      </span>
+    </span>
+  );
+}
+
+/* ── Single branch row ─────────────────────────────────── */
+
+function BranchRow({ id, label, active, isNew, onClick }) {
+  const isActive = Boolean(active);
+
+  return (
+    <button
+      onClick={onClick}
+      disabled={isActive}
+      aria-current={isActive ? "page" : undefined}
+      className={`w-full flex items-center gap-2 rounded-md px-3 py-2 text-left transition text-sm ${
+        isActive
+          ? "bg-blue-50/80 border border-blue-200/60 text-blue-900 font-medium"
+          : "text-gray-600 hover:bg-gray-100/70 hover:text-gray-800 border border-transparent"
+      } ${!isActive ? "cursor-pointer" : "cursor-default"}`}
+    >
+      {/* Active indicator — ● vs ○ */}
+      <span
+        className={`flex-none leading-none text-base ${
+          isActive ? "text-blue-500" : "text-gray-300"
+        }`}
+        aria-hidden="true"
+      >
+        {isActive ? "●" : "○"}
+      </span>
+
+      {/* Branch label */}
+      <span className="flex-1 truncate">{label}</span>
+
+      {/* Passive new-result indicator (only for inactive branches) */}
+      {!isActive && <NewIndicator visible={isNew} />}
+    </button>
+  );
+}
+
+/* ── Card wrapper ────────────────────────────────────────── */
+
+export default function ExperimentalBranchSwitcher({
+  branches = [],
+  activeBranchId,
+  branchNewResults = {},
+  onBranchSelect,
+}) {
+  if (!branches.length) return null;
+
+  return (
+    <div
+      className="rounded-lg border border-gray-200/60 bg-gray-50/30 p-4"
+      role="radiogroup"
+      aria-label="Experimental branch switcher — RTO.25A"
+    >
+      {/* Label — clearly experimental */}
+      <h2 className="mb-1 text-[10px] font-semibold tracking-widest uppercase text-gray-400">
+        Branches{" "}
+        <span className="font-normal text-gray-300">(exp)</span>
+      </h2>
+      <p className="mb-3 text-[11px] text-gray-400/60">
+        Browse branches. Current focus is preserved.
+      </p>
+
+      <div className="space-y-1" role="list" aria-label="Available branches">
+        {branches.map((branch) => (
+          <BranchRow
+            key={branch.id}
+            id={branch.id}
+            label={branch.label}
+            active={activeBranchId === branch.id}
+            isNew={Boolean(branchNewResults[branch.id])}
+            onClick={() => onBranchSelect?.(branch.id)}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}
+
+export { PulseStyle };

components/scenario-form.jsx

@@ -4,6 +4,7 @@ import React, { useEffect } from "react";
 import { useState, useRef, useMemo } from "react";
 import DiagnosticsView from "@/components/diagnostics-view";
 import ReasoningWorkspace, { LoadingOverlay, ContinueLaterBanner } from "@/components/reasoning-workspace";
+import ExperimentalBranchSwitcher, { PulseStyle } from "@/components/experimental/branch-switcher";
 import { mockFetch, AVAILABLE_SCENARIOS } from "@/lib/mocks/confidence-engine/mock-client";
 
 /* Compile-time env resolution — NEXT_PUBLIC_ vars are injected by Next.js at build */
@@ -221,6 +222,28 @@ export default function ScenarioForm() {
   const [hideFacilitatorOnLanding, setHideFacilitatorOnLanding] = useState(false);
   const textareaRef = useRef(null);
 
+  /* ── RTO.25A — passive late-result branch switcher (experimental) ── */
+
+  const BRANCHES = [
+    { id: "branch-a", label: "Competitor development" },
+    { id: "branch-b", label: "Customer demand" },
+  ];
+
+  const [activeBranchId, setActiveBranchId] = useState("branch-b");
+  const [branchNewResults, setBranchNewResults] = useState({});
+
+  // Simulate a late semantic result arriving on Branch A ~2s after a graph loads
+  useEffect(() => {
+    if (status !== "success" && status !== "error") return;
+    // Only simulate once per graph load
+    if (branchNewResults["branch-a"]) return;
+
+    const timer = setTimeout(() => {
+      setBranchNewResults((prev) => ({ ...prev, "branch-a": true }));
+    }, 2000);
+    return () => clearTimeout(timer);
+  }, [status, branchNewResults]);
+
   /* Restore persisted session on mount (Phase 3) ─────────── */
   useEffect(() => {
     if (typeof window === "undefined") return;
@@ -507,35 +530,58 @@ export default function ScenarioForm() {
 
       {/* ── Main result workspace ─────────────────────── */}
       {((status === "success" || status === "error") && status !== "loading") && (
-        <ReasoningWorkspace
+        <>
-          scenario={scenario}
+          <PulseStyle />
-          status={status}
+          <div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
-          updateStatus={updateStatus}
+            {/* Workspace (3/4) */}
-          currentUnderstanding={currentUnderstanding}
+            <div className="lg:col-span-3">
-          result={{
+              <ReasoningWorkspace
-            ...(result || {}),
+                scenario={scenario}
-            situationGraph: updateResult?.updatedSituationGraph ?? result?.situationGraph,
+                status={status}
-            selectedQuestion: updateResult?.selectedQuestion ?? result?.selectedQuestion,
+                updateStatus={updateStatus}
-            newlySurfacedNodeIds: result?.newlySurfacedNodeIds || [],
+                currentUnderstanding={currentUnderstanding}
-            diagnostics: result?.diagnostics || null,
+                result={{
-            updateError,
+                  ...(result || {}),
-          }}
+                  situationGraph: updateResult?.updatedSituationGraph ?? result?.situationGraph,
-          answer={answer}
+                  selectedQuestion: updateResult?.selectedQuestion ?? result?.selectedQuestion,
-          setAnswer={setAnswer}
+                  newlySurfacedNodeIds: result?.newlySurfacedNodeIds || [],
-          onAnswerSubmit={handleUpdate}
+                  diagnostics: result?.diagnostics || null,
-          lastSubmittedAnswer={lastSubmittedAnswer}
+                  updateError,
-          onRestart={() => {
+                }}
-            clearSession();
+                answer={answer}
-            setStatus("idle");
+                setAnswer={setAnswer}
-            setResult(null);
+                onAnswerSubmit={handleUpdate}
-            setAnswer("");
+                lastSubmittedAnswer={lastSubmittedAnswer}
-            setUpdateStatus("idle");
+                onRestart={() => {
-            setUpdateResult(null);
+                  clearSession();
-            setLastSubmittedAnswer("");
+                  setStatus("idle");
-            setCurrentUnderstanding(null);
+                  setResult(null);
-            setUpdateError(null);
+                  setAnswer("");
-          }}
+                  setUpdateStatus("idle");
-        />
+                  setUpdateResult(null);
+                  setLastSubmittedAnswer("");
+                  setCurrentUnderstanding(null);
+                  setUpdateError(null);
+                }}
+              />
+            </div>
+
+            {/* Branch switcher (1/4 sidebar) */}
+            <div className="lg:col-span-1">
+              <ExperimentalBranchSwitcher
+                branches={BRANCHES}
+                activeBranchId={activeBranchId}
+                branchNewResults={branchNewResults}
+                onBranchSelect={(id) => {
+                  /* User intentionally navigates — nothing more */
+                  if (id !== activeBranchId) {
+                    setActiveBranchId(id);
+                  }
+                }}
+              />
+            </div>
+          </div>
+        </>
       )}
 
       {/* ── Continue later banner when session was restored ── */}