FE-1897: Show a flow as its Petri net in the flow and run pages

[CiaranMn]

🌟 Purpose

Replaces the previous custom DAG view for Flows with a readonly Petrinaut view of the Flow Definition compiled to a Petri net.

This uses the Flow Definition -> Petri net compiler introduced in #10097.

🔍 Changes

• Mostly removing the old custom DAG code, and replacing it with PetrinautPreview – see flow-net-view.tsx.
• Drive-by: previously the 'Activity Log' appeared at the bottom of the screen in the flow visualizer, even when only viewing a definition rather than a run of it. This was taking up unnecessary space and has been updated to only show when there's a selectedFlowRun (causing most of the diff in flow-visualizer.tsx

⚠️ Known issues

A run's state isn't shown on the net yet – this will come in FE-1932.

Demo

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
hash	Ready	Preview	Oct 20, 2026 1:07pm UTC

3 Skipped Deployments

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Oct 20, 2026 1:07pm UTC
petrinaut	Skipped		Oct 20, 2026 1:07pm UTC
petrinaut-docs	Skipped		Oct 20, 2026 1:07pm UTC

[Copilot]

🔵 Needs a closer look

The renderer replacement needs browser validation of canvas sizing, lazy loading, and slide-out interactions before approval.

No open issues 🎉

What changed in this PR

Replaces the frontend’s custom flow DAG with a read-only Petrinaut preview, using the compiler introduced in #10097. Run-state visualization remains deferred to FE-1932.

Changes:

• Adds cached net compilation and lazy-loaded previews for definition and run pages.
• Removes ReactFlow rendering while preserving sidebar step summaries.
• Shows the Activity Log only when a run is selected.

File	Description
yarn.lock	Updates dependency resolutions.
apps/​hash-frontend/​src/​pages/​shared/​flow-runs-context.ts	Removes the ReactFlow-specific hook.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​swimlane/​shared/​edge-styles.ts	Removes DAG edge colors.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​swimlane/​custom-node/​node-styles.ts	Removes DAG node styles.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​swimlane/​custom-node/​node-container.tsx	Removes the node container.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​swimlane/​custom-node/​handles.tsx	Removes connection handles.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​swimlane/​custom-node.tsx	Removes custom node rendering.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​swimlane/​custom-edge.tsx	Removes custom edge rendering.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​swimlane.tsx	Removes the ReactFlow canvas.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​sort-graph.ts	Removes DAG ordering utilities.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​shared/​types.ts	Replaces graph types with step summaries.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​shared/​named-input-sources.ts	Removes DAG input adapters.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​shared/​dimensions.ts	Removes DAG sizing constants.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​marker-end.tsx	Removes edge markers.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​get-flattened-steps.ts	Preserves nested-step flattening separately.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​flow-run-sidebar/​group-status.tsx	Consumes step summaries directly.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​flow-run-sidebar.tsx	Opens the net slide-out.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​flow-net-view/​petrinaut-preview.tsx	Bundles preview exports and styles.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​flow-net-view.tsx	Adds compilation, caching, and preview states.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​flow-net-slide.tsx	Adapts the slide-out for Petrinaut.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer/​dag.tsx	Removes the old DAG wrapper.
apps/​hash-frontend/​src/​pages/​@/​[shortname]/​shared/​flow-visualizer.tsx	Integrates previews and conditional logs.
apps/​hash-frontend/​package.json	Replaces ReactFlow with the compiler dependency.
apps/​hash-frontend/​next.config.js	Enables compiler package transpilation.
apps/​hash-frontend/​docs/​task-dependencies.json	Records compiler task dependencies.

_{Review effort: Balanced}

[cursor]

PR Summary

Medium Risk
Large UI swap on a core flow/run page with async compilation and new workspace dependency; run-status visualization on the graph is intentionally deferred.

Overview
Replaces the flow visualizer’s ReactFlow DAG with a readonly Petrinaut view of the definition compiled via @local/flow-petri-net (compileFlowDefinition). Definition-only pages show FlowNetView in the main panel; runs still show outputs, with the plan opened in a wider FlowNetSlide from the sidebar.

Removed: reactflow, ELK swimlane graph building (sort-graph, nodes/edges types), and per-step DAG UI (custom nodes, edges, run status on the graph). Sidebar plan list now uses lightweight FlowStepSummary + getFlattenedSteps instead of a ReactFlow graph.

UX: The activity log bottom panel renders only when a selectedFlowRun exists (not when viewing a definition alone). Petrinaut is dynamically imported with SSR off so styles/components load only when a net is shown; compiled nets are cached per definition object in a WeakMap.

Run state is not overlaid on the net yet (follow-up FE-1932).

^{Reviewed by Cursor Bugbot for commit cfff4cc. Bugbot is set up for automated code reviews on this repo. Configure here.}