FE-1703: Route square automatic arcs around nodes

[kube]

Important

Experimental
Behind the Automatic arc connections feature flag.

Summary

Adds square automatic arcs with horizontal and vertical segments. The router chooses attachment sides and detours around nearby nodes, including while creating an arc.

Curved remains the default. User Settings > Viewport offers Square and an Avoid nodes toggle; moving a blocking node updates the route.

Also fixes UUID generation over HTTP on local networks, including when automatic arc connections are disabled.

Links

• Ticket FE-1706
• Ticket FE-1703
• Docs Visual settings › Automatic arc connections
• Reference libavoid orthogonal connector routing

Changes

• Choose among four attachment sides using a local orthogonal grid and A* search with a cost for bends
• Keep clearance around place, transition, and subnet bounds, with separate attachment lanes for reciprocal arcs
• Reuse routes across hover and focus updates; recompute when node geometry changes
• Bound the search and fall back to a square path when a clear route cannot be found
• Add Square and Square With Obstacles stories, user documentation, and a patch changeset

Known issues

• Arcs and labels can overlap or cross each other
• Overlapping nodes, blocked endpoints, or search limits can produce a fallback that crosses nodes
• Routes can switch sides while dragging; stable routes and crossing reduction need further work

Test coverage

The UUID fix passes Petrinaut build, unit tests, types, lint, and formatting. A regression test covers rendering without crypto.randomUUID(). Verified Simulation Settings and scenario creation in Handle Spike With AI over LAN HTTP, with no UUID errors. The UUID fix requires no user-guide or screenshot changes.

After extraction onto main, all 96 focused tests passed, along with editor build, TypeScript, lint, and formatting. The Settings-test conflict retains the square-arc persistence tests. Both the routing and UUID patches preserve their added and removed lines. The earlier integrated stack passed full editor, core, website, and architecture checks; browser checks below predate extraction.

• Router tests cover attachment directions, detours, blocked sides, reciprocal arcs, moving obstacles, drag endpoints, fallback paths, and distant nodes
• Integration tests verify rerouting after obstacle movement, route reuse on hover, and unchanged subnet port arcs
• Settings tests verify persistence and preservation of the previous arc style
• Passed build, unit tests, TypeScript, and ESLint for Petrinaut and its website, plus repository formatting and the architecture check
• Manually verified in Storybook: shape switching, avoidance toggle, blocker movement and undo, and creating a square arc by dragging
• CI website integration and HASH Playwright integration stop before tests because Docker cannot pull minio/mc; each job's three attempts fail with access denied

How to test

• Run PORT=6017 mise x -- yarn workspace @hashintel/petrinaut dev --ci
• Open Square With Obstacles
• Move Obstacle away from the Waiting → Begin service arc, then undo

  The detour becomes straight when clear and returns after undo.

• Open User Settings > Viewport and switch Avoid nodes off and on

  The square path crosses the blocker when avoidance is off and detours when on.

• Drag Waiting's outgoing handle onto Finish service

  A new square arc connects the nodes.

• Switch Automatic arc shape to Curved

  The existing automatic curves return.

[vercel]

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

Project	Deployment	Actions	Updated
hash	Ready	Preview	Sep 15, 2026 10:17pm UTC
petrinaut	Ready	Preview	Sep 15, 2026 10:17pm UTC
petrinaut-docs	Ready	Preview	Sep 15, 2026 10:17pm UTC

1 Skipped Deployment

Project	Deployment	Actions	Updated
hashdotdesign-tokens	Ignored	Preview	Sep 15, 2026 10:17pm UTC