@demlik/tea 0.6.0 → 0.8.0

package/dist/chart/lane/react.js

@@ -0,0 +1,559 @@
+import { useInspectorRuntime } from '../../chunk-JER5O7PQ.js';
+import { replayFeed, runLane, liveFeed, laneView } from '../../chunk-ZCL7SCBK.js';
+import '../../chunk-ZD6PNZBK.js';
+import '../../chunk-5KJKJOFC.js';
+import '../../chunk-E6GEDSF4.js';
+import '../../chunk-UOC2PL46.js';
+import '../../chunk-MUUROGIH.js';
+import '../../chunk-WRAA7GVZ.js';
+import '../../chunk-EWJP3YYP.js';
+import { replay } from '../../chunk-5EHLEUTL.js';
+import '../../chunk-B5VXOFMZ.js';
+import { useMemo, useReducer, useEffect, useRef, useState } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+function LaneView(props) {
+  const feed = useMemo(
+    () => replayFeed(props.lane, props.log),
+    [props.lane, props.log]
+  );
+  return /* @__PURE__ */ jsx(
+    LanePanels,
+    {
+      feed,
+      title: props.title,
+      className: props.className,
+      send: null
+    }
+  );
+}
+function LiveLaneView(props) {
+  const { lane, hands, ctx } = props;
+  const [epoch, reset] = useReducer((n) => n + 1, 0);
+  const machine = useMemo(
+    () => (
+      // The one cast, at the construction boundary — `runLane` returns exactly
+      // the `init` and `update` a `Machine` is made of, over the lane's own
+      // derivations, and `Machine` wants them under the caller's names.
+      { ...runLane(lane, hands) }
+    ),
+    [lane, hands]
+  );
+  const { rt, rec } = useInspectorRuntime(machine, ctx, epoch);
+  if (rt === null) {
+    return /* @__PURE__ */ jsx("div", { className: containerClass(props.className), children: /* @__PURE__ */ jsx("div", { className: "tea-lv-boot", children: "booting\u2026" }) });
+  }
+  return /* @__PURE__ */ jsx(
+    LiveLanePanels,
+    {
+      lane,
+      hands,
+      samples: props.samples,
+      machine,
+      runtime: rt,
+      rec,
+      ctx,
+      title: props.title,
+      className: props.className,
+      onReset: reset
+    },
+    epoch
+  );
+}
+function LiveLanePanels({
+  lane,
+  hands,
+  samples,
+  machine,
+  runtime,
+  rec,
+  ctx,
+  title,
+  className,
+  onReset
+}) {
+  const [, bump] = useReducer((n) => n + 1, 0);
+  useEffect(() => runtime.subscribe(bump), [runtime]);
+  const live = runtime.getState();
+  const trace = safeDump(rec, live);
+  const tape = useRef(trace);
+  tape.current = trace;
+  const now = useRef(live);
+  now.current = live;
+  const total = trace.msgs.length;
+  const feed = useMemo(
+    () => liveFeed(lane, {
+      regionsAt: (n) => regionsOf(
+        replayPrefix(machine, tape.current, ctx, n, now.current),
+        // a fold that threw leaves the live regions as the honest answer
+        regionsOf(now.current, {})
+      ),
+      msgs: tape.current.msgs,
+      optsFor: (task) => ({
+        ...hands[task]?.parts === void 0 ? {} : { parts: hands[task]?.parts },
+        ...samples?.[task] === void 0 ? {} : { samples: samples[task] }
+      })
+    }),
+    [lane, hands, samples, machine, ctx, total]
+  );
+  return /* @__PURE__ */ jsx(
+    LanePanels,
+    {
+      feed,
+      title,
+      className,
+      send: (msg) => runtime.dispatch(msg),
+      onReset
+    }
+  );
+}
+function containerClass(extra) {
+  return `tea-lv${extra ? ` ${extra}` : ""}`;
+}
+var Sep = () => /* @__PURE__ */ jsx("span", { className: "tea-lv-sep", children: " \xB7 " });
+var NO_SEND = "this view was given no way to dispatch";
+function endingWord(view) {
+  if (view.terminal === null) return "still running";
+  return view.tripped.length > 0 ? "stopped here" : "finished";
+}
+function LanePanels({
+  feed,
+  title,
+  className,
+  send,
+  onReset
+}) {
+  const [at, setAt] = useState(null);
+  const cursor = at === null ? feed.total : Math.min(at, feed.total);
+  const view = laneView(feed, cursor, title);
+  const blocked = view.scrubbed ? `you are looking at step ${view.cursor} of ${view.total}. A button dispatches into the lane as it is NOW \u2014 press \u201Cnow\u201D to get them back.` : view.noDispatch?.why;
+  const page = {
+    dispatch: send !== null && blocked === void 0 ? { send } : { blocked: blocked ?? NO_SEND },
+    foldControls: view.noDispatch !== void 0,
+    ended: view.terminal !== null
+  };
+  return /* @__PURE__ */ jsxs("div", { className: containerClass(className), "data-source": view.source, children: [
+    /* @__PURE__ */ jsxs("header", { className: "tea-lv-head", children: [
+      /* @__PURE__ */ jsx("span", { className: "tea-lv-title", children: view.title }),
+      /* @__PURE__ */ jsx(Sep, {}),
+      /* @__PURE__ */ jsx("span", { className: "tea-lv-src", "data-source": view.source, children: view.source }),
+      /* @__PURE__ */ jsx(Sep, {}),
+      /* @__PURE__ */ jsxs("span", { className: "tea-lv-now", "data-lane-status": view.status, children: [
+        view.terminal === null ? /* @__PURE__ */ jsx("span", { className: "tea-lv-phase", children: view.activePhase ?? "\u2014" }) : /* @__PURE__ */ jsx("span", { className: "tea-lv-terminal", children: view.terminal }),
+        /* @__PURE__ */ jsx(Sep, {}),
+        /* @__PURE__ */ jsx("span", { className: "tea-lv-status", children: endingWord(view) })
+      ] }),
+      view.scrubbed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(Sep, {}),
+        /* @__PURE__ */ jsxs("span", { className: "tea-lv-warn", children: [
+          "time-travelling \u2014 step ",
+          view.cursor,
+          " of ",
+          view.total
+        ] })
+      ] }) : null
+    ] }),
+    /* @__PURE__ */ jsxs("p", { className: "tea-lv-lede", children: [
+      view.phases.length === 1 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "A ",
+        /* @__PURE__ */ jsx("b", { children: "lane" }),
+        " is a run of phases \u2014 this one has a single phase."
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        "A ",
+        /* @__PURE__ */ jsx("b", { children: "lane" }),
+        " is ",
+        view.phases.length,
+        " phases that run one after another."
+      ] }),
+      " ",
+      "Each phase holds tasks that run ",
+      /* @__PURE__ */ jsx("i", { children: "at the same time" }),
+      ", and every task is one state machine \u2014 the diagram below it is that machine, with the state it is in right now lit up. A phase finishes when all of its tasks finish;",
+      " ",
+      view.terminal === null ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        "right now ",
+        /* @__PURE__ */ jsx("b", { children: view.activePhase }),
+        " is the one running."
+      ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+        "this lane has ended, on ",
+        /* @__PURE__ */ jsx("b", { children: view.terminal }),
+        "."
+      ] })
+    ] }),
+    "blocked" in page.dispatch ? /* @__PURE__ */ jsx("p", { className: "tea-lv-unavailable", "data-unavailable": "dispatch", children: page.dispatch.blocked }) : null,
+    /* @__PURE__ */ jsx(StuckPanel, { view }),
+    view.phases.map((phase) => /* @__PURE__ */ jsx(PhasePanel, { phase, page }, phase.name)),
+    /* @__PURE__ */ jsx(
+      TimelinePanel,
+      {
+        view,
+        onScrub: setAt,
+        onLive: () => setAt(null),
+        onReset
+      }
+    )
+  ] });
+}
+function StuckPanel({ view }) {
+  return /* @__PURE__ */ jsxs("section", { className: "tea-lv-panel tea-lv-stuck", children: [
+    /* @__PURE__ */ jsxs("h3", { className: "tea-lv-h", children: [
+      "1 \xB7 is anything blocked?",
+      /* @__PURE__ */ jsx(Sep, {}),
+      /* @__PURE__ */ jsx("span", { className: "tea-lv-hint", children: "a task nothing can move until someone acts" })
+    ] }),
+    view.stuck.length === 0 ? (
+      // Said, never left blank: "nothing is stuck" is an answer, and an empty
+      // panel is the reader wondering whether the question was asked.
+      /* @__PURE__ */ jsx("p", { className: "tea-lv-none", children: "nothing is stuck \u2014 every task can still move" })
+    ) : /* @__PURE__ */ jsx("ul", { className: "tea-lv-stucklist", children: view.stuck.map((s) => /* @__PURE__ */ jsxs("li", { "data-stuck": s.reason.kind, "data-task": s.task, children: [
+      /* @__PURE__ */ jsx("b", { children: s.task }),
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "tea-lv-muted", children: [
+        "(",
+        s.phase,
+        ")"
+      ] }),
+      " ",
+      "\u2014 ",
+      stuckLine(s.reason)
+    ] }, s.task)) }),
+    view.tripped.length === 0 ? null : /* @__PURE__ */ jsxs("p", { className: "tea-lv-tripped", children: [
+      "tripped: ",
+      view.tripped.join(", ")
+    ] })
+  ] });
+}
+function stuckLine(reason) {
+  if (reason === null) return "";
+  switch (reason.kind) {
+    case "tripped":
+      return `landed on the error final \`${reason.state}\` \u2014 as finished as a shipped task, and lost`;
+    case "dead-end":
+      return `\`${reason.state}\` routes no event and is not a final \u2014 nobody can move it`;
+    case "budget-spent":
+      return `\`${reason.state}\` has spent its retry budget \u2014 the next \`${reason.event}\` is \`${reason.landsOn}\`, not a retry`;
+    case "awaiting-world":
+      return `\`${reason.state}\` moves only when ${reason.roles.join(" or ")} sends ${reason.events.map((e) => `\`${e}\``).join(" or ")} \u2014 no cmd or sub can arrive here`;
+  }
+}
+function phaseCount(phase) {
+  const n = phase.tasks.length;
+  const tasks = `${n} task${n === 1 ? "" : "s"}`;
+  switch (phase.standing) {
+    case "active":
+      return n === 1 ? `${tasks}, running` : `${tasks}, running together`;
+    case "complete":
+      return `${tasks}, all finished`;
+    case "tripped":
+      return n === 1 ? `${tasks}, stopped on an error` : `${tasks} \u2014 ${phase.tripped.length} stopped on an error`;
+    case "waiting":
+      return `${tasks}, not started`;
+  }
+}
+function PhasePanel({
+  phase,
+  page
+}) {
+  const count = phaseCount(phase);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      className: `tea-lv-panel tea-lv-phase-${phase.standing}`,
+      "data-phase": phase.name,
+      "data-standing": phase.standing,
+      children: [
+        /* @__PURE__ */ jsxs("h3", { className: "tea-lv-h", children: [
+          phase.index === 0 ? "2 \xB7 " : "",
+          phase.name,
+          " ",
+          /* @__PURE__ */ jsx("span", { className: "tea-lv-standing", children: phase.standing }),
+          /* @__PURE__ */ jsx(Sep, {}),
+          /* @__PURE__ */ jsx("span", { className: "tea-lv-muted", children: count })
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "tea-lv-chips", children: phase.tasks.map((task) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "tea-lv-chip",
+            "data-task": task.task,
+            "data-state": task.state,
+            "data-end": String(task.endPolarity),
+            children: [
+              /* @__PURE__ */ jsx("b", { children: task.task }),
+              " = ",
+              task.state,
+              task.endPolarity === "error" ? " (tripped)" : ""
+            ]
+          },
+          task.task
+        )) }),
+        phase.tasks.map((task) => /* @__PURE__ */ jsx(
+          TaskPanel,
+          {
+            task,
+            expanded: phase.expanded.includes(task.task),
+            alone: phase.tasks.length === 1,
+            page
+          },
+          task.task
+        ))
+      ]
+    }
+  );
+}
+function waitingLine(task, alone, ended) {
+  if (task.waitingOn !== null) return task.waitingOn;
+  if (task.endPolarity !== "error") return "nothing \u2014 this task is final";
+  const landed = `nothing \u2014 this task landed on the error final \`${task.state}\``;
+  if (ended) return `${landed}, which is what stopped the lane`;
+  if (alone) return `${landed}, and that trips \`${task.phase}\``;
+  return `${landed}, and \`${task.phase}\` will trip the lane once its siblings finish`;
+}
+function TaskPanel({
+  task,
+  expanded,
+  alone,
+  page
+}) {
+  const [opened, setOpened] = useState(false);
+  const showDiagram = expanded || opened;
+  const waiting = waitingLine(task, alone, page.ended);
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("p", { className: "tea-lv-waiting", children: [
+      "waiting on: ",
+      waiting
+    ] }),
+    /* @__PURE__ */ jsx(Budget, { task }),
+    page.foldControls ? /* @__PURE__ */ jsxs("details", { className: "tea-lv-accepts", children: [
+      /* @__PURE__ */ jsxs("summary", { children: [
+        "which events this state accepts (",
+        task.controls.filter((c) => !c.refused).length,
+        " of",
+        " ",
+        task.controls.length,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "tea-lv-controls", children: task.controls.map((control) => /* @__PURE__ */ jsx(
+        Control,
+        {
+          control,
+          dispatch: page.dispatch
+        },
+        control.event
+      )) })
+    ] }) : /* @__PURE__ */ jsx("div", { className: "tea-lv-controls", children: task.controls.map((control) => /* @__PURE__ */ jsx(
+      Control,
+      {
+        control,
+        dispatch: page.dispatch
+      },
+      control.event
+    )) }),
+    showDiagram ? /* @__PURE__ */ jsx("pre", { className: "mermaid tea-lv-mermaid", children: task.diagram }, task.diagram) : null
+  ] });
+  if (!expanded) {
+    return (
+      /* The chip row above already says `task = state` for every task in the
+         phase. A collapsed disclosure that repeats it lists each task twice,
+         adjacent — which reads as a bug and was one, found by rendering a real
+         eight-task phase rather than by any assertion. So the summary says what
+         the chip cannot: that there is more here, and whether it has begun. */
+      /* @__PURE__ */ jsxs(
+        "details",
+        {
+          className: "tea-lv-task tea-lv-collapsed",
+          "data-task": task.task,
+          onToggle: (e) => setOpened(e.currentTarget.open),
+          children: [
+            /* @__PURE__ */ jsxs("summary", { children: [
+              /* @__PURE__ */ jsx("b", { children: task.task }),
+              /* @__PURE__ */ jsx(Sep, {}),
+              /* @__PURE__ */ jsx("span", { className: "tea-lv-muted", children: task.moved ? "details" : `still at ${task.state}` })
+            ] }),
+            body
+          ]
+        }
+      )
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "tea-lv-task", "data-task": task.task, "data-expanded": "true", children: [
+    /* @__PURE__ */ jsxs("h4", { className: "tea-lv-taskh", children: [
+      /* @__PURE__ */ jsx("b", { children: task.task }),
+      " \u2014 ",
+      /* @__PURE__ */ jsx("span", { className: "tea-lv-state", children: task.state }),
+      task.endPolarity === "error" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        " ",
+        /* @__PURE__ */ jsx("span", { className: "tea-lv-badge", children: "tripped" })
+      ] }) : null,
+      task.was === void 0 ? null : /* @__PURE__ */ jsxs("span", { className: "tea-lv-muted", children: [
+        " \xB7 resumes to ",
+        task.was
+      ] })
+    ] }),
+    body
+  ] });
+}
+function Budget({ task }) {
+  if ("answerable" in task.budget) {
+    return /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: "tea-lv-unavailable",
+        "data-unavailable": task.budget.question,
+        title: task.budget.why,
+        children: [
+          "retries: not available \u2014 ",
+          task.budget.why
+        ]
+      }
+    );
+  }
+  if (task.budget.retries === 0) return null;
+  return /* @__PURE__ */ jsxs("p", { className: "tea-lv-retries", "data-retries": task.budget.retries, children: [
+    "retries: ",
+    task.budget.retries,
+    "/",
+    task.budget.maxRetries,
+    task.budget.retries >= task.budget.maxRetries ? " \u2014 spent" : ""
+  ] });
+}
+function Control({
+  control,
+  dispatch
+}) {
+  const unsendable = "answerable" in control.send;
+  const msg = unsendable ? void 0 : control.send;
+  const why = unsendable ? control.send.why : void 0;
+  const blocked = "blocked" in dispatch ? dispatch.blocked : void 0;
+  const sendable = msg !== void 0 && blocked === void 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `tea-lv-ev tea-lv-ev-${control.kind}`,
+      "data-event": control.event,
+      "data-task": control.task,
+      "data-status": control.refused ? "refused" : "legal",
+      "data-sendable": String(sendable),
+      children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "tea-lv-btn",
+            disabled: !sendable,
+            title: control.why ?? why ?? blocked ?? control.outcome,
+            onClick: () => {
+              if (msg !== void 0 && "send" in dispatch) dispatch.send(msg);
+            },
+            children: control.event
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: "tea-lv-to", children: control.refused ? control.why : control.outcome })
+      ]
+    }
+  );
+}
+function TimelinePanel({
+  view,
+  onScrub,
+  onLive,
+  onReset
+}) {
+  const clockless = "answerable" in view.clock;
+  return /* @__PURE__ */ jsxs("section", { className: "tea-lv-panel tea-lv-travel", children: [
+    /* @__PURE__ */ jsxs("h3", { className: "tea-lv-h", children: [
+      "3 \xB7 what happened, step by step",
+      /* @__PURE__ */ jsx(Sep, {}),
+      /* @__PURE__ */ jsx("span", { className: "tea-lv-hint", children: "drag to rewind \u2014 everything above moves with it" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "tea-lv-scrub", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "range",
+          min: 0,
+          max: view.total,
+          value: view.cursor,
+          "aria-label": "step",
+          onChange: (e) => onScrub(Number(e.target.value))
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "tea-lv-step", children: [
+        view.cursor,
+        " / ",
+        view.total
+      ] }),
+      /* @__PURE__ */ jsx("button", { type: "button", onClick: onLive, disabled: !view.scrubbed, children: "now" }),
+      onReset === void 0 ? null : /* @__PURE__ */ jsx("button", { type: "button", onClick: onReset, children: "reset" })
+    ] }),
+    clockless ? /* @__PURE__ */ jsxs(
+      "p",
+      {
+        className: "tea-lv-unavailable",
+        "data-unavailable": "clock",
+        title: view.clock.why,
+        children: [
+          "when: not available \u2014 ",
+          view.clock.why
+        ]
+      }
+    ) : null,
+    view.steps.length === 0 ? /* @__PURE__ */ jsx("p", { className: "tea-lv-none", children: "no steps yet \u2014 every task is where it booted" }) : /* @__PURE__ */ jsxs("table", { className: "tea-lv-steps", children: [
+      /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+        /* @__PURE__ */ jsx("th", { children: "#" }),
+        clockless ? null : /* @__PURE__ */ jsx("th", { children: "at" }),
+        /* @__PURE__ */ jsx("th", { children: "task" }),
+        /* @__PURE__ */ jsx("th", { children: "event" }),
+        /* @__PURE__ */ jsx("th", { children: "from \u2192 to" })
+      ] }) }),
+      /* @__PURE__ */ jsx("tbody", { children: view.steps.map((step) => /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          "data-step": step.index,
+          "data-refused": step.refused ? "true" : void 0,
+          children: [
+            /* @__PURE__ */ jsx("td", { children: step.index + 1 }),
+            clockless ? null : /* @__PURE__ */ jsx("td", { children: view.clock[step.index] }),
+            /* @__PURE__ */ jsx("td", { children: step.task }),
+            /* @__PURE__ */ jsx("td", { children: step.event }),
+            /* @__PURE__ */ jsx("td", { children: step.refused ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              step.from,
+              " \u2014 refused, nothing moved"
+            ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              step.from,
+              " \u2192 ",
+              step.to
+            ] }) })
+          ]
+        },
+        step.index
+      )) })
+    ] })
+  ] });
+}
+function regionsOf(state, fallback) {
+  if (typeof state !== "object" || state === null) return fallback;
+  const regions = state.regions;
+  return typeof regions === "object" && regions !== null ? regions : fallback;
+}
+function safeDump(rec, live) {
+  try {
+    return rec.dump();
+  } catch {
+    return { loaded: null, msgs: [], finalState: live };
+  }
+}
+function replayPrefix(machine, trace, ctx, n, live) {
+  try {
+    return replay(machine, {
+      msgs: trace.msgs.slice(0, n),
+      ctx,
+      loaded: trace.loaded
+    }).state;
+  } catch {
+    return live;
+  }
+}
+
+export { LaneView, LiveLaneView };
+//# sourceMappingURL=react.js.map
+//# sourceMappingURL=react.js.map