feat: implement Story 2.2 — ELK.js auto-layout engine in Web Worker

Add automatic diagram layout via ELK.js running in a dedicated Web Worker.
Nodes animate smoothly (200ms ease-out) to computed positions using the
Sugiyama/layered algorithm. Includes layout direction controls (DOWN/RIGHT/
LEFT/UP), edge routing modes (orthogonal/splines/polyline), 200-node soft
cap warning, single-flight race condition protection, and 10s worker timeout.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

apps/web/src/modules/diagram/components/editor/DiagramCanvas.tsx

@@ -7,9 +7,11 @@ import {
   Controls,
   MiniMap,
   BackgroundVariant,
+  Panel,
 } from "@xyflow/react";
 
 import { useGraphStore } from "../../stores/useGraphStore";
+import { useAutoLayout } from "../../hooks/useAutoLayout";
 
 const nodeTypes = {};
 
@@ -20,6 +22,8 @@ function CanvasInner() {
   const onEdgesChange = useGraphStore((s) => s.onEdgesChange);
   const onViewportChange = useGraphStore((s) => s.onViewportChange);
 
+  const { isLayouting } = useAutoLayout();
+
   return (
     <div className="w-full h-full">
       <ReactFlow
@@ -45,6 +49,13 @@ function CanvasInner() {
           zoomable
           style={{ width: 120, height: 80 }}
         />
+        {isLayouting && (
+          <Panel position="top-center">
+            <div className="rounded-md bg-background/80 px-3 py-1.5 text-xs text-muted-foreground backdrop-blur-sm border border-border">
+              Computing layout...
+            </div>
+          </Panel>
+        )}
       </ReactFlow>
     </div>
   );