From 23174b206aef1cd1f86070178c37d79360740c46 Mon Sep 17 00:00:00 2001
From: Chris Feijoo <chris@kube.io>
Date: Sat, 29 Aug 2026 04:11:58 +0200
Subject: [PATCH] FE-1509: Surface cycles and initial places across the
 notebook
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Cell rows gain a tinted ↻ badge for cycle members and a blue initial
badge for places the net cannot seed itself; hovering a badge lights
the whole cycle up in the list and the graph. Topological ordering
hoists the seed places to the front of the flow.

In the graph explorer, cycle members carry dashed rings (solid while
their cycle is hovered, with intra-cycle edges recoloured to match),
initial places a hollow token marker inside the node, and the header
counts both.
---
 .../src/ui/views/Notebook/graph-explorer.tsx  |  38 +++++
 .../src/ui/views/Notebook/net-graph.tsx       | 144 +++++++++++++++++-
 .../src/ui/views/Notebook/notebook-cell.tsx   |  99 ++++++++++++
 .../src/ui/views/Notebook/notebook-view.tsx   |  45 +++++-
 4 files changed, 318 insertions(+), 8 deletions(-)

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)}