@typeonce/effect-machine-devtools 0.23.0 → 0.24.0

package/src/internal/browser/planner-example.ts

@@ -0,0 +1,143 @@
+import { Machine } from "@typeonce/effect-machine"
+import { Schema } from "effect"
+
+class Idle extends Schema.TaggedClass<Idle>("PlannerIdle")("Idle", { owner: Schema.String }) {}
+class Working extends Schema.TaggedClass<Working>("PlannerWorking")("Working", {
+  owner: Schema.String,
+  job: Schema.String
+}) {}
+class Finished extends Schema.TaggedClass<Finished>("PlannerFinished")("Finished", { job: Schema.String }) {}
+
+const Owner = Schema.NonEmptyString.annotate({
+  title: "Owner",
+  description: "A non-empty name carried into the initial Idle state."
+})
+const Attempts = Schema.Int.check(Schema.isBetween({ minimum: 1, maximum: 5 })).annotate({
+  title: "Attempts",
+  description: "An integer between one and five."
+})
+const Labels = Schema.Array(Schema.NonEmptyString).check(Schema.isLengthBetween(1, 3)).annotate({
+  title: "Labels",
+  description: "One to three non-empty labels."
+})
+const Route = Schema.Union([
+  Schema.Literal("direct").annotate({ title: "Direct" }),
+  Schema.Struct({
+    queue: Schema.NonEmptyString.annotate({
+      title: "Queue",
+      description: "The queue used by the queued route."
+    })
+  }).annotate({ title: "Queued" })
+]).annotate({
+  title: "Route",
+  description: "Choose a literal direct route or provide a queue."
+})
+
+class Begin extends Schema.TaggedClass<Begin>("PlannerBegin")("Begin", {
+  job: Schema.NonEmptyString.annotate({
+    title: "Job",
+    description: "A non-empty job name used as the final output."
+  }),
+  priority: Schema.Literals(["normal", "urgent"]).annotate({
+    title: "Priority",
+    description: "Urgent jobs raise AutoFinish during the same macrostep."
+  }),
+  estimate: Schema.Finite.check(Schema.isBetween({ minimum: 0, maximum: 100 })).annotate({
+    title: "Estimate",
+    description: "A numeric estimate between zero and one hundred."
+  }),
+  approved: Schema.Boolean.annotate({
+    title: "Approved",
+    description: "A boolean checkbox included in the event payload."
+  }),
+  notes: Schema.optionalKey(
+    Schema.String.check(Schema.isMaxLength(80)).annotate({
+      title: "Notes",
+      description: "Optional text limited to eighty characters."
+    })
+  ),
+  labels: Schema.optionalKey(Labels),
+  route: Schema.optionalKey(Route)
+}) {}
+class Cancel extends Schema.TaggedClass<Cancel>("PlannerCancel")("Cancel", { reason: Schema.String }) {}
+class AutoFinish extends Schema.TaggedClass<AutoFinish>("PlannerAutoFinish")("AutoFinish", {}) {}
+class Planned extends Schema.TaggedClass<Planned>("PlannerPlanned")("Planned", { job: Schema.String }) {}
+
+const Events = Machine.events(Begin, Cancel)
+const InternalEvents = Machine.internalEvents(AutoFinish)
+const Emissions = Machine.emittedEvents(Planned)
+const States = Machine.states({
+  Idle,
+  Working,
+  Finished: { schema: Finished, type: "final", output: Schema.String }
+})
+
+export const plannerMachine = Machine.make({
+  id: "planner-example",
+  states: States.states,
+  events: Events,
+  internalEvents: InternalEvents,
+  emittedEvents: Emissions,
+  input: Schema.Struct({
+    owner: Owner,
+    attempts: Attempts,
+    notifications: Schema.Boolean.annotate({
+      title: "Notifications",
+      description: "A required boolean with false as a valid value."
+    }),
+    mode: Schema.Literals(["guided", "automatic"]).annotate({
+      title: "Mode",
+      description: "A fixed set of startup modes."
+    }),
+    note: Schema.optionalKey(
+      Schema.String.check(Schema.isMaxLength(40)).annotate({
+        title: "Note",
+        description: "Optional startup text limited to forty characters."
+      })
+    ),
+    labels: Schema.optionalKey(Labels),
+    preferences: Schema.optionalKey(
+      Schema.Struct({
+        retries: Schema.Int.check(Schema.isBetween({ minimum: 0, maximum: 3 })).annotate({
+          title: "Retries"
+        }),
+        dryRun: Schema.Boolean.annotate({ title: "Dry run" })
+      }).annotate({
+        title: "Preferences",
+        description: "An optional nested object."
+      })
+    )
+  }),
+  initial: (to) => to.Idle().resolve(({ input, target }) => target.decoded(new Idle({ owner: input.owner })))
+}).handle({
+  Idle: {
+    on: {
+      Begin: (to) =>
+        to.branches({
+          urgent: { title: "Finish immediately", target: to.full.Working() },
+          normal: { title: "Wait in working", target: to.full.Working() }
+        }).resolve(({ event, self, select, state }, enqueue) => {
+          enqueue.emit(new Planned({ job: event.job }))
+          enqueue.sendTo(self, Events.Cancel({ reason: "planner command example" }))
+          if (event.priority === "urgent") enqueue.raise(InternalEvents.AutoFinish())
+          const working = new Working({ owner: state.owner, job: event.job })
+          return event.priority === "urgent"
+            ? select.urgent.decoded(working)
+            : select.normal.decoded(working)
+        })
+    }
+  },
+  Working: {
+    on: {
+      AutoFinish: (to) =>
+        to.full.Finished().resolve(({ state, target }) => target.decoded(new Finished({ job: state.job }))),
+      Cancel: (to) =>
+        to.full.Idle().resolve(({ event, state, target }) =>
+          target.decoded(new Idle({ owner: `${state.owner} · ${event.reason}` }))
+        )
+    }
+  },
+  Finished: {
+    output: ({ state }) => state.job
+  }
+})

package/src/internal/browser/simulation-client.ts

@@ -0,0 +1,20 @@
+import * as Schema from "effect/Schema"
+import * as DevToolsProtocol from "../../DevToolsProtocol.js"
+
+export const requestSimulation = async (
+  request: DevToolsProtocol.SimulationRequest
+): Promise<DevToolsProtocol.SimulationResult> => {
+  const response = await fetch("/api/simulations", {
+    method: "POST",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(request)
+  })
+  const body: unknown = await response.json()
+  if (!response.ok) {
+    const message = typeof body === "object" && body !== null && "message" in body
+      ? String(body.message)
+      : `Simulation request failed with status ${response.status}`
+    throw new Error(message)
+  }
+  return Schema.decodeUnknownSync(DevToolsProtocol.SimulationResult)(body)
+}

package/src/internal/browser/styles.css

@@ -297,11 +297,11 @@ button {
   font: 10px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
 }
 
-.simulation-feedback[data-status="indeterminate"] {
+.simulation-feedback[data-status="pending"] {
   color: #d9ae7e;
 }
 
-.simulation-feedback[data-status="blocked"] {
+.simulation-feedback[data-status="error"] {
   color: #d58d89;
 }
 
@@ -328,6 +328,11 @@ button {
   outline: none;
 }
 
+.event-button:disabled {
+  color: #666d76;
+  cursor: wait;
+}
+
 .topology-node {
   background: transparent;
 }
@@ -382,7 +387,7 @@ button {
 }
 
 .topology-node.is-related-target > .state-row {
-  background: rgb(75 125 255 / 9%);
+  background: rgb(75 125 255 / 15%);
 }
 
 .topology-node.is-related-source > .state-row {
@@ -746,6 +751,321 @@ button {
   padding: 0 12px;
 }
 
+.simulation-composer {
+  display: grid;
+  gap: 10px;
+}
+
+.simulation-composer .section-heading {
+  margin-bottom: 0;
+}
+
+.schema-form,
+.input-object,
+.input-array,
+.input-union,
+.input-field,
+.input-array-items {
+  display: grid;
+  gap: 10px;
+}
+
+.schema-form {
+  max-width: 520px;
+}
+
+.input-object,
+.input-array,
+.input-union {
+  min-width: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+
+.input-object > legend,
+.input-array > legend,
+.input-union > legend {
+  margin-bottom: 8px;
+  padding: 0;
+  color: #d5d8dd;
+  font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.input-object .input-object,
+.input-object .input-array,
+.input-object .input-union {
+  padding: 11px;
+  border: 1px solid var(--line-soft);
+  background: #101216;
+}
+
+.input-field {
+  gap: 6px;
+}
+
+.input-field + .input-field {
+  padding-top: 10px;
+  border-top: 1px solid var(--line-soft);
+}
+
+.input-field-heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.input-field-identity,
+.input-constraints {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.input-label,
+.input-required,
+.input-optional,
+.boolean-control {
+  font-size: 11px;
+}
+
+.input-label {
+  color: #cfd3d9;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.input-field-type,
+.input-constraints span {
+  color: #8294ad;
+  font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.input-field-type {
+  padding: 2px 5px;
+  border-radius: 3px;
+  background: rgb(75 125 255 / 12%);
+}
+
+.input-constraints {
+  margin-top: -1px;
+}
+
+.input-constraints span + span::before {
+  margin-right: 6px;
+  color: #4f5762;
+  content: "·";
+}
+
+.input-required {
+  color: #737b86;
+}
+
+.input-optional,
+.boolean-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  color: #9199a4;
+}
+
+.input-control {
+  width: 100%;
+  min-height: 34px;
+  padding: 7px 9px;
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  color: #dfe7f5;
+  background: #0b0d10;
+  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  outline: none;
+}
+
+.input-control:focus {
+  border-color: #557db8;
+}
+
+.input-description,
+.input-unsupported,
+.input-errors {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.input-description {
+  color: #737b86;
+}
+
+.input-unsupported {
+  color: #d7a5a2;
+}
+
+.input-errors {
+  color: #efaaa6;
+}
+
+.input-errors-form {
+  padding: 8px 10px;
+  border: 1px solid rgb(224 89 84 / 30%);
+  background: rgb(224 89 84 / 8%);
+}
+
+.literal-control {
+  color: #aeb6c1;
+  font: 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+
+.is-disabled {
+  opacity: 0.45;
+}
+
+.input-array-item {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 7px;
+}
+
+.input-array-add,
+.input-array-remove {
+  padding: 6px 8px;
+  border: 0;
+  border-radius: 3px;
+  color: #9ebce9;
+  background: #1b2431;
+  font-size: 10px;
+  cursor: pointer;
+}
+
+.input-array-add {
+  justify-self: start;
+}
+
+.simulation-action {
+  justify-self: start;
+  padding: 7px 10px;
+  border: 0;
+  border-radius: 3px;
+  color: #e4edff;
+  background: #315d9f;
+  font-size: 11px;
+  cursor: pointer;
+}
+
+.simulation-action:hover,
+.simulation-action:focus-visible {
+  background: #3b6db8;
+  outline: none;
+}
+
+.simulation-action:disabled {
+  color: #7e8796;
+  background: #252a32;
+  cursor: wait;
+}
+
+.simulation-note,
+.editor-error {
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.55;
+}
+
+.simulation-note {
+  color: #777f8a;
+}
+
+.editor-error,
+.trace-error {
+  color: #eca6a2;
+}
+
+.trace-header .json-value {
+  margin-top: 18px;
+}
+
+.json-value,
+.trace-error {
+  max-width: 100%;
+  margin: 8px 0 0;
+  padding: 10px 11px;
+  border: 1px solid var(--line-soft);
+  color: #bac8dc;
+  background: #0d0f12;
+  font: 10px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  overflow: auto;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+.trace-topology {
+  display: grid;
+  gap: 10px;
+}
+
+.trace-topology .section-heading {
+  margin-bottom: 1px;
+}
+
+.trace-path-group,
+.trace-values,
+.trace-transitions {
+  display: grid;
+  gap: 7px;
+}
+
+.trace-path-group {
+  grid-template-columns: 78px minmax(0, 1fr);
+  align-items: start;
+}
+
+.trace-paths {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  gap: 4px 10px;
+}
+
+.trace-label {
+  color: #747c87;
+  font-size: 10px;
+  line-height: 1.5;
+  text-transform: uppercase;
+}
+
+.trace-card {
+  padding-bottom: 12px;
+}
+
+.trace-card > .trace-path-group,
+.trace-card > .trace-values,
+.trace-card > .trace-transitions {
+  margin: 0 12px 10px;
+}
+
+.trace-transition {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+}
+
+.trace-transition + .trace-path-group {
+  margin: 0 0 4px;
+}
+
+.trace-results {
+  padding-bottom: 24px;
+}
+
+.trace-results > .trace-values {
+  margin-top: 12px;
+}
+
 @media (max-width: 900px) {
   .devtools-shell {
     grid-template-columns: 1fr;