Scale Workflow Activity vNext canvas for large workflows

[AbigailDeng]

Problem

Workflow Activity vNext reuses the shared React Flow canvas, but large workflows still caused graph-wide node work and lost unchanged object references during common interactions. Continuous zoom subscriptions and mounting all offscreen elements also limited scaling, while Run Detail rebuilt semantically unchanged graph elements. The branch had no repeatable production-build benchmark for 100/500/1000-node workflows.

Solution

• Reconcile node and edge arrays in linear time while preserving semantically unchanged node, node-data, and edge references.
• Limit selection updates to the previous and next selected nodes, and keep drag updates local until drag stop.
• Stabilize React Flow node types, callbacks, array props, wrapper memo boundaries, and compact/full zoom-band subscriptions.
• Enable visible-element rendering by default for Studio canvases and verify that real pointer panning correctly mounts entering nodes and unmounts exiting nodes.
• Define deterministic precedence for initial fit, topology fit, offscreen added-node focus, manual navigation, MiniMap movement, and explicit reset.
• Skip automatic layout when all saved positions are complete; use deterministic collision avoidance for partial saved positions.
• Reconcile Run Detail execution graphs so a one-step status update preserves unaffected node/data/edge references.
• Add an opt-in, backend-free production benchmark for 100, 500, and 1000 nodes with 2N - 3 edges, four rendering policies, eight scenarios, and 96 result rows.
• Keep memoized Studio node labels reactive to runtime locale changes.
• Pin Playwright to 1.60.0, whose Node >=18 requirement matches the package's Node >=18.20.0 contract.

Affected paths

• Shared canvas: src/shared/graphs/GraphCanvas.tsx and graph reconciliation helpers.
• Studio consumers: Workflow Activity vNext editor, Team Member Workflow Studio, classic Studio, and template preview.
• Run Detail graph derivation and reconciliation.
• Benchmark-only page, Playwright runner, CI job, package metadata, and benchmark documentation.

Benchmark

The benchmark route is included only when the build-time value AEVATAR_WORKFLOW_CANVAS_BENCHMARK is exactly 1. It uses deterministic synthetic data and performs no authentication, backend, storage, or external network calls.

CI builds the production bundle, runs the Playwright benchmark against system Chrome, and uploads:

• apps/aevatar-console-web/artifacts/workflow-canvas-benchmark/results.json
• apps/aevatar-console-web/artifacts/workflow-canvas-benchmark/summary.md

Scope boundary

Related to #3578.

Viewport capture and authoritative persistence are intentionally deferred to #3576 and #3577. This change does not use localStorage, sessionStorage, IndexedDB, cookies, or any browser-local state as an authoritative viewport source.

Local verification

Commands below were run from apps/aevatar-console-web unless a repository-root path is shown.

• Explicit changed Jest tests:

  pnpm exec jest src/pages/team-member-workflow-studio/components/WorkflowStudioCanvas.test.tsx src/pages/workflow-activity-vnext/activity/RunDetailPage.test.tsx src/pages/workflow-activity-vnext/activity/executionGraph.test.ts src/pages/workflow-activity-vnext/index.test.tsx src/pages/workflow-canvas-benchmark/benchmarkGraph.test.ts src/routesConfig.test.ts src/shared/graphs/GraphCanvas.test.tsx src/shared/graphs/reconcileGraphElements.test.ts src/shared/studio/graph.test.ts --runInBand

  Result: 9 suites passed, 263 tests passed.

• Dependency-related Jest tests:

  pnpm exec jest --findRelatedTests config/config.ts config/routes.ts playwright.performance.config.ts src/app.tsx src/pages/team-member-workflow-studio/components/WorkflowStudioCanvas.tsx src/pages/team-member-workflow-studio/components/WorkflowStudioCanvasRegion.tsx src/pages/team-member-workflow-studio/components/WorkflowStudioEditorSurface.tsx src/pages/workflow-activity-vnext/activity/RunDetailPage.tsx src/pages/workflow-activity-vnext/activity/executionGraph.ts src/pages/workflow-activity-vnext/hooks/useWorkflowEditor.ts src/pages/workflow-activity-vnext/workflows/WorkflowEditorPage.tsx src/pages/workflow-canvas-benchmark/benchmarkGraph.ts src/pages/workflow-canvas-benchmark/index.tsx src/shared/graphs/GraphCanvas.tsx src/shared/graphs/reconcileGraphElements.ts src/shared/studio/graph.ts --runInBand

  Result: 25 suites passed, 613 tests passed. The existing React 19 flushSync lifecycle warning remains visible in workflow-activity-vnext/index.test.tsx; it does not fail the suite and predates this branch.

• Changed-file static checks:

  pnpm exec biome check config/config.ts config/routes.ts performance/workflowCanvas.performance.spec.ts playwright.performance.config.ts src/app.tsx src/pages/team-member-workflow-studio/components/WorkflowStudioCanvas.test.tsx src/pages/team-member-workflow-studio/components/WorkflowStudioCanvas.tsx src/pages/team-member-workflow-studio/components/WorkflowStudioCanvasRegion.tsx src/pages/team-member-workflow-studio/components/WorkflowStudioEditorSurface.tsx src/pages/workflow-activity-vnext/activity/RunDetailPage.test.tsx src/pages/workflow-activity-vnext/activity/RunDetailPage.tsx src/pages/workflow-activity-vnext/activity/executionGraph.test.ts src/pages/workflow-activity-vnext/activity/executionGraph.ts src/pages/workflow-activity-vnext/hooks/useWorkflowEditor.ts src/pages/workflow-activity-vnext/index.test.tsx src/pages/workflow-activity-vnext/workflows/WorkflowEditorPage.tsx src/pages/workflow-canvas-benchmark/benchmarkGraph.test.ts src/pages/workflow-canvas-benchmark/benchmarkGraph.ts src/pages/workflow-canvas-benchmark/index.tsx src/routesConfig.test.ts src/shared/graphs/GraphCanvas.test.tsx src/shared/graphs/GraphCanvas.tsx src/shared/graphs/reconcileGraphElements.test.ts src/shared/graphs/reconcileGraphElements.ts src/shared/studio/graph.test.ts src/shared/studio/graph.ts

  Result: 26 files checked, no fixes required.

• Dependency and repository guards:

  pnpm install --frozen-lockfile
  bash tools/ci/test_stability_guards.sh
  bash tools/docs/lint.sh
  git diff --check origin/feat/2026-08-04_workflow-activity-vnext...HEAD

  Result: lockfile current; test stability guard passed; docs lint passed for 87 files; diff check passed.

• Final static review: no Critical, Important, or Minor findings; Ready YES.

• Full frontend suite, affected-unavailable typecheck, production build, and production Playwright benchmark are delegated to GitHub CI by the personal incremental-validation policy.