diff --git a/libs/@hashintel/petrinaut/src/ui/views/Notebook/graph-explorer.tsx b/libs/@hashintel/petrinaut/src/ui/views/Notebook/graph-explorer.tsx
index e2420532b27..6de4fa9830b 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Notebook/graph-explorer.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Notebook/graph-explorer.tsx
@@ -9,6 +9,8 @@ import { CELL_KIND_ICONS, CELL_KIND_LABELS } from "./cell-kinds";
 import { NetGraphView } from "./net-graph";
 
 import type { FocusGrid } from "../../worksheet/use-focus-grid";
+import type { CycleGroup } from "./net-cycles";
+import type { InitialPlaceGroup } from "./net-siphons";
 import type { CellConnections, NetGraph, NodeRef } from "./notebook-model";
 
 const containerStyle = css({
@@ -34,6 +36,12 @@ const headerActionsStyle = css({
   gap: "1",
 });
 
+const cycleSummaryStyle = css({
+  fontSize: "xs",
+  color: "neutral.fg.subtle",
+  whiteSpace: "nowrap",
+});
+
 /** The graph takes every pixel the lists below don't claim. */
 const graphPaneStyle = css({
   flex: "[1]",
@@ -248,6 +256,9 @@ export type ExplorerGraph = {
   dependencyIds: ReadonlySet<string>;
   dependentIds: ReadonlySet<string>;
   placeColors: ReadonlyMap<string, string>;
+  cycleByNode: ReadonlyMap<string, CycleGroup>;
+  initialByPlace: ReadonlyMap<string, InitialPlaceGroup>;
+  hoveredCycleKey: string | null;
   /** Set to re-layer the diagram around this node. */
   focusId: string | null;
 };
@@ -260,6 +271,9 @@ export interface GraphExplorerProps {
   /** Id of the selected cell — keys the connection lists' focus memory. */
   selectedCellId: string | null;
   selectedName: string | null;
+  /** Every cycle in the net, for the summary in the header. */
+  cycleGroups: CycleGroup[];
+  onHoverCycle: (cycleKey: string | null) => void;
   isFocusMode: boolean;
   /** Focus mode needs a place or transition selected to have something to centre. */
   canFocus: boolean;
@@ -280,6 +294,8 @@ export const GraphExplorer: React.FC<GraphExplorerProps> = ({
   connections,
   selectedCellId,
   selectedName,
+  cycleGroups,
+  onHoverCycle,
   isFocusMode,
   canFocus,
   onToggleFocus,
@@ -287,12 +303,30 @@ export const GraphExplorer: React.FC<GraphExplorerProps> = ({
 }) => {
   // How much of the pane the lists claim; the graph fills whatever is left.
   const [listsHeight, setListsHeight] = useState(DEFAULT_LISTS_HEIGHT);
+  const initialPlaceCount = graph.initialByPlace.size;
 
   return (
     <div className={containerStyle}>
       <div className={headerStyle}>
         <span className={titleStyle}>Graph explorer</span>
         <div className={headerActionsStyle}>
+          {cycleGroups.length > 0 && (
+            <span
+              className={cycleSummaryStyle}
+              title="Nodes in a cycle carry a matching ↻ badge — hover one to light the whole cycle up"
+            >
+              ↻ {cycleGroups.length}{" "}
+              {cycleGroups.length === 1 ? "cycle" : "cycles"}
+            </span>
+          )}
+          {initialPlaceCount > 0 && (
+            <span
+              className={cycleSummaryStyle}
+              title="Places that must hold tokens in the initial state carry a hollow token"
+            >
+              ○ {initialPlaceCount} initial
+            </span>
+          )}
           <Button
             size="xs"
             variant={isFocusMode ? "solid" : "ghost"}
@@ -318,7 +352,11 @@ export const GraphExplorer: React.FC<GraphExplorerProps> = ({
           dependencyIds={graph.dependencyIds}
           dependentIds={graph.dependentIds}
           placeColors={graph.placeColors}
+          cycleByNode={graph.cycleByNode}
+          initialByPlace={graph.initialByPlace}
+          hoveredCycleKey={graph.hoveredCycleKey}
           focusId={graph.focusId}
+          onHoverCycle={onHoverCycle}
           onNavigate={(node) =>
             onNavigate({ type: node.kind, id: node.id, name: node.name })
           }
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Notebook/net-graph.tsx b/libs/@hashintel/petrinaut/src/ui/views/Notebook/net-graph.tsx
index b55f26d4f3d..6a57f53b8f2 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Notebook/net-graph.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Notebook/net-graph.tsx
@@ -3,6 +3,7 @@ import { use, useId } from "react";
 import { css, cva } from "@hashintel/ds-helpers/css";
 
 import { UserSettingsContext } from "../../../react/state/user-settings-context";
+import { cycleTint } from "./net-cycles";
 import { useNetGraphTransition } from "./net-graph-animation";
 import {
   edgePath,
@@ -11,7 +12,9 @@ import {
   NET_NODE_WIDTH,
 } from "./net-graph-layout";
 
+import type { CycleGroup } from "./net-cycles";
 import type { PositionedNetNode } from "./net-graph-layout";
+import type { InitialPlaceGroup } from "./net-siphons";
 import type { NetGraph, NetGraphNode } from "./notebook-model";
 
 /** Fills the pane it is given; the diagram scrolls inside when it overflows. */
@@ -54,6 +57,57 @@ const shapeStyle = cva({
   },
 });
 
+/** Dashed ring outside the node, so it never fights the role fill/stroke. */
+const cycleRingStyle = cva({
+  base: {
+    fill: "[none]",
+    strokeDasharray: "[3 2]",
+    pointerEvents: "none",
+  },
+  variants: {
+    tint: {
+      pink: { stroke: "pink.s80" },
+      green: { stroke: "green.s80" },
+      yellow: { stroke: "yellow.s80" },
+    },
+    isHovered: {
+      true: { strokeWidth: "[2]", strokeDasharray: "[none]" },
+      false: { strokeWidth: "[1.25]" },
+    },
+  },
+});
+
+const cycleEdgeStyle = cva({
+  base: { fill: "[none]", strokeWidth: "[2]" },
+  variants: {
+    tint: {
+      pink: { stroke: "pink.s80" },
+      green: { stroke: "green.s80" },
+      yellow: { stroke: "yellow.s80" },
+    },
+  },
+});
+
+/**
+ * A hollow token drawn inside the node: this place has to hold tokens in the
+ * initial state. Sits on the right, clear of the label and of the token-type
+ * dot on the left, and inside the shape so it can never collide with a
+ * neighbouring node or with the cycle ring outside.
+ */
+const initialMarkerStyle = cva({
+  base: {
+    fill: "[none]",
+    stroke: "blue.s90",
+    strokeWidth: "[1.5]",
+  },
+  variants: {
+    isMuted: {
+      true: { opacity: "[0.35]" },
+      false: {},
+    },
+  },
+});
+
 const nodeGroupStyle = css({
   cursor: "pointer",
   _hover: { "& [data-shape]": { filter: "[brightness(0.96)]" } },
@@ -134,6 +188,8 @@ const markerId = (instanceId: string, role: EdgeRole) =>
   `${instanceId}-net-graph-arrow-${role}`;
 
 const MAX_LABEL_CHARS = 13;
+/** Characters given up to make room for the initial-state token on the right. */
+const MARKER_LABEL_COST = 2;
 
 const truncate = (name: string, maxChars: number): string =>
   name.length > maxChars ? `${name.slice(0, maxChars - 1)}…` : name;
@@ -152,8 +208,15 @@ export interface NetGraphViewProps {
   dependentIds: ReadonlySet<string>;
   /** Token-type display colour per place id, shown as a dot on the node. */
   placeColors: ReadonlyMap<string, string>;
+  /** Which cycle each node belongs to, if any. */
+  cycleByNode: ReadonlyMap<string, CycleGroup>;
+  /** Places the initial state has to seed, keyed by place id. */
+  initialByPlace: ReadonlyMap<string, InitialPlaceGroup>;
+  /** The cycle currently hovered anywhere in the view. */
+  hoveredCycleKey: string | null;
   /** Re-layer the diagram around this node instead of by longest path. */
   focusId: string | null;
+  onHoverCycle: (cycleKey: string | null) => void;
   onNavigate: (node: NetGraphNode) => void;
 }
 
@@ -164,7 +227,8 @@ export interface NetGraphViewProps {
  * dependents are highlighted and the rest of the net recedes — a neighbour
  * that is both, forming a cycle through the selection, gets its own colour.
  * With nothing selected the graph is drawn plainly, rooted at the nodes that
- * have no incoming arcs.
+ * have no incoming arcs. Places the initial state has to seed carry a hollow
+ * token, and nodes caught in a cycle a dashed ring.
  */
 export const NetGraphView: React.FC<NetGraphViewProps> = ({
   graph,
@@ -172,7 +236,11 @@ export const NetGraphView: React.FC<NetGraphViewProps> = ({
   dependencyIds,
   dependentIds,
   placeColors,
+  cycleByNode,
+  initialByPlace,
+  hoveredCycleKey,
   focusId,
+  onHoverCycle,
   onNavigate,
 }) => {
   const instanceId = useId();
@@ -264,9 +332,19 @@ export const NetGraphView: React.FC<NetGraphViewProps> = ({
               return null;
             }
             const role = edgeRole(edge.from, edge.to);
+            const fromCycle = cycleByNode.get(edge.from);
+            const toCycle = cycleByNode.get(edge.to);
+            // An edge inside the hovered cycle takes that cycle's colour, so
+            // the loop reads as one closed circuit.
+            const loop =
+              hoveredCycleKey !== null &&
+              fromCycle?.key === hoveredCycleKey &&
+              toCycle?.key === hoveredCycleKey
+                ? fromCycle
+                : undefined;
             const path = edgePath(from, to, edge.isBackEdge);
 
-            return (
+            return loop === undefined ? (
               <path
                 key={edge.key}
                 ref={edgeRef(edge.key)}
@@ -274,12 +352,22 @@ export const NetGraphView: React.FC<NetGraphViewProps> = ({
                 className={edgeStyle({ role, isBackEdge: edge.isBackEdge })}
                 markerEnd={`url(#${markerId(instanceId, role)})`}
               />
+            ) : (
+              <path
+                key={edge.key}
+                ref={edgeRef(edge.key)}
+                d={path}
+                className={cycleEdgeStyle({ tint: cycleTint(loop) })}
+                markerEnd={`url(#${markerId(instanceId, role)})`}
+              />
             );
           })}
 
           {layout.nodes.map((node) => {
             const role = nodeRole(node);
             const placeColor = placeColors.get(node.id);
+            const cycle = cycleByNode.get(node.id);
+            const initialGroup = initialByPlace.get(node.id);
 
             return (
               // Outer group: animation offset only, written straight to the
@@ -287,6 +375,14 @@ export const NetGraphView: React.FC<NetGraphViewProps> = ({
               <g key={node.id} ref={nodeRef(node.id)}>
                 <g
                   className={nodeGroupStyle}
+                  onMouseEnter={
+                    cycle === undefined
+                      ? undefined
+                      : () => onHoverCycle(cycle.key)
+                  }
+                  onMouseLeave={
+                    cycle === undefined ? undefined : () => onHoverCycle(null)
+                  }
                   role="button"
                   // Out of the tab order: the explorer's list rows are the
                   // keyboard path to these nodes, matching the worksheet's
@@ -302,7 +398,30 @@ export const NetGraphView: React.FC<NetGraphViewProps> = ({
                     }
                   }}
                 >
-                  <title>{node.name}</title>
+                  <title>
+                    {[
+                      node.name,
+                      cycle === undefined ? null : `in cycle ${cycle.label}`,
+                      initialGroup === undefined
+                        ? null
+                        : "must hold tokens in the initial state",
+                    ]
+                      .filter((part) => part !== null)
+                      .join(" — ")}
+                  </title>
+                  {cycle !== undefined && (
+                    <rect
+                      x={node.x - 3}
+                      y={node.y - 3}
+                      width={NET_NODE_WIDTH + 6}
+                      height={NET_NODE_HEIGHT + 6}
+                      rx={cornerRadius(node) + 3}
+                      className={cycleRingStyle({
+                        tint: cycleTint(cycle),
+                        isHovered: cycle.key === hoveredCycleKey,
+                      })}
+                    />
+                  )}
                   <rect
                     data-shape
                     x={node.x}
@@ -320,16 +439,31 @@ export const NetGraphView: React.FC<NetGraphViewProps> = ({
                       style={{ fill: placeColor }}
                     />
                   )}
+                  {initialGroup !== undefined && (
+                    <circle
+                      cx={node.x + NET_NODE_WIDTH - 9}
+                      cy={node.y + NET_NODE_HEIGHT / 2}
+                      r={3.5}
+                      className={initialMarkerStyle({
+                        isMuted: role === "muted",
+                      })}
+                    />
+                  )}
                   <text
                     x={
                       node.x +
                       NET_NODE_WIDTH / 2 +
-                      (placeColor === undefined ? 0 : 4)
+                      (placeColor === undefined ? 0 : 4) -
+                      (initialGroup === undefined ? 0 : 4)
                     }
                     y={node.y + NET_NODE_HEIGHT / 2}
                     className={labelStyle({ role })}
                   >
-                    {truncate(node.name, MAX_LABEL_CHARS)}
+                    {truncate(
+                      node.name,
+                      MAX_LABEL_CHARS -
+                        (initialGroup === undefined ? 0 : MARKER_LABEL_COST),
+                    )}
                   </text>
                 </g>
               </g>
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-cell.tsx b/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-cell.tsx
index b8a01fa3564..4e79aad20d6 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-cell.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-cell.tsx
@@ -9,6 +9,7 @@ import { useDraftField } from "../../hooks/use-draft-field";
 import { CodeEditor } from "../../monaco/code-editor";
 import { focusLands } from "../../worksheet/focus-flow";
 import { CELL_KIND_ICONS, CELL_KIND_LABELS } from "./cell-kinds";
+import { cycleTint } from "./net-cycles";
 import {
   arcPlaceId,
   placeName,
@@ -18,6 +19,8 @@ import {
 
 import type { ActiveNetDefinition } from "../../../react/state/active-net-context";
 import type { CodeEditorProps } from "../../monaco/code-editor";
+import type { CycleGroup } from "./net-cycles";
+import type { InitialPlaceGroup } from "./net-siphons";
 import type {
   DependentCount,
   NotebookCell as NotebookCellModel,
@@ -119,6 +122,63 @@ const nameMarkStyle = css({
   borderRadius: "xs",
 });
 
+const cycleBadgeStyle = cva({
+  base: {
+    flexShrink: 0,
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "[2px]",
+    paddingX: "1",
+    borderRadius: "sm",
+    fontSize: "[10px]",
+    fontWeight: "medium",
+    fontFamily: "mono",
+    borderWidth: "[1px]",
+    borderStyle: "solid",
+    cursor: "default",
+  },
+  variants: {
+    tint: {
+      pink: {
+        backgroundColor: "pink.s20",
+        borderColor: "pink.s60",
+        color: "pink.s115",
+      },
+      green: {
+        backgroundColor: "green.s20",
+        borderColor: "green.s60",
+        color: "green.s115",
+      },
+      yellow: {
+        backgroundColor: "yellow.s20",
+        borderColor: "yellow.s60",
+        color: "yellow.s115",
+      },
+    },
+    isHovered: {
+      true: { filter: "[brightness(0.94)]" },
+      false: {},
+    },
+  },
+});
+
+const initialBadgeStyle = css({
+  flexShrink: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  paddingX: "1",
+  borderRadius: "sm",
+  fontSize: "[10px]",
+  fontWeight: "medium",
+  fontFamily: "mono",
+  borderWidth: "[1px]",
+  borderStyle: "solid",
+  backgroundColor: "blue.s15",
+  borderColor: "blue.s50",
+  color: "blue.s110",
+  cursor: "default",
+});
+
 const countStyle = css({
   flexShrink: 0,
   fontSize: "[10px]",
@@ -1340,6 +1400,16 @@ export interface NotebookCellProps {
   nameMatchIndices: number[] | null;
   /** How much depends on this cell, shown at the end of the row. */
   dependentCount: DependentCount | undefined;
+  /** The cycle this cell belongs to, if any. */
+  cycle: CycleGroup | undefined;
+  /**
+   * Set when this place has to hold tokens in the initial state, because
+   * nothing in the net can produce into its group.
+   */
+  initialGroup: InitialPlaceGroup | undefined;
+  /** Whether that cycle is currently hovered anywhere in the view. */
+  isCycleHovered: boolean;
+  onHoverCycle: (cycleKey: string | null) => void;
   onSelect: () => void;
   onSetExpanded: (expanded: boolean) => void;
   /** The row's slice of the list's worksheet focus flow. */
@@ -1366,6 +1436,10 @@ export const NotebookCell: React.FC<NotebookCellProps> = ({
   isDimmed,
   nameMatchIndices,
   dependentCount,
+  cycle,
+  initialGroup,
+  isCycleHovered,
+  onHoverCycle,
   onSelect,
   onSetExpanded,
   rowFocus,
@@ -1442,6 +1516,31 @@ export const NotebookCell: React.FC<NotebookCellProps> = ({
         <span className={nameStyle}>
           <HighlightedName name={name} matchIndices={nameMatchIndices} />
         </span>
+        {initialGroup !== undefined && (
+          <span
+            className={initialBadgeStyle}
+            title={
+              initialGroup.placeIds.length === 1
+                ? "Must hold tokens in the initial state: nothing in the net produces into it"
+                : `Must hold tokens in the initial state: this pool of ${initialGroup.placeIds.length} places only circulates what it starts with`
+            }
+          >
+            initial
+          </span>
+        )}
+        {cycle !== undefined && (
+          <span
+            className={cycleBadgeStyle({
+              tint: cycleTint(cycle),
+              isHovered: isCycleHovered,
+            })}
+            title={`In cycle ${cycle.label} with ${cycle.memberIds.length - 1} other node${cycle.memberIds.length === 2 ? "" : "s"}`}
+            onMouseEnter={() => onHoverCycle(cycle.key)}
+            onMouseLeave={() => onHoverCycle(null)}
+          >
+            ↻{cycle.label}
+          </span>
+        )}
         <span className={summaryStyle}>{summary}</span>
         {dependentCount !== undefined && dependentCount.transitive > 0 && (
           <span
diff --git a/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-view.tsx b/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-view.tsx
index 435d196f474..75d7070ff8e 100644
--- a/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-view.tsx
+++ b/libs/@hashintel/petrinaut/src/ui/views/Notebook/notebook-view.tsx
@@ -13,7 +13,12 @@ import { useFocusStops } from "../../worksheet/use-focus-stops";
 import { CELL_KIND_PLURAL_LABELS, CELL_KINDS } from "./cell-kinds";
 import { CONNECTION_GUTTER_WIDTH, ConnectionLines } from "./connection-lines";
 import { GraphExplorer } from "./graph-explorer";
+import { buildCycleMembership, findCycleGroups } from "./net-cycles";
 import { layoutNetGraph } from "./net-graph-layout";
+import {
+  buildInitialPlaceMembership,
+  findInitialPlaceGroups,
+} from "./net-siphons";
 import { cellBodyParts, NotebookCell, partStopId } from "./notebook-cell";
 import {
   buildConnectionIndex,
@@ -29,6 +34,7 @@ import {
 import { orderCellsTopologically } from "./notebook-order";
 
 import type { FocusStop } from "../../worksheet/use-focus-stops";
+import type { InitialPlaceGroup } from "./net-siphons";
 import type {
   NodeRef,
   NotebookCellKind,
@@ -109,6 +115,19 @@ const DEFAULT_EXPLORER_WIDTH = 520;
 const MIN_EXPLORER_WIDTH = 320;
 const MAX_EXPLORER_WIDTH = 1100;
 
+/**
+ * Put the places the initial state has to seed at the front of the flow order,
+ * so a resource pool inside a cycle reads alongside the net's plain sources
+ * rather than buried wherever the layering happened to put it.
+ */
+const hoistInitialPlaces = (
+  flowOrder: string[],
+  initialByPlace: ReadonlyMap<string, InitialPlaceGroup>,
+): string[] => [
+  ...flowOrder.filter((id) => initialByPlace.has(id)),
+  ...flowOrder.filter((id) => !initialByPlace.has(id)),
+];
+
 const emptyStyle = css({
   fontSize: "sm",
   color: "neutral.fg.subtle",
@@ -132,7 +151,7 @@ const emptyStyle = css({
  * and a transition links to the parameters its code reads. The toolbar
  * controls the cell order (document or topological) and which kinds are listed
  * and searched; rows with dependents end with how many cells depend on them,
- * directly and in total.
+ * directly and in total, and cells caught in a cycle carry a matching badge.
  */
 const NotebookViewContent: React.FC = () => {
   const { activeNet } = use(ActiveNetContext);
@@ -149,6 +168,7 @@ const NotebookViewContent: React.FC = () => {
   const [explorerWidth, setExplorerWidth] = useState(DEFAULT_EXPLORER_WIDTH);
   const [cellOrder, setCellOrder] = useState<CellOrder>("document");
   const [focusOnSelection, setFocusOnSelection] = useState(false);
+  const [hoveredCycleKey, setHoveredCycleKey] = useState<string | null>(null);
   const [visibleKinds, setVisibleKinds] = useState<
     ReadonlySet<NotebookCellKind>
   >(() => new Set(CELL_KINDS));
@@ -157,16 +177,23 @@ const NotebookViewContent: React.FC = () => {
   const connectionIndex = buildConnectionIndex(activeNet);
   const dependentCounts = buildDependentCounts(connectionIndex);
   const netGraph = buildNetGraph(activeNet);
+  const cycleGroups = findCycleGroups(netGraph);
+  const cycleByNode = buildCycleMembership(cycleGroups);
+  const initialGroups = findInitialPlaceGroups(activeNet);
+  const initialByPlace = buildInitialPlaceMembership(initialGroups);
 
   // The topological list follows the diagram's default layer order (not the
   // focused re-layout, which is a transient lens on the same net), with
-  // declarations inlined before their first user.
+  // declarations inlined before their first user and seed places hoisted.
   const cells =
     cellOrder === "document"
       ? documentCells
       : orderCellsTopologically(
           documentCells,
-          layoutNetGraph(netGraph).nodes.map(({ id }) => id),
+          hoistInitialPlaces(
+            layoutNetGraph(netGraph).nodes.map(({ id }) => id),
+            initialByPlace,
+          ),
           connectionIndex,
         );
   const visibleCells = cells.filter(({ kind }) => visibleKinds.has(kind));
@@ -245,6 +272,9 @@ const NotebookViewContent: React.FC = () => {
       ].map(({ id }) => id),
     ),
     placeColors,
+    cycleByNode,
+    initialByPlace,
+    hoveredCycleKey,
     focusId: focusOnSelection ? selectedNodeId : null,
   };
 
@@ -522,6 +552,13 @@ const NotebookViewContent: React.FC = () => {
                   isDimmed={isSearching && !matchesById.has(cell.id)}
                   nameMatchIndices={matchesById.get(cell.id) ?? null}
                   dependentCount={dependentCounts.get(cell.id)}
+                  cycle={cycleByNode.get(cell.id)}
+                  initialGroup={initialByPlace.get(cell.id)}
+                  isCycleHovered={
+                    hoveredCycleKey !== null &&
+                    cycleByNode.get(cell.id)?.key === hoveredCycleKey
+                  }
+                  onHoverCycle={setHoveredCycleKey}
                   onSelect={() => selectCell(cell)}
                   onSetExpanded={(expanded) =>
                     setCellExpanded(cell.id, expanded)
@@ -596,6 +633,8 @@ const NotebookViewContent: React.FC = () => {
           selectedCellId={selectedId}
           selectedName={selectedName}
           graph={explorerGraph}
+          cycleGroups={cycleGroups}
+          onHoverCycle={setHoveredCycleKey}
           isFocusMode={focusOnSelection}
           canFocus={selectedNodeId !== null}
           onToggleFocus={() => setFocusOnSelection((previous) => !previous)}