Implement agent node functionality in canvas, including connection policies and UI updates. Add support for agent node type in node catalog, templates, and connection validation. Update documentation to reflect new agent capabilities and ensure proper handling of input sources. Enhance adjustment preview to include crop node. Add tests for agent connection policies.

tests/adjustment-preview.test.ts

@@ -0,0 +1,143 @@
+// @vitest-environment jsdom
+
+import React from "react";
+import { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+import { buildGraphSnapshot, type CanvasGraphSnapshot } from "@/lib/canvas-render-preview";
+import { DEFAULT_CURVES_DATA } from "@/lib/image-pipeline/adjustment-types";
+
+const pipelinePreviewMock = vi.fn();
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+let currentGraph: (CanvasGraphSnapshot & { previewNodeDataOverrides: Map<string, unknown> }) | null = null;
+
+vi.mock("@/components/canvas/canvas-graph-context", () => ({
+  useCanvasGraph: () => {
+    if (!currentGraph) {
+      throw new Error("Graph not configured for test");
+    }
+
+    return currentGraph;
+  },
+}));
+
+vi.mock("@/hooks/use-pipeline-preview", () => ({
+  usePipelinePreview: (options: unknown) => {
+    pipelinePreviewMock(options);
+    return {
+      canvasRef: { current: null },
+      histogram: {
+        rgb: Array.from({ length: 256 }, () => 0),
+        red: Array.from({ length: 256 }, () => 0),
+        green: Array.from({ length: 256 }, () => 0),
+        blue: Array.from({ length: 256 }, () => 0),
+        max: 0,
+      },
+      isRendering: false,
+      hasSource: true,
+      previewAspectRatio: 1,
+      error: null,
+    };
+  },
+}));
+
+import AdjustmentPreview from "@/components/canvas/nodes/adjustment-preview";
+
+describe("AdjustmentPreview", () => {
+  let container: HTMLDivElement | null = null;
+  let root: Root | null = null;
+
+  beforeEach(() => {
+    pipelinePreviewMock.mockClear();
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    if (root) {
+      await act(async () => {
+        root?.unmount();
+      });
+    }
+
+    container?.remove();
+    container = null;
+    root = null;
+    currentGraph = null;
+  });
+
+  it("includes upstream crop steps for adjustment previews", async () => {
+    currentGraph = {
+      ...buildGraphSnapshot(
+        [
+          {
+            id: "image-1",
+            type: "image",
+            data: { url: "https://cdn.example.com/source.png" },
+          },
+          {
+            id: "crop-1",
+            type: "crop",
+            data: {
+              crop: { x: 0.1, y: 0.2, width: 0.5, height: 0.4 },
+              resize: { mode: "source", fit: "cover", keepAspect: true },
+            },
+          },
+          {
+            id: "curves-1",
+            type: "curves",
+            data: DEFAULT_CURVES_DATA,
+          },
+        ],
+        [
+          { source: "image-1", target: "crop-1" },
+          { source: "crop-1", target: "curves-1" },
+        ],
+      ),
+      previewNodeDataOverrides: new Map(),
+    };
+
+    const currentParams = {
+      ...DEFAULT_CURVES_DATA,
+      levels: {
+        ...DEFAULT_CURVES_DATA.levels,
+        gamma: 1.4,
+      },
+    };
+
+    await act(async () => {
+      root?.render(
+        React.createElement(AdjustmentPreview, {
+          nodeId: "curves-1",
+          nodeWidth: 320,
+          currentType: "curves",
+          currentParams,
+        }),
+      );
+    });
+
+    expect(pipelinePreviewMock).toHaveBeenCalledTimes(1);
+    expect(pipelinePreviewMock.mock.calls[0]?.[0]).toMatchObject({
+      sourceUrl: "https://cdn.example.com/source.png",
+      steps: [
+        {
+          nodeId: "crop-1",
+          type: "crop",
+          params: {
+            crop: { x: 0.1, y: 0.2, width: 0.5, height: 0.4 },
+            resize: { mode: "source", fit: "cover", keepAspect: true },
+          },
+        },
+        {
+          nodeId: "curves-1",
+          type: "curves",
+          params: currentParams,
+        },
+      ],
+    });
+  });
+});