@elaraai/e3-ui-components 1.0.21 → 1.0.23

package/dist/index.js

@@ -27,7 +27,7 @@ import { jsx as jsx$1, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import React__default, { useId, useMemo, useContext, createContext, useRef, useEffect, useState, useCallback, useSyncExternalStore, memo, forwardRef, useLayoutEffect, Fragment as Fragment$1, Component } from "react";
 import { Box, Flex, Text, HStack, Input, useSlotRecipe, useRecipe, VStack, useToken, Drawer, Portal, Field, NativeSelect, Textarea, chakra, Tooltip, SegmentGroup, Menu, HoverCard, useChakraContext, Spinner, Code, Clipboard, IconButton, Badge, Button, Tabs, useTabs } from "@chakra-ui/react";
-import { implementUIComponent, getSomeorUndefined, SliceEditPopover, SlicePredicateBuilder, formatPredicate, StateRuntime, buildSliceHandle, DEFAULT_SLICE_STATE, registerPlatformImplementation as registerPlatformImplementation$1, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, OverlayImpl, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
+import { implementUIComponent, getSomeorUndefined, formatPredicate, SliceEditPopover, SlicePredicateBuilder, StateRuntime, buildSliceHandle, DEFAULT_SLICE_STATE, registerPlatformImplementation as registerPlatformImplementation$1, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, formatTick, useSliceReactivity, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, OverlayImpl, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
 import { createPortal } from "react-dom";
 import "@elaraai/e3-ui";
 import { sliceMatches } from "@elaraai/east-ui/internal";
@@ -60709,9 +60709,28 @@ function DeckSkeleton({ tab }) {
     ] })
   ] });
 }
+function LoadingSkeleton() {
+  const sk = useRecipe({ key: "skeleton" });
+  const line2 = (w2, h2) => /* @__PURE__ */ jsx$1(Box, { css: sk({ variant: "line" }), width: w2, height: h2 });
+  const block = (h2) => /* @__PURE__ */ jsx$1(Box, { css: sk({ variant: "block" }), width: "100%", minHeight: h2 });
+  return /* @__PURE__ */ jsxs(Box, { layerStyle: "frame", overflow: "visible", children: [
+    /* @__PURE__ */ jsxs(Box, { layerStyle: "header.bar", display: "flex", alignItems: "center", gap: "3.5", children: [
+      line2("260px", "20px"),
+      /* @__PURE__ */ jsx$1(Box, { flex: "1" }),
+      line2("72px", "16px")
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { display: "grid", gridTemplateColumns: "304px minmax(0,1fr)", alignItems: "start", children: [
+      /* @__PURE__ */ jsx$1(Box, { borderRightWidth: "1px", borderColor: "border.subtle", p: "4.5", display: "flex", flexDirection: "column", gap: "5", children: [0, 1, 2, 3].map((n2) => /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: "2", children: [
+        line2("150px", "12px"),
+        block("40px")
+      ] }, n2)) }),
+      /* @__PURE__ */ jsx$1(DeckSkeleton, { tab: "answer" })
+    ] })
+  ] });
+}
 const experimentValueEqual = equalFor(Experiment.Component.schema);
 const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
-  var _a2, _b2, _c2, _d2;
+  var _a2, _b2, _c2;
   const v3 = value;
   const button = useRecipe({ key: "button" });
   const chip = useRecipe({ key: "chip" });
@@ -60721,27 +60740,48 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
   const es = useSlotRecipe({ key: "eyebrowRow" })({});
   const workspace = getReactiveDatasetCache().getConfig().workspace ?? "";
   const data4 = useBindingValue(v3.data);
-  const configBind = useBindingValue(v3.config);
   const journalBind = useBindingValue(v3.journal.type === "some" ? v3.journal.value : null);
-  const populationBind = useBindingValue(v3.population.type === "some" ? v3.population.value : null);
   const meta3 = getSomeorUndefined(v3.columnMeta);
   const readonly = getSomeorUndefined(v3.readonly) ?? false;
-  const presets = useMemo(() => getSomeorUndefined(v3.presets) ?? [], [v3.presets]);
-  const [currentPreset, setCurrentPreset] = useState(void 0);
-  const presetGroups = useMemo(() => {
+  const configsBind = useBindingValue(v3.configs);
+  const configs = useMemo(() => configsBind.value ?? [], [configsBind.value]);
+  const [currentConfigId, setCurrentConfigId] = useState(void 0);
+  const selectedEntry = useMemo(
+    () => configs.find((c2) => c2.id === currentConfigId) ?? configs[0],
+    [configs, currentConfigId]
+  );
+  useEffect(() => {
+    const first2 = configs[0];
+    if (currentConfigId === void 0 && first2 !== void 0) setCurrentConfigId(first2.id);
+  }, [configs, currentConfigId]);
+  const configGroups = useMemo(() => {
     const buckets = /* @__PURE__ */ new Map();
-    for (const p2 of presets) {
-      const label = getSomeorUndefined(p2.group) ?? "Saved questions";
+    for (const c2 of configs) {
+      const label = getSomeorUndefined(c2.group) ?? "Questions";
       const bucket = buckets.get(label);
-      if (bucket) bucket.push(p2);
-      else buckets.set(label, [p2]);
+      if (bucket) bucket.push(c2);
+      else buckets.set(label, [c2]);
     }
     return [...buckets].map(([label, items]) => ({ label, items }));
-  }, [presets]);
+  }, [configs]);
   const { columns, rowArrayType } = useColumns(workspace, v3.data.source);
-  const config2 = configBind.value;
+  const [workingConfig, setWorkingConfig] = useState(void 0);
   const [localPop, setLocalPop] = useState([]);
-  const population = populationBind.value ?? localPop;
+  const [stale, setStale] = useState(false);
+  const seededIdRef = useRef(void 0);
+  useEffect(() => {
+    const id3 = selectedEntry == null ? void 0 : selectedEntry.id;
+    if (id3 === seededIdRef.current) return;
+    const switching = seededIdRef.current !== void 0;
+    seededIdRef.current = id3;
+    setWorkingConfig(selectedEntry == null ? void 0 : selectedEntry.spec);
+    setLocalPop(getSomeorUndefined(selectedEntry == null ? void 0 : selectedEntry.population) ?? []);
+    const precomputed = (selectedEntry == null ? void 0 : selectedEntry.result.type) === "some";
+    const hasEstimator = v3.experiment.type === "some";
+    setStale(switching && hasEstimator && !precomputed);
+  }, [selectedEntry, v3.experiment.type]);
+  const config2 = workingConfig;
+  const population = localPop;
   const filteredRows = useMemo(() => {
     if (!data4.value) return null;
     return population.length ? data4.value.filter((r2) => rowMatchesAll(r2, population)) : data4.value;
@@ -60758,7 +60798,9 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
     [columns, meta3]
   );
   const estInputs = useMemo(() => rowArrayType ? [rowArrayType, Experiment.Types.Config] : null, [rowArrayType]);
-  const experiment = useFuncCall(v3.experiment.name, estInputs, Experiment.Types.Result);
+  const experiment = useFuncCall(v3.experiment.type === "some" ? v3.experiment.value.name : null, estInputs, Experiment.Types.Result);
+  const hasExperiment = v3.experiment.type === "some";
+  const shownResult = experiment.result ?? getSomeorUndefined(selectedEntry == null ? void 0 : selectedEntry.result) ?? null;
   const hasDesign = v3.design.type === "some";
   const designInputs = useMemo(
     () => rowArrayType ? [rowArrayType, Experiment.Types.Config, Experiment.Types.Result, Experiment.Types.DesignConfig] : null,
@@ -60773,8 +60815,13 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
     experiment.call(filteredRows, config2);
   }, [filteredRows, config2, experiment]);
   const autoRan = useRef(false);
+  const hasPrecomputed = selectedEntry !== void 0 && selectedEntry.result.type === "some";
   useEffect(() => {
     if (autoRan.current) return;
+    if (hasPrecomputed || !hasExperiment) {
+      autoRan.current = true;
+      return;
+    }
     if (!filteredRows || !config2 || !rowArrayType) return;
     if (experiment.result !== null || experiment.status === "running") {
       autoRan.current = true;
@@ -60784,29 +60831,23 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
     autoRan.current = true;
     if (filteredRows.length > AUTORUN_MAX_ROWS) return;
     runAll();
-  }, [filteredRows, config2, rowArrayType, experiment.result, experiment.status, runAll]);
+  }, [hasPrecomputed, hasExperiment, filteredRows, config2, rowArrayType, experiment.result, experiment.status, runAll]);
   useEffect(() => {
     if (experiment.result !== null) setRanConfig(pendingConfigRef.current);
   }, [experiment.result]);
-  const [stale, setStale] = useState(false);
-  const editConfig = useCallback((next2, fromPreset) => {
-    if (readonly) return;
-    setStale(true);
-    setCurrentPreset(fromPreset);
-    queueMicrotask(() => configBind.mutate(next2));
-  }, [readonly, configBind]);
-  const editPopulation = useCallback((next2, fromPreset) => {
+  const editConfig = useCallback((next2) => {
     if (readonly) return;
-    setStale(true);
-    setCurrentPreset(fromPreset);
-    if (v3.population.type === "some") queueMicrotask(() => populationBind.mutate(next2));
-    else setLocalPop(next2);
-  }, [readonly, v3.population.type, populationBind]);
-  const selectPreset = useCallback((p2) => {
+    if (v3.experiment.type === "some") setStale(true);
+    setWorkingConfig(next2);
+  }, [readonly, v3.experiment.type]);
+  const editPopulation = useCallback((next2) => {
     if (readonly) return;
-    editConfig(p2.config, p2.id);
-    editPopulation(getSomeorUndefined(p2.population) ?? [], p2.id);
-  }, [readonly, editConfig, editPopulation]);
+    if (v3.experiment.type === "some") setStale(true);
+    setLocalPop(next2);
+  }, [readonly, v3.experiment.type]);
+  const selectEntry = useCallback((c2) => {
+    setCurrentConfigId(c2.id);
+  }, []);
   const onRun = useCallback(() => {
     runAll();
     setStale(false);
@@ -60821,18 +60862,16 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
       adjusted: r2.adjusted.type === "some" ? some(r2.adjusted.value.effect) : none$1,
       committed_at: /* @__PURE__ */ new Date(),
       committed_by: "you",
-      // Record which preset framed this experiment (none for a free-form run).
-      preset: currentPreset !== void 0 ? some(currentPreset) : none$1
+      // Record which question framed this experiment.
+      preset: currentConfigId !== void 0 ? some(currentConfigId) : none$1
     };
     journalBind.mutate([row, ...journalBind.value ?? []]);
     try {
       await journalBind.commit();
-      await configBind.commit();
-      if (v3.population.type === "some") await populationBind.commit();
       setStale(false);
     } catch {
     }
-  }, [config2, experiment.result, journalBind, configBind, populationBind, v3.population.type, currentPreset]);
+  }, [config2, experiment.result, journalBind, currentConfigId]);
   const [tab, setTab] = useState(((_a2 = getSomeorUndefined(v3.defaultTab)) == null ? void 0 : _a2.type) ?? "answer");
   const [guidance, setGuidance] = useState(true);
   const now2 = useMemo(() => /* @__PURE__ */ new Date(), []);
@@ -60847,39 +60886,44 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
   }, [ranConfig, config2, meta3]);
   const view = useMemo(() => {
     if (!config2) return null;
-    return deriveView(config2, ranConfig ?? config2, columns, experiment.result, journalBind.value, meta3, nRows, now2);
-  }, [config2, ranConfig, columns, experiment.result, journalBind.value, meta3, nRows, now2]);
+    return deriveView(config2, ranConfig ?? config2, columns, shownResult, journalBind.value, meta3, nRows, now2);
+  }, [config2, ranConfig, columns, shownResult, journalBind.value, meta3, nRows, now2]);
   const designConfigValue = useMemo(() => ({
     alpha: none$1,
     target_power: none$1,
     materiality: none$1,
     treated_shares: some([0.5, 0.3])
   }), []);
+  const precomputedDesign = getSomeorUndefined(selectedEntry == null ? void 0 : selectedEntry.design) ?? null;
   const designSnapRef = useRef(null);
   useEffect(() => {
     var _a3;
-    if (tab !== "validate" || !hasDesign || design.pending) return;
-    if (!filteredRows || !config2 || !experiment.result) return;
-    if (((_a3 = designSnapRef.current) == null ? void 0 : _a3.result) === experiment.result) return;
-    designSnapRef.current = { result: experiment.result, config: ranConfig ?? config2 };
-    design.call(filteredRows, ranConfig ?? config2, experiment.result, designConfigValue);
-  }, [tab, hasDesign, filteredRows, config2, ranConfig, experiment.result, design, designConfigValue]);
-  const vmDesign = useMemo(
-    () => design.result && designSnapRef.current ? deriveDesign(design.result, designSnapRef.current.result, designSnapRef.current.config, meta3) : null,
-    [design.result, meta3]
-  );
-  const designFresh = design.result !== null && ((_b2 = designSnapRef.current) == null ? void 0 : _b2.result) === experiment.result && !design.pending;
+    if (tab !== "validate" || !hasDesign || design.pending || precomputedDesign !== null) return;
+    if (!filteredRows || !config2 || !shownResult) return;
+    if (((_a3 = designSnapRef.current) == null ? void 0 : _a3.result) === shownResult) return;
+    designSnapRef.current = { result: shownResult, config: ranConfig ?? config2 };
+    design.call(filteredRows, ranConfig ?? config2, shownResult, designConfigValue);
+  }, [tab, hasDesign, precomputedDesign, filteredRows, config2, ranConfig, shownResult, design, designConfigValue]);
+  const vmDesign = useMemo(() => {
+    if (precomputedDesign !== null && shownResult !== null && config2) return deriveDesign(precomputedDesign, shownResult, ranConfig ?? config2, meta3);
+    return design.result && designSnapRef.current ? deriveDesign(design.result, designSnapRef.current.result, designSnapRef.current.config, meta3) : null;
+  }, [precomputedDesign, shownResult, config2, ranConfig, design.result, meta3]);
+  const designFresh = precomputedDesign !== null && shownResult !== null || design.result !== null && ((_b2 = designSnapRef.current) == null ? void 0 : _b2.result) === shownResult && !design.pending;
   if (!config2 || !view) {
     const failed2 = experiment.status === "failed";
-    const which = data4.error ? "dataset" : configBind.error ? "config" : journalBind.error ? "journal" : populationBind.error ? "population filter" : null;
-    const bindError = data4.error ?? configBind.error ?? journalBind.error ?? populationBind.error;
+    const noConfigs = !configsBind.error && configs.length === 0;
+    const which = data4.error ? "dataset" : configsBind.error ? "configs" : journalBind.error ? "journal" : null;
+    const bindError = data4.error ?? configsBind.error ?? journalBind.error;
     const bindMsg = bindError instanceof Error ? bindError.message : bindError != null ? String(bindError) : null;
-    return /* @__PURE__ */ jsx$1(Box, { layerStyle: "frame", p: "6", children: bindMsg ? /* @__PURE__ */ jsxs(Text, { textStyle: "body.sm", color: "fg.danger", children: [
+    if (bindMsg) return /* @__PURE__ */ jsx$1(Box, { layerStyle: "frame", p: "6", children: /* @__PURE__ */ jsxs(Text, { textStyle: "body.sm", color: "fg.danger", children: [
       "Couldn’t load the experiment ",
       which,
       ": ",
       bindMsg
-    ] }) : failed2 && experiment.error ? /* @__PURE__ */ jsx$1(RunError, { error: experiment.error }) : /* @__PURE__ */ jsx$1(Text, { className: failed2 ? void 0 : "elara-skeleton", textStyle: "body.sm", color: "fg.muted", children: failed2 ? "Could not run the experiment." : "Loading experiment…" }) });
+    ] }) });
+    if (noConfigs) return /* @__PURE__ */ jsx$1(Box, { layerStyle: "frame", p: "6", children: /* @__PURE__ */ jsx$1(Text, { textStyle: "body.sm", color: "fg.muted", children: "No questions to show — bind a non-empty configs list." }) });
+    if (failed2 && experiment.error) return /* @__PURE__ */ jsx$1(Box, { layerStyle: "frame", p: "6", children: /* @__PURE__ */ jsx$1(RunError, { error: experiment.error }) });
+    return /* @__PURE__ */ jsx$1(LoadingSkeleton, {});
   }
   const { spec: vs, answer: a2, refusal: ref, overlap: ov, refute: vr, dose: vd, journal, verdict } = view;
   const higherBetter = getSomeorUndefined((_c2 = meta3 == null ? void 0 : meta3.get(vs.outcome)) == null ? void 0 : _c2.higherIsBetter);
@@ -60889,18 +60933,19 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
     /* @__PURE__ */ jsx$1(Box, { css: bs.track, children: /* @__PURE__ */ jsx$1(Box, { css: bs.fill, width: `${Math.round(r2.frac * 100)}%`, bg: toneToken(r2.tone) }) }),
     /* @__PURE__ */ jsx$1(Text, { css: bs.value, children: r2.value })
   ] }, i)) });
-  const specStaged = configBind.mode === "staged";
   const hasJournal = v3.journal.type === "some";
-  const canRun = !readonly;
-  const canCommit = !readonly && specStaged && hasJournal;
+  const canRun = !readonly && hasExperiment;
+  const canCommit = !readonly && hasExperiment && hasJournal;
   const runDisabled = !data4.value || experiment.pending;
   const commitDisabled = experiment.status !== "succeeded" || experiment.pending || stale;
   const failed = experiment.status === "failed" && experiment.error;
-  const showResult = experiment.result !== null && !experiment.pending && !failed;
-  const tabKeys = [...["answer", "trust", "dose"], ...hasDesign ? ["validate"] : []];
+  const showResult = shownResult !== null && !experiment.pending && !failed;
+  const anyPrecomputedDesign = configs.some((c2) => c2.design.type === "some");
+  const showValidate = hasDesign || anyPrecomputedDesign;
+  const tabKeys = [...["answer", "trust", "dose"], ...showValidate ? ["validate"] : []];
   return /* @__PURE__ */ jsx$1(GuidanceProvider, { on: guidance, vars: helpVars, children: /* @__PURE__ */ jsxs(Box, { layerStyle: "frame", overflow: "visible", children: [
     /* @__PURE__ */ jsxs(Box, { layerStyle: "header.bar", display: "flex", alignItems: "center", gap: "3.5", children: [
-      presets.length > 0 && !readonly ? /* @__PURE__ */ jsxs(Menu.Root, { children: [
+      configs.length > 1 ? /* @__PURE__ */ jsxs(Menu.Root, { children: [
         /* @__PURE__ */ jsx$1(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs(Box, { as: "button", bg: "transparent", border: "0", p: "0", cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "2", textAlign: "start", children: [
           /* @__PURE__ */ jsxs(Text, { textStyle: "title.card", color: "fg.muted", children: [
             "Does ",
@@ -60911,12 +60956,12 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
           ] }),
           /* @__PURE__ */ jsx$1(Box, { as: "span", color: "fg.subtle", fontSize: "11px", lineHeight: "1", children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faChevronDown }) })
         ] }) }),
-        /* @__PURE__ */ jsx$1(Portal, { children: /* @__PURE__ */ jsx$1(Menu.Positioner, { children: /* @__PURE__ */ jsx$1(Menu.Content, { minW: "280px", children: presetGroups.map((g2) => /* @__PURE__ */ jsxs(Menu.ItemGroup, { children: [
-          g2.label !== "Saved questions" && /* @__PURE__ */ jsx$1(Menu.ItemGroupLabel, { textStyle: "caption.eyebrow", fontSize: "9px", children: g2.label }),
-          g2.items.map((p2) => /* @__PURE__ */ jsxs(Menu.Item, { value: p2.id, onClick: () => selectPreset(p2), gap: "2", children: [
-            /* @__PURE__ */ jsx$1(Box, { as: "span", width: "14px", flexShrink: "0", color: "brand.fg", children: p2.id === currentPreset && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faCheck, style: { fontSize: "10px" } }) }),
-            p2.label
-          ] }, p2.id))
+        /* @__PURE__ */ jsx$1(Portal, { children: /* @__PURE__ */ jsx$1(Menu.Positioner, { children: /* @__PURE__ */ jsx$1(Menu.Content, { minW: "280px", children: configGroups.map((g2) => /* @__PURE__ */ jsxs(Menu.ItemGroup, { children: [
+          g2.label !== "Questions" && /* @__PURE__ */ jsx$1(Menu.ItemGroupLabel, { textStyle: "caption.eyebrow", fontSize: "9px", children: g2.label }),
+          g2.items.map((c2) => /* @__PURE__ */ jsxs(Menu.Item, { value: c2.id, onClick: () => selectEntry(c2), gap: "2", children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "span", width: "14px", flexShrink: "0", color: "brand.fg", children: c2.id === (selectedEntry == null ? void 0 : selectedEntry.id) && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faCheck, style: { fontSize: "10px" } }) }),
+            c2.label
+          ] }, c2.id))
         ] }, g2.label)) }) }) })
       ] }) : /* @__PURE__ */ jsx$1(Text, { textStyle: "title.card", color: "fg.muted", children: /* @__PURE__ */ jsxs(Help, { id: "header", children: [
         "Does ",
@@ -60926,6 +60971,7 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
         "?"
       ] }) }),
       /* @__PURE__ */ jsx$1(Box, { flex: "1" }),
+      readonly && /* @__PURE__ */ jsx$1(Box, { as: "span", css: badge({ variant: "plain", size: "sm" }), textTransform: "none", letterSpacing: "normal", children: "View only" }),
       /* @__PURE__ */ jsxs(Box, { as: "span", css: dataStatus.root, children: [
         /* @__PURE__ */ jsx$1(Box, { as: "span", css: dataStatus.indicator }),
         /* @__PURE__ */ jsx$1(Box, { as: "span", css: dataStatus.label, children: stale ? `${nRows} rows` : vs.dataLabel })
@@ -60937,15 +60983,15 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
     /* @__PURE__ */ jsxs(Box, { display: "grid", gridTemplateColumns: "304px minmax(0,1fr)", alignItems: "start", children: [
       /* @__PURE__ */ jsxs(Box, { borderRightWidth: "1px", borderColor: "border.subtle", children: [
         /* @__PURE__ */ jsxs(Step, { n: 1, title: "What did you change?", help: "step_treatment", children: [
-          /* @__PURE__ */ jsx$1(ColumnPick, { column: vs.treatment, kind: vs.treatmentKind, badge, button, choices: columns.filter((c2) => c2.kind === "boolean" || c2.kind === "integer").map((c2) => c2.name), onPick: (c2) => editConfig({ ...config2, treatment: c2 }) }),
+          /* @__PURE__ */ jsx$1(ColumnPick, { column: vs.treatment, kind: vs.treatmentKind, badge, button, readonly, choices: columns.filter((c2) => c2.kind === "boolean" || c2.kind === "integer").map((c2) => c2.name), onPick: (c2) => editConfig({ ...config2, treatment: c2 }) }),
           /* @__PURE__ */ jsxs(Text, { textStyle: "caption", mt: "1.5", children: [
             "Treated = ",
             /* @__PURE__ */ jsx$1(Text, { as: "span", color: "fg.default", fontWeight: "semibold", children: vs.comparison })
           ] })
         ] }),
-        /* @__PURE__ */ jsx$1(Step, { n: 2, title: "What did you want it to improve?", help: "step_outcome", children: /* @__PURE__ */ jsx$1(ColumnPick, { column: vs.outcome, kind: vs.outcomeKind, badge, button, choices: columns.filter((c2) => c2.kind === "float" || c2.kind === "integer").map((c2) => c2.name), onPick: (c2) => editConfig({ ...config2, outcome: c2 }) }) }),
+        /* @__PURE__ */ jsx$1(Step, { n: 2, title: "What did you want it to improve?", help: "step_outcome", children: /* @__PURE__ */ jsx$1(ColumnPick, { column: vs.outcome, kind: vs.outcomeKind, badge, button, readonly, choices: columns.filter((c2) => c2.kind === "float" || c2.kind === "integer").map((c2) => c2.name), onPick: (c2) => editConfig({ ...config2, outcome: c2 }) }) }),
         /* @__PURE__ */ jsx$1(Step, { n: 3, title: "What else was different?", help: "step_confounders", children: /* @__PURE__ */ jsxs(Box, { layerStyle: "frame.flat", children: [
-          /* @__PURE__ */ jsx$1(Box, { maxH: "216px", overflowY: "auto", children: vs.confounders.map((c2, i) => /* @__PURE__ */ jsxs(Box, { display: "grid", gridTemplateColumns: "1fr 78px 16px", gap: "2.5", alignItems: "center", px: "2.5", py: "2.5", borderTopWidth: i ? "1px" : "0", borderColor: "border.subtle", children: [
+          /* @__PURE__ */ jsx$1(Box, { maxH: "216px", overflowY: "auto", children: vs.confounders.map((c2, i) => /* @__PURE__ */ jsxs(Box, { display: "grid", gridTemplateColumns: readonly ? "1fr 78px" : "1fr 78px 16px", gap: "2.5", alignItems: "center", px: "2.5", py: "2.5", borderTopWidth: i ? "1px" : "0", borderColor: "border.subtle", children: [
             /* @__PURE__ */ jsxs(Box, { children: [
               /* @__PURE__ */ jsx$1(Text, { textStyle: "mono.sm", fontWeight: "semibold", color: "fg.default", children: c2.col }),
               /* @__PURE__ */ jsx$1(Text, { textStyle: "caption", lineHeight: "1.35", mt: "px", children: c2.reason })
@@ -60954,14 +61000,14 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
               /* @__PURE__ */ jsx$1(Box, { css: bs.track, children: /* @__PURE__ */ jsx$1(Box, { css: bs.fill, width: `${Math.round(c2.imbalance * 100)}%`, bg: toneToken(c2.tone) }) }),
               /* @__PURE__ */ jsx$1(Text, { textStyle: "caption.eyebrow", fontSize: "9px", textAlign: "center", mt: "1.5", children: /* @__PURE__ */ jsx$1(Help, { id: "confounder_imbalance", children: c2.level }) })
             ] }),
-            /* @__PURE__ */ jsx$1(Box, { as: "button", css: button({ variant: "ghost", size: "xs" }), px: "0", minW: "16px", display: "inline-flex", alignItems: "center", justifyContent: "center", "aria-label": `Remove ${c2.col}`, onClick: () => editConfig({ ...config2, common_causes: config2.common_causes.filter((x2) => x2 !== c2.col), categorical: config2.categorical.type === "some" ? some(config2.categorical.value.filter((x2) => x2 !== c2.col)) : none$1 }), children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faXmark, style: { fontSize: "11px" } }) })
+            !readonly && /* @__PURE__ */ jsx$1(Box, { as: "button", css: button({ variant: "ghost", size: "xs" }), px: "0", minW: "16px", display: "inline-flex", alignItems: "center", justifyContent: "center", "aria-label": `Remove ${c2.col}`, onClick: () => editConfig({ ...config2, common_causes: config2.common_causes.filter((x2) => x2 !== c2.col), categorical: config2.categorical.type === "some" ? some(config2.categorical.value.filter((x2) => x2 !== c2.col)) : none$1 }), children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faXmark, style: { fontSize: "11px" } }) })
           ] }, i)) }),
-          vs.suggestion && /* @__PURE__ */ jsx$1(ColumnMenu, { choices: columns.filter((c2) => !(/* @__PURE__ */ new Set([config2.treatment, config2.outcome, ...config2.common_causes])).has(c2.name)).map((c2) => c2.name), onPick: (c2) => editConfig({ ...config2, common_causes: [...config2.common_causes, c2] }), children: /* @__PURE__ */ jsxs(Box, { as: "button", css: button({ variant: "ghost", size: "sm" }), justifyContent: "flex-start", width: "100%", color: "brand.fg", fontFamily: "mono", display: "inline-flex", alignItems: "center", gap: "2", children: [
+          !readonly && vs.suggestion && /* @__PURE__ */ jsx$1(ColumnMenu, { choices: columns.filter((c2) => !(/* @__PURE__ */ new Set([config2.treatment, config2.outcome, ...config2.common_causes])).has(c2.name)).map((c2) => c2.name), onPick: (c2) => editConfig({ ...config2, common_causes: [...config2.common_causes, c2] }), children: /* @__PURE__ */ jsxs(Box, { as: "button", css: button({ variant: "ghost", size: "sm" }), justifyContent: "flex-start", width: "100%", color: "brand.fg", fontFamily: "mono", display: "inline-flex", alignItems: "center", gap: "2", children: [
             /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faPlus, style: { fontSize: "9px" } }),
             "add another"
           ] }) })
         ] }) }),
-        /* @__PURE__ */ jsx$1(Step, { n: 4, title: `Which ${SUBJECT_MANY}?`, help: "step_population", children: /* @__PURE__ */ jsx$1(FilterRail, { fields, population, onChange: editPopulation, chip, button }) }),
+        /* @__PURE__ */ jsx$1(Step, { n: 4, title: `Which ${SUBJECT_MANY}?`, help: "step_population", children: /* @__PURE__ */ jsx$1(FilterRail, { fields, population, onChange: editPopulation, chip, button, readonly }) }),
         /* @__PURE__ */ jsxs(Box, { as: "details", borderTopWidth: "1px", borderColor: "border.subtle", children: [
           /* @__PURE__ */ jsxs(
             Box,
@@ -60994,8 +61040,8 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
             }
           ),
           /* @__PURE__ */ jsxs(Box, { px: "4.5", pb: "3.5", pt: "0.5", children: [
-            /* @__PURE__ */ jsx$1(Segmented, { label: "How to compare", help: "adv_method", left: "regression", right: "reweighting", active: vs.method === "reweighting" ? "right" : "left", onPick: (s2) => editConfig({ ...config2, method: some(s2 === "right" ? variant("propensity_score_weighting", { weighting_scheme: none$1 }) : variant("linear_regression", null)) }) }),
-            /* @__PURE__ */ jsx$1(Segmented, { label: "Answer for", help: "adv_estimand", left: "all", right: "only treated", active: vs.target === "treated" ? "right" : "left", onPick: (s2) => editConfig({ ...config2, estimand: some(variant(s2 === "right" ? "att" : "ate", null)) }), last: true })
+            /* @__PURE__ */ jsx$1(Segmented, { label: "How to compare", help: "adv_method", left: "regression", right: "reweighting", active: vs.method === "reweighting" ? "right" : "left", readonly, onPick: (s2) => editConfig({ ...config2, method: some(s2 === "right" ? variant("propensity_score_weighting", { weighting_scheme: none$1 }) : variant("linear_regression", null)) }) }),
+            /* @__PURE__ */ jsx$1(Segmented, { label: "Answer for", help: "adv_estimand", left: "all", right: "only treated", active: vs.target === "treated" ? "right" : "left", readonly, onPick: (s2) => editConfig({ ...config2, estimand: some(variant(s2 === "right" ? "att" : "ate", null)) }), last: true })
           ] })
         ] })
       ] }),
@@ -61069,7 +61115,7 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
             ] })
           ] }),
           tab === "answer" && a2 && /* @__PURE__ */ jsx$1(AnswerNumeric, { a: a2, verdict, higherBetter, badge, barList }),
-          tab === "answer" && !a2 && ref && /* @__PURE__ */ jsx$1(RefusalZone, { refusal: ref, overlap: ov, naiveValue: ((_d2 = experiment.result) == null ? void 0 : _d2.naive) ?? 0, outcome: vs.outcome }),
+          tab === "answer" && !a2 && ref && /* @__PURE__ */ jsx$1(RefusalZone, { refusal: ref, overlap: ov, naiveValue: (shownResult == null ? void 0 : shownResult.naive) ?? 0, outcome: vs.outcome }),
           tab === "trust" && vr && /* @__PURE__ */ jsxs(Box, { p: "4.5", children: [
             /* @__PURE__ */ jsx$1(Text, { textStyle: "body.sm", color: "fg.muted", mb: "3.5", children: /* @__PURE__ */ jsx$1(Help, { id: "trust_intro", children: "Before trusting the answer we tried to break it — colour shows pass / caution." }) }),
             /* @__PURE__ */ jsx$1(Box, { layerStyle: "frame.flat", children: vr.checks.map((c2, i) => {
@@ -61171,7 +61217,7 @@ const EastChakraExperiment = memo(function EastChakraExperiment2({ value }) {
             var _a3;
             const id3 = getSomeorUndefined(r2.preset);
             if (id3 === void 0) return null;
-            const label = ((_a3 = presets.find((p2) => p2.id === id3)) == null ? void 0 : _a3.label) ?? id3;
+            const label = ((_a3 = configs.find((c2) => c2.id === id3)) == null ? void 0 : _a3.label) ?? id3;
             return /* @__PURE__ */ jsxs(Fragment, { children: [
               " ",
               /* @__PURE__ */ jsxs(Box, { as: "span", css: chip({ tone: "brand", size: "sm" }), children: [
@@ -61371,11 +61417,17 @@ function ValidatePanel({ vm, barList }) {
     ] }, i)) })
   ] });
 }
-function FilterRail({ fields, population, onChange: onChange2, chip, button }) {
+function FilterRail({ fields, population, onChange: onChange2, chip, button, readonly }) {
   const [open, setOpen] = useState(null);
   const replaceAt = (i, p2) => onChange2(population.map((f2, j2) => j2 === i ? p2 : f2));
   const removeAt = (i) => onChange2(population.filter((_2, j2) => j2 !== i));
   const done = /* @__PURE__ */ jsx$1(Box, { as: "button", css: button({ variant: "outline", size: "xs" }), onClick: () => setOpen(null), children: "Done" });
+  if (readonly) {
+    return /* @__PURE__ */ jsx$1(Box, { display: "flex", flexWrap: "wrap", gap: "1.5", alignItems: "center", children: population.length === 0 ? /* @__PURE__ */ jsxs(Box, { css: chip({ tone: "plain", numeric: true, shape: "rounded" }), children: [
+      "all ",
+      SUBJECT_MANY
+    ] }) : population.map((pred, i) => /* @__PURE__ */ jsx$1(Box, { css: chip({ tone: "brand", numeric: true, shape: "rounded" }), flexShrink: 0, children: /* @__PURE__ */ jsx$1(Box, { as: "span", whiteSpace: "nowrap", children: formatPredicate(pred) }) }, i)) });
+  }
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexWrap: "wrap", gap: "1.5", alignItems: "center", children: [
     population.map((pred, i) => /* @__PURE__ */ jsx$1(
       SliceEditPopover,
@@ -61436,7 +61488,13 @@ function ColumnMenu({ choices, onPick, children: children2 }) {
     /* @__PURE__ */ jsx$1(Portal, { children: /* @__PURE__ */ jsx$1(Menu.Positioner, { children: /* @__PURE__ */ jsx$1(Menu.Content, { children: choices.map((c2) => /* @__PURE__ */ jsx$1(Menu.Item, { value: c2, onClick: () => onPick(c2), children: c2 }, c2)) }) }) })
   ] });
 }
-function ColumnPick({ column: column2, kind, choices, onPick, badge, button }) {
+function ColumnPick({ column: column2, kind, choices, onPick, badge, button, readonly }) {
+  if (readonly) {
+    return /* @__PURE__ */ jsxs(Box, { css: button({ variant: "outline", size: "sm" }), gap: "1.5", cursor: "default", children: [
+      /* @__PURE__ */ jsx$1(Text, { as: "span", fontFamily: "mono", fontWeight: "semibold", children: column2 }),
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: badge({ variant: "plain", size: "sm" }), textTransform: "none", letterSpacing: "normal", children: kind })
+    ] });
+  }
   return /* @__PURE__ */ jsx$1(ColumnMenu, { choices, onPick, children: /* @__PURE__ */ jsxs(Box, { as: "button", css: button({ variant: "outline", size: "sm" }), gap: "1.5", children: [
     /* @__PURE__ */ jsx$1(Text, { as: "span", fontFamily: "mono", fontWeight: "semibold", children: column2 }),
     /* @__PURE__ */ jsx$1(Box, { as: "span", css: badge({ variant: "plain", size: "sm" }), textTransform: "none", letterSpacing: "normal", children: kind }),
@@ -61479,10 +61537,14 @@ function SegmentSelect({ options: options2, active, onPick, fill, size: size3 =
     }
   );
 }
-function Segmented({ label, left, right, active, onPick, last: last2, help }) {
+function SegmentStatic({ value, size: size3 = "xs" }) {
+  const s2 = useSlotRecipe({ key: "segmentGroup" })({ size: size3 });
+  return /* @__PURE__ */ jsx$1(Box, { css: s2.root, alignSelf: "flex-start", children: /* @__PURE__ */ jsx$1(Box, { css: s2.item, "data-state": "checked", children: /* @__PURE__ */ jsx$1(Box, { as: "span", css: s2.itemText, children: value }) }) });
+}
+function Segmented({ label, left, right, active, onPick, last: last2, help, readonly }) {
   return /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", alignItems: "stretch", gap: "1.5", py: "2", borderBottomWidth: last2 ? "0" : "1px", borderColor: "border.subtle", children: [
     /* @__PURE__ */ jsx$1(Text, { textStyle: "caption.eyebrow", textTransform: "none", letterSpacing: "normal", color: "fg.default", children: help ? /* @__PURE__ */ jsx$1(Help, { id: help, children: label }) : label }),
-    /* @__PURE__ */ jsx$1(SegmentSelect, { options: [left, right], active: active === "left" ? 0 : 1, onPick: (i) => onPick(i === 0 ? "left" : "right"), fill: true, size: "xs" })
+    readonly ? /* @__PURE__ */ jsx$1(SegmentStatic, { value: active === "left" ? left : right }) : /* @__PURE__ */ jsx$1(SegmentSelect, { options: [left, right], active: active === "left" ? 0 : 1, onPick: (i) => onPick(i === 0 ? "left" : "right"), fill: true, size: "xs" })
   ] });
 }
 implementUIComponent(Experiment.Component, EastChakraExperiment);