@codemation/next-host 0.0.1

package/src/features/workflows/components/canvas/WorkflowCanvasLoadingPlaceholder.tsx

@@ -0,0 +1,69 @@
+export function WorkflowCanvasLoadingPlaceholder(props: Readonly<{ isInitialViewportReady: boolean }>) {
+  const { isInitialViewportReady } = props;
+  return (
+    <div
+      aria-hidden={isInitialViewportReady}
+      style={{
+        position: "absolute",
+        inset: 0,
+        display: "grid",
+        placeItems: "center",
+        pointerEvents: "none",
+        opacity: isInitialViewportReady ? 0 : 1,
+        transition: "opacity 180ms ease-out",
+        background:
+          "linear-gradient(rgba(251,251,252,0.96), rgba(251,251,252,0.96)), radial-gradient(circle at center, rgba(15,23,42,0.04) 1px, transparent 1px)",
+        backgroundSize: "auto, 18px 18px",
+      }}
+    >
+      <div
+        style={{
+          minWidth: 220,
+          padding: "16px 18px",
+          border: "1px solid #e5e7eb",
+          background: "rgba(255,255,255,0.94)",
+          boxShadow: "0 10px 28px rgba(15,23,42,0.06)",
+          display: "grid",
+          gap: 10,
+        }}
+      >
+        <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
+          <div
+            style={{
+              width: 10,
+              height: 10,
+              background: "#2563eb",
+              animation: "codemationCanvasLoaderPulse 1s ease-in-out infinite",
+            }}
+          />
+          <div
+            style={{ fontSize: 12, fontWeight: 800, letterSpacing: 0.45, textTransform: "uppercase", color: "#475569" }}
+          >
+            Workflow diagram
+          </div>
+        </div>
+        <div style={{ fontSize: 14, fontWeight: 700, color: "#111827" }}>Loading...</div>
+        <div style={{ display: "grid", gap: 6 }}>
+          <div
+            style={{
+              height: 8,
+              width: 176,
+              background: "linear-gradient(90deg, #e5e7eb, #f8fafc, #e5e7eb)",
+              backgroundSize: "200% 100%",
+              animation: "codemationCanvasLoaderShimmer 1.4s linear infinite",
+            }}
+          />
+          <div
+            style={{
+              height: 8,
+              width: 132,
+              background: "linear-gradient(90deg, #e5e7eb, #f8fafc, #e5e7eb)",
+              backgroundSize: "200% 100%",
+              animation: "codemationCanvasLoaderShimmer 1.4s linear infinite",
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/features/workflows/components/canvas/WorkflowCanvasNodeIcon.tsx

@@ -0,0 +1,102 @@
+import { Boxes } from "lucide-react";
+import { DynamicIcon } from "lucide-react/dynamic";
+import type { IconName } from "lucide-react/dynamic";
+import { Suspense, type CSSProperties, type ReactNode } from "react";
+
+import { CanvasNodeIconSlot } from "./CanvasNodeIconSlot";
+import { WorkflowCanvasBuiltinIconRegistry } from "./lib/WorkflowCanvasBuiltinIconRegistry";
+import { WorkflowCanvasSiIconRegistry } from "./lib/WorkflowCanvasSiIconRegistry";
+import { WorkflowCanvasSimpleIconGlyph } from "./WorkflowCanvasSimpleIconGlyph";
+
+/** Main node glyph: always contained in the slot, no opaque backing (card paints the tile). */
+const IMG_STYLE: CSSProperties = {
+  display: "block",
+  width: "100%",
+  height: "100%",
+  maxWidth: "100%",
+  maxHeight: "100%",
+  objectFit: "contain",
+  objectPosition: "center",
+  backgroundColor: "transparent",
+};
+
+function isHttpOrDataUrl(value: string): boolean {
+  const v = value.trim().toLowerCase();
+  return v.startsWith("http://") || v.startsWith("https://") || v.startsWith("data:") || v.startsWith("/");
+}
+
+function builtinAssetImg(url: string, sizePx: number): ReactNode {
+  return (
+    <CanvasNodeIconSlot sizePx={sizePx}>
+      <img src={url} alt="" style={{ ...IMG_STYLE, width: "100%", height: "100%" }} />
+    </CanvasNodeIconSlot>
+  );
+}
+
+/**
+ * Canvas node icon resolution:
+ * - **URLs** — `http(s):`, `data:`, or root-relative `/…`
+ * - **`builtin:<id>`** — SVG under `public/canvas-icons/builtin/` (see {@link WorkflowCanvasBuiltinIconRegistry})
+ * - **`si:<slug>`** — cherry-picked Simple Icons, or same builtin asset when slug matches a registered builtin (e.g. `si:openai`)
+ * - **`lucide:<name>`** or legacy kebab name — Lucide dynamic icon
+ *
+ * Node configs set {@link import("@codemation/core").NodeConfigBase.icon}.
+ */
+export function WorkflowCanvasNodeIcon(props: Readonly<{ icon?: string; sizePx: number; strokeWidth?: number }>) {
+  const { icon, sizePx, strokeWidth = 2 } = props;
+  const raw = icon?.trim();
+  if (!raw) {
+    return (
+      <CanvasNodeIconSlot sizePx={sizePx}>
+        <Boxes size={sizePx} strokeWidth={strokeWidth} />
+      </CanvasNodeIconSlot>
+    );
+  }
+  if (isHttpOrDataUrl(raw)) {
+    return (
+      <CanvasNodeIconSlot sizePx={sizePx}>
+        <img src={raw} alt="" style={{ ...IMG_STYLE, width: "100%", height: "100%" }} />
+      </CanvasNodeIconSlot>
+    );
+  }
+  if (raw.startsWith("builtin:")) {
+    const id = raw.slice("builtin:".length).trim().toLowerCase();
+    const url = WorkflowCanvasBuiltinIconRegistry.resolveUrl(id);
+    if (url) {
+      return builtinAssetImg(url, sizePx);
+    }
+    return (
+      <CanvasNodeIconSlot sizePx={sizePx}>
+        <Boxes size={sizePx} strokeWidth={strokeWidth} />
+      </CanvasNodeIconSlot>
+    );
+  }
+  if (raw.startsWith("si:")) {
+    const slug = raw.slice("si:".length).trim().toLowerCase();
+    const builtinUrl = WorkflowCanvasBuiltinIconRegistry.resolveUrl(slug);
+    if (builtinUrl) {
+      return builtinAssetImg(builtinUrl, sizePx);
+    }
+    const data = WorkflowCanvasSiIconRegistry.resolve(slug);
+    if (data) {
+      return (
+        <CanvasNodeIconSlot sizePx={sizePx}>
+          <WorkflowCanvasSimpleIconGlyph title={data.title} path={data.path} hex={data.hex} sizePx={sizePx} />
+        </CanvasNodeIconSlot>
+      );
+    }
+    return (
+      <CanvasNodeIconSlot sizePx={sizePx}>
+        <Boxes size={sizePx} strokeWidth={strokeWidth} />
+      </CanvasNodeIconSlot>
+    );
+  }
+  const lucideName = raw.startsWith("lucide:") ? raw.slice("lucide:".length).trim().toLowerCase() : raw.toLowerCase();
+  return (
+    <CanvasNodeIconSlot sizePx={sizePx}>
+      <Suspense fallback={<Boxes size={sizePx} strokeWidth={strokeWidth} />}>
+        <DynamicIcon name={lucideName as IconName} size={sizePx} strokeWidth={strokeWidth} />
+      </Suspense>
+    </CanvasNodeIconSlot>
+  );
+}

package/src/features/workflows/components/canvas/WorkflowCanvasSimpleIconGlyph.tsx

@@ -0,0 +1,21 @@
+/**
+ * Renders a Simple Icons path in a 24×24 viewBox (same coordinate space as Lucide for sizing).
+ */
+export function WorkflowCanvasSimpleIconGlyph(
+  props: Readonly<{ title: string; path: string; hex: string; sizePx: number }>,
+) {
+  const { title, path, hex, sizePx } = props;
+  return (
+    <svg
+      role="img"
+      viewBox="0 0 24 24"
+      width={sizePx}
+      height={sizePx}
+      aria-hidden
+      style={{ display: "block", backgroundColor: "transparent" }}
+    >
+      <title>{title}</title>
+      <path fill={`#${hex}`} d={path} />
+    </svg>
+  );
+}

package/src/features/workflows/components/canvas/WorkflowCanvasStraightCountEdge.tsx

@@ -0,0 +1,33 @@
+import {
+  BaseEdge,
+  getStraightPath,
+  type Edge as ReactFlowEdge,
+  type EdgeProps as ReactFlowEdgeProps,
+} from "@xyflow/react";
+
+export function StraightCountEdge(props: ReactFlowEdgeProps<ReactFlowEdge>) {
+  const [edgePath, labelX, labelY] = getStraightPath({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+  });
+  return (
+    <BaseEdge
+      id={props.id}
+      path={edgePath}
+      markerEnd={props.markerEnd}
+      markerStart={props.markerStart}
+      style={props.style}
+      label={props.label}
+      labelX={labelX}
+      labelY={labelY + 16}
+      labelStyle={props.labelStyle}
+      labelShowBg
+      labelBgStyle={props.labelBgStyle}
+      labelBgPadding={props.labelBgPadding}
+      labelBgBorderRadius={props.labelBgBorderRadius}
+      interactionWidth={props.interactionWidth}
+    />
+  );
+}

package/src/features/workflows/components/canvas/WorkflowCanvasStructureSignature.tsx

@@ -0,0 +1,7 @@
+import type { WorkflowDto } from "../../lib/realtime/workflowTypes";
+
+export class WorkflowCanvasStructureSignature {
+  static create(workflow: WorkflowDto): string {
+    return JSON.stringify(workflow);
+  }
+}

package/src/features/workflows/components/canvas/WorkflowCanvasSymmetricForkEdge.tsx

@@ -0,0 +1,32 @@
+import { BaseEdge, type Edge, type EdgeProps } from "@xyflow/react";
+
+import { WORKFLOW_CANVAS_MAIN_EDGE_OFFSET } from "./lib/workflowCanvasEdgeGeometry";
+import { WorkflowCanvasSymmetricForkPathPlanner } from "./lib/WorkflowCanvasSymmetricForkPathPlanner";
+
+export function WorkflowCanvasSymmetricForkEdge(props: EdgeProps<Edge>) {
+  const { path, labelX, labelY } = WorkflowCanvasSymmetricForkPathPlanner.build({
+    sourceX: props.sourceX,
+    sourceY: props.sourceY,
+    targetX: props.targetX,
+    targetY: props.targetY,
+    offset: WORKFLOW_CANVAS_MAIN_EDGE_OFFSET,
+  });
+  return (
+    <BaseEdge
+      id={props.id}
+      path={path}
+      markerEnd={props.markerEnd}
+      markerStart={props.markerStart}
+      style={props.style}
+      label={props.label}
+      labelX={labelX}
+      labelY={labelY + 16}
+      labelStyle={props.labelStyle}
+      labelShowBg
+      labelBgStyle={props.labelBgStyle}
+      labelBgPadding={props.labelBgPadding}
+      labelBgBorderRadius={props.labelBgBorderRadius}
+      interactionWidth={props.interactionWidth}
+    />
+  );
+}

package/src/features/workflows/components/canvas/WorkflowCanvasToolbarIconButton.tsx

@@ -0,0 +1,95 @@
+import { type MouseEvent, type ReactNode, useState } from "react";
+
+export function WorkflowCanvasToolbarIconButton(
+  args: Readonly<{
+    testId: string;
+    ariaLabel: string;
+    tooltip: string;
+    onClick: (event: MouseEvent<HTMLButtonElement>) => void;
+    onAfterClick?: () => void;
+    disabled?: boolean;
+    children: ReactNode;
+    accentColor?: string;
+  }>,
+) {
+  const {
+    accentColor = "#111827",
+    ariaLabel,
+    children,
+    disabled = false,
+    onAfterClick,
+    onClick,
+    testId,
+    tooltip,
+  } = args;
+  const [isTooltipVisible, setIsTooltipVisible] = useState(false);
+  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {
+    onClick(event);
+    event.currentTarget.blur();
+    onAfterClick?.();
+  };
+  return (
+    <div
+      style={{ position: "relative", display: "grid", placeItems: "center" }}
+      onPointerEnter={() => setIsTooltipVisible(true)}
+      onPointerLeave={() => setIsTooltipVisible(false)}
+      onFocusCapture={() => setIsTooltipVisible(true)}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setIsTooltipVisible(false);
+        }
+      }}
+    >
+      <button
+        type="button"
+        data-testid={testId}
+        aria-label={ariaLabel}
+        onMouseDown={(event) => {
+          if (!disabled) {
+            event.preventDefault();
+          }
+        }}
+        onClick={handleClick}
+        disabled={disabled}
+        style={{
+          width: 24,
+          height: 24,
+          border: "1px solid #d1d5db",
+          background: "white",
+          color: accentColor,
+          display: "grid",
+          placeItems: "center",
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.45 : 1,
+          padding: 0,
+          boxShadow: "0 1px 2px rgba(15,23,42,0.05)",
+        }}
+      >
+        {children}
+      </button>
+      <div
+        role="tooltip"
+        aria-hidden={!isTooltipVisible}
+        style={{
+          position: "absolute",
+          bottom: "calc(100% + 8px)",
+          left: "50%",
+          transform: isTooltipVisible ? "translateX(-50%) translateY(0)" : "translateX(-50%) translateY(3px)",
+          opacity: isTooltipVisible ? 1 : 0,
+          transition: "opacity 110ms ease-out, transform 110ms ease-out",
+          pointerEvents: "none",
+          padding: "6px 8px",
+          background: "rgba(15,23,42,0.94)",
+          color: "white",
+          fontSize: 11,
+          fontWeight: 700,
+          whiteSpace: "nowrap",
+          boxShadow: "0 10px 24px rgba(15,23,42,0.2)",
+          zIndex: 40,
+        }}
+      >
+        {tooltip}
+      </div>
+    </div>
+  );
+}

package/src/features/workflows/components/canvas/lib/WorkflowCanvasBuiltinIconRegistry.ts

@@ -0,0 +1,26 @@
+/**
+ * Built-in canvas icons (brand marks, etc.) shipped as **SVG files** under `public/canvas-icons/builtin/`.
+ * Same idea as n8n’s `file:icon.svg`: one asset per id, square or near-square artboard, no per-brand TSX.
+ *
+ * To add a builtin:
+ * 1. Add `public/canvas-icons/builtin/<id>.svg` (prefer square viewBox; optimize with SVGO).
+ * 2. Register the URL in {@link BUILTIN_CANVAS_ICON_URLS}.
+ */
+const CANVAS_BUILTIN_ICON_BASE = "/canvas-icons/builtin";
+
+export const BUILTIN_CANVAS_ICON_URLS: Readonly<Record<string, string>> = {
+  openai: `${CANVAS_BUILTIN_ICON_BASE}/openai.svg`,
+} as const;
+
+export type BuiltinCanvasIconId = keyof typeof BUILTIN_CANVAS_ICON_URLS;
+
+export class WorkflowCanvasBuiltinIconRegistry {
+  static resolveUrl(id: string): string | undefined {
+    const key = id.trim().toLowerCase();
+    return BUILTIN_CANVAS_ICON_URLS[key];
+  }
+
+  static has(id: string): boolean {
+    return WorkflowCanvasBuiltinIconRegistry.resolveUrl(id) !== undefined;
+  }
+}

package/src/features/workflows/components/canvas/lib/WorkflowCanvasEdgeCountResolver.ts

@@ -0,0 +1,51 @@
+import type { ConnectionInvocationRecord, NodeExecutionSnapshot } from "../../../lib/realtime/realtimeDomainTypes";
+
+export class WorkflowCanvasEdgeCountResolver {
+  static resolveCount(
+    args: Readonly<{
+      targetNodeId: string;
+      targetNodeRole: string | undefined;
+      targetInput: string;
+      sourceOutput: string;
+      sourceSnapshot: NodeExecutionSnapshot | undefined;
+      targetSnapshot: NodeExecutionSnapshot | undefined;
+      nodeSnapshotsByNodeId: Readonly<Record<string, NodeExecutionSnapshot>>;
+      connectionInvocations: ReadonlyArray<ConnectionInvocationRecord>;
+    }>,
+  ): number {
+    if (args.targetNodeRole === "languageModel" || args.targetNodeRole === "tool") {
+      const attachmentInvocationCount = this.resolveAttachmentInvocationCount(
+        args.targetNodeId,
+        args.targetNodeRole,
+        args.nodeSnapshotsByNodeId,
+        args.connectionInvocations,
+      );
+      if (attachmentInvocationCount > 0) return attachmentInvocationCount;
+    }
+
+    const targetInputItems = args.targetSnapshot?.inputsByPort?.[args.targetInput];
+    const sourceOutputItems = args.sourceSnapshot?.outputs?.[args.sourceOutput];
+    return targetInputItems?.length ?? sourceOutputItems?.length ?? 0;
+  }
+
+  private static resolveAttachmentInvocationCount(
+    targetNodeId: string,
+    targetNodeRole: string,
+    nodeSnapshotsByNodeId: Readonly<Record<string, NodeExecutionSnapshot>>,
+    connectionInvocations: ReadonlyArray<ConnectionInvocationRecord>,
+  ): number {
+    const fromHistory = connectionInvocations.filter((inv) => inv.connectionNodeId === targetNodeId).length;
+    if (fromHistory > 0) {
+      return fromHistory;
+    }
+    return Object.values(nodeSnapshotsByNodeId).filter((snapshot) => {
+      if (targetNodeRole === "languageModel") {
+        return snapshot.nodeId === targetNodeId;
+      }
+      if (targetNodeRole === "tool") {
+        return snapshot.nodeId === targetNodeId;
+      }
+      return false;
+    }).length;
+  }
+}

package/src/features/workflows/components/canvas/lib/WorkflowCanvasEdgeStyleResolver.ts

@@ -0,0 +1,35 @@
+export class WorkflowCanvasEdgeStyleResolver {
+  private static readonly activeMainStroke = "#111827";
+  private static readonly activeAttachmentStroke = "#94a3b8";
+  private static readonly inactiveMainStroke = "#9ca3af";
+  private static readonly inactiveAttachmentStroke = "#cbd5e1";
+  private static readonly activeMainLabelFill = "#111827";
+  private static readonly activeAttachmentLabelFill = "#475569";
+  private static readonly inactiveMainLabelFill = "#6b7280";
+  private static readonly inactiveAttachmentLabelFill = "#94a3b8";
+  private static readonly activeMainLabelBackground = "rgba(255,253,245,0.96)";
+  private static readonly activeAttachmentLabelBackground = "rgba(248,250,252,0.92)";
+  private static readonly inactiveMainLabelBackground = "rgba(249,250,251,0.96)";
+  private static readonly inactiveAttachmentLabelBackground = "rgba(248,250,252,0.72)";
+
+  static resolveStrokeColor(args: Readonly<{ edgeItemCount: number; isAttachmentEdge: boolean }>): string {
+    if (args.edgeItemCount > 0) {
+      return args.isAttachmentEdge ? this.activeAttachmentStroke : this.activeMainStroke;
+    }
+    return args.isAttachmentEdge ? this.inactiveAttachmentStroke : this.inactiveMainStroke;
+  }
+
+  static resolveLabelFill(args: Readonly<{ edgeItemCount: number; isAttachmentEdge: boolean }>): string {
+    if (args.edgeItemCount > 0) {
+      return args.isAttachmentEdge ? this.activeAttachmentLabelFill : this.activeMainLabelFill;
+    }
+    return args.isAttachmentEdge ? this.inactiveAttachmentLabelFill : this.inactiveMainLabelFill;
+  }
+
+  static resolveLabelBackground(args: Readonly<{ edgeItemCount: number; isAttachmentEdge: boolean }>): string {
+    if (args.edgeItemCount > 0) {
+      return args.isAttachmentEdge ? this.activeAttachmentLabelBackground : this.activeMainLabelBackground;
+    }
+    return args.isAttachmentEdge ? this.inactiveAttachmentLabelBackground : this.inactiveMainLabelBackground;
+  }
+}

package/src/features/workflows/components/canvas/lib/WorkflowCanvasLabelLayoutEstimator.ts

@@ -0,0 +1,42 @@
+/**
+ * Estimates wrapped line count for workflow canvas labels so Dagre layout height
+ * matches rendered text (no ellipsis; conservative wrap).
+ */
+export class WorkflowCanvasLabelLayoutEstimator {
+  private static readonly maxLinesCap = 80;
+
+  /**
+   * Word-wrap simulation in pixel space (approximate average Latin character width).
+   */
+  static estimateLineCount(text: string, maxContentWidthPx: number, fontSizePx: number): number {
+    const t = text.trim();
+    if (t.length === 0) {
+      return 1;
+    }
+    const avgCharWidthPx = fontSizePx * 0.52;
+    const spaceWidthPx = fontSizePx * 0.35;
+    const words = t.split(/\s+/).filter((w) => w.length > 0);
+    let lines = 1;
+    let lineWidthPx = 0;
+    for (const word of words) {
+      const wordWidthPx = word.length * avgCharWidthPx;
+      if (wordWidthPx > maxContentWidthPx) {
+        if (lineWidthPx > 0) {
+          lines += 1;
+        }
+        const wordLines = Math.ceil(wordWidthPx / maxContentWidthPx);
+        lines += wordLines - 1;
+        lineWidthPx = wordWidthPx % maxContentWidthPx || avgCharWidthPx * 0.5;
+        continue;
+      }
+      const gapPx = lineWidthPx > 0 ? spaceWidthPx : 0;
+      if (lineWidthPx + gapPx + wordWidthPx <= maxContentWidthPx + 0.5) {
+        lineWidthPx += gapPx + wordWidthPx;
+      } else {
+        lines += 1;
+        lineWidthPx = wordWidthPx;
+      }
+    }
+    return Math.min(Math.max(1, lines), this.maxLinesCap);
+  }
+}

package/src/features/workflows/components/canvas/lib/WorkflowCanvasOverlapResolver.ts

@@ -0,0 +1,78 @@
+/**
+ * Post-layout pass that removes axis-aligned overlaps between workflow nodes.
+ * Dagre (layered Sugiyama-style) provides the primary structure; this resolver
+ * nudges centers so bounding boxes never intersect—important when attachment
+ * nodes sit under parents or when manual offsets interact with dense graphs.
+ */
+export class WorkflowCanvasOverlapResolver {
+  static resolve(
+    args: Readonly<{
+      positionsByNodeId: ReadonlyMap<string, { x: number; y: number }>;
+      widthByNodeId: ReadonlyMap<string, number>;
+      heightByNodeId: ReadonlyMap<string, number>;
+      gap: number;
+      maxIterations?: number;
+    }>,
+  ): Map<string, { x: number; y: number }> {
+    const maxIterations = args.maxIterations ?? 160;
+    const gap = args.gap;
+    const out = new Map<string, { x: number; y: number }>();
+    for (const [id, p] of args.positionsByNodeId) {
+      out.set(id, { x: p.x, y: p.y });
+    }
+    const ids = [...out.keys()].sort();
+    for (let iter = 0; iter < maxIterations; iter++) {
+      let moved = false;
+      for (let i = 0; i < ids.length; i++) {
+        for (let j = i + 1; j < ids.length; j++) {
+          const idA = ids[i];
+          const idB = ids[j];
+          if (idA === undefined || idB === undefined) continue;
+          const pa = out.get(idA);
+          const pb = out.get(idB);
+          if (!pa || !pb) continue;
+          const wa = args.widthByNodeId.get(idA) ?? 0;
+          const ha = args.heightByNodeId.get(idA) ?? 0;
+          const wb = args.widthByNodeId.get(idB) ?? 0;
+          const hb = args.heightByNodeId.get(idB) ?? 0;
+          const minDx = (wa + wb) / 2 + gap;
+          const minDy = (ha + hb) / 2 + gap;
+          const dx = Math.abs(pa.x - pb.x);
+          const dy = Math.abs(pa.y - pb.y);
+          if (dx >= minDx || dy >= minDy) {
+            continue;
+          }
+          const overlapX = minDx - dx;
+          const overlapY = minDy - dy;
+          const moveId = idA > idB ? idA : idB;
+          const pm = out.get(moveId);
+          const otherId = moveId === idA ? idB : idA;
+          const po = out.get(otherId);
+          if (!pm || !po) continue;
+          const wm = moveId === idA ? wa : wb;
+          const hm = moveId === idA ? ha : hb;
+          const wo = moveId === idA ? wb : wa;
+          const ho = moveId === idA ? hb : ha;
+          const pairMinDx = (wm + wo) / 2 + gap;
+          const pairMinDy = (hm + ho) / 2 + gap;
+          if (overlapY <= overlapX) {
+            if (pm.y <= po.y) {
+              out.set(moveId, { x: pm.x, y: po.y - pairMinDy });
+            } else {
+              out.set(moveId, { x: pm.x, y: po.y + pairMinDy });
+            }
+          } else if (pm.x <= po.x) {
+            out.set(moveId, { x: po.x - pairMinDx, y: pm.y });
+          } else {
+            out.set(moveId, { x: po.x + pairMinDx, y: pm.y });
+          }
+          moved = true;
+        }
+      }
+      if (!moved) {
+        break;
+      }
+    }
+    return out;
+  }
+}

package/src/features/workflows/components/canvas/lib/WorkflowCanvasPortOrderResolver.ts

@@ -0,0 +1,25 @@
+/**
+ * Stable ordering for workflow I/O ports on canvas handles so branches (e.g. true/false)
+ * stack predictably: true above false, merge inputs aligned with branch geometry.
+ */
+export class WorkflowCanvasPortOrderResolver {
+  static sortSourceOutputs(ports: readonly string[]): string[] {
+    const rank = (p: string): number => {
+      if (p === "true") return 0;
+      if (p === "false") return 1;
+      if (p === "main") return 2;
+      return 3;
+    };
+    return [...new Set(ports)].sort((a, b) => rank(a) - rank(b) || a.localeCompare(b));
+  }
+
+  static sortTargetInputs(ports: readonly string[]): string[] {
+    const rank = (p: string): number => {
+      if (p === "true") return 0;
+      if (p === "false") return 1;
+      if (p === "in") return 2;
+      return 3;
+    };
+    return [...new Set(ports)].sort((a, b) => rank(a) - rank(b) || a.localeCompare(b));
+  }
+}

package/src/features/workflows/components/canvas/lib/WorkflowCanvasRoundedOrthogonalPathPlanner.ts

@@ -0,0 +1,56 @@
+import { WORKFLOW_CANVAS_MAIN_EDGE_CORNER_RADIUS } from "./workflowCanvasEdgeGeometry";
+
+type XY = Readonly<{ x: number; y: number }>;
+
+/**
+ * Same corner treatment as React Flow's {@link getSmoothStepPath} (quadratic bends at
+ * orthogonal joints) applied to an explicit polyline—used for symmetric fork edges.
+ */
+export class WorkflowCanvasRoundedOrthogonalPathPlanner {
+  static buildPathFromPoints(
+    points: ReadonlyArray<XY>,
+    borderRadius: number = WORKFLOW_CANVAS_MAIN_EDGE_CORNER_RADIUS,
+  ): string {
+    if (points.length === 0) {
+      return "";
+    }
+    return points.reduce((res, p, i) => {
+      let segment = "";
+      if (i > 0 && i < points.length - 1) {
+        const prev = points[i - 1];
+        const next = points[i + 1];
+        if (prev && next) {
+          segment = WorkflowCanvasRoundedOrthogonalPathPlanner.bend(prev, p, next, borderRadius);
+        }
+      } else {
+        segment = `${i === 0 ? "M" : "L"}${p.x} ${p.y}`;
+      }
+      return res + segment;
+    }, "");
+  }
+
+  private static distance(a: XY, b: XY): number {
+    return Math.sqrt((b.x - a.x) ** 2 + (b.y - a.y) ** 2);
+  }
+
+  /** Ported from @xyflow/system getBend (smoothstep-edge). */
+  private static bend(a: XY, b: XY, c: XY, size: number): string {
+    const bendSize = Math.min(
+      WorkflowCanvasRoundedOrthogonalPathPlanner.distance(a, b) / 2,
+      WorkflowCanvasRoundedOrthogonalPathPlanner.distance(b, c) / 2,
+      size,
+    );
+    const { x, y } = b;
+    if ((a.x === x && x === c.x) || (a.y === y && y === c.y)) {
+      return `L${x} ${y}`;
+    }
+    if (a.y === y) {
+      const xDir = a.x < c.x ? -1 : 1;
+      const yDir = a.y < c.y ? 1 : -1;
+      return `L ${x + bendSize * xDir},${y}Q ${x},${y} ${x},${y + bendSize * yDir}`;
+    }
+    const xDir = a.x < c.x ? 1 : -1;
+    const yDir = a.y < c.y ? -1 : 1;
+    return `L ${x},${y + bendSize * yDir}Q ${x},${y} ${x + bendSize * xDir},${y}`;
+  }
+}