// Root mount. Renders the routed operator shell (OperatorRoot). The old
// client-side demo login surface has been retired — operators sign in via the
// Microsoft PKCE redirect and customers via /customer/login. A customer session
// reaches ONLY /demo here (rendered with CustomerDemoShell, not the operator
// AppHeader); every other route bounces it to its landing page (see the
// customer-wall effect in OperatorRoot).
const { useState: useStateRoot, useEffect: useEffectRoot } = React;
// ── Shared concerns — both roots need these ─────────────────────────────────
// Read-only (snapshot) mode is decided inside AssemblyLineLive, a sibling tree.
// It broadcasts via window.AL_READONLY + an 'al-readonly-mode' event; we mirror
// it here so the header "Inject Task" button can hide in the read-only viewer.
// Seed from the flag in case the event already fired.
function useReadOnlyMirror() {
const [readOnly, setReadOnly] = useStateRoot(() =>
typeof window !== "undefined" && window.AL_READONLY === true);
useEffectRoot(() => {
const onMode = (e) => setReadOnly(e.detail?.readOnly === true);
window.addEventListener("al-readonly-mode", onMode);
// Defensive: catches the narrow render→effect gap where the event could
// fire after the lazy initializer ran but before the listener attached.
if (window.AL_READONLY === true) setReadOnly(true);
return () => window.removeEventListener("al-readonly-mode", onMode);
}, []);
return readOnly;
}
// Demo runner: poll capability + running state; Run/Reset drive run-demo.ts.
function useDemoRunner() {
const [demoRunner, setDemoRunner] = useStateRoot(false);
const [demoRunning, setDemoRunning] = useStateRoot(false);
useEffectRoot(() => {
let stop = false;
const tick = () => fetch("/demo/info").then((r) => r.json())
.then((d) => { if (!stop) { setDemoRunner(!!d.runner); setDemoRunning(!!d.running); } })
.catch(() => {});
tick();
const iv = setInterval(tick, 4000);
return () => { stop = true; clearInterval(iv); };
}, []);
const runDemo = () => { setDemoRunning(true); fetch("/demo/run", { method: "POST" }).then((r) => r.json()).then((d) => setDemoRunning(!!d.running)).catch(() => {}); };
const resetDemo = () => { setDemoRunning(false); fetch("/demo/reset", { method: "POST" }).catch(() => {}); };
return { demoRunner, demoRunning, runDemo, resetDemo };
}
// The two header controls that live on the board/demo surface. Rendered through
// OperatorRoot's AppHeader `actions` slot.
const InjectTaskButton = () => (
);
const DemoRunnerButtons = ({ demoRunning, runDemo, resetDemo }) => (
);
// ── CustomerDemoShell — the ONLY surface a customer session sees in this SPA
// (/demo). Deliberately NOT the operator AppHeader: no project switcher, no
// tabs, no settings. Brand mark + title, the demo Run/Reset (only when the
// server advertises a runner — same gating operators get on /demo), a link
// back to the customer's landing page, and Sign out. Presentational — the
// page (OperatorRoot) owns all fetching. ──────────────────────────────────
const CustomerDemoShell = ({ identity, onSignOut, demoRunner, demoRunning, runDemo, resetDemo }) => (
);
// ── OperatorRoot — the routed operator shell. useRoute() drives the view:
// overview → ProjectsOverview · board/demo → AssemblyLineApp · plan/reviews →
// Placeholder · unknown → navigate("/"). Uses window.AppHeader for the shell.
const Placeholder = ({ title }) => (
{title}
Coming in a later slice.
);
const OperatorRoot = () => {
const route = useRoute(); // { path, name, slug } — router.jsx
const [signedInUser, setSignedInUser] = useStateRoot(null);
const [authRequired, setAuthRequired] = useStateRoot(true);
const [authLoading, setAuthLoading] = useStateRoot(true);
const [projects, setProjects] = useStateRoot([]);
const [settingsOpen, setSettingsOpen] = useStateRoot(false);
const [redirecting, setRedirecting] = useStateRoot(false);
const readOnly = useReadOnlyMirror();
const { demoRunner, demoRunning, runDemo, resetDemo } = useDemoRunner();
// Real auth: whoami → identity + authRequired (false only when the server has
// no auth configured, i.e. local dev).
useEffectRoot(() => {
window.Api.whoami()
.then(({ identity, authRequired }) => { setSignedInUser(identity); setAuthRequired(authRequired); })
.finally(() => setAuthLoading(false));
}, []);
const authed = !authRequired || signedInUser;
const isCustomer = signedInUser?.role === "customer";
// Customer wall, client side: a customer session reaches ONLY /demo in this
// SPA — its landing page's CTA links here, so /demo must NOT bounce. Every
// other route bounces to the customer's landing (full-page nav) before any
// operator UI paints; customers never see the operator shell.
useEffectRoot(() => {
if (isCustomer && route.name !== "demo") {
setRedirecting(true);
window.location.assign(signedInUser.landing ?? "/sales/brief-to-done.html");
}
}, [isCustomer, route.name]);
// Load the project list once we're past the auth gate. Customers never need
// it (their only surface is /demo, and the server would 403 the fetch anyway).
useEffectRoot(() => {
if (!authed || isCustomer) return;
window.Api.listProjects()
.then((ps) => setProjects(Array.isArray(ps) ? ps : []))
.catch(() => {});
}, [authed, isCustomer]);
// Unknown route → home. (matchRoute never marks /demo unknown — redline 1.)
useEffectRoot(() => {
if (route.name === "unknown") window.navigate("/");
}, [route.name]);
const onSignOut = () => { window.Api.logout().finally(() => setSignedInUser(null)); };
// currentProject: prefer the fetched record; fall back to a slug-only stub so a
// deep link renders before the /projects fetch resolves (invariant 4).
const currentProject = route.slug
? (projects.find((p) => p.slug === route.slug)
|| { slug: route.slug, name: route.slug, pmProjectId: null, alProjectId: null })
: null;
// Board/demo controls, carried through the header's `actions` slot so they
// survive the header swap (invariant 3): Inject Task (board + demo, gated
// !readOnly), and the demo Run/Reset — confined to /demo, never the operator
// board, and only when the server advertises a demo runner.
const onBoardSurface = route.name === "board" || route.name === "demo";
const onDemoSurface = route.name === "demo";
const actions = onBoardSurface ? (
<>
{!readOnly && }
{onDemoSurface && demoRunner && }
) : null;
if (authLoading || redirecting) return
Loading…
;
if (!authed) return ;
// Customer session: /demo renders the customer chrome (never the operator
// AppHeader); any other route is mid-bounce (the wall effect above), so hold
// the loading state until the full-page nav lands.
if (isCustomer) {
if (route.name !== "demo") return
Loading…
;
return (
);
}
let view = null;
if (route.name === "overview") view = ;
else if (route.name === "board" || route.name === "demo") view = ;
else if (route.name === "plan") view = ;
else if (route.name === "reviews") view = ;
// route.name === "unknown" renders nothing; the effect above redirects to "/".
return (