907 lines
36 KiB
React
907 lines
36 KiB
React
"use client";
|
|
|
|
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";
|
|
import { useBranchScopedFixture } from "@/lib/fixtures/rto26b-branch-scoped.mjs";
|
|
|
|
/* Compile-time env resolution — NEXT_PUBLIC_ vars are injected by Next.js at build */
|
|
const MOCK_ENABLED = process.env.NEXT_PUBLIC_CONFIDENCE_ENGINE_MOCKS === "true";
|
|
|
|
/* ── inject runtime globals for the mock client to read ──── */
|
|
function useMockGlobals() {
|
|
useEffect(() => {
|
|
if (MOCK_ENABLED) {
|
|
var w = window;
|
|
w.__MOCK_ENABLED = true;
|
|
w.__MOCK_DELAY = process.env.NEXT_PUBLIC_CONFIDENCE_MOCK_DELAY || "normal";
|
|
w.__MOCK_SCENARIO = process.env.NEXT_PUBLIC_CONFIDENCE_ENGINE_MOCK_SCENARIO || "";
|
|
}
|
|
}, []);
|
|
}
|
|
|
|
const MAX_LENGTH = 10000;
|
|
|
|
export async function submitScenarioForStartCase(fetchImpl, scenario) {
|
|
return fetchImpl("/api/cases/start", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ scenario }),
|
|
});
|
|
}
|
|
|
|
export async function submitAnswerForUpdateCase(
|
|
fetchImpl,
|
|
{ situationGraph, previousQuestion, answer },
|
|
) {
|
|
if (!answer?.trim()) {
|
|
return {
|
|
ok: false,
|
|
skipped: true,
|
|
data: {
|
|
success: false,
|
|
stage: "request_validation",
|
|
error: "Please enter an answer before updating.",
|
|
},
|
|
};
|
|
}
|
|
|
|
const response = await fetchImpl("/api/cases/update", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ situationGraph, previousQuestion, answer }),
|
|
});
|
|
|
|
return {
|
|
ok: response.ok,
|
|
skipped: false,
|
|
data: await response.json(),
|
|
};
|
|
}
|
|
|
|
function normaliseStartResult(data) {
|
|
return {
|
|
...data,
|
|
selectedQuestion:
|
|
typeof data?.selectedQuestion === "string"
|
|
? data.selectedQuestion
|
|
: data?.selectedQuestion?.question ?? null,
|
|
newlySurfacedNodeIds: data?.newlySurfacedNodeIds ?? [],
|
|
};
|
|
}
|
|
|
|
function normaliseUpdateSelectedQuestion(selectedQuestion) {
|
|
if (!selectedQuestion) return null;
|
|
if (typeof selectedQuestion === "string") return selectedQuestion;
|
|
return selectedQuestion.question ?? null;
|
|
}
|
|
|
|
export function ScenarioResultPanels({ status, result }) {
|
|
if (!result) return null;
|
|
|
|
const hasGraph = Boolean(result.situationGraph);
|
|
const hasQuestion = Boolean(result.selectedQuestion?.question);
|
|
const hasDiagnostics = Boolean(result.diagnostics);
|
|
|
|
return (
|
|
<>
|
|
{status === "error" && (
|
|
<div className="space-y-3">
|
|
{result.error && (
|
|
<div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 whitespace-pre-wrap">
|
|
Error: {result.error}
|
|
</div>
|
|
)}
|
|
{!hasGraph && !hasQuestion && (
|
|
<div className="rounded-lg border border-yellow-300 bg-yellow-50 px-4 py-2 text-sm text-yellow-800">
|
|
Validation failed — no structured graph output was produced.
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{hasDiagnostics && <DiagnosticsView result={result} />}
|
|
</>
|
|
);
|
|
}
|
|
|
|
// ── Message pools ───────────────────────────────────────────
|
|
const INITIAL_MESSAGES = [
|
|
{ min: 0, text: "Reading your situation" },
|
|
{ min: 10, text: "Building a structured understanding" },
|
|
{ min: 25, text: "Identifying what is known and still unclear" },
|
|
{ min: 45, text: "Selecting the next useful question" },
|
|
];
|
|
|
|
const UPDATE_MESSAGES = [
|
|
{ min: 0, text: "Considering your answer" },
|
|
{ min: 10, text: "Updating the situation" },
|
|
{ min: 25, text: "Checking what changed" },
|
|
{ min: 45, text: "Choosing the next question" },
|
|
];
|
|
|
|
function useLoadingStatus(messages, isLoading) {
|
|
const [elapsed, setElapsed] = useState(0);
|
|
const startRef = useRef(null);
|
|
|
|
useEffect(() => {
|
|
if (isLoading) {
|
|
startRef.current = Date.now();
|
|
const iv = setInterval(() => {
|
|
setElapsed(Math.floor((Date.now() - startRef.current) / 1000));
|
|
}, 1000);
|
|
return () => clearInterval(iv);
|
|
} else {
|
|
setElapsed(0);
|
|
startRef.current = null;
|
|
}
|
|
}, [isLoading]);
|
|
|
|
const currentMessage = useMemo(() => {
|
|
if (!messages || messages.length === 0) return "";
|
|
let msg = messages[0].text;
|
|
for (const m of messages) {
|
|
if (elapsed >= m.min) msg = m.text;
|
|
}
|
|
return msg;
|
|
}, [messages, elapsed]);
|
|
|
|
return { elapsed, currentMessage };
|
|
}
|
|
|
|
export function UpdateErrorPanel({ updateError }) {
|
|
if (!updateError) return null;
|
|
|
|
const errors = [
|
|
...(updateError.errors || []),
|
|
...(updateError.validationErrors || []),
|
|
...(updateError.graphValidationErrors || []),
|
|
...(updateError.proposalErrors || []),
|
|
...(updateError.providerErrors || []),
|
|
];
|
|
|
|
return (
|
|
<div className="space-y-3">
|
|
<div className="rounded-lg border border-red-300 bg-red-50 px-4 py-3 text-sm text-red-700 whitespace-pre-wrap">
|
|
Update error: {updateError.error}
|
|
</div>
|
|
{errors.length > 0 && (
|
|
<details className="rounded-lg border border-red-200 bg-red-50 px-4 py-3">
|
|
<summary className="cursor-pointer text-sm font-medium text-red-700 underline">
|
|
Update details ({errors.length})
|
|
</summary>
|
|
<ul className="mt-2 space-y-1 text-sm text-red-700">
|
|
{errors.map((item, index) => (
|
|
<li key={index}>
|
|
{typeof item === "string" ? item : item?.message || JSON.stringify(item)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</details>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { INITIAL_MESSAGES, UPDATE_MESSAGES, useLoadingStatus };
|
|
|
|
// ── Session key ────────────────────────────────────────────────
|
|
const SESSION_KEY = "confidence-engine-session";
|
|
|
|
function getSession() {
|
|
if (typeof sessionStorage === "undefined") return null;
|
|
try {
|
|
const raw = sessionStorage.getItem(SESSION_KEY);
|
|
return raw ? JSON.parse(raw) : null;
|
|
} catch (_) { return null; }
|
|
}
|
|
|
|
function saveSession(state) {
|
|
if (typeof sessionStorage === "undefined") return;
|
|
try { sessionStorage.setItem(SESSION_KEY, JSON.stringify(state)); } catch (_) {}
|
|
}
|
|
|
|
function clearSession() {
|
|
if (typeof sessionStorage === "undefined") return;
|
|
try { sessionStorage.removeItem(SESSION_KEY); } catch (_) {}
|
|
}
|
|
|
|
/**
|
|
* Derives whether the current component state represents a valid investigation
|
|
* context sufficient to render a workspace surface.
|
|
*
|
|
* Valid only when:
|
|
* - result carries a situationGraph (renderable graph), OR
|
|
* - status is "success" AND there is a non-empty scenario
|
|
* (from session restoration with real data).
|
|
*
|
|
* This predicate is the single source of truth for all render-gate decisions.
|
|
* showExperimentView, fixture availability, or sessionStorage keys alone are
|
|
* NOT sufficient to constitute valid context.
|
|
*/
|
|
export function hasValidInvestigationContext(result, status, scenario) {
|
|
return Boolean(result?.situationGraph) ||
|
|
(status === "success" && Boolean(scenario?.trim()));
|
|
}
|
|
|
|
/**
|
|
* Derives the primary surface that must render for the given state tuple.
|
|
* Enforces exactly-one-primary-surface invariant: no zero, no two.
|
|
*/
|
|
export function derivePrimarySurface(result, status, showExperimentView, scenario, activeBranchId) {
|
|
if (status === "loading") return "LOADING";
|
|
if (status === "error") return "ERROR_SURFACE";
|
|
|
|
const valid = hasValidInvestigationContext(result, status, scenario);
|
|
|
|
// RTO.28B: show question-selection surface when investigation exists but no question/branch is active
|
|
if (showExperimentView && valid && !activeBranchId) return "BRANCH_SELECTION";
|
|
|
|
if (showExperimentView && valid) return "EXPERIMENT_NOTEBOOK";
|
|
if (!showExperimentView && valid) return "NORMAL_WORKSPACE";
|
|
if (!showExperimentView) return "SCENARIO_ENTRY";
|
|
// showExperimentView === true but no valid context → fall back to entry
|
|
return "SCENARIO_ENTRY";
|
|
}
|
|
|
|
export default function ScenarioForm() {
|
|
const [scenario, setScenario] = useState("");
|
|
const [status, setStatus] = useState("idle"); // idle | loading | error | success
|
|
const [result, setResult] = useState(null);
|
|
const [answer, setAnswer] = useState("");
|
|
const [updateStatus, setUpdateStatus] = useState("idle"); // idle | loading | error | success
|
|
const [updateError, setUpdateError] = useState(null);
|
|
const [updateResult, setUpdateResult] = useState(null);
|
|
const [lastSubmittedAnswer, setLastSubmittedAnswer] = useState("");
|
|
const [currentUnderstanding, setCurrentUnderstanding] = useState(null);
|
|
const [mockScenario, setMockScenario] = useState("");
|
|
const [hideFacilitatorOnLanding, setHideFacilitatorOnLanding] = useState(false);
|
|
const textareaRef = useRef(null);
|
|
|
|
/* ── RTO.25A — passive late-result branch switcher (experimental) ── */
|
|
|
|
// RTO.28A: no active branch until the user explicitly chooses one.
|
|
const [activeBranchId, setActiveBranchId] = useState(null);
|
|
// Pre-seed Competitor development with a late result for RTO.27A testing
|
|
const [branchNewResults, setBranchNewResults] = useState({ "branch-a": true });
|
|
|
|
/* ── RTO.27B — provisional done-for-now state (experimental) ── */
|
|
|
|
const [doneForNowBranchIds, setDoneForNowBranchIds] = useState([]);
|
|
|
|
/* ── RTO.26B — experimental branch-scoped reasoning fixture ───── */
|
|
|
|
const branchScoped = useBranchScopedFixture();
|
|
// Toggle to control when the experiment view is visible vs production
|
|
// Always start false for SSR-safe deterministic first render.
|
|
// sessionStorage reads are deferred to useEffect (after mount).
|
|
const [showExperimentView, setShowExperimentView] = useState(false);
|
|
|
|
// Use fixture branches as the authoritative source when available
|
|
const BRANCHES = useMemo(() => branchScoped.getBranches(), [branchScoped]);
|
|
|
|
// Track the originating question for provenance
|
|
const [originQuestion, setOriginQuestion] = useState(null);
|
|
|
|
// Extract inferred questions from the fixture (flat list for post-Analyse surface)
|
|
const inferredQuestions = useMemo(() => {
|
|
if (!branchScoped || typeof branchScoped.getAllInferredQuestions !== 'function') return [];
|
|
return branchScoped.getAllInferredQuestions();
|
|
}, [branchScoped]);
|
|
|
|
// Simulate a late semantic result arriving on Branch A ~2s after a graph loads
|
|
useEffect(() => {
|
|
if (status !== "success" && status !== "error") return;
|
|
if (branchNewResults["branch-a"]) return;
|
|
|
|
const timer = setTimeout(() => {
|
|
setBranchNewResults((prev) => ({ ...prev, "branch-a": true }));
|
|
}, 2000);
|
|
return () => clearTimeout(timer);
|
|
}, [status, branchNewResults]);
|
|
|
|
// Compute branch-local data for the active branch (explicit provenance)
|
|
const activeBranch = BRANCHES.find(b => b.id === activeBranchId);
|
|
const experimentalBranchQuestions = useMemo(() => {
|
|
if (!activeBranch) return [];
|
|
return branchScoped.getBranchQuestions(activeBranch.id);
|
|
}, [activeBranch, branchScoped]);
|
|
|
|
const experimentalBranchContributions = useMemo(() => {
|
|
if (!activeBranch) return [];
|
|
return branchScoped.getBranchContributions(activeBranch.id);
|
|
}, [activeBranch, branchScoped]);
|
|
|
|
// RTO.27A — late results for active branch
|
|
const experimentalBranchLateResults = useMemo(() => {
|
|
if (!activeBranch) return [];
|
|
return (branchScoped.getBranchLateResults?.(activeBranch.id) || []).map(lr => ({ text: lr.text }));
|
|
}, [activeBranch, branchScoped]);
|
|
|
|
// Determine which non-active branches have new results for passive indicator
|
|
// (RTO.27B: also include done-for-now branches so pause state is visible)
|
|
const inactiveBranchNewResults = useMemo(() => {
|
|
const result = {};
|
|
BRANCHES.forEach(b => {
|
|
if (b.id !== activeBranchId) {
|
|
if (b.id in branchNewResults) {
|
|
result[b.id] = true;
|
|
}
|
|
// Show pause indicator on any done-for-now branch
|
|
if (doneForNowBranchIds.includes(b.id)) {
|
|
result[b.id] = true;
|
|
}
|
|
}
|
|
});
|
|
return result;
|
|
}, [activeBranchId, BRANCHES, branchNewResults, doneForNowBranchIds]);
|
|
|
|
/* ── Valid investigation predicate ─────────────────────── */
|
|
|
|
// Delegated to the exported utility below.
|
|
const validCtx = hasValidInvestigationContext(result, status, scenario);
|
|
|
|
/* Restore persisted session on mount (Phase 3) ─────────── */
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
const saved = getSession();
|
|
if (!saved) return;
|
|
|
|
const hasGraph = Boolean(saved.situationGraph);
|
|
|
|
setScenario(saved.scenario || "");
|
|
setResult(hasGraph ? { ...saved, situationGraph: saved.situationGraph } : null);
|
|
setCurrentUnderstanding(saved.summary || null);
|
|
|
|
// Partial sessions (present but no graph) must NOT suppress the
|
|
// scenario-entry form. Only promote to success when there is actual
|
|
// investigation data to render.
|
|
if (hasGraph) {
|
|
setStatus("success");
|
|
setShowExperimentView(true);
|
|
}
|
|
}, []);
|
|
|
|
/* Restore experiment view preference from storage (after hydration) ─ */
|
|
useEffect(() => {
|
|
if (typeof window === "undefined") return;
|
|
|
|
// Only promote to experiment mode when there is real investigation
|
|
// data to render. The ce-show-experiment flag is a presentation
|
|
// preference, not proof that an investigation exists.
|
|
if (!validCtx) return;
|
|
|
|
const savedExp = sessionStorage?.getItem("ce-show-experiment");
|
|
if (savedExp === "true") {
|
|
setShowExperimentView(true);
|
|
return;
|
|
}
|
|
|
|
// Also enable experiment mode if session data provides a graph
|
|
// (covers the pre-restoration case where scenario was typed but not yet submitted).
|
|
const session = getSession();
|
|
if (session?.situationGraph) {
|
|
setShowExperimentView(true);
|
|
}
|
|
}, [validCtx]);
|
|
|
|
/* 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();
|
|
|
|
function handleScenarioSelect(key) {
|
|
setMockScenario(key);
|
|
if (typeof window !== "undefined") {
|
|
window.__MOCK_SCENARIO = key;
|
|
}
|
|
// Auto-fill central statement for quick start
|
|
var found = AVAILABLE_SCENARIOS.find(function(s) { return s.key === key; });
|
|
if (found && found.centralStatement) {
|
|
setScenario(found.centralStatement);
|
|
}
|
|
}
|
|
|
|
function handleScenarioFill(key) {
|
|
handleScenarioSelect(key);
|
|
setStatus("loading");
|
|
setResult(null);
|
|
setAnswer("");
|
|
setUpdateStatus("idle");
|
|
setUpdateResult(null);
|
|
setLastSubmittedAnswer("");
|
|
setCurrentUnderstanding(null);
|
|
setUpdateError(null);
|
|
// Simulate a click on the analyse button after auto-filling
|
|
setTimeout(function() {
|
|
var btn = document.querySelector('button[type="submit"]');
|
|
if (btn && !btn.disabled) btn.click();
|
|
}, 50);
|
|
}
|
|
|
|
const { elapsed: startElapsed, currentMessage: startMsg } = useLoadingStatus(
|
|
INITIAL_MESSAGES,
|
|
status === "loading"
|
|
);
|
|
|
|
const { elapsed: updateElapsed, currentMessage: updateMsg } = useLoadingStatus(
|
|
UPDATE_MESSAGES,
|
|
updateStatus === "loading"
|
|
);
|
|
|
|
const handleSubmit = async (e) => {
|
|
e.preventDefault();
|
|
setStatus("loading");
|
|
setResult(null);
|
|
setAnswer("");
|
|
setUpdateStatus("idle");
|
|
setUpdateResult(null);
|
|
setLastSubmittedAnswer("");
|
|
setUpdateError(null);
|
|
setCurrentUnderstanding(null);
|
|
|
|
// Force a DOM flush so loading state renders before awaiting (prevents instant mocks from swallowing it)
|
|
await new Promise(r => requestAnimationFrame(() => setTimeout(r, 50)));
|
|
|
|
try {
|
|
const res = await submitScenarioForStartCase(MOCK_ENABLED ? mockFetch : fetch, scenario);
|
|
|
|
const data = await res.json();
|
|
|
|
if (res.ok && data.success) {
|
|
setStatus("success");
|
|
setCurrentUnderstanding(data.summary ?? null);
|
|
const normalised = normaliseStartResult(data);
|
|
setResult(normalised);
|
|
saveSession({ scenario, situationGraph: normalised.situationGraph, selectedQuestion: normalised.selectedQuestion, summary: data.summary ?? null, updatedAt: new Date().toISOString() });
|
|
} else {
|
|
setStatus("error");
|
|
setCurrentUnderstanding(data.summary ?? null);
|
|
setResult(normaliseStartResult(data));
|
|
}
|
|
} catch (err) {
|
|
setStatus("error");
|
|
setResult({ error: err.message || "Network request failed" });
|
|
}
|
|
};
|
|
|
|
const handleUpdate = async (e) => {
|
|
e.preventDefault();
|
|
|
|
// Guard empty answer before showing loading state
|
|
if (!answer?.trim()) {
|
|
setUpdateStatus("error");
|
|
setUpdateError({ error: "Please enter an answer before updating." });
|
|
return;
|
|
}
|
|
|
|
setUpdateStatus("loading");
|
|
setUpdateError(null);
|
|
setLastSubmittedAnswer(answer.trim());
|
|
|
|
// Force a DOM flush so loading state renders before awaiting (prevents instant mocks from swallowing it)
|
|
await new Promise(r => requestAnimationFrame(() => setTimeout(r, 50)));
|
|
|
|
const submission = await submitAnswerForUpdateCase(MOCK_ENABLED ? mockFetch : fetch, {
|
|
situationGraph: result?.situationGraph,
|
|
previousQuestion: result?.selectedQuestion,
|
|
answer,
|
|
});
|
|
|
|
if (submission.skipped) {
|
|
setUpdateStatus("error");
|
|
setUpdateError(submission.data);
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const outcome = submission.data;
|
|
|
|
if (submission.ok && outcome.success) {
|
|
setUpdateStatus("success");
|
|
setCurrentUnderstanding(
|
|
outcome.summary ? outcome.summary : currentUnderstanding,
|
|
);
|
|
setUpdateResult({
|
|
...outcome,
|
|
previousSituationGraph: result?.situationGraph ?? null,
|
|
});
|
|
setResult((current) => ({
|
|
...current,
|
|
situationGraph: outcome.updatedSituationGraph,
|
|
selectedQuestion: normaliseUpdateSelectedQuestion(
|
|
outcome.selectedQuestion,
|
|
),
|
|
newlySurfacedNodeIds: (outcome.proposal?.addedNodes || [])
|
|
.filter((node) => node.kind === "unknown")
|
|
.map((node) => node.id),
|
|
diagnostics: outcome.diagnostics,
|
|
}));
|
|
setAnswer("");
|
|
// Persist after successful update turn
|
|
saveSession({ scenario, situationGraph: outcome.updatedSituationGraph, selectedQuestion: normaliseUpdateSelectedQuestion(outcome.selectedQuestion), summary: outcome.summary ?? currentUnderstanding, updatedAt: new Date().toISOString() });
|
|
} else {
|
|
setUpdateStatus("error");
|
|
setUpdateError(outcome);
|
|
}
|
|
} catch (err) {
|
|
setUpdateStatus("error");
|
|
setUpdateError({ error: err.message || "Network request failed" });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
{/* ── RTO.26B — standalone branch-scoped experimental view (shown when experiment is active) ───── */}
|
|
{showExperimentView && validCtx && status !== "loading" && (
|
|
<>
|
|
<PulseStyle />
|
|
{!activeBranchId ? (
|
|
/* RTO.28B: inferred questions surface — user chooses what to investigate */
|
|
<div className="max-w-xl mx-auto space-y-6">
|
|
<div className="space-y-4">
|
|
{/* Situation remains visible */}
|
|
{currentUnderstanding && (
|
|
<div className="rounded-lg border border-gray-200/60 bg-gray-50/40 px-5 py-4">
|
|
<h2 className="mb-2 text-[11px] font-semibold tracking-widest uppercase text-gray-500">
|
|
Situation
|
|
</h2>
|
|
<p className="text-sm leading-relaxed text-gray-700">{currentUnderstanding}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Inferred questions — user chooses what to investigate */}
|
|
<div className="space-y-4">
|
|
<h2 className="text-xs font-medium text-gray-700">Questions to explore</h2>
|
|
<p className="text-sm text-gray-500">Click a question to start investigating. A branch will be created for your choice.</p>
|
|
|
|
{inferredQuestions.map((q) => (
|
|
<button
|
|
key={q.id}
|
|
onClick={() => {
|
|
const targetBranch = BRANCHES.find(b => b.id === q.branchId);
|
|
if (targetBranch) {
|
|
setActiveBranchId(targetBranch.id);
|
|
setOriginQuestion({ id: q.id, text: q.text });
|
|
}
|
|
}}
|
|
className="w-full text-left rounded-lg border border-gray-200 bg-white px-5 py-4 transition hover:border-gray-300 hover:bg-gray-50"
|
|
>
|
|
<span className="block text-sm leading-relaxed text-gray-900">{q.text}</span>
|
|
</button>
|
|
))}
|
|
|
|
{inferredQuestions.length === 0 && (
|
|
<p className="text-sm text-gray-400">No questions available yet.</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
/* Has active branch — show notebook */
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
|
|
{/* Workspace (3/4) — branch-scoped fixture only, no API needed */}
|
|
<div className="lg:col-span-3">
|
|
{(() => {
|
|
const activeBranch = BRANCHES.find(b => b.id === activeBranchId);
|
|
const branchContext = activeBranch ? { label: activeBranch.label, origin: activeBranch.origin } : null;
|
|
return (
|
|
<ReasoningWorkspace
|
|
scenario={scenario}
|
|
status={status}
|
|
updateStatus="idle"
|
|
currentUnderstanding={currentUnderstanding}
|
|
result={{ situationGraph: null, selectedQuestion: null, newlySurfacedNodeIds: [], diagnostics: null }}
|
|
answer=""
|
|
setAnswer={() => {}}
|
|
onAnswerSubmit={async (e) => e.preventDefault()}
|
|
lastSubmittedAnswer=""
|
|
branchContext={{ ...branchContext, originQuestion: originQuestion }}
|
|
experimentalBranches={BRANCHES.length > 0 ? BRANCHES : undefined}
|
|
branchLocalQuestions={experimentalBranchQuestions.length > 0 ? experimentalBranchQuestions : undefined}
|
|
branchLocalContributions={experimentalBranchContributions.length > 0 ? experimentalBranchContributions : undefined}
|
|
branchLocalLateResults={experimentalBranchLateResults.length > 0 ? experimentalBranchLateResults : undefined}
|
|
inactiveBranchNewResults={Object.keys(inactiveBranchNewResults).length > 0 ? inactiveBranchNewResults : undefined}
|
|
activeBranchIdForNotebook={activeBranchId}
|
|
doneForNowBranchIds={doneForNowBranchIds}
|
|
onDoneForNow={() => {
|
|
if (activeBranchId && !doneForNowBranchIds.includes(activeBranchId)) {
|
|
setDoneForNowBranchIds(prev => [...prev, activeBranchId]);
|
|
}
|
|
}}
|
|
onReopenBranch={(id) => {
|
|
setDoneForNowBranchIds(prev => prev.filter(x => x !== id));
|
|
setActiveBranchId(id);
|
|
}}
|
|
onRestart={() => { setStatus("idle"); setResult(null); setScenario(""); }}
|
|
/>
|
|
);
|
|
})()}
|
|
</div>
|
|
|
|
{/* Branch switcher (1/4 sidebar) */}
|
|
<div className="lg:col-span-1">
|
|
<ExperimentalBranchSwitcher
|
|
branches={BRANCHES}
|
|
activeBranchId={activeBranchId}
|
|
branchNewResults={branchNewResults}
|
|
branchPauseState={doneForNowBranchIds}
|
|
onBranchSelect={(id) => {
|
|
if (id === activeBranchId) return;
|
|
// Reopen: if the selected branch is paused, clear its pause state
|
|
if (doneForNowBranchIds.includes(id)) {
|
|
setDoneForNowBranchIds(prev => prev.filter(x => x !== id));
|
|
}
|
|
setActiveBranchId(id);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
|
|
{/* ── Experiment toggle (visible when experiment is NOT shown) ─ */}
|
|
{!showExperimentView && status !== "loading" && !result?.updatedSituationGraph && (
|
|
<div className="rounded-lg border border-gray-200/60 bg-gray-50/30 px-4 py-3 text-center">
|
|
<p className="text-sm text-gray-500 mb-3">
|
|
Production view active.
|
|
</p>
|
|
<button
|
|
onClick={() => {
|
|
setShowExperimentView(true);
|
|
try { window.sessionStorage?.setItem("ce-show-experiment", "true"); } catch {}
|
|
}}
|
|
className="rounded-lg border border-blue-600 bg-white px-4 py-2 text-sm font-medium text-blue-700 hover:bg-blue-50 transition"
|
|
>
|
|
Try branch-scoped experiment (RTO.26B)
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* ── Idle form for scenario input (shown only when experiment is off) ─ */}
|
|
{!showExperimentView && !result?.situationGraph && status === "idle" && (
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
|
|
{/* Two-column landing workspace */}
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-3">
|
|
|
|
{/* Left panel — Facilitator (1/3 on desktop) */}
|
|
{!hideFacilitatorOnLanding && (
|
|
<div className="md:col-span-1">
|
|
<div className="rounded-lg border border-amber-200/60 bg-gradient-to-b from-amber-50/60 to-white px-8 pt-7 pb-7 sticky top-6 shadow-sm">
|
|
<h2 className="mb-4 text-xs font-bold tracking-widest uppercase text-amber-600/60">Before we begin</h2>
|
|
<p className="text-sm leading-relaxed text-amber-900/80 mb-5">
|
|
The Confidence Engine helps build confidence by understanding situations before deciding what to do.
|
|
</p>
|
|
<p className="text-sm leading-relaxed text-amber-900/70 mb-4">
|
|
You do not need to know exactly what the problem is.
|
|
</p>
|
|
<p className="text-sm leading-relaxed text-amber-900/70 mb-7">
|
|
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-5 border-t border-amber-100/60">
|
|
<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">
|
|
{`Dismiss this introduction permanently`}
|
|
</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-4 text-xs font-bold tracking-widest uppercase text-gray-400">What's the situation</h2>
|
|
<textarea
|
|
ref={textareaRef}
|
|
value={scenario}
|
|
onChange={(e) => setScenario(e.target.value)}
|
|
placeholder="What have you noticed?"
|
|
rows={4}
|
|
data-testid="scenario-textarea"
|
|
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>
|
|
|
|
</form>
|
|
)}
|
|
|
|
{status === "idle" && MOCK_ENABLED && (
|
|
<details className="rounded-lg border border-gray-200/60 bg-gray-50/30">
|
|
<summary className="cursor-pointer px-4 py-2 text-sm font-medium text-gray-400 hover:text-gray-600">Developer details</summary>
|
|
<div className="space-y-3 px-4 pb-4">
|
|
<div>
|
|
<label htmlFor="mock-scenario" className="block text-xs font-medium text-gray-500 mb-1">Mock scenario</label>
|
|
<select
|
|
id="mock-scenario"
|
|
value={mockScenario}
|
|
onChange={(e) => handleScenarioSelect(e.target.value)}
|
|
className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-gray-500 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
|
>
|
|
<option value="">— default (env var) —</option>
|
|
{AVAILABLE_SCENARIOS.map(function(s) {
|
|
return <option key={s.key} value={s.key}>{s.label}</option>;
|
|
})}
|
|
</select>
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{AVAILABLE_SCENARIOS.map(function(s) {
|
|
return (
|
|
<button
|
|
key={s.key}
|
|
type="button"
|
|
onClick={() => handleScenarioFill(s.key)}
|
|
disabled={!scenario.trim() && scenario !== s.centralStatement}
|
|
className="rounded-md border border-gray-200/60 bg-white/80 px-3 py-1.5 text-xs text-gray-500 hover:bg-gray-50 disabled:opacity-30"
|
|
>
|
|
{s.label} ({s.turnCount} turns)
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</details>
|
|
)}
|
|
|
|
{/* ── Initial analysis loading card ─────────────── */}
|
|
{status === "loading" && (
|
|
<LoadingOverlay
|
|
isLoading={true}
|
|
elapsed={startElapsed}
|
|
currentMessage={startMsg}
|
|
variant="initial"
|
|
/>
|
|
)}
|
|
|
|
{/* ── Main result workspace (only when experiment view is off) ─── */}
|
|
{(!showExperimentView && (status === "success" || status === "error")) && (
|
|
<>
|
|
<PulseStyle />
|
|
<div className="grid grid-cols-1 gap-6 lg:grid-cols-4">
|
|
{/* Workspace (3/4) */}
|
|
<div className="lg:col-span-3">
|
|
{/* Build branch context for the active branch */}
|
|
{(() => {
|
|
const activeBranch = BRANCHES.find(b => b.id === activeBranchId);
|
|
const branchContext = activeBranch ? { label: activeBranch.label, origin: activeBranch.origin } : null;
|
|
return (
|
|
<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}
|
|
branchContext={branchContext}
|
|
// ── RTO.26B — branch-local reasoning from explicit provenance ──
|
|
experimentalBranches={BRANCHES.length > 0 ? BRANCHES : undefined}
|
|
branchLocalQuestions={experimentalBranchQuestions.length > 0 ? experimentalBranchQuestions : undefined}
|
|
branchLocalContributions={experimentalBranchContributions.length > 0 ? experimentalBranchContributions : undefined}
|
|
branchLocalLateResults={experimentalBranchLateResults.length > 0 ? experimentalBranchLateResults : undefined}
|
|
inactiveBranchNewResults={Object.keys(inactiveBranchNewResults).length > 0 ? inactiveBranchNewResults : undefined}
|
|
activeBranchIdForNotebook={activeBranchId}
|
|
doneForNowBranchIds={doneForNowBranchIds}
|
|
onDoneForNow={() => {
|
|
if (activeBranchId && !doneForNowBranchIds.includes(activeBranchId)) {
|
|
setDoneForNowBranchIds(prev => [...prev, activeBranchId]);
|
|
}
|
|
}}
|
|
onReopenBranch={(id) => {
|
|
setDoneForNowBranchIds(prev => prev.filter(x => x !== id));
|
|
setActiveBranchId(id);
|
|
}}
|
|
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}
|
|
branchPauseState={doneForNowBranchIds}
|
|
onBranchSelect={(id) => {
|
|
if (id === activeBranchId) return;
|
|
// Reopen: if the selected branch is paused, clear its pause state
|
|
if (doneForNowBranchIds.includes(id)) {
|
|
setDoneForNowBranchIds(prev => prev.filter(x => x !== id));
|
|
}
|
|
setActiveBranchId(id);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
{/* ── Continue later banner when session was restored ── */}
|
|
{status === "success" && result?.updatedAt && (
|
|
<ContinueLaterBanner onRestart={() => { clearSession(); setStatus("idle"); setResult(null); setAnswer(""); setUpdateStatus("idle"); setCurrentUnderstanding(null); }} />
|
|
)}
|
|
|
|
{/* Reset button after successful analysis */}
|
|
{status === "success" && (
|
|
<div className="text-center">
|
|
<button
|
|
onClick={() => {
|
|
clearSession();
|
|
setScenario("");
|
|
setStatus("idle");
|
|
setResult(null);
|
|
setAnswer("");
|
|
setUpdateStatus("idle");
|
|
setUpdateResult(null);
|
|
setLastSubmittedAnswer("");
|
|
setCurrentUnderstanding(null);
|
|
setUpdateError(null);
|
|
}}
|
|
className="rounded-lg border border-gray-200/60 px-4 py-2 text-sm font-medium text-gray-500 transition hover:bg-gray-50/80"
|
|
>
|
|
Start new investigation
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
}
|