@codemation/next-host 0.0.1

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

@@ -0,0 +1,73 @@
+import type { CSSProperties } from "react";
+
+export function WorkflowCanvasCodemationNodeAccents(
+  props: Readonly<{
+    isActive: boolean;
+    isRunning: boolean;
+    activityColor: string;
+    activityRingStyle: CSSProperties;
+    isPropertiesTarget: boolean;
+    isActiveForProperties: boolean;
+    isSelected: boolean;
+    isActiveForSelected: boolean;
+  }>,
+) {
+  const {
+    activityColor,
+    activityRingStyle,
+    isActive,
+    isActiveForProperties,
+    isActiveForSelected,
+    isPropertiesTarget,
+    isRunning,
+    isSelected,
+  } = props;
+  return (
+    <>
+      {isActive ? (
+        <>
+          <div
+            style={{
+              position: "absolute",
+              inset: -8,
+              borderRadius: 9,
+              pointerEvents: "none",
+              boxShadow: `0 0 14px ${activityColor}33, 0 0 28px ${activityColor}22`,
+              opacity: isRunning ? 0.85 : 0.48,
+              animation: isRunning ? "codemationNodeBreath 2.2s ease-in-out infinite" : "none",
+            }}
+          />
+          <div aria-hidden style={activityRingStyle} />
+        </>
+      ) : null}
+      {isPropertiesTarget ? (
+        <div
+          aria-hidden
+          style={{
+            position: "absolute",
+            inset: 2,
+            borderRadius: 7,
+            pointerEvents: "none",
+            border: "2px solid #7c3aed",
+            boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.78)",
+            opacity: isActiveForProperties ? 0.92 : 1,
+          }}
+        />
+      ) : null}
+      {isSelected ? (
+        <div
+          aria-hidden
+          style={{
+            position: "absolute",
+            inset: 4,
+            borderRadius: 6,
+            pointerEvents: "none",
+            border: "2px dashed #f59e0b",
+            boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.85)",
+            opacity: isActiveForSelected ? 0.95 : 1,
+          }}
+        />
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,43 @@
+import { Handle, Position } from "@xyflow/react";
+
+const HANDLE_STYLE = {
+  width: 8,
+  height: 8,
+  border: "1px solid white",
+} as const;
+
+/**
+ * Bottom LLM/tools sources aligned with the bottom of the main card square (not the full node height).
+ * Attachment edges may overlap the agent badge row and node title; users can pan if needed.
+ */
+export function WorkflowCanvasCodemationNodeAgentBottomSourceHandles(
+  props: Readonly<{ offsetFromNodeBottomPx: number }>,
+) {
+  const { offsetFromNodeBottomPx } = props;
+  return (
+    <>
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="attachment-llm-source"
+        style={{
+          ...HANDLE_STYLE,
+          left: "34%",
+          background: "#2563eb",
+          bottom: offsetFromNodeBottomPx,
+        }}
+      />
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        id="attachment-tools-source"
+        style={{
+          ...HANDLE_STYLE,
+          left: "66%",
+          background: "#7c3aed",
+          bottom: offsetFromNodeBottomPx,
+        }}
+      />
+    </>
+  );
+}

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

@@ -0,0 +1,47 @@
+import { WORKFLOW_CANVAS_AGENT_BADGE_ROW_PX } from "./lib/workflowCanvasNodeGeometry";
+
+export function WorkflowCanvasCodemationNodeAgentLabels() {
+  const chip = (color: string, border: string, bg: string, text: string) => (
+    <div
+      style={{
+        padding: "2px 6px",
+        fontSize: 10,
+        fontWeight: 800,
+        letterSpacing: 0.35,
+        textTransform: "uppercase",
+        color,
+        background: bg,
+        border: `1px dotted ${border}`,
+        whiteSpace: "nowrap",
+        borderRadius: 4,
+      }}
+    >
+      {text}
+    </div>
+  );
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 8,
+        width: "100%",
+        minHeight: WORKFLOW_CANVAS_AGENT_BADGE_ROW_PX,
+        paddingLeft: 4,
+        paddingRight: 4,
+        boxSizing: "border-box",
+        pointerEvents: "none",
+      }}
+      aria-hidden
+    >
+      <div style={{ flex: "1 1 0", display: "flex", justifyContent: "center", minWidth: 0 }}>
+        {chip("#1d4ed8", "#93c5fd", "#eff6ff", "LLM")}
+      </div>
+      <div style={{ flex: "1 1 0", display: "flex", justifyContent: "center", minWidth: 0 }}>
+        {chip("#6d28d9", "#c4b5fd", "#f5f3ff", "Tools")}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,202 @@
+import { AlertCircle, FastForward, RefreshCw, ShieldAlert } from "lucide-react";
+
+import type { WorkflowCanvasNodeData } from "./lib/workflowCanvasNodeData";
+import {
+  WORKFLOW_CANVAS_ATTACHMENT_NODE_ICON_PX,
+  WORKFLOW_CANVAS_MAIN_NODE_ICON_PX,
+} from "./lib/workflowCanvasNodeGeometry";
+import { CanvasNodeChromeTooltip } from "./CanvasNodeChromeTooltip";
+import { trailingIconForNode, trailingIconKindForNode } from "./workflowCanvasNodeChrome";
+import { WorkflowCanvasCodemationNodeMainGlyph } from "./WorkflowCanvasCodemationNodeMainGlyph";
+
+/** Unified glyph size so policy badges (retry / continue / error) match visually. */
+const POLICY_BADGE_ICON_PX = 10;
+
+export function WorkflowCanvasCodemationNodeCard(
+  props: Readonly<{ data: WorkflowCanvasNodeData; cardWidthPx: number; cardHeightPx: number }>,
+) {
+  const { cardHeightPx, cardWidthPx, data } = props;
+  const isAttachment = data.isAttachment;
+  const isAgentInlineTitle = !isAttachment && data.role === "agent";
+  const isActive = data.status === "queued" || data.status === "running";
+  const isSelected = data.selected;
+  const isPropertiesTarget = data.propertiesTarget;
+  const isPinned = data.isPinned;
+  const iconPx = isAttachment ? WORKFLOW_CANVAS_ATTACHMENT_NODE_ICON_PX : WORKFLOW_CANVAS_MAIN_NODE_ICON_PX;
+  const trailing = trailingIconForNode({ status: data.status, isPinned });
+  const hasTopBadges =
+    Boolean(data.retryPolicySummary) ||
+    Boolean(data.hasNodeErrorHandler) ||
+    Boolean(data.continueWhenEmptyOutput) ||
+    Boolean(data.credentialAttentionTooltip) ||
+    Boolean(trailing);
+  return (
+    <div
+      style={{
+        position: "relative",
+        width: cardWidthPx,
+        height: cardHeightPx,
+        borderRadius: 7,
+        overflow: "visible",
+        boxSizing: "border-box",
+      }}
+      data-testid={`canvas-node-card-${data.nodeId}`}
+      data-codemation-node-id={data.nodeId}
+      data-codemation-properties-target={isPropertiesTarget ? "true" : "false"}
+      data-codemation-node-status={data.status ?? "pending"}
+      data-codemation-node-role={data.role ?? "workflowNode"}
+      aria-label={`${data.label} (${data.status ?? "pending"})`}
+    >
+      <div
+        style={{
+          position: "relative",
+          borderRadius: 7,
+          overflow: "hidden",
+          height: "100%",
+          width: "100%",
+          border: isActive
+            ? "1px solid transparent"
+            : isPinned
+              ? "1px solid #6d28d9"
+              : isSelected
+                ? "1px solid #111827"
+                : isPropertiesTarget
+                  ? "1px solid #7c3aed"
+                  : "1px solid #e2e8f0",
+          background: isSelected
+            ? isAttachment
+              ? "#fffaf0"
+              : "#fffdf5"
+            : isPropertiesTarget
+              ? "#faf5ff"
+              : isPinned
+                ? "#f5f3ff"
+                : isAttachment
+                  ? "#f8fafc"
+                  : "#ffffff",
+          boxShadow: isActive
+            ? "0 1px 2px rgba(15,23,42,0.06), 0 4px 14px rgba(15,23,42,0.06)"
+            : isSelected
+              ? "0 0 0 1px rgba(245,158,11,0.4) inset, 0 4px 16px rgba(15,23,42,0.1)"
+              : isPropertiesTarget || isPinned
+                ? "0 0 0 1px rgba(124,58,237,0.18) inset, 0 4px 14px rgba(91,33,182,0.08)"
+                : "0 1px 2px rgba(15,23,42,0.05), 0 3px 10px rgba(15,23,42,0.06)",
+        }}
+      >
+        <WorkflowCanvasCodemationNodeMainGlyph data={data} iconPx={iconPx} isAgentInlineTitle={isAgentInlineTitle} />
+
+        {hasTopBadges ? (
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              display: "flex",
+              flexDirection: "row",
+              justifyContent: "space-between",
+              alignItems: "flex-start",
+              paddingLeft: 5,
+              paddingRight: 5,
+              paddingTop: 5,
+              gap: 4,
+              zIndex: 2,
+              pointerEvents: "none",
+            }}
+          >
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "flex-start",
+                alignItems: "center",
+                gap: 4,
+                minHeight: 0,
+                pointerEvents: "auto",
+              }}
+            >
+              {data.retryPolicySummary ? (
+                <CanvasNodeChromeTooltip
+                  testId={`canvas-node-policy-retry-${data.nodeId}`}
+                  ariaLabel="Retry policy"
+                  tooltip={data.retryPolicySummary}
+                >
+                  <span
+                    data-testid={`canvas-node-policy-retry-icon-${data.nodeId}`}
+                    className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded border border-teal-200 bg-teal-50 text-teal-700"
+                  >
+                    <RefreshCw size={POLICY_BADGE_ICON_PX} strokeWidth={2.1} />
+                  </span>
+                </CanvasNodeChromeTooltip>
+              ) : null}
+              {data.hasNodeErrorHandler ? (
+                <CanvasNodeChromeTooltip
+                  testId={`canvas-node-policy-error-handler-${data.nodeId}`}
+                  ariaLabel="Node error handler"
+                  tooltip="Node error handler configured"
+                >
+                  <span
+                    data-testid={`canvas-node-policy-error-handler-icon-${data.nodeId}`}
+                    className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded border border-violet-200 bg-violet-50 text-violet-700"
+                  >
+                    <ShieldAlert size={POLICY_BADGE_ICON_PX} strokeWidth={2.1} />
+                  </span>
+                </CanvasNodeChromeTooltip>
+              ) : null}
+              {data.continueWhenEmptyOutput ? (
+                <CanvasNodeChromeTooltip
+                  testId={`canvas-node-policy-continue-empty-${data.nodeId}`}
+                  ariaLabel="Continue when empty"
+                  tooltip="Downstream continues even when this node emits no items on main output."
+                >
+                  <span
+                    data-testid={`canvas-node-continue-empty-icon-${data.nodeId}`}
+                    className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded border border-sky-200 bg-sky-50 text-sky-800"
+                  >
+                    <FastForward size={POLICY_BADGE_ICON_PX} strokeWidth={2.1} />
+                  </span>
+                </CanvasNodeChromeTooltip>
+              ) : null}
+            </div>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "row",
+                flexWrap: "wrap",
+                justifyContent: "flex-end",
+                alignItems: "center",
+                gap: 4,
+                pointerEvents: "auto",
+              }}
+            >
+              {data.credentialAttentionTooltip ? (
+                <CanvasNodeChromeTooltip
+                  testId={`canvas-node-credential-attention-${data.nodeId}`}
+                  ariaLabel="Credential required"
+                  tooltip={data.credentialAttentionTooltip}
+                >
+                  <span
+                    data-testid={`canvas-node-credential-attention-icon-${data.nodeId}`}
+                    className="inline-flex h-[22px] w-[22px] shrink-0 items-center justify-center rounded border border-amber-300 bg-amber-50 text-amber-900"
+                  >
+                    <AlertCircle size={POLICY_BADGE_ICON_PX} strokeWidth={2.1} />
+                  </span>
+                </CanvasNodeChromeTooltip>
+              ) : null}
+              {trailing ? (
+                <div
+                  data-testid={`canvas-node-trailing-icon-${data.nodeId}`}
+                  data-icon-kind={trailingIconKindForNode({ status: data.status, isPinned })}
+                  style={{ display: "grid", placeItems: "center", color: "#111827" }}
+                >
+                  {trailing}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,77 @@
+import { Handle, Position } from "@xyflow/react";
+
+const HANDLE_BOX_STYLE = {
+  width: 8,
+  height: 8,
+  background: "#111827",
+  border: "1px solid white",
+} as const;
+
+/** Single centered handle on an edge so true/false (or merge inputs) share one symmetric opening. */
+const HANDLE_CENTERED_STYLE = {
+  ...HANDLE_BOX_STYLE,
+  top: "50%",
+} as const;
+
+export function WorkflowCanvasCodemationNodeHandles(
+  props: Readonly<{
+    kind: string;
+    isAttachment: boolean;
+    isAgent: boolean;
+    /** When true, agent bottom LLM/tools handles are rendered on the shell (see WorkflowCanvasCodemationNodeAgentBottomSourceHandles). */
+    omitAgentBottomSourceHandles: boolean;
+    sourceOutputPorts: readonly string[];
+    targetInputPorts: readonly string[];
+  }>,
+) {
+  const { isAgent, isAttachment, omitAgentBottomSourceHandles, sourceOutputPorts, targetInputPorts, kind } = props;
+
+  if (isAttachment) {
+    return (
+      <Handle
+        type="target"
+        position={Position.Top}
+        id="attachment-target"
+        style={{ width: 8, height: 8, background: "#64748b", border: "1px solid white" }}
+      />
+    );
+  }
+
+  const isTrigger = kind === "trigger";
+
+  const targetHandles = isTrigger ? null : targetInputPorts.length <= 1 ? (
+    <Handle type="target" position={Position.Left} id={targetInputPorts[0] ?? "in"} style={HANDLE_BOX_STYLE} />
+  ) : (
+    <Handle type="target" position={Position.Left} style={HANDLE_CENTERED_STYLE} />
+  );
+
+  const sourceHandlesRight =
+    sourceOutputPorts.length <= 1 ? (
+      <Handle type="source" position={Position.Right} id={sourceOutputPorts[0] ?? "main"} style={HANDLE_BOX_STYLE} />
+    ) : (
+      <Handle type="source" position={Position.Right} style={HANDLE_CENTERED_STYLE} />
+    );
+
+  return (
+    <>
+      {targetHandles}
+      {sourceHandlesRight}
+      {isAgent && !omitAgentBottomSourceHandles ? (
+        <>
+          <Handle
+            type="source"
+            position={Position.Bottom}
+            id="attachment-llm-source"
+            style={{ left: "34%", width: 8, height: 8, background: "#2563eb", border: "1px solid white" }}
+          />
+          <Handle
+            type="source"
+            position={Position.Bottom}
+            id="attachment-tools-source"
+            style={{ left: "66%", width: 8, height: 8, background: "#7c3aed", border: "1px solid white" }}
+          />
+        </>
+      ) : null}
+    </>
+  );
+}

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

@@ -0,0 +1,51 @@
+import type { WorkflowCanvasNodeData } from "./lib/workflowCanvasNodeData";
+import {
+  WORKFLOW_CANVAS_ATTACHMENT_NODE_LABEL_FONT_PX,
+  WORKFLOW_CANVAS_ATTACHMENT_NODE_LABEL_GAP_PX,
+  WORKFLOW_CANVAS_ATTACHMENT_NODE_LABEL_LINE_HEIGHT,
+  WORKFLOW_CANVAS_MAIN_NODE_LABEL_FONT_PX,
+  WORKFLOW_CANVAS_MAIN_NODE_LABEL_GAP_PX,
+  WORKFLOW_CANVAS_MAIN_NODE_LABEL_LINE_HEIGHT,
+} from "./lib/workflowCanvasNodeGeometry";
+
+export function WorkflowCanvasCodemationNodeLabelBelow(
+  props: Readonly<{ data: WorkflowCanvasNodeData; maxWidthPx: number }>,
+) {
+  const { data, maxWidthPx } = props;
+  const isAttachment = data.isAttachment;
+  const isMainAgent = !isAttachment && data.role === "agent";
+  if (isMainAgent) {
+    return null;
+  }
+  const fontSize = isAttachment
+    ? WORKFLOW_CANVAS_ATTACHMENT_NODE_LABEL_FONT_PX
+    : WORKFLOW_CANVAS_MAIN_NODE_LABEL_FONT_PX;
+  const lineHeight = isAttachment
+    ? WORKFLOW_CANVAS_ATTACHMENT_NODE_LABEL_LINE_HEIGHT
+    : WORKFLOW_CANVAS_MAIN_NODE_LABEL_LINE_HEIGHT;
+  const marginTopPx = isAttachment
+    ? WORKFLOW_CANVAS_ATTACHMENT_NODE_LABEL_GAP_PX
+    : WORKFLOW_CANVAS_MAIN_NODE_LABEL_GAP_PX;
+  return (
+    <div
+      data-testid={`canvas-node-label-${data.nodeId}`}
+      style={{
+        width: "100%",
+        maxWidth: maxWidthPx,
+        marginTop: marginTopPx,
+        paddingLeft: 4,
+        paddingRight: 4,
+        textAlign: "center",
+        fontWeight: 700,
+        fontSize,
+        lineHeight,
+        color: "#0f172a",
+        whiteSpace: "normal",
+        overflowWrap: "anywhere",
+        wordBreak: "break-word",
+      }}
+    >
+      {data.label}
+    </div>
+  );
+}

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

@@ -0,0 +1,64 @@
+import type { WorkflowCanvasNodeData } from "./lib/workflowCanvasNodeData";
+import {
+  WORKFLOW_CANVAS_MAIN_NODE_LABEL_FONT_PX,
+  WORKFLOW_CANVAS_NODE_ICON_STROKE_WIDTH,
+} from "./lib/workflowCanvasNodeGeometry";
+import { WorkflowCanvasNodeIcon } from "./WorkflowCanvasNodeIcon";
+
+export function WorkflowCanvasCodemationNodeMainGlyph(
+  props: Readonly<{ data: WorkflowCanvasNodeData; iconPx: number; isAgentInlineTitle: boolean }>,
+) {
+  const { data, iconPx, isAgentInlineTitle } = props;
+  return (
+    <div
+      style={{
+        position: "absolute",
+        inset: 0,
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: isAgentInlineTitle ? "flex-start" : "center",
+        paddingLeft: isAgentInlineTitle ? 12 : 0,
+        paddingRight: isAgentInlineTitle ? 12 : 0,
+        gap: isAgentInlineTitle ? 8 : 0,
+        pointerEvents: "none",
+        zIndex: 1,
+        backgroundColor: "transparent",
+      }}
+    >
+      <div
+        style={{
+          position: "relative",
+          display: "flex",
+          flexShrink: 0,
+          alignItems: "center",
+          justifyContent: "center",
+          width: isAgentInlineTitle ? undefined : "100%",
+          height: isAgentInlineTitle ? undefined : "100%",
+          flex: isAgentInlineTitle ? undefined : "1 1 auto",
+        }}
+      >
+        <WorkflowCanvasNodeIcon icon={data.icon} sizePx={iconPx} strokeWidth={WORKFLOW_CANVAS_NODE_ICON_STROKE_WIDTH} />
+      </div>
+      {isAgentInlineTitle ? (
+        <span
+          data-testid={`canvas-node-inline-title-${data.nodeId}`}
+          style={{
+            flex: 1,
+            minWidth: 0,
+            fontSize: WORKFLOW_CANVAS_MAIN_NODE_LABEL_FONT_PX,
+            fontWeight: 700,
+            lineHeight: 1.2,
+            color: "#0f172a",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            textAlign: "left",
+          }}
+        >
+          {data.label}
+        </span>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,95 @@
+import { KeyRound, Pencil, Pin, PinOff, Play } from "lucide-react";
+
+import type { WorkflowCanvasNodeData } from "./lib/workflowCanvasNodeData";
+import { WorkflowCanvasToolbarIconButton } from "./WorkflowCanvasToolbarIconButton";
+
+export function WorkflowCanvasCodemationNodeToolbar(
+  props: Readonly<{
+    data: WorkflowCanvasNodeData;
+    isPinned: boolean;
+    isToolbarVisible: boolean;
+    setHasToolbarFocus: (value: boolean) => void;
+  }>,
+) {
+  const { data, isPinned, isToolbarVisible, setHasToolbarFocus } = props;
+  return (
+    <div
+      data-testid={`canvas-node-toolbar-${data.nodeId}`}
+      style={{
+        position: "absolute",
+        top: -34,
+        right: 0,
+        display: "flex",
+        alignItems: "center",
+        gap: 4,
+        opacity: isToolbarVisible ? 1 : 0,
+        transform: isToolbarVisible ? "translateY(0)" : "translateY(3px)",
+        transition: "opacity 90ms ease-out, transform 90ms ease-out",
+        pointerEvents: isToolbarVisible ? "auto" : "none",
+        padding: 4,
+        background: "rgba(255,255,255,0.96)",
+        boxShadow: "0 8px 18px rgba(15,23,42,0.12)",
+        zIndex: 30,
+      }}
+    >
+      {data.showCredentialEditToolbar && data.onOpenCredentialEditFromCanvas ? (
+        <WorkflowCanvasToolbarIconButton
+          testId={`canvas-node-credential-edit-button-${data.nodeId}`}
+          ariaLabel={`Edit credential for ${data.label}`}
+          tooltip="Edit credential"
+          onAfterClick={() => setHasToolbarFocus(false)}
+          onClick={(event) => {
+            event.stopPropagation();
+            data.onSelectNode(data.nodeId);
+            data.onOpenCredentialEditFromCanvas?.();
+          }}
+          accentColor="#b45309"
+        >
+          <KeyRound size={12} strokeWidth={2.1} />
+        </WorkflowCanvasToolbarIconButton>
+      ) : null}
+      <WorkflowCanvasToolbarIconButton
+        testId={`canvas-node-run-button-${data.nodeId}`}
+        ariaLabel={`Run to ${data.label}`}
+        tooltip={data.isRunning ? "Run disabled while workflow is running" : "Run from here"}
+        onAfterClick={() => setHasToolbarFocus(false)}
+        onClick={(event) => {
+          event.stopPropagation();
+          data.onSelectNode(data.nodeId);
+          data.onRunNode(data.nodeId);
+        }}
+        disabled={data.isRunning}
+      >
+        <Play size={12} strokeWidth={2.1} />
+      </WorkflowCanvasToolbarIconButton>
+      <WorkflowCanvasToolbarIconButton
+        testId={`${isPinned ? "canvas-node-unpin-button" : "canvas-node-pin-button"}-${data.nodeId}`}
+        ariaLabel={`${isPinned ? "Unpin" : "Pin"} ${data.label}`}
+        tooltip={!data.hasOutputData ? "No output to pin yet" : isPinned ? "Unpin output" : "Pin current output"}
+        onAfterClick={() => setHasToolbarFocus(false)}
+        onClick={(event) => {
+          event.stopPropagation();
+          data.onSelectNode(data.nodeId);
+          data.onTogglePinnedOutput(data.nodeId);
+        }}
+        disabled={!data.hasOutputData}
+        accentColor="#6d28d9"
+      >
+        {isPinned ? <PinOff size={12} strokeWidth={2.3} fill="currentColor" /> : <Pin size={12} strokeWidth={2} />}
+      </WorkflowCanvasToolbarIconButton>
+      <WorkflowCanvasToolbarIconButton
+        testId={`canvas-node-edit-button-${data.nodeId}`}
+        ariaLabel={`Edit ${data.label}`}
+        tooltip="Edit output"
+        onAfterClick={() => setHasToolbarFocus(false)}
+        onClick={(event) => {
+          event.stopPropagation();
+          data.onSelectNode(data.nodeId);
+          data.onEditNodeOutput(data.nodeId);
+        }}
+      >
+        <Pencil size={12} strokeWidth={2} />
+      </WorkflowCanvasToolbarIconButton>
+    </div>
+  );
+}