@typeonce/effect-machine-devtools 0.23.0 → 0.25.0

package/src/internal/browser/visualizer-app.ts

@@ -1,17 +1,29 @@
+import * as Effect from "effect/Effect"
+import * as Result from "effect/Result"
 import type { Diagnostic } from "../../DevToolsProtocol.js"
 import type {
   Activity as VisualizationActivity,
   Branch as VisualizationBranch,
+  InputSchema,
   MachineDocument as VisualizationDocument,
-  Transition as VisualizationTransition
+  Transition as VisualizationTransition,
+  Trigger
 } from "../../MachineDocument.js"
-import * as MachineSimulator from "../../MachineSimulator.js"
+import * as MachineWalkthrough from "../../MachineWalkthrough.js"
 import {
-  type EventInspection,
+  type ChartInteractionAnchor,
+  type ChartPresentation,
+  type ChartView,
+  maximumChartZoom,
+  minimumChartZoom,
+  renderChart
+} from "./chart-renderer.js"
+import { type InputField, projectInputSchema } from "./input-form.js"
+import {
+  branchTargetApi,
   type IncomingTransition,
   makeVisualizerModel,
   type StateInspection,
-  type TopologyNode,
   triggerLabel
 } from "./visualizer-model.js"
 
@@ -26,16 +38,33 @@ const createElement = <Tag extends keyof HTMLElementTagNameMap>(
   return element
 }
 
-const metadata = (items: ReadonlyArray<readonly [string, string]>): HTMLDListElement => {
+type MetadataValue = string | Node | null | undefined
+
+const metadata = (items: ReadonlyArray<readonly [string, MetadataValue]>): HTMLDListElement => {
   const list = createElement("dl", "metadata")
   for (const [label, value] of items) {
-    list.append(createElement("dt", undefined, label), createElement("dd", undefined, value))
+    if (value === null || value === undefined || value === "" || value === "none") continue
+    const description = createElement("dd")
+    description.append(value)
+    list.append(createElement("dt", undefined, label), description)
   }
   return list
 }
 
 const badge = (text: string, kind = "neutral"): HTMLSpanElement => createElement("span", `badge badge-${kind}`, text)
 
+const stateStatus = (active: boolean, initial: boolean): HTMLSpanElement => {
+  const status = createElement(
+    "span",
+    `chart-state-status${active ? " is-active" : ""}${initial ? " is-initial" : ""}`
+  )
+  status.setAttribute(
+    "aria-label",
+    active && initial ? "active, initial state" : active ? "active" : initial ? "initial state" : "inactive"
+  )
+  return status
+}
+
 type StateNavigator = (path: string) => void
 
 const stateLink = (path: string, label: string, navigate: StateNavigator): HTMLButtonElement => {
@@ -45,26 +74,35 @@ const stateLink = (path: string, label: string, navigate: StateNavigator): HTMLB
   return link
 }
 
-const renderBranch = (branch: VisualizationBranch, navigate: StateNavigator): HTMLElement => {
+const renderBranch = (
+  document: VisualizationDocument,
+  source: string,
+  branch: VisualizationBranch,
+  navigate: StateNavigator
+): HTMLElement => {
   const row = createElement("div", "branch-row")
   const main = createElement("div", "branch-main")
   if (branch.type === "branch") main.append(badge(branch.title, "condition"))
-  main.append(createElement("span", "branch-arrow", "→"))
   if (branch.target !== null) {
-    main.append(stateLink(branch.target, branch.target, navigate))
+    main.append(createElement("span", "branch-arrow", "→"), stateLink(branch.target, branch.target, navigate))
+  } else if (branch.selection.kind === "update") {
+    main.append(
+      badge(branch.selection.scope === "local" ? "to.local.update" : "value update", "update"),
+      createElement("span", "branch-target", "Updates the owner value")
+    )
   } else {
-    main.append(createElement("span", "branch-target", branch.updates.length > 0 ? "Remain in state" : "No target"))
+    main.append(createElement("span", "branch-target", "No target state"))
   }
   row.append(main)
 
-  const details: Array<readonly [string, string]> = [
-    ["Selection", branch.selection.kind],
-    ["Scope", branch.selection.scope ?? "none"]
-  ]
+  const api = branchTargetApi(document, source, branch)
+  const details: Array<readonly [string, MetadataValue]> = api === undefined
+    ? [["Selection", branch.selection.kind], ["Scope", branch.selection.scope]]
+    : [["API", api]]
   row.append(metadata(details))
   if (branch.updates.length > 0) {
     const updates = createElement("div", "branch-updates")
-    updates.append(createElement("span", "branch-updates-label", "Updates"))
+    updates.append(createElement("span", "branch-updates-label", "Value owner"))
     branch.updates.forEach((path) => updates.append(stateLink(path, path, navigate)))
     row.append(updates)
   }
@@ -72,6 +110,7 @@ const renderBranch = (branch: VisualizationBranch, navigate: StateNavigator): HT
 }
 
 const renderTransition = (
+  document: VisualizationDocument,
   transition: VisualizationTransition,
   navigate: StateNavigator,
   showSource = false
@@ -79,44 +118,52 @@ const renderTransition = (
   const card = createElement("article", "inspection-card transition-card")
   const header = createElement("div", "card-header")
   const title = createElement("div", "card-title")
-  title.append(badge(transition.trigger.type, "trigger"), createElement("strong", undefined, triggerLabel(transition)))
+  title.append(createElement("strong", undefined, triggerLabel(transition)))
   const flags = createElement("div", "card-flags")
+  flags.append(badge(transition.trigger.type, "trigger"))
   if (transition.reenter) flags.append(badge("reenter"))
   if (transition.acceptance === "declinable") flags.append(badge("declinable"))
   header.append(title, flags)
   card.append(header)
   if (showSource) {
-    const source = createElement("div", "transition-source")
-    source.append(createElement("span", undefined, "From"), stateLink(transition.source, transition.source, navigate))
+    const source = metadata([["Source", stateLink(transition.source, transition.source, navigate)]])
+    source.classList.add("card-metadata")
     card.append(source)
   }
 
-  const branches = createElement("div", "branch-list")
-  if (transition.branches.length === 0) {
-    branches.append(createElement("div", "empty-inline", "No transition branches"))
-  } else {
-    transition.branches.forEach((branch) => branches.append(renderBranch(branch, navigate)))
+  if (transition.branches.length > 0) {
+    const branches = createElement("div", "branch-list")
+    transition.branches.forEach((branch) =>
+      branches.append(renderBranch(document, transition.source, branch, navigate))
+    )
+    card.append(branches)
   }
-  card.append(branches)
   return card
 }
 
-const renderIncomingTransition = (incoming: IncomingTransition, navigate: StateNavigator): HTMLElement => {
+const renderIncomingTransition = (
+  document: VisualizationDocument,
+  incoming: IncomingTransition,
+  navigate: StateNavigator
+): HTMLElement => {
   const card = createElement("article", "inspection-card incoming-card")
   const header = createElement("div", "card-header")
   const title = createElement("div", "card-title")
-  title.append(
-    badge(incoming.transition.trigger.type, "trigger"),
-    createElement("strong", undefined, triggerLabel(incoming.transition))
-  )
-  header.append(title, stateLink(incoming.transition.source, incoming.transition.source, navigate))
+  title.append(createElement("strong", undefined, triggerLabel(incoming.transition)))
+  const flags = createElement("div", "card-flags")
+  flags.append(badge(incoming.transition.trigger.type, "trigger"))
+  header.append(title, flags)
   card.append(header)
 
-  const details: Array<readonly [string, string]> = [
-    ["Selection", incoming.branch.selection.kind],
-    ["Scope", incoming.branch.selection.scope ?? "none"]
+  const api = branchTargetApi(document, incoming.transition.source, incoming.branch)
+  const details: Array<readonly [string, MetadataValue]> = [
+    ["Source", stateLink(incoming.transition.source, incoming.transition.source, navigate)],
+    ["API", api]
   ]
-  if (incoming.branch.type === "branch") details.unshift(["Branch", incoming.branch.title])
+  if (api === undefined) {
+    details.push(["Selection", incoming.branch.selection.kind], ["Scope", incoming.branch.selection.scope])
+  }
+  if (incoming.branch.type === "branch") details.unshift(["Title", incoming.branch.title])
   card.append(metadata(details))
   return card
 }
@@ -133,15 +180,19 @@ const activityTitle = (activity: VisualizationActivity): string => {
   }
 }
 
-const renderActivity = (activity: VisualizationActivity): HTMLElement => {
+const renderActivity = (activity: VisualizationActivity, navigate: StateNavigator): HTMLElement => {
   const card = createElement("article", "inspection-card activity-card")
   const header = createElement("div", "card-header")
   const title = createElement("div", "card-title")
-  title.append(badge(activity.type, "activity"), createElement("strong", undefined, activityTitle(activity)))
-  header.append(title)
+  title.append(createElement("strong", undefined, activityTitle(activity)))
+  const flags = createElement("div", "card-flags")
+  flags.append(badge(activity.type, "activity"))
+  header.append(title, flags)
   card.append(header)
 
-  const details: Array<readonly [string, string]> = [["Owner", activity.source]]
+  const details: Array<readonly [string, MetadataValue]> = [
+    ["Owner", stateLink(activity.source, activity.source, navigate)]
+  ]
   if (activity.type === "timer") details.push(["Duration", activity.duration])
   if (activity.type === "effect") {
     details.push(["Success", activity.outcomes.success], ["Failure", activity.outcomes.failure])
@@ -153,83 +204,270 @@ const renderActivity = (activity: VisualizationActivity): HTMLElement => {
   return card
 }
 
-const inspectionSection = (title: string, count: number): HTMLElement => {
+const inspectionSection = (title: string, count?: number): HTMLElement => {
   const header = createElement("div", "section-heading")
-  header.append(createElement("h3", undefined, title), createElement("span", "section-count", String(count)))
+  header.append(createElement("h3", undefined, title))
+  if (count !== undefined) header.append(createElement("span", "section-count", String(count)))
   return header
 }
 
-const simulationResultMessage = (result: MachineSimulator.StepResult): string => {
-  if (result._tag === "Applied") return `${result.event} applied · runtime code was skipped`
-  if (result._tag === "Blocked") return `${result.event} is not enabled in the current topology`
-  const reasons: Record<MachineSimulator.Indeterminate["reason"], string> = {
-    "multiple-transitions": "multiple active transitions",
-    "declinable-transition": "acceptance depends on runtime code",
-    "conditional-branches": "the selected branch depends on runtime code",
-    "history-target": "history resolution needs runtime state",
-    "choice-target": "choice resolution needs runtime code",
-    "missing-target": "the target is not present in the document"
-  }
-  return `${result.event} was not applied · ${reasons[result.reason]}`
+const inputType = (field: InputField): string => {
+  switch (field._tag) {
+    case "String":
+      return field.format ?? "string"
+    case "Number":
+      return field.integer ? "integer" : "number"
+    case "Boolean":
+      return "boolean"
+    case "Enum":
+      return "enum"
+    case "Literal":
+      return "literal"
+    case "Object":
+      return "object"
+    case "Array":
+      return `${inputType(field.item)}[]`
+    case "Union":
+      return "union"
+    case "Unsupported":
+      return "unknown"
+  }
+}
+
+const inputConstraints = (field: InputField): ReadonlyArray<string> => {
+  switch (field._tag) {
+    case "String":
+      return [
+        field.minLength === undefined ? undefined : `min ${field.minLength}`,
+        field.maxLength === undefined ? undefined : `max ${field.maxLength}`,
+        field.pattern === undefined ? undefined : `pattern ${field.pattern}`
+      ].filter((value): value is string => value !== undefined)
+    case "Number":
+      return [
+        field.minimum === undefined ? undefined : `≥ ${field.minimum}`,
+        field.maximum === undefined ? undefined : `≤ ${field.maximum}`
+      ].filter((value): value is string => value !== undefined)
+    case "Enum":
+      return field.values.map((value) => JSON.stringify(value))
+    case "Literal":
+      return [JSON.stringify(field.value)]
+    case "Array":
+      return [
+        field.minItems > 0 ? `min ${field.minItems}` : undefined,
+        field.maxItems === undefined ? undefined : `max ${field.maxItems}`
+      ].filter((value): value is string => value !== undefined)
+    default:
+      return []
+  }
+}
+
+const renderContractField = (
+  label: string,
+  required: boolean,
+  field: InputField,
+  omit: ReadonlySet<string>
+): HTMLElement | null => {
+  if (omit.has(label)) return null
+  const row = createElement("div", "input-contract-field")
+  const heading = createElement("div", "input-field-heading")
+  const identity = createElement("div", "input-field-identity")
+  identity.append(
+    createElement("span", "input-label", label),
+    createElement("span", "input-field-type", inputType(field)),
+    createElement("span", required ? "input-required" : "input-optional", required ? "required" : "optional")
+  )
+  heading.append(identity)
+  row.append(heading)
+  const constraints = inputConstraints(field)
+  if (constraints.length > 0) {
+    const values = createElement("div", "input-constraints")
+    constraints.forEach((value) => values.append(createElement("span", undefined, value)))
+    row.append(values)
+  }
+  if (field.description !== undefined) row.append(createElement("p", "input-description", field.description))
+  if (field._tag === "Object") {
+    const children = createElement("div", "input-contract-children")
+    field.fields.forEach(({ key, required, field }) => {
+      const child = renderContractField(key, required, field, omit)
+      if (child !== null) children.append(child)
+    })
+    if (children.childElementCount > 0) row.append(children)
+  } else if (field._tag === "Array" && field.item._tag === "Object") {
+    const children = createElement("div", "input-contract-children")
+    field.item.fields.forEach(({ key, required, field }) => {
+      const child = renderContractField(key, required, field, omit)
+      if (child !== null) children.append(child)
+    })
+    if (children.childElementCount > 0) row.append(children)
+  } else if (field._tag === "Union") {
+    const alternatives = createElement("div", "input-contract-alternatives")
+    field.alternatives.forEach((alternative, index) => {
+      const item = renderContractField(`Option ${index + 1}`, true, alternative, omit)
+      if (item !== null) alternatives.append(item)
+    })
+    row.append(alternatives)
+  } else if (field._tag === "Unsupported") {
+    row.append(createElement("p", "input-unsupported", field.reason))
+  }
+  return row
+}
+
+const renderInputContract = (
+  title: string,
+  schema: InputSchema,
+  omit: ReadonlyArray<string> = []
+): HTMLElement => {
+  const section = createElement("section", "inspector-section input-contract")
+  section.append(inspectionSection(title))
+  const projected = projectInputSchema(schema)
+  const fields = createElement("div", "input-contract-fields")
+  const omitted = new Set(omit)
+  if (projected._tag === "Object") {
+    projected.fields.forEach(({ key, required, field }) => {
+      const child = renderContractField(key, required, field, omitted)
+      if (child !== null) fields.append(child)
+    })
+  } else {
+    const child = renderContractField("value", true, projected, omitted)
+    if (child !== null) fields.append(child)
+  }
+  if (fields.childElementCount === 0) {
+    fields.append(createElement("p", "section-empty", "No additional data fields."))
+  }
+  section.append(fields)
+  return section
+}
+
+const contractSummary = (schema: InputSchema | null): string | null => {
+  if (schema === null) return null
+  const field = projectInputSchema(schema)
+  if (field._tag !== "Object") return inputType(field)
+  const fields = field.fields.filter(({ key }) => key !== "_tag")
+  if (fields.length === 0) return null
+  return fields.slice(0, 3).map(({ key, required, field }) => `${key}${required ? "" : "?"}: ${inputType(field)}`).join(
+    " · "
+  ) + (fields.length > 3 ? ` · +${fields.length - 3}` : "")
+}
+
+const triggerName = (trigger: Trigger): string => {
+  switch (trigger.type) {
+    case "event":
+      return trigger.event
+    case "always":
+      return "Always"
+    case "done":
+      return "Completion"
+    case "choice":
+      return "Choice"
+    case "invoke":
+      return `${trigger.id} · ${trigger.outcome}`
+  }
+}
+
+const decisionLabel = (decision: MachineWalkthrough.Decision): string => {
+  switch (decision) {
+    case "conditional-branch":
+      return "Choose branch"
+    case "declinable-transition":
+      return "Assume accepted"
+    case "automatic-trigger":
+      return "Advance automatic trigger"
+    case "invoke-outcome":
+      return "Choose invoke outcome"
+  }
+}
+
+const unavailableLabel = (reason: MachineWalkthrough.UnavailableReason): string =>
+  reason === "history-unavailable"
+    ? "No history has been recorded for this target yet"
+    : "The target is resolved only at runtime"
+
+const activeTopology = (paths: ReadonlyArray<string>): string => {
+  const leaves = paths.filter((path) => !paths.some((candidate) => candidate.startsWith(`${path}.`)))
+  return leaves.map((path) => path.split(".").at(-1) ?? path).join(" + ") || "none"
 }
 
 export const renderVisualizer = (
   root: HTMLElement,
+  _machineKey: string,
   visualization: VisualizationDocument,
   diagnostics: ReadonlyArray<Diagnostic> = []
 ): void => {
   const model = makeVisualizerModel(visualization)
-  const rows = new Map<string, HTMLElement>()
-  const nodes = new Map<string, HTMLElement>()
-  const statuses = new Map<string, HTMLElement>()
-  const eventButtons = new Map<string, HTMLElement>()
-  const relatedPaths = new Set<string>()
+  const transitionsById = new Map(visualization.transitions.map((transition) => [transition.id, transition]))
+  const eventSchemas = new Map(visualization.inputs.events.map(({ event, schema }) => [event, schema]))
+  const relatedFrom = new Set<string>()
+  const relatedTo = new Set<string>()
+  const incomingTransitions = new Set<string>()
+  const outgoingTransitions = new Set<string>()
   let selectedPath: string | undefined
-  let selectedEvent: string | undefined
-  let simulation: MachineSimulator.Session | undefined
+  let selectedTransition: string | undefined
+  let selectedFrame: MachineWalkthrough.Frame | undefined
+  let walkthrough: MachineWalkthrough.Session | undefined
+  let chartView: ChartView | undefined
 
-  const activePaths = (): ReadonlyArray<string> => simulation?.snapshot.activePaths ?? model.activePaths
-  const candidateEvents = (): ReadonlyArray<string> => simulation?.snapshot.candidateEvents ?? model.candidateEvents
+  const activePaths = (): ReadonlyArray<string> =>
+    walkthrough === undefined ? model.activePaths : MachineWalkthrough.current(walkthrough).after.activePaths
+  const availableChoices = (): ReadonlyArray<MachineWalkthrough.Choice> =>
+    walkthrough === undefined ? [] : MachineWalkthrough.choices(walkthrough)
 
   const shell = createElement("main", "app-shell")
   const workspace = createElement("section", "workspace")
-  const treePanel = createElement("section", "tree-panel")
-  treePanel.setAttribute("aria-label", `${model.machineId} topology`)
+  const chartPanel = createElement("section", "chart-panel")
+  chartPanel.setAttribute("aria-label", `${model.machineId} topology`)
   const inspector = createElement("aside", "inspector")
   inspector.setAttribute("aria-live", "polite")
+  inspector.setAttribute("aria-label", "Selection details")
+  inspector.hidden = true
+  const inspectorClose = createElement("button", "inspector-close", "Close")
+  inspectorClose.type = "button"
+  inspectorClose.setAttribute("aria-label", "Close details")
+  const inspectorContent = createElement("div", "inspector-content")
+  inspector.append(inspectorClose, inspectorContent)
+  const choicePicker = createElement("section", "transition-picker")
+  choicePicker.setAttribute("role", "dialog")
+  choicePicker.setAttribute("aria-label", "Available transitions")
+  choicePicker.hidden = true
+  const choicePickerHeader = createElement("div", "transition-picker-header")
+  const choicePickerTitle = createElement("strong")
+  const choicePickerClose = createElement("button", "transition-picker-close", "Close")
+  choicePickerClose.type = "button"
+  const choicePickerContent = createElement("div", "transition-picker-content")
+  choicePickerHeader.append(choicePickerTitle, choicePickerClose)
+  choicePicker.append(choicePickerHeader, choicePickerContent)
 
   const clearButton = createElement("button", "toolbar-button", "Clear selection")
   clearButton.type = "button"
   clearButton.disabled = true
-  const expandButton = createElement("button", "toolbar-button", "Expand all")
-  expandButton.type = "button"
-  const collapseButton = createElement("button", "toolbar-button", "Collapse all")
-  collapseButton.type = "button"
+  const detailsButton = createElement("button", "toolbar-button", "View details")
+  detailsButton.type = "button"
+  detailsButton.disabled = true
   const revealActiveButton = createElement("button", "toolbar-button", "Reveal active")
   revealActiveButton.type = "button"
   revealActiveButton.disabled = model.activePaths.length === 0
-  const simulationButton = createElement("button", "toolbar-button", "Start simulation")
-  simulationButton.type = "button"
-  simulationButton.disabled = model.roots.length === 0
-
-  const renderEmptyInspector = (): void => {
-    inspector.replaceChildren()
-    const summary = createElement("div", "inspector-empty")
-    summary.append(createElement("span", "inspector-empty-kind", "Machine"))
-    summary.append(createElement("h2", undefined, visualization.machineId))
-    summary.append(metadata([
-      ["Source", visualization.source?.file ?? "in memory"],
-      ["Export", visualization.source?.exportName ?? "none"],
-      ["Initial", visualization.initial.target],
-      ["Selection", visualization.initial.selection.kind],
-      ["Revision", String(visualization.revision)]
-    ]))
-    summary.append(createElement("p", undefined, "Select a state to inspect its transitions and activities."))
-    inspector.append(summary)
+  const walkthroughButton = createElement("button", "toolbar-button", "Start simulation")
+  walkthroughButton.type = "button"
+  walkthroughButton.disabled = model.roots.length === 0
+
+  const hideInspector = (): void => {
+    inspectorContent.replaceChildren()
+    inspector.hidden = true
+    detailsButton.textContent = "View details"
+  }
+
+  const showInspector = (): void => {
+    inspector.hidden = false
+    detailsButton.textContent = "Hide details"
+  }
+
+  const closeChoicePicker = (): void => {
+    choicePicker.hidden = true
+    choicePickerContent.replaceChildren()
   }
 
   const renderInspection = (inspection: StateInspection): void => {
-    inspector.replaceChildren()
+    inspectorContent.replaceChildren()
+    showInspector()
     const header = createElement("header", "inspector-header")
     const breadcrumbs = createElement("nav", "breadcrumbs")
     breadcrumbs.setAttribute("aria-label", "State path")
@@ -237,17 +475,20 @@ export const renderVisualizer = (
       if (index > 0) breadcrumbs.append(createElement("span", "breadcrumb-separator", "/"))
       breadcrumbs.append(stateLink(item.path, item.label, navigateToState))
     })
-    const eyebrow = createElement("div", "inspector-eyebrow")
-    eyebrow.append(badge(inspection.state.type, "state"))
-    if (activePaths().includes(inspection.state.path)) eyebrow.append(badge("active", "active"))
-    if (inspection.initial) eyebrow.append(badge("initial", "initial"))
-    header.append(breadcrumbs, eyebrow, createElement("h2", undefined, inspection.label))
+    const titleRow = createElement("div", "inspector-title-row")
+    const title = createElement("div", "inspector-state-title")
+    title.append(
+      stateStatus(activePaths().includes(inspection.state.path), inspection.initial),
+      createElement("h2", undefined, inspection.label)
+    )
+    titleRow.append(title, badge(inspection.state.type, "state"))
+    header.append(breadcrumbs, titleRow)
     header.append(metadata([
       ["Path", inspection.state.path],
-      ["Parent", inspection.state.parent ?? "root"],
-      ["Children", String(inspection.state.children.length)],
-      ["Initial child", inspection.state.initial ?? "none"],
-      ["History", inspection.state.history ?? "none"]
+      ["Parent", inspection.state.parent],
+      ["Children", inspection.state.children.length > 0 ? String(inspection.state.children.length) : null],
+      ["Initial child", inspection.state.initial],
+      ["History", inspection.state.history]
     ]))
     if (inspection.state.description !== null || inspection.state.documentation !== null) {
       const annotations = createElement("div", "state-annotations")
@@ -259,91 +500,200 @@ export const renderVisualizer = (
       }
       header.append(annotations)
     }
-    inspector.append(header)
+    inspectorContent.append(header)
 
-    const transitions = createElement("section", "inspector-section")
-    transitions.append(inspectionSection("Transitions", inspection.outgoing.length))
-    if (inspection.outgoing.length === 0) {
-      transitions.append(createElement("p", "section-empty", "No transitions leave this state."))
-    } else {
-      inspection.outgoing.forEach((transition) => transitions.append(renderTransition(transition, navigateToState)))
+    if (inspection.outgoing.length > 0) {
+      const transitions = createElement("section", "inspector-section")
+      transitions.append(inspectionSection("Transitions", inspection.outgoing.length))
+      inspection.outgoing.forEach((transition) =>
+        transitions.append(renderTransition(visualization, transition, navigateToState))
+      )
+      inspectorContent.append(transitions)
     }
-    inspector.append(transitions)
-
-    const incoming = createElement("section", "inspector-section")
-    incoming.append(inspectionSection("Entered by", inspection.incoming.length))
-    if (inspection.incoming.length === 0) {
-      incoming.append(createElement("p", "section-empty", "No transitions target this state."))
-    } else {
+    if (inspection.incoming.length > 0) {
+      const incoming = createElement("section", "inspector-section")
+      incoming.append(inspectionSection("Entered by", inspection.incoming.length))
       inspection.incoming.forEach((transition) =>
-        incoming.append(renderIncomingTransition(transition, navigateToState))
+        incoming.append(renderIncomingTransition(visualization, transition, navigateToState))
       )
+      inspectorContent.append(incoming)
     }
-    inspector.append(incoming)
-
     if (inspection.activities.length > 0) {
       const activities = createElement("section", "inspector-section")
-      activities.append(inspectionSection("Activities", inspection.activities.length))
-      inspection.activities.forEach((activity) => activities.append(renderActivity(activity)))
-      inspector.append(activities)
+      activities.append(inspectionSection("Invoked", inspection.activities.length))
+      inspection.activities.forEach((activity) => activities.append(renderActivity(activity, navigateToState)))
+      inspectorContent.append(activities)
     }
   }
 
-  const renderEventInspection = (inspection: EventInspection): void => {
-    inspector.replaceChildren()
+  const renderTransitionInspection = (transition: VisualizationTransition): void => {
+    inspectorContent.replaceChildren()
+    showInspector()
     const header = createElement("header", "inspector-header")
+    const titleRow = createElement("div", "inspector-title-row")
+    const flags = createElement("div", "card-flags")
+    flags.append(badge(transition.trigger.type, "trigger"))
+    if (transition.reenter) flags.append(badge("reenter"))
+    if (transition.acceptance === "declinable") flags.append(badge("declinable"))
+    titleRow.append(createElement("h2", undefined, triggerLabel(transition)), flags)
+    header.append(titleRow)
+    header.append(metadata([
+      ["Source", transition.source],
+      ["Branches", transition.branches.length > 1 ? String(transition.branches.length) : null],
+      ["Acceptance", transition.acceptance === "declinable" ? transition.acceptance : null],
+      ["Reenter", transition.reenter ? "yes" : null]
+    ]))
+    inspectorContent.append(header)
+    if (transition.trigger.type === "event") {
+      const schema = eventSchemas.get(transition.trigger.event)
+      if (schema !== undefined) inspectorContent.append(renderInputContract("Data contract", schema, ["_tag"]))
+    }
+    if (transition.branches.length > 0) {
+      const details = createElement("section", "inspector-section")
+      details.append(inspectionSection("Branches", transition.branches.length))
+      const branches = createElement("div", "inspection-card branch-list")
+      transition.branches.forEach((branch) =>
+        branches.append(renderBranch(visualization, transition.source, branch, navigateToState))
+      )
+      details.append(branches)
+      inspectorContent.append(details)
+    }
+  }
+
+  const renderPathGroup = (label: string, paths: ReadonlyArray<string>): HTMLElement => {
+    const group = createElement("div", "trace-path-group")
+    group.append(createElement("span", "trace-label", label))
+    const values = createElement("div", "trace-paths")
+    paths.forEach((path) => values.append(stateLink(path, path, navigateToState)))
+    if (paths.length === 0) values.append(createElement("span", "section-empty", "none"))
+    group.append(values)
+    return group
+  }
+
+  const renderWalkthroughTrace = (frame: MachineWalkthrough.Frame): void => {
+    inspectorContent.replaceChildren()
+    showInspector()
+    const header = createElement("header", "inspector-header trace-header")
     const eyebrow = createElement("div", "inspector-eyebrow")
-    eyebrow.append(badge("event", "trigger"))
-    const candidate = candidateEvents().includes(inspection.event)
-    if (candidate) eyebrow.append(badge("enabled", "active"))
-    header.append(eyebrow, createElement("h2", undefined, inspection.event))
+    eyebrow.append(badge("walkthrough", "active"))
+    const title = frame.choice === null
+      ? "Initial configuration"
+      : frame.choice.title ?? triggerName(frame.choice.trigger)
+    header.append(eyebrow, createElement("h2", undefined, title))
     header.append(metadata([
-      ["Status", candidate ? "enabled" : "not enabled"],
-      ["Registrations", String(inspection.transitions.length)]
+      ["Step", String(frame.step)],
+      [
+        "Result",
+        frame.changed
+          ? `${activeTopology(frame.before.activePaths)} → ${activeTopology(frame.after.activePaths)}`
+          : "Topology unchanged"
+      ]
     ]))
-    inspector.append(header)
+    inspectorContent.append(header)
 
-    const transitions = createElement("section", "inspector-section")
-    transitions.append(inspectionSection("Transitions", inspection.transitions.length))
-    inspection.transitions.forEach((transition) =>
-      transitions.append(renderTransition(transition, navigateToState, true))
+    const topology = createElement("section", "inspector-section trace-topology")
+    topology.append(
+      inspectionSection("Topology"),
+      renderPathGroup("Before", frame.before.activePaths),
+      renderPathGroup("Exit", frame.exitPaths),
+      renderPathGroup("Entry", frame.entryPaths),
+      renderPathGroup("After", frame.after.activePaths)
     )
-    inspector.append(transitions)
+    inspectorContent.append(topology)
+
+    if (frame.choice === null) {
+      if (visualization.inputs.machine !== null) {
+        inspectorContent.append(renderInputContract("Machine input contract", visualization.inputs.machine))
+      }
+      return
+    }
+
+    const choice = frame.choice
+    const transition = transitionsById.get(choice.transitionId)
+    const branch = transition?.branches.find(({ id }) => id === choice.branchId)
+    const api = branch === undefined ? undefined : branchTargetApi(visualization, choice.source, branch)
+    const selection = createElement("section", "inspector-section")
+    selection.append(inspectionSection("Selected branch"))
+    const card = createElement("article", "inspection-card trace-card")
+    const cardHeader = createElement("div", "card-header")
+    const cardTitle = createElement("div", "card-title")
+    cardTitle.append(createElement("strong", undefined, triggerName(choice.trigger)))
+    const flags = createElement("div", "card-flags")
+    choice.decisions.forEach((decision) => flags.append(badge(decisionLabel(decision), "condition")))
+    cardHeader.append(cardTitle, flags)
+    card.append(cardHeader)
+    card.append(metadata([
+      ["Title", choice.title],
+      ["Source", stateLink(choice.source, choice.source, navigateToState)],
+      ["Target", choice.target === null ? "No target" : stateLink(choice.target, choice.target, navigateToState)],
+      ["API", api]
+    ]))
+    if (choice.updates.length > 0) card.append(renderPathGroup("Updates", choice.updates))
+    selection.append(card)
+    inspectorContent.append(selection)
+    if (choice.input !== null) inspectorContent.append(renderInputContract("Data contract", choice.input, ["_tag"]))
   }
 
   const clearRelations = (): void => {
-    for (const path of relatedPaths) {
-      nodes.get(path)?.classList.remove("is-related-source", "is-related-target", "is-related-update")
+    relatedFrom.clear()
+    relatedTo.clear()
+    incomingTransitions.clear()
+    outgoingTransitions.clear()
+  }
+
+  const markFrame = (frame: MachineWalkthrough.Frame): void => {
+    clearRelations()
+    if (frame.choice === null) return
+    relatedFrom.add(frame.choice.source)
+    outgoingTransitions.add(frame.choice.transitionId)
+    if (frame.choice.target !== null) relatedTo.add(frame.choice.target)
+  }
+
+  const chartPresentation = (): ChartPresentation => {
+    const choices = availableChoices()
+    const usable = choices.filter(({ unavailableReason }) => unavailableReason === null)
+    return {
+      simulationMode: walkthrough !== undefined,
+      activePaths: activePaths(),
+      selectedState: selectedPath ?? null,
+      selectedTransition: selectedTransition ?? null,
+      fromPaths: [...relatedFrom],
+      toPaths: [...relatedTo],
+      incomingTransitionIds: [...incomingTransitions],
+      outgoingTransitionIds: [...outgoingTransitions],
+      availableBranchIds: usable.map(({ branchId }) => branchId),
+      unavailableBranchIds: choices.filter(({ unavailableReason }) => unavailableReason !== null).map((
+        { branchId }
+      ) => branchId)
     }
-    relatedPaths.clear()
   }
 
+  const updateChartPresentation = (): void => chartView?.update(chartPresentation())
+
   const clearSelection = (): void => {
-    if (selectedPath !== undefined) {
-      nodes.get(selectedPath)?.classList.remove("is-selected")
-      rows.get(selectedPath)?.setAttribute("aria-selected", "false")
+    if (walkthrough !== undefined) {
+      closeChoicePicker()
+      return
     }
-    if (selectedEvent !== undefined) eventButtons.get(selectedEvent)?.classList.remove("is-selected")
     clearRelations()
     selectedPath = undefined
-    selectedEvent = undefined
+    selectedTransition = undefined
+    selectedFrame = undefined
     clearButton.disabled = true
-    renderEmptyInspector()
+    detailsButton.disabled = true
+    hideInspector()
+    updateChartPresentation()
   }
 
-  const markTransitions = (transitions: ReadonlyArray<VisualizationTransition>): void => {
+  const markTransitions = (
+    transitions: ReadonlyArray<VisualizationTransition>,
+    includeSource = true
+  ): void => {
     for (const transition of transitions) {
-      relatedPaths.add(transition.source)
-      nodes.get(transition.source)?.classList.add("is-related-source")
+      if (includeSource) relatedFrom.add(transition.source)
+      outgoingTransitions.add(transition.id)
       for (const branch of transition.branches) {
-        if (branch.target !== null) {
-          relatedPaths.add(branch.target)
-          nodes.get(branch.target)?.classList.add("is-related-target")
-        }
-        for (const update of branch.updates) {
-          relatedPaths.add(update)
-          nodes.get(update)?.classList.add("is-related-update")
-        }
+        if (branch.target !== null) relatedTo.add(branch.target)
       }
     }
   }
@@ -351,137 +701,269 @@ export const renderVisualizer = (
   const markRelatedStates = (inspection: StateInspection): void => {
     clearRelations()
     for (const incoming of inspection.incoming) {
-      relatedPaths.add(incoming.transition.source)
-      nodes.get(incoming.transition.source)?.classList.add("is-related-source")
-    }
-    markTransitions(inspection.outgoing)
-  }
-
-  const expandAncestors = (inspection: StateInspection): void => {
-    for (const ancestor of inspection.breadcrumbs.slice(0, -1)) {
-      const row = rows.get(ancestor.path)
-      const children = nodes.get(ancestor.path)?.querySelector<HTMLElement>(":scope > .topology-children")
-      if (row === undefined || children === null || children === undefined) continue
-      row.setAttribute("aria-expanded", "true")
-      children.hidden = false
-      const disclosure = row.querySelector<HTMLElement>(".state-disclosure")
-      if (disclosure !== null) disclosure.textContent = "▾"
+      relatedFrom.add(incoming.transition.source)
+      incomingTransitions.add(incoming.transition.id)
     }
+    markTransitions(inspection.outgoing, false)
   }
 
   const selectState = (path: string, focus: boolean): void => {
+    if (walkthrough !== undefined) return
     const inspection = model.inspectState(path)
     if (inspection === undefined) return
-    expandAncestors(inspection)
-    if (selectedPath !== undefined) {
-      nodes.get(selectedPath)?.classList.remove("is-selected")
-      rows.get(selectedPath)?.setAttribute("aria-selected", "false")
-    }
-    if (selectedEvent !== undefined) eventButtons.get(selectedEvent)?.classList.remove("is-selected")
     selectedPath = path
-    selectedEvent = undefined
-    nodes.get(path)?.classList.add("is-selected")
-    rows.get(path)?.setAttribute("aria-selected", "true")
+    selectedTransition = undefined
+    selectedFrame = undefined
     markRelatedStates(inspection)
     clearButton.disabled = false
-    renderInspection(inspection)
-    if (focus) {
-      rows.get(path)?.focus({ preventScroll: true })
-      rows.get(path)?.scrollIntoView({ block: "nearest" })
-    }
+    detailsButton.disabled = false
+    if (!inspector.hidden) renderInspection(inspection)
+    updateChartPresentation()
+    if (focus) chartView?.focusState(path)
   }
 
   function navigateToState(path: string): void {
     selectState(path, true)
   }
 
-  const selectEvent = (event: string): void => {
-    const inspection = model.inspectEvent(event)
-    if (selectedPath !== undefined) {
-      nodes.get(selectedPath)?.classList.remove("is-selected")
-      rows.get(selectedPath)?.setAttribute("aria-selected", "false")
-    }
-    if (selectedEvent !== undefined) eventButtons.get(selectedEvent)?.classList.remove("is-selected")
+  const selectTransition = (transitionId: string): void => {
+    if (walkthrough !== undefined) return
+    const transition = transitionsById.get(transitionId)
+    if (transition === undefined) return
     selectedPath = undefined
-    selectedEvent = event
-    eventButtons.get(event)?.classList.add("is-selected")
+    selectedTransition = transitionId
+    selectedFrame = undefined
     clearRelations()
-    markTransitions(inspection.transitions)
+    markTransitions([transition])
     clearButton.disabled = false
-    renderEventInspection(inspection)
-  }
-
-  const setExpanded = (row: HTMLElement, expanded: boolean): void => {
-    const node = row.closest<HTMLElement>(".topology-node")
-    const children = node?.querySelector<HTMLElement>(":scope > .topology-children")
-    if (children === null || children === undefined) return
-    row.setAttribute("aria-expanded", String(expanded))
-    children.hidden = !expanded
-    const disclosure = row.querySelector<HTMLElement>(".state-disclosure")
-    if (disclosure !== null) disclosure.textContent = expanded ? "▾" : "▸"
-  }
-
-  const renderNode = (node: TopologyNode, depth: number): HTMLElement => {
-    const container = createElement("div", "topology-node")
-    container.dataset.statePath = node.path
-    nodes.set(node.path, container)
-
-    const row = createElement("button", "state-row")
-    row.type = "button"
-    row.tabIndex = -1
-    row.setAttribute("role", "treeitem")
-    row.setAttribute("aria-level", String(depth + 1))
-    row.setAttribute("aria-selected", "false")
-    row.style.setProperty("--depth", String(depth))
-    row.dataset.statePath = node.path
-    rows.set(node.path, row)
-
-    const disclosure = createElement("span", "state-disclosure", node.children.length === 0 ? "" : "▾")
-    const status = createElement("span", `state-status${node.active ? " is-active" : ""}`)
-    status.setAttribute("aria-label", node.active ? "active" : "inactive")
-    statuses.set(node.path, status)
-    const label = createElement("span", "state-label", node.label)
-    const markers = createElement("span", "state-markers")
-    if (node.initial) markers.append(badge("initial", "initial"))
-    if (node.type !== "atomic") markers.append(badge(node.type, "state"))
-    if (node.transitionCount > 0) markers.append(badge(`${node.transitionCount}t`, "count"))
-    if (node.activityCount > 0) markers.append(badge(`${node.activityCount}a`, "count"))
-    row.append(disclosure, status, label, markers)
-    container.append(row)
-    row.addEventListener("focus", () => {
-      rows.forEach((candidate) => candidate.tabIndex = candidate === row ? 0 : -1)
-    })
+    detailsButton.disabled = false
+    if (!inspector.hidden) renderTransitionInspection(transition)
+    updateChartPresentation()
+  }
 
-    if (node.children.length > 0) {
-      const children = createElement("div", "topology-children")
-      children.setAttribute("role", "group")
-      node.children.forEach((child) => children.append(renderNode(child, depth + 1)))
-      container.append(children)
-      row.setAttribute("aria-expanded", "true")
-      row.addEventListener("click", () => {
-        const expanded = row.getAttribute("aria-expanded") === "true"
-        setExpanded(row, !expanded)
-        selectState(node.path, false)
-      })
+  const openStateDetails = (path: string): void => {
+    if (walkthrough !== undefined) return
+    selectState(path, false)
+    const inspection = model.inspectState(path)
+    if (inspection !== undefined) renderInspection(inspection)
+  }
+
+  const openTransitionDetails = (transitionId: string): void => {
+    if (walkthrough !== undefined) return
+    selectTransition(transitionId)
+    const transition = transitionsById.get(transitionId)
+    if (transition !== undefined) renderTransitionInspection(transition)
+  }
+
+  const walkthroughDock = createElement("section", "walkthrough-dock")
+  walkthroughDock.hidden = true
+  const walkthroughHeading = createElement("div", "walkthrough-heading")
+  const walkthroughIdentity = createElement("div", "walkthrough-identity")
+  const walkthroughHint = createElement("span", "walkthrough-hint")
+  const walkthroughStatus = createElement("span", "walkthrough-status")
+  const walkthroughTimeline = createElement("div", "walkthrough-timeline")
+  walkthroughTimeline.setAttribute("aria-label", "Simulation timeline")
+  walkthroughIdentity.append(createElement("strong", undefined, "Simulation"), walkthroughHint)
+  walkthroughHeading.append(walkthroughIdentity, walkthroughStatus)
+  walkthroughDock.append(walkthroughHeading, walkthroughTimeline)
+
+  const selectFrame = (frame: MachineWalkthrough.Frame): void => {
+    selectedPath = undefined
+    selectedTransition = undefined
+    selectedFrame = frame
+    markFrame(frame)
+    clearButton.disabled = false
+    detailsButton.disabled = false
+  }
+
+  const choiceRoute = (choice: MachineWalkthrough.Choice): string =>
+    `${choice.source} → ${choice.target ?? "no target"}`
+
+  const takeChoice = (choice: MachineWalkthrough.Choice): void => {
+    if (walkthrough === undefined || choice.unavailableReason !== null) return
+    const result = MachineWalkthrough.take(walkthrough, choice.id)
+    if (Result.isFailure(result)) return
+    walkthrough = result.success
+    selectFrame(MachineWalkthrough.current(walkthrough))
+    closeChoicePicker()
+    updateWalkthroughUi()
+    chartView?.revealStates(activePaths())
+  }
+
+  const renderPickerChoice = (choice: MachineWalkthrough.Choice): HTMLButtonElement => {
+    const button = createElement(
+      "button",
+      `transition-picker-choice${choice.unavailableReason === null ? "" : " is-unavailable"}`
+    )
+    button.type = "button"
+    button.disabled = choice.unavailableReason !== null
+    const main = createElement("span", "transition-picker-choice-main")
+    main.append(createElement("strong", undefined, triggerName(choice.trigger)))
+    if (choice.title !== null) main.append(createElement("span", "transition-picker-choice-title", choice.title))
+    button.append(main, createElement("span", "transition-picker-choice-route", choiceRoute(choice)))
+    const contract = contractSummary(choice.input)
+    if (contract !== null) button.append(createElement("span", "transition-picker-choice-contract", contract))
+    if (choice.decisions.length > 0) {
+      button.append(createElement(
+        "span",
+        "transition-picker-choice-decision",
+        choice.decisions.map(decisionLabel).join(" · ")
+      ))
+    }
+    if (choice.unavailableReason !== null) {
+      button.title = unavailableLabel(choice.unavailableReason)
+      button.append(createElement(
+        "span",
+        "transition-picker-choice-unavailable",
+        unavailableLabel(choice.unavailableReason)
+      ))
     } else {
-      row.addEventListener("click", () => selectState(node.path, false))
+      button.title = choiceRoute(choice)
+      button.addEventListener("click", () => takeChoice(choice))
+    }
+    return button
+  }
+
+  const showChoicePicker = (
+    title: string,
+    choices: ReadonlyArray<MachineWalkthrough.Choice>,
+    anchor: ChartInteractionAnchor
+  ): void => {
+    if (choices.length === 1 && choices[0]?.unavailableReason === null) {
+      takeChoice(choices[0])
+      return
+    }
+    if (choices.length === 0) {
+      closeChoicePicker()
+      return
+    }
+    choicePickerTitle.textContent = title
+    choicePickerContent.replaceChildren(...choices.map(renderPickerChoice))
+    choicePicker.style.left = `${anchor.x + 12}px`
+    choicePicker.style.top = `${anchor.y + 12}px`
+    choicePicker.hidden = false
+    requestAnimationFrame(() => {
+      const bounds = choicePicker.getBoundingClientRect()
+      choicePicker.style.left = `${Math.max(10, Math.min(anchor.x + 12, window.innerWidth - bounds.width - 10))}px`
+      choicePicker.style.top = `${Math.max(58, Math.min(anchor.y + 12, window.innerHeight - bounds.height - 10))}px`
+    })
+  }
+
+  const handleStateClick = (path: string, _anchor: ChartInteractionAnchor): void => {
+    if (walkthrough === undefined) {
+      selectState(path, false)
+      return
+    }
+    closeChoicePicker()
+  }
+
+  const handleTransitionClick = (
+    transitionId: string,
+    branchIds: ReadonlyArray<string>,
+    anchor: ChartInteractionAnchor
+  ): void => {
+    if (walkthrough === undefined) {
+      selectTransition(transitionId)
+      return
     }
-    return container
+    const transition = transitionsById.get(transitionId)
+    if (transition === undefined) return
+    showChoicePicker(
+      triggerLabel(transition),
+      MachineWalkthrough.choices(walkthrough).filter((choice) => branchIds.includes(choice.branchId)),
+      anchor
+    )
   }
 
-  const setAllExpanded = (expanded: boolean): void => {
-    treePanel.querySelectorAll<HTMLElement>(".state-row[aria-expanded]").forEach((row) => {
-      setExpanded(row, expanded)
+  const renderWalkthroughDock = (): void => {
+    walkthroughDock.hidden = walkthrough === undefined
+    chartPanel.classList.toggle("has-walkthrough", walkthrough !== undefined)
+    if (walkthrough === undefined) {
+      walkthroughTimeline.replaceChildren()
+      return
+    }
+    const cursor = MachineWalkthrough.cursor(walkthrough)
+    const timeline = MachineWalkthrough.timeline(walkthrough)
+    const choices = MachineWalkthrough.choices(walkthrough)
+    walkthroughStatus.textContent = `Step ${cursor} · ${activeTopology(activePaths())}`
+    walkthroughHint.textContent = choices.length === 0
+      ? "No outgoing transitions"
+      : "Click a highlighted transition to advance"
+    walkthroughTimeline.replaceChildren()
+    timeline.forEach((frame) => {
+      const label = frame.choice === null ? "Initial" : frame.choice.title ?? triggerName(frame.choice.trigger)
+      const button = createElement(
+        "button",
+        `walkthrough-step${frame.step === cursor ? " is-current" : ""}`,
+        `${frame.step} · ${label}`
+      )
+      button.type = "button"
+      button.addEventListener("click", () => {
+        if (walkthrough === undefined) return
+        const result = MachineWalkthrough.seek(walkthrough, frame.step)
+        if (Result.isFailure(result)) return
+        walkthrough = result.success
+        selectFrame(MachineWalkthrough.current(walkthrough))
+        closeChoicePicker()
+        updateWalkthroughUi()
+        chartView?.revealStates(activePaths())
+      })
+      walkthroughTimeline.append(button)
     })
   }
 
   clearButton.addEventListener("click", clearSelection)
-  expandButton.addEventListener("click", () => setAllExpanded(true))
-  collapseButton.addEventListener("click", () => setAllExpanded(false))
-  revealActiveButton.addEventListener("click", () => {
-    const deepest = [...activePaths()].sort((left, right) => right.split(".").length - left.split(".").length)[0]
-    if (deepest !== undefined) navigateToState(deepest)
+  inspectorClose.addEventListener("click", hideInspector)
+  choicePickerClose.addEventListener("click", closeChoicePicker)
+  detailsButton.addEventListener("click", () => {
+    if (!inspector.hidden) {
+      hideInspector()
+    } else if (selectedFrame !== undefined) {
+      renderWalkthroughTrace(selectedFrame)
+    } else if (selectedPath !== undefined) {
+      const inspection = model.inspectState(selectedPath)
+      if (inspection !== undefined) renderInspection(inspection)
+    } else if (selectedTransition !== undefined) {
+      const transition = transitionsById.get(selectedTransition)
+      if (transition !== undefined) renderTransitionInspection(transition)
+    }
   })
+  revealActiveButton.addEventListener("click", () => chartView?.revealStates(activePaths()))
+
+  const zoomOutButton = createElement("button", "toolbar-button zoom-button", "−")
+  zoomOutButton.type = "button"
+  zoomOutButton.setAttribute("aria-label", "Zoom out")
+  const zoomResetButton = createElement("button", "toolbar-button zoom-value", "100%")
+  zoomResetButton.type = "button"
+  zoomResetButton.setAttribute("aria-label", "Reset zoom")
+  const zoomInButton = createElement("button", "toolbar-button zoom-button", "+")
+  zoomInButton.type = "button"
+  zoomInButton.setAttribute("aria-label", "Zoom in")
+  const zoomFitButton = createElement("button", "toolbar-button zoom-button", "Fit")
+  zoomFitButton.type = "button"
+  zoomFitButton.setAttribute("aria-label", "Fit chart")
+  const zoomButtons = [zoomOutButton, zoomResetButton, zoomInButton, zoomFitButton]
+  zoomButtons.forEach((button) => button.disabled = true)
+
+  const updateZoomControls = (): void => {
+    const zoom = chartView?.getZoom()
+    zoomResetButton.textContent = `${Math.round((zoom ?? 1) * 100)}%`
+    zoomOutButton.disabled = zoom === undefined || zoom <= minimumChartZoom
+    zoomResetButton.disabled = zoom === undefined || zoom === 1
+    zoomInButton.disabled = zoom === undefined || zoom >= maximumChartZoom
+    zoomFitButton.disabled = zoom === undefined
+  }
+
+  const changeZoom = (next: (view: ChartView) => number): void => {
+    if (chartView === undefined) return
+    next(chartView)
+    updateZoomControls()
+  }
+
+  zoomOutButton.addEventListener("click", () => changeZoom((view) => view.setZoom(view.getZoom() - 0.1)))
+  zoomResetButton.addEventListener("click", () => changeZoom((view) => view.setZoom(1)))
+  zoomInButton.addEventListener("click", () => changeZoom((view) => view.setZoom(view.getZoom() + 0.1)))
+  zoomFitButton.addEventListener("click", () => changeZoom((view) => view.fit()))
 
   const toolbar = createElement("div", "toolbar")
   const runtime = createElement("div", "runtime-summary")
@@ -489,154 +971,69 @@ export const renderVisualizer = (
   const runtimeText = createElement("span")
   runtime.append(runtimeDot, runtimeText)
   const toolbarActions = createElement("div", "toolbar-actions")
-  toolbarActions.append(clearButton, simulationButton, revealActiveButton, expandButton, collapseButton)
+  toolbarActions.append(clearButton, detailsButton, walkthroughButton, revealActiveButton)
+  const zoomControls = createElement("div", "zoom-controls")
+  zoomControls.setAttribute("role", "group")
+  zoomControls.setAttribute("aria-label", "Chart zoom")
+  zoomControls.append(zoomOutButton, zoomResetButton, zoomInButton, zoomFitButton)
   toolbar.append(runtime, toolbarActions)
-  const tree = createElement("div", "topology-tree")
-  tree.setAttribute("role", "tree")
-  tree.setAttribute("aria-label", `${model.machineId} states`)
-  tree.append(createElement("div", "machine-id", model.machineId))
-  const events = createElement("div", "enabled-events")
-  const simulationFeedback = createElement("div", "simulation-feedback")
-  simulationFeedback.setAttribute("role", "status")
-  tree.append(events, simulationFeedback)
-
-  const renderEventButtons = (): void => {
-    events.replaceChildren(createElement("span", "enabled-events-label", "Enabled"))
-    eventButtons.clear()
-    const candidates = candidateEvents()
-    if (candidates.length === 0) {
-      events.append(createElement("span", "enabled-events-empty", "none"))
-      return
-    }
-    candidates.forEach((event) => {
-      const button = createElement("button", `event-button${event === selectedEvent ? " is-selected" : ""}`, event)
-      button.type = "button"
-      button.addEventListener("click", () => {
-        if (simulation !== undefined) {
-          const result = MachineSimulator.send(simulation, event)
-          if (result._tag === "Applied") simulation = { document: visualization, snapshot: result.session }
-          simulationFeedback.textContent = simulationResultMessage(result)
-          simulationFeedback.dataset.status = result._tag.toLowerCase()
-          updateSimulationUi()
-        }
-        selectEvent(event)
-      })
-      eventButtons.set(event, button)
-      events.append(button)
-    })
-  }
+  const chart = createElement("div", "topology-chart")
+  chart.setAttribute("role", "region")
+  chart.setAttribute("aria-label", `${model.machineId} states`)
+  const chartHost = createElement("div", "chart-host")
+  chartHost.append(createElement("div", "chart-loading", "Computing layout…"))
+  chart.append(chartHost)
 
-  const updateSimulationUi = (): void => {
+  const updateWalkthroughUi = (): void => {
     const active = new Set(activePaths())
-    statuses.forEach((status, path) => {
-      const isActive = active.has(path)
-      status.classList.toggle("is-active", isActive)
-      status.setAttribute("aria-label", isActive ? "active" : "inactive")
-    })
-    const hasRuntimeState = simulation !== undefined || model.hasSnapshot
+    const simulating = walkthrough !== undefined
+    updateChartPresentation()
+    const hasRuntimeState = simulating || model.hasSnapshot
     runtimeDot.classList.toggle("has-snapshot", hasRuntimeState)
-    runtimeText.textContent = simulation !== undefined
-      ? `${active.size} active · step ${simulation.snapshot.step}`
+    runtimeText.textContent = walkthrough !== undefined
+      ? `Simulation · ${active.size} active · step ${MachineWalkthrough.cursor(walkthrough)}`
       : diagnostics.length > 0
       ? "Partial"
       : model.hasSnapshot
       ? `${active.size} active`
       : "Structure only"
-    simulationButton.textContent = simulation === undefined ? "Start simulation" : "Reset simulation"
+    walkthroughButton.textContent = simulating ? "Exit simulation" : "Start simulation"
+    walkthroughButton.disabled = model.roots.length === 0
     revealActiveButton.disabled = active.size === 0
-    events.hidden = !hasRuntimeState
-    simulationFeedback.hidden = simulation === undefined
-    renderEventButtons()
-    if (selectedPath !== undefined) {
-      const inspection = model.inspectState(selectedPath)
-      if (inspection !== undefined) renderInspection(inspection)
-    } else if (selectedEvent !== undefined) {
-      renderEventInspection(model.inspectEvent(selectedEvent))
+    clearButton.hidden = simulating
+    detailsButton.hidden = simulating
+    chartPanel.classList.toggle("is-simulating", simulating)
+    if (simulating) hideInspector()
+    renderWalkthroughDock()
+    if (!simulating && !inspector.hidden) {
+      if (selectedFrame !== undefined) {
+        renderWalkthroughTrace(selectedFrame)
+      } else if (selectedPath !== undefined) {
+        const inspection = model.inspectState(selectedPath)
+        if (inspection !== undefined) renderInspection(inspection)
+      } else if (selectedTransition !== undefined) {
+        const transition = transitionsById.get(selectedTransition)
+        if (transition !== undefined) renderTransitionInspection(transition)
+      }
     }
   }
 
-  simulationButton.addEventListener("click", () => {
-    if (simulation === undefined) {
-      simulation = MachineSimulator.start(visualization)
-      simulationFeedback.textContent = "Best-effort simulation started · user code will not run"
-      simulationFeedback.dataset.status = "applied"
+  walkthroughButton.addEventListener("click", () => {
+    if (walkthrough === undefined) {
+      walkthrough = MachineWalkthrough.start(visualization)
+      selectFrame(MachineWalkthrough.current(walkthrough))
+      hideInspector()
+      closeChoicePicker()
+      requestAnimationFrame(() => chartView?.revealStates(activePaths()))
     } else {
-      simulation = undefined
-      simulationFeedback.textContent = ""
-      delete simulationFeedback.dataset.status
+      walkthrough = undefined
+      closeChoicePicker()
+      clearSelection()
     }
-    updateSimulationUi()
+    updateWalkthroughUi()
   })
-  if (model.roots.length === 0) {
-    const empty = createElement("div", "topology-empty")
-    empty.append(
-      createElement("strong", undefined, "No states yet"),
-      createElement("span", undefined, "The topology will appear as the machine definition becomes available.")
-    )
-    tree.append(empty)
-  } else {
-    model.roots.forEach((node) => tree.append(renderNode(node, 0)))
-  }
-  updateSimulationUi()
-  rows.values().next().value?.setAttribute("tabindex", "0")
-  tree.addEventListener("keydown", (event) => {
-    const current = event.target instanceof HTMLElement ? event.target.closest<HTMLElement>(".state-row") : null
-    if (current === null) return
-    const visible = [...rows.values()].filter((row) => row.getClientRects().length > 0)
-    const index = visible.indexOf(current)
-    const focus = (row: HTMLElement | undefined): void => {
-      if (row === undefined) return
-      event.preventDefault()
-      row.focus()
-    }
-    switch (event.key) {
-      case "ArrowDown":
-        focus(visible[index + 1])
-        break
-      case "ArrowUp":
-        focus(visible[index - 1])
-        break
-      case "Home":
-        focus(visible[0])
-        break
-      case "End":
-        focus(visible.at(-1))
-        break
-      case "ArrowRight": {
-        if (current.getAttribute("aria-expanded") === "false") {
-          event.preventDefault()
-          setExpanded(current, true)
-        } else {
-          const child = current.closest<HTMLElement>(".topology-node")
-            ?.querySelector<HTMLElement>(":scope > .topology-children > .topology-node > .state-row")
-          focus(child ?? undefined)
-        }
-        break
-      }
-      case "ArrowLeft": {
-        if (current.getAttribute("aria-expanded") === "true") {
-          event.preventDefault()
-          setExpanded(current, false)
-        } else {
-          const parent = current.closest<HTMLElement>(".topology-children")
-            ?.closest<HTMLElement>(".topology-node")
-            ?.querySelector<HTMLElement>(":scope > .state-row")
-          focus(parent ?? undefined)
-        }
-        break
-      }
-      case "Enter":
-      case " ":
-        event.preventDefault()
-        current.click()
-        break
-      case "Escape":
-        event.preventDefault()
-        clearSelection()
-        break
-    }
-  })
-  treePanel.append(toolbar)
+
+  chartPanel.append(toolbar)
   if (diagnostics.length > 0) {
     const diagnosticList = createElement("div", "diagnostics")
     diagnosticList.setAttribute("role", "status")
@@ -648,12 +1045,44 @@ export const renderVisualizer = (
       }
       diagnosticList.append(item)
     })
-    treePanel.append(diagnosticList)
+    chartPanel.append(diagnosticList)
   }
-  treePanel.append(tree)
-
-  renderEmptyInspector()
-  workspace.append(treePanel, inspector)
+  chartPanel.append(chart, walkthroughDock, zoomControls)
+  hideInspector()
+  workspace.append(chartPanel, inspector, choicePicker)
   shell.append(workspace)
   root.replaceChildren(shell)
+
+  if (model.roots.length === 0) {
+    const empty = createElement("div", "topology-empty")
+    empty.append(
+      createElement("strong", undefined, "No states yet"),
+      createElement("span", undefined, "The topology will appear as the machine definition becomes available.")
+    )
+    chartHost.replaceChildren(empty)
+  } else {
+    void Effect.runPromise(renderChart(chartHost, visualization, {
+      selectState: handleStateClick,
+      openStateDetails,
+      selectTransition: handleTransitionClick,
+      openTransitionDetails,
+      clearSelection,
+      zoomChanged: updateZoomControls
+    })).then(
+      (view) => {
+        chartView = view
+        updateChartPresentation()
+        updateZoomControls()
+      },
+      (cause) => {
+        const failure = createElement("div", "chart-layout-error")
+        failure.append(
+          createElement("strong", undefined, "The chart could not be laid out"),
+          createElement("span", undefined, cause instanceof Error ? cause.message : String(cause))
+        )
+        chartHost.replaceChildren(failure)
+      }
+    )
+  }
+  updateWalkthroughUi()
 }