test(ui): explore passive branch result indication
This commit is contained in:
@@ -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 };
|
||||
@@ -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}
|
||||
status={status}
|
||||
updateStatus={updateStatus}
|
||||
currentUnderstanding={currentUnderstanding}
|
||||
result={{
|
||||
...(result || {}),
|
||||
situationGraph: updateResult?.updatedSituationGraph ?? result?.situationGraph,
|
||||
selectedQuestion: updateResult?.selectedQuestion ?? result?.selectedQuestion,
|
||||
newlySurfacedNodeIds: result?.newlySurfacedNodeIds || [],
|
||||
diagnostics: result?.diagnostics || null,
|
||||
updateError,
|
||||
}}
|
||||
answer={answer}
|
||||
setAnswer={setAnswer}
|
||||
onAnswerSubmit={handleUpdate}
|
||||
lastSubmittedAnswer={lastSubmittedAnswer}
|
||||
onRestart={() => {
|
||||
clearSession();
|
||||
setStatus("idle");
|
||||
setResult(null);
|
||||
setAnswer("");
|
||||
setUpdateStatus("idle");
|
||||
setUpdateResult(null);
|
||||
setLastSubmittedAnswer("");
|
||||
setCurrentUnderstanding(null);
|
||||
setUpdateError(null);
|
||||
}}
|
||||
/>
|
||||
<>
|
||||
<PulseStyle />
|
||||
<div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
|
||||
{/* Workspace (3/4) */}
|
||||
<div className="lg:col-span-3">
|
||||
<ReasoningWorkspace
|
||||
scenario={scenario}
|
||||
status={status}
|
||||
updateStatus={updateStatus}
|
||||
currentUnderstanding={currentUnderstanding}
|
||||
result={{
|
||||
...(result || {}),
|
||||
situationGraph: updateResult?.updatedSituationGraph ?? result?.situationGraph,
|
||||
selectedQuestion: updateResult?.selectedQuestion ?? result?.selectedQuestion,
|
||||
newlySurfacedNodeIds: result?.newlySurfacedNodeIds || [],
|
||||
diagnostics: result?.diagnostics || null,
|
||||
updateError,
|
||||
}}
|
||||
answer={answer}
|
||||
setAnswer={setAnswer}
|
||||
onAnswerSubmit={handleUpdate}
|
||||
lastSubmittedAnswer={lastSubmittedAnswer}
|
||||
onRestart={() => {
|
||||
clearSession();
|
||||
setStatus("idle");
|
||||
setResult(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 ── */}
|
||||
|
||||
Reference in New Issue
Block a user