@codemation/next-host 0.0.1

package/src/features/workflows/components/WorkflowsListTree.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+
+import type { ReactNode } from "react";
+
+import type { WorkflowSummary } from "../hooks/realtime/realtime";
+
+import { WorkflowFolderTreeBuilder } from "@/shell/WorkflowFolderTreeBuilder";
+
+import { WorkflowListRoot } from "./WorkflowListRoot";
+
+const treeBuilder = new WorkflowFolderTreeBuilder();
+
+export function WorkflowsListTree(args: Readonly<{ workflows: ReadonlyArray<WorkflowSummary> }>): ReactNode {
+  const pathname = usePathname();
+  const tree = treeBuilder.build(args.workflows);
+  return (
+    <div
+      className="rounded-xl border border-border/50 bg-gradient-to-b from-card/90 to-muted/15 p-3 shadow-sm ring-1 ring-black/[0.04] dark:from-card/70 dark:to-muted/25 dark:ring-white/[0.05] sm:p-4"
+      data-testid="workflows-list"
+    >
+      <ul className="m-0 grid list-none gap-1.5 p-0">
+        <WorkflowListRoot node={tree} pathname={pathname} workflows={args.workflows} />
+      </ul>
+    </div>
+  );
+}

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

@@ -0,0 +1,96 @@
+"use client";
+
+import { type ReactNode, useCallback, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+
+/**
+ * Floating tooltip for canvas chrome (portal to `document.body` so parent `overflow:hidden` does not clip).
+ * Positioned below the anchor so header-row icons (e.g. next to Active) are not clipped by the viewport top edge.
+ */
+export function CanvasNodeChromeTooltip(
+  args: Readonly<{
+    testId: string;
+    ariaLabel: string;
+    tooltip: string;
+    children: ReactNode;
+  }>,
+): React.JSX.Element {
+  const { ariaLabel, children, testId, tooltip } = args;
+  const anchorRef = useRef<HTMLDivElement>(null);
+  const [visible, setVisible] = useState(false);
+  const [bubble, setBubble] = useState<Readonly<{ x: number; y: number }> | null>(null);
+
+  const updatePosition = useCallback(() => {
+    const el = anchorRef.current;
+    if (!el) {
+      return;
+    }
+    const r = el.getBoundingClientRect();
+    setBubble({ x: r.left + r.width / 2, y: r.bottom });
+  }, []);
+
+  useLayoutEffect(() => {
+    if (visible) {
+      updatePosition();
+    }
+  }, [visible, updatePosition]);
+
+  useLayoutEffect(() => {
+    if (!visible) {
+      return;
+    }
+    const onScroll = (): void => {
+      updatePosition();
+    };
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onScroll);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onScroll);
+    };
+  }, [visible, updatePosition]);
+
+  const tooltipBubble =
+    visible && bubble && typeof document !== "undefined" ? (
+      <div
+        role="tooltip"
+        className="pointer-events-none fixed z-[10000] max-w-[min(22rem,calc(100vw-2rem))] px-2 py-1.5 text-left text-[11px] font-bold leading-snug whitespace-pre-wrap text-white shadow-lg"
+        style={{
+          left: bubble.x,
+          top: bubble.y,
+          transform: "translate(-50%, 8px)",
+          background: "rgba(15,23,42,0.94)",
+          boxShadow: "0 10px 24px rgba(15,23,42,0.2)",
+        }}
+      >
+        {tooltip}
+      </div>
+    ) : null;
+
+  return (
+    <div
+      ref={anchorRef}
+      data-testid={testId}
+      className="relative inline-flex"
+      onPointerEnter={() => {
+        updatePosition();
+        setVisible(true);
+      }}
+      onPointerLeave={() => setVisible(false)}
+      onFocusCapture={() => {
+        updatePosition();
+        setVisible(true);
+      }}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          setVisible(false);
+        }
+      }}
+    >
+      <span aria-label={ariaLabel} className="inline-flex">
+        {children}
+      </span>
+      {tooltipBubble ? createPortal(tooltipBubble, document.body) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+
+/**
+ * Fixed square slot so Lucide, Simple Icons, brand SVGs, and raster URLs share one bounding box.
+ */
+export function CanvasNodeIconSlot(props: Readonly<{ sizePx: number; children: ReactNode }>) {
+  const { sizePx, children } = props;
+  return (
+    <span
+      style={{
+        width: sizePx,
+        height: sizePx,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        flexShrink: 0,
+        lineHeight: 0,
+        color: "#0f172a",
+        backgroundColor: "transparent",
+      }}
+    >
+      {children}
+    </span>
+  );
+}

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

@@ -0,0 +1,84 @@
+import type { ConnectionInvocationRecord, NodeExecutionSnapshot } from "../../hooks/realtime/realtime";
+
+export class VisibleNodeStatusResolver {
+  private static readonly statusPriorityByStatus = new Map<NodeExecutionSnapshot["status"], number>([
+    ["running", 0],
+    ["queued", 1],
+    ["completed", 2],
+    ["failed", 3],
+    ["skipped", 4],
+    ["pending", 5],
+  ]);
+
+  private static readonly invocationWorstStatusOrder = [
+    "failed",
+    "running",
+    "queued",
+    "completed",
+    "skipped",
+    "pending",
+  ] as const;
+
+  static resolveStatuses(
+    nodeSnapshotsByNodeId: Readonly<Record<string, NodeExecutionSnapshot>>,
+    connectionInvocations?: ReadonlyArray<ConnectionInvocationRecord>,
+  ): Readonly<Record<string, NodeExecutionSnapshot["status"] | undefined>> {
+    const snapshotsByVisibleNodeId = new Map<string, NodeExecutionSnapshot[]>();
+    for (const [nodeId, snapshot] of Object.entries(nodeSnapshotsByNodeId)) {
+      const snapshots = snapshotsByVisibleNodeId.get(nodeId) ?? [];
+      snapshots.push(snapshot);
+      snapshotsByVisibleNodeId.set(nodeId, snapshots);
+    }
+
+    const statusEntries: Array<readonly [string, NodeExecutionSnapshot["status"]]> = [];
+    for (const [visibleNodeId, snapshots] of snapshotsByVisibleNodeId.entries()) {
+      const resolvedSnapshot = [...snapshots].sort((left, right) => this.compareSnapshots(left, right))[0];
+      if (resolvedSnapshot) {
+        statusEntries.push([visibleNodeId, resolvedSnapshot.status] as const);
+      }
+    }
+    const result = Object.fromEntries(statusEntries) as Record<string, NodeExecutionSnapshot["status"] | undefined>;
+    const invocationsByConnectionNodeId = new Map<string, ConnectionInvocationRecord[]>();
+    for (const inv of connectionInvocations ?? []) {
+      const list = invocationsByConnectionNodeId.get(inv.connectionNodeId) ?? [];
+      list.push(inv);
+      invocationsByConnectionNodeId.set(inv.connectionNodeId, list);
+    }
+    for (const [connectionNodeId, invs] of invocationsByConnectionNodeId.entries()) {
+      const aggregated = this.worstInvocationStatus(invs.map((entry) => entry.status));
+      if (aggregated) {
+        result[connectionNodeId] = aggregated;
+      }
+    }
+    return result;
+  }
+
+  private static worstInvocationStatus(
+    statuses: ReadonlyArray<NodeExecutionSnapshot["status"]>,
+  ): NodeExecutionSnapshot["status"] | undefined {
+    if (statuses.length === 0) {
+      return undefined;
+    }
+    let best: NodeExecutionSnapshot["status"] | undefined;
+    let bestIdx: number = this.invocationWorstStatusOrder.length;
+    for (const status of statuses) {
+      const idx = this.invocationWorstStatusOrder.indexOf(status);
+      const resolvedIdx = idx >= 0 ? idx : this.invocationWorstStatusOrder.length;
+      if (resolvedIdx < bestIdx) {
+        bestIdx = resolvedIdx;
+        best = status;
+      }
+    }
+    return best ?? statuses[0];
+  }
+
+  private static compareSnapshots(left: NodeExecutionSnapshot, right: NodeExecutionSnapshot): number {
+    const statusPriorityComparison = this.getStatusPriority(left.status) - this.getStatusPriority(right.status);
+    if (statusPriorityComparison !== 0) return statusPriorityComparison;
+    return (right.updatedAt ?? "").localeCompare(left.updatedAt ?? "");
+  }
+
+  private static getStatusPriority(status: NodeExecutionSnapshot["status"]): number {
+    return this.statusPriorityByStatus.get(status) ?? Number.MAX_SAFE_INTEGER;
+  }
+}

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

@@ -0,0 +1,248 @@
+"use client";
+
+import {
+  Background,
+  Controls,
+  ReactFlow,
+  type Edge as ReactFlowEdge,
+  type ReactFlowInstance,
+  type Node as ReactFlowNode,
+} from "@xyflow/react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { ConnectionInvocationRecord, NodeExecutionSnapshot } from "../../hooks/realtime/realtime";
+import type { WorkflowDto } from "../../lib/realtime/workflowTypes";
+import { layoutWorkflow } from "./lib/layoutWorkflow";
+import type { WorkflowCanvasNodeData } from "./lib/workflowCanvasNodeData";
+import { workflowCanvasEdgeTypes, workflowCanvasNodeTypes } from "./lib/workflowCanvasFlowTypes";
+import { useWorkflowCanvasVisibleNodeStatuses } from "../../hooks/canvas/useWorkflowCanvasVisibleNodeStatuses";
+import { WORKFLOW_CANVAS_EMBEDDED_STYLES } from "./lib/workflowCanvasEmbeddedStyles";
+import { WorkflowCanvasLoadingPlaceholder } from "./WorkflowCanvasLoadingPlaceholder";
+import { WorkflowCanvasStructureSignature } from "./WorkflowCanvasStructureSignature";
+
+export function WorkflowCanvas(args: {
+  workflow: WorkflowDto;
+  nodeSnapshotsByNodeId: Readonly<Record<string, NodeExecutionSnapshot>>;
+  connectionInvocations?: ReadonlyArray<ConnectionInvocationRecord>;
+  credentialAttentionTooltipByNodeId?: ReadonlyMap<string, string>;
+  selectedNodeId: string | null;
+  propertiesTargetNodeId: string | null;
+  pinnedNodeIds?: ReadonlySet<string>;
+  isLiveWorkflowView: boolean;
+  isRunning: boolean;
+  onSelectNode: (nodeId: string) => void;
+  onOpenPropertiesNode: (nodeId: string) => void;
+  onRunNode: (nodeId: string) => void;
+  onTogglePinnedOutput: (nodeId: string) => void;
+  onEditNodeOutput: (nodeId: string) => void;
+  onClearPinnedOutput: (nodeId: string) => void;
+  workflowNodeIdsWithBoundCredential?: ReadonlySet<string>;
+  onRequestOpenCredentialEditForNode?: (nodeId: string) => void;
+}) {
+  const {
+    workflow,
+    nodeSnapshotsByNodeId,
+    connectionInvocations = [],
+    credentialAttentionTooltipByNodeId = new Map<string, string>(),
+    selectedNodeId,
+    propertiesTargetNodeId,
+    pinnedNodeIds = new Set<string>(),
+    isLiveWorkflowView,
+    isRunning,
+    onSelectNode,
+    onOpenPropertiesNode,
+    onRunNode,
+    onTogglePinnedOutput,
+    onEditNodeOutput,
+    onClearPinnedOutput,
+    workflowNodeIdsWithBoundCredential = new Set<string>(),
+    onRequestOpenCredentialEditForNode = () => {},
+  } = args;
+  const [hasMountedOnClient, setHasMountedOnClient] = useState(false);
+  const [isInitialViewportReady, setIsInitialViewportReady] = useState(false);
+  const workflowStructureSignature = useMemo(() => WorkflowCanvasStructureSignature.create(workflow), [workflow]);
+  const visibleNodeStatusesByNodeId = useWorkflowCanvasVisibleNodeStatuses(
+    nodeSnapshotsByNodeId,
+    connectionInvocations,
+  );
+  const { nodes, edges } = useMemo(
+    () =>
+      layoutWorkflow(
+        workflow,
+        nodeSnapshotsByNodeId,
+        connectionInvocations,
+        visibleNodeStatusesByNodeId,
+        credentialAttentionTooltipByNodeId,
+        selectedNodeId,
+        propertiesTargetNodeId,
+        pinnedNodeIds,
+        isLiveWorkflowView,
+        isRunning,
+        workflowNodeIdsWithBoundCredential,
+        onSelectNode,
+        onOpenPropertiesNode,
+        onRequestOpenCredentialEditForNode,
+        onRunNode,
+        onTogglePinnedOutput,
+        onEditNodeOutput,
+        onClearPinnedOutput,
+      ),
+    [
+      connectionInvocations,
+      credentialAttentionTooltipByNodeId,
+      isLiveWorkflowView,
+      isRunning,
+      nodeSnapshotsByNodeId,
+      onClearPinnedOutput,
+      onEditNodeOutput,
+      onOpenPropertiesNode,
+      onRequestOpenCredentialEditForNode,
+      onRunNode,
+      onSelectNode,
+      onTogglePinnedOutput,
+      pinnedNodeIds,
+      propertiesTargetNodeId,
+      selectedNodeId,
+      visibleNodeStatusesByNodeId,
+      workflow,
+      workflowNodeIdsWithBoundCredential,
+    ],
+  );
+  const canvasContainerRef = useRef<HTMLDivElement | null>(null);
+  const reactFlowInstanceRef = useRef<ReactFlowInstance<ReactFlowNode<WorkflowCanvasNodeData>, ReactFlowEdge> | null>(
+    null,
+  );
+  const fitViewAnimationFrameIdRef = useRef<number | null>(null);
+  const fitViewTimeoutIdRef = useRef<number | null>(null);
+  const fitViewRequestIdRef = useRef(0);
+  const fitViewOptions = useMemo(
+    () =>
+      ({
+        padding: 0.24,
+        minZoom: 0.2,
+        maxZoom: 1,
+      }) as const,
+    [],
+  );
+  const scheduleFitView = useCallback(() => {
+    const canvasContainer = canvasContainerRef.current;
+    const reactFlowInstance = reactFlowInstanceRef.current;
+    if (!canvasContainer || !reactFlowInstance || nodes.length === 0) {
+      return;
+    }
+    if (canvasContainer.clientWidth === 0 || canvasContainer.clientHeight === 0) {
+      return;
+    }
+    if (fitViewAnimationFrameIdRef.current !== null) {
+      cancelAnimationFrame(fitViewAnimationFrameIdRef.current);
+    }
+    fitViewRequestIdRef.current += 1;
+    const requestId = fitViewRequestIdRef.current;
+    fitViewAnimationFrameIdRef.current = requestAnimationFrame(() => {
+      fitViewAnimationFrameIdRef.current = requestAnimationFrame(() => {
+        fitViewAnimationFrameIdRef.current = null;
+        void reactFlowInstance.fitView(fitViewOptions).then(() => {
+          if (requestId !== fitViewRequestIdRef.current) {
+            return;
+          }
+          setIsInitialViewportReady(true);
+        });
+      });
+    });
+  }, [fitViewOptions, nodes.length]);
+
+  useEffect(() => {
+    setHasMountedOnClient(true);
+  }, []);
+
+  useEffect(() => {
+    setIsInitialViewportReady(false);
+  }, [workflow.id, workflowStructureSignature]);
+
+  useEffect(() => {
+    scheduleFitView();
+    if (fitViewTimeoutIdRef.current !== null) {
+      window.clearTimeout(fitViewTimeoutIdRef.current);
+    }
+    fitViewTimeoutIdRef.current = window.setTimeout(() => {
+      fitViewTimeoutIdRef.current = null;
+      scheduleFitView();
+    }, 120);
+  }, [scheduleFitView, workflow.id, workflowStructureSignature]);
+
+  useEffect(() => {
+    const canvasContainer = canvasContainerRef.current;
+    if (!canvasContainer || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    const resizeObserver = new ResizeObserver(() => {
+      scheduleFitView();
+    });
+    resizeObserver.observe(canvasContainer);
+    return () => {
+      resizeObserver.disconnect();
+    };
+  }, [scheduleFitView]);
+
+  useEffect(() => {
+    return () => {
+      if (fitViewAnimationFrameIdRef.current !== null) {
+        cancelAnimationFrame(fitViewAnimationFrameIdRef.current);
+      }
+      if (fitViewTimeoutIdRef.current !== null) {
+        window.clearTimeout(fitViewTimeoutIdRef.current);
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={canvasContainerRef}
+      data-testid="workflow-canvas-root"
+      data-workflow-structure-signature={workflowStructureSignature}
+      style={{
+        width: "100%",
+        height: "100%",
+        background: "#fbfbfc",
+        fontFamily: "inherit",
+        position: "relative",
+      }}
+    >
+      {hasMountedOnClient ? (
+        <ReactFlow
+          nodes={nodes}
+          edges={edges}
+          nodeTypes={workflowCanvasNodeTypes}
+          edgeTypes={workflowCanvasEdgeTypes}
+          onInit={(instance) => {
+            reactFlowInstanceRef.current = instance;
+            scheduleFitView();
+          }}
+          onNodeClick={(_event, node) => {
+            onSelectNode(node.id);
+            onOpenPropertiesNode(node.id);
+          }}
+          style={{
+            fontFamily: "inherit",
+            opacity: isInitialViewportReady ? 1 : 0,
+            transition: "opacity 120ms ease-out",
+          }}
+          nodesDraggable={false}
+          nodesConnectable={false}
+          elementsSelectable
+          zoomOnScroll
+          panOnScroll
+        >
+          <Background gap={22} size={1.1} color="#d9e0ea" />
+          <Controls showInteractive={false} position="bottom-left" />
+        </ReactFlow>
+      ) : null}
+      <WorkflowCanvasLoadingPlaceholder isInitialViewportReady={isInitialViewportReady} />
+      <style>{WORKFLOW_CANVAS_EMBEDDED_STYLES}</style>
+    </div>
+  );
+}
+
+export { VisibleNodeStatusResolver } from "./VisibleNodeStatusResolver";
+export { WorkflowCanvasEdgeCountResolver } from "./lib/WorkflowCanvasEdgeCountResolver";
+export { WorkflowCanvasStructureSignature } from "./WorkflowCanvasStructureSignature";

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

@@ -0,0 +1,182 @@
+import { type CSSProperties, useEffect, useRef, useState } from "react";
+
+import type { WorkflowCanvasNodeData } from "./lib/workflowCanvasNodeData";
+import {
+  WORKFLOW_CANVAS_AGENT_NODE_CARD_WIDTH_PX,
+  WORKFLOW_CANVAS_ATTACHMENT_NODE_CARD_PX,
+  WORKFLOW_CANVAS_MAIN_NODE_CARD_PX,
+  WORKFLOW_CANVAS_MAIN_NODE_LABEL_GAP_PX,
+  WorkflowCanvasNodeGeometry,
+} from "./lib/workflowCanvasNodeGeometry";
+import { WorkflowCanvasCodemationNodeAccents } from "./WorkflowCanvasCodemationNodeAccents";
+import { WorkflowCanvasCodemationNodeAgentLabels } from "./WorkflowCanvasCodemationNodeAgentLabels";
+import { WorkflowCanvasCodemationNodeCard } from "./WorkflowCanvasCodemationNodeCard";
+import { WorkflowCanvasCodemationNodeAgentBottomSourceHandles } from "./WorkflowCanvasCodemationNodeAgentBottomSourceHandles";
+import { WorkflowCanvasCodemationNodeHandles } from "./WorkflowCanvasCodemationNodeHandles";
+import { WorkflowCanvasCodemationNodeLabelBelow } from "./WorkflowCanvasCodemationNodeLabelBelow";
+import { WorkflowCanvasCodemationNodeToolbar } from "./WorkflowCanvasCodemationNodeToolbar";
+
+export function CodemationNode({ data }: { data: WorkflowCanvasNodeData }) {
+  const isQueued = data.status === "queued";
+  const isRunning = data.status === "running";
+  const isActive = isQueued || isRunning;
+  const isSelected = data.selected;
+  const isPropertiesTarget = data.propertiesTarget;
+  const isAttachment = data.isAttachment;
+  const isAgent = data.role === "agent";
+  const isPinned = data.isPinned;
+  const [isHovered, setIsHovered] = useState(false);
+  const [hasToolbarFocus, setHasToolbarFocus] = useState(false);
+  const hideToolbarTimeoutRef = useRef<number | null>(null);
+  const showsCanvasControls = data.isLiveWorkflowView && !isAttachment;
+  const isToolbarVisible = showsCanvasControls && (isHovered || hasToolbarFocus);
+  const activityColor = isRunning ? "#2563eb" : "#7c3aed";
+  const cardHeightPx = isAttachment ? WORKFLOW_CANVAS_ATTACHMENT_NODE_CARD_PX : WORKFLOW_CANVAS_MAIN_NODE_CARD_PX;
+  const cardWidthPx = isAttachment
+    ? WORKFLOW_CANVAS_ATTACHMENT_NODE_CARD_PX
+    : isAgent
+      ? WORKFLOW_CANVAS_AGENT_NODE_CARD_WIDTH_PX
+      : WORKFLOW_CANVAS_MAIN_NODE_CARD_PX;
+  const fallbackWidthPx = isAttachment
+    ? WorkflowCanvasNodeGeometry.attachmentNodeWidthPx()
+    : WorkflowCanvasNodeGeometry.mainNodeWidthPx(isAgent);
+  const fallbackHeightPx = isAttachment
+    ? WorkflowCanvasNodeGeometry.attachmentNodeHeightPx(data.label)
+    : WorkflowCanvasNodeGeometry.mainNodeHeightPx(data.label, isAgent);
+  const nodeWidthPx = data.layoutWidthPx > 0 ? data.layoutWidthPx : fallbackWidthPx;
+  const nodeHeightPx = data.layoutHeightPx > 0 ? data.layoutHeightPx : fallbackHeightPx;
+  const attachmentSourceOffsetFromNodeBottomPx = Math.max(0, Math.round(nodeHeightPx - cardHeightPx));
+  const activityRingStyle: CSSProperties = {
+    position: "absolute",
+    inset: -4,
+    borderRadius: 9,
+    pointerEvents: "none",
+    opacity: isRunning ? 1 : 0.75,
+    padding: 2,
+    background: `conic-gradient(from var(--codemation-node-ring-angle), ${activityColor} 0deg, ${activityColor} 72deg, ${activityColor}22 132deg, ${activityColor}1f 228deg, ${activityColor} 324deg, ${activityColor} 360deg)`,
+    animation: isRunning
+      ? "codemationNodeRingRotate 1.5s linear infinite"
+      : "codemationNodeRingRotate 4.5s linear infinite",
+    WebkitMask: "linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)",
+    WebkitMaskComposite: "xor",
+    maskComposite: "exclude",
+    ["--codemation-node-ring-angle" as string]: "0deg",
+  };
+  useEffect(() => {
+    return () => {
+      if (hideToolbarTimeoutRef.current !== null) {
+        window.clearTimeout(hideToolbarTimeoutRef.current);
+      }
+    };
+  }, []);
+  return (
+    <div
+      onPointerEnter={() => {
+        if (hideToolbarTimeoutRef.current !== null) {
+          window.clearTimeout(hideToolbarTimeoutRef.current);
+          hideToolbarTimeoutRef.current = null;
+        }
+        setIsHovered(true);
+      }}
+      onPointerLeave={() => {
+        if (hideToolbarTimeoutRef.current !== null) {
+          window.clearTimeout(hideToolbarTimeoutRef.current);
+        }
+        hideToolbarTimeoutRef.current = window.setTimeout(() => {
+          setIsHovered(false);
+          hideToolbarTimeoutRef.current = null;
+        }, 140);
+      }}
+      onFocusCapture={() => {
+        if (hideToolbarTimeoutRef.current !== null) {
+          window.clearTimeout(hideToolbarTimeoutRef.current);
+          hideToolbarTimeoutRef.current = null;
+        }
+        setHasToolbarFocus(true);
+      }}
+      onBlurCapture={(event) => {
+        if (!event.currentTarget.contains(event.relatedTarget as Node | null)) {
+          if (hideToolbarTimeoutRef.current !== null) {
+            window.clearTimeout(hideToolbarTimeoutRef.current);
+          }
+          hideToolbarTimeoutRef.current = window.setTimeout(() => {
+            setHasToolbarFocus(false);
+            hideToolbarTimeoutRef.current = null;
+          }, 140);
+        }
+      }}
+      style={{
+        width: nodeWidthPx,
+        height: nodeHeightPx,
+        borderRadius: 0,
+        background: "transparent",
+        boxShadow: "none",
+        position: "relative",
+        overflow: "visible",
+      }}
+      data-testid={`canvas-node-shell-${data.nodeId}`}
+    >
+      <div
+        onClick={(event) => {
+          event.stopPropagation();
+          data.onSelectNode(data.nodeId);
+          data.onOpenPropertiesNode(data.nodeId);
+        }}
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          width: nodeWidthPx,
+        }}
+      >
+        <div
+          style={{
+            position: "relative",
+            width: cardWidthPx,
+            height: cardHeightPx,
+            borderRadius: 7,
+          }}
+        >
+          <WorkflowCanvasCodemationNodeAccents
+            activityColor={activityColor}
+            activityRingStyle={activityRingStyle}
+            isActive={isActive}
+            isActiveForProperties={isActive}
+            isActiveForSelected={isActive}
+            isPropertiesTarget={isPropertiesTarget}
+            isRunning={isRunning}
+            isSelected={isSelected}
+          />
+          <WorkflowCanvasCodemationNodeHandles
+            kind={data.kind}
+            isAgent={isAgent}
+            isAttachment={isAttachment}
+            omitAgentBottomSourceHandles={isAgent && !isAttachment}
+            sourceOutputPorts={data.sourceOutputPorts}
+            targetInputPorts={data.targetInputPorts}
+          />
+          <WorkflowCanvasCodemationNodeCard cardWidthPx={cardWidthPx} cardHeightPx={cardHeightPx} data={data} />
+        </div>
+        {isAgent ? (
+          <div style={{ marginTop: WORKFLOW_CANVAS_MAIN_NODE_LABEL_GAP_PX, width: "100%" }}>
+            <WorkflowCanvasCodemationNodeAgentLabels />
+          </div>
+        ) : null}
+        <WorkflowCanvasCodemationNodeLabelBelow data={data} maxWidthPx={cardWidthPx} />
+      </div>
+      {isAgent && !isAttachment ? (
+        <WorkflowCanvasCodemationNodeAgentBottomSourceHandles
+          offsetFromNodeBottomPx={attachmentSourceOffsetFromNodeBottomPx}
+        />
+      ) : null}
+      {showsCanvasControls ? (
+        <WorkflowCanvasCodemationNodeToolbar
+          data={data}
+          isPinned={isPinned}
+          isToolbarVisible={isToolbarVisible}
+          setHasToolbarFocus={setHasToolbarFocus}
+        />
+      ) : null}
+    </div>
+  );
+}