feat(canvas): implement local node size pinning and reconciliation logic

- Added functions to handle local node size pins, ensuring that node sizes are preserved during reconciliation. - Updated `reconcileCanvasFlowNodes` to incorporate size pinning logic. - Enhanced tests to verify the correct behavior of size pinning in various scenarios. - Updated related components to support new size pinning functionality.
2026-04-10 08:48:34 +02:00
parent 26d008705f
commit 463830f178
12 changed files with 711 additions and 10 deletions
--- a/tests/convex/ai-errors.test.ts
+++ b/tests/convex/ai-errors.test.ts
@@ -1,4 +1,5 @@
 import { describe, expect, it } from "vitest";
+import { ConvexError } from "convex/values";
 import { FreepikApiError } from "@/convex/freepik";
 import {
  categorizeError,
@@ -31,6 +32,42 @@ describe("ai error helpers", () => {
    );
  });

+  it("formats structured-output invalid json with human-readable provider message", () => {
+    expect(
+      formatTerminalStatusMessage(
+        new ConvexError({ code: "OPENROUTER_STRUCTURED_OUTPUT_INVALID_JSON" }),
+      ),
+    ).toBe("Provider: Strukturierte Antwort konnte nicht gelesen werden");
+  });
+
+  it("formats structured-output missing content with human-readable provider message", () => {
+    expect(
+      formatTerminalStatusMessage(
+        new ConvexError({ code: "OPENROUTER_STRUCTURED_OUTPUT_MISSING_CONTENT" }),
+      ),
+    ).toBe("Provider: Strukturierte Antwort fehlt");
+  });
+
+  it("formats structured-output http error with provider prefix and server message", () => {
+    expect(
+      formatTerminalStatusMessage(
+        new ConvexError({
+          code: "OPENROUTER_STRUCTURED_OUTPUT_HTTP_ERROR",
+          status: 503,
+          message: "OpenRouter API error 503: Upstream timeout",
+        }),
+      ),
+    ).toBe("Provider: OpenRouter API error 503: Upstream timeout");
+  });
+
+  it("formats structured-output http error without falling back to raw code", () => {
+    expect(
+      formatTerminalStatusMessage(
+        new ConvexError({ code: "OPENROUTER_STRUCTURED_OUTPUT_HTTP_ERROR" }),
+      ),
+    ).toBe("Provider: Anfrage fehlgeschlagen");
+  });
+
  it("uses staged poll delays", () => {
    expect(getVideoPollDelayMs(1)).toBe(5000);
    expect(getVideoPollDelayMs(9)).toBe(10000);
--- a/tests/convex/openrouter-structured-output.test.ts
+++ b/tests/convex/openrouter-structured-output.test.ts
@@ -104,9 +104,108 @@ describe("generateStructuredObjectViaOpenRouter", () => {
          schema,
        },
      },
+      plugins: [{ id: "response-healing" }],
    });
  });

+  it("parses content when provider returns array text parts", async () => {
+    fetchMock.mockResolvedValueOnce(
+      createMockResponse({
+        ok: true,
+        status: 200,
+        json: {
+          choices: [
+            {
+              message: {
+                content: [
+                  { type: "text", text: '{"title": "Lemon"' },
+                  { type: "text", text: ', "confidence": 0.75}' },
+                ],
+              },
+            },
+          ],
+        },
+      }),
+    );
+
+    const result = await generateStructuredObjectViaOpenRouter<{
+      title: string;
+      confidence: number;
+    }>("test-api-key", {
+      model: "openai/gpt-5-mini",
+      messages: [{ role: "user", content: "hello" }],
+      schemaName: "test_schema",
+      schema: { type: "object" },
+    });
+
+    expect(result).toEqual({ title: "Lemon", confidence: 0.75 });
+  });
+
+  it("parses fenced json content", async () => {
+    fetchMock.mockResolvedValueOnce(
+      createMockResponse({
+        ok: true,
+        status: 200,
+        json: {
+          choices: [
+            {
+              message: {
+                content:
+                  "Here is the result:\n```json\n{\n  \"title\": \"LemonSpace\",\n  \"confidence\": 0.88\n}\n```\nThanks.",
+              },
+            },
+          ],
+        },
+      }),
+    );
+
+    const result = await generateStructuredObjectViaOpenRouter<{
+      title: string;
+      confidence: number;
+    }>("test-api-key", {
+      model: "openai/gpt-5-mini",
+      messages: [{ role: "user", content: "hello" }],
+      schemaName: "test_schema",
+      schema: { type: "object" },
+    });
+
+    expect(result).toEqual({ title: "LemonSpace", confidence: 0.88 });
+  });
+
+  it("returns message.parsed directly when provided", async () => {
+    fetchMock.mockResolvedValueOnce(
+      createMockResponse({
+        ok: true,
+        status: 200,
+        json: {
+          choices: [
+            {
+              message: {
+                parsed: {
+                  title: "Parsed Result",
+                  confidence: 0.99,
+                },
+                content: "not valid json",
+              },
+            },
+          ],
+        },
+      }),
+    );
+
+    const result = await generateStructuredObjectViaOpenRouter<{
+      title: string;
+      confidence: number;
+    }>("test-api-key", {
+      model: "openai/gpt-5-mini",
+      messages: [{ role: "user", content: "hello" }],
+      schemaName: "test_schema",
+      schema: { type: "object" },
+    });
+
+    expect(result).toEqual({ title: "Parsed Result", confidence: 0.99 });
+  });
+
  it("throws ConvexError code when response content is missing", async () => {
    fetchMock.mockResolvedValueOnce(
      createMockResponse({
--- a/tests/use-pipeline-preview.test.ts
+++ b/tests/use-pipeline-preview.test.ts
@@ -1046,4 +1046,144 @@ describe("preview histogram call sites", () => {
      }),
    );
  });
+
+  it("prefers preview aspect ratio for RenderNode resize when pipeline contains crop", async () => {
+    const queueNodeResize = vi.fn(async () => undefined);
+
+    vi.doMock("@/hooks/use-pipeline-preview", () => ({
+      usePipelinePreview: () => ({
+        canvasRef: { current: null },
+        histogram: emptyHistogram(),
+        isRendering: false,
+        hasSource: true,
+        previewAspectRatio: 1,
+        error: null,
+      }),
+    }));
+    vi.doMock("@xyflow/react", () => ({
+      Handle: () => null,
+      Position: { Left: "left", Right: "right" },
+    }));
+    vi.doMock("convex/react", () => ({
+      useMutation: () => vi.fn(async () => undefined),
+    }));
+    vi.doMock("lucide-react", () => ({
+      AlertCircle: () => null,
+      ArrowDown: () => null,
+      CheckCircle2: () => null,
+      CloudUpload: () => null,
+      Loader2: () => null,
+      Maximize2: () => null,
+      X: () => null,
+    }));
+    vi.doMock("@/components/canvas/nodes/base-node-wrapper", () => ({
+      default: ({ children }: { children: React.ReactNode }) => createElement("div", null, children),
+    }));
+    vi.doMock("@/components/canvas/nodes/adjustment-controls", () => ({
+      SliderRow: () => null,
+    }));
+    vi.doMock("@/components/ui/select", () => ({
+      Select: ({ children }: { children: React.ReactNode }) => createElement("div", null, children),
+      SelectContent: ({ children }: { children: React.ReactNode }) => createElement("div", null, children),
+      SelectItem: ({ children }: { children: React.ReactNode }) => createElement("div", null, children),
+      SelectTrigger: ({ children }: { children: React.ReactNode }) => createElement("div", null, children),
+      SelectValue: () => null,
+    }));
+    vi.doMock("@/components/canvas/canvas-sync-context", () => ({
+      useCanvasSync: () => ({
+        queueNodeDataUpdate: vi.fn(async () => undefined),
+        queueNodeResize,
+        status: { isOffline: false },
+      }),
+    }));
+    vi.doMock("@/hooks/use-debounced-callback", () => ({
+      useDebouncedCallback: (callback: () => void) => callback,
+    }));
+    vi.doMock("@/components/canvas/canvas-graph-context", () => ({
+      useCanvasGraph: () => ({
+        nodes: [],
+        edges: [],
+        previewNodeDataOverrides: new Map(),
+      }),
+    }));
+    vi.doMock("@/lib/canvas-render-preview", () => ({
+      resolveRenderPreviewInputFromGraph: () => ({
+        sourceUrl: "https://cdn.example.com/source.png",
+        steps: [
+          {
+            nodeId: "crop-1",
+            type: "crop",
+            params: { cropRect: { x: 0.1, y: 0.1, width: 0.8, height: 0.8 } },
+          },
+        ],
+      }),
+      findSourceNodeFromGraph: () => ({
+        id: "image-1",
+        type: "image",
+        data: { width: 1200, height: 800 },
+      }),
+      shouldFastPathPreviewPipeline: () => false,
+    }));
+    vi.doMock("@/lib/canvas-utils", () => ({
+      resolveMediaAspectRatio: () => null,
+    }));
+    vi.doMock("@/lib/image-formats", () => ({
+      parseAspectRatioString: () => ({ w: 1, h: 1 }),
+    }));
+    vi.doMock("@/lib/image-pipeline/contracts", async () => {
+      const actual = await vi.importActual<typeof import("@/lib/image-pipeline/contracts")>(
+        "@/lib/image-pipeline/contracts",
+      );
+      return {
+        ...actual,
+        hashPipeline: () => "pipeline-hash",
+      };
+    });
+    vi.doMock("@/lib/image-pipeline/worker-client", () => ({
+      isPipelineAbortError: () => false,
+      renderFullWithWorkerFallback: vi.fn(),
+    }));
+    vi.doMock("@/components/ui/dialog", () => ({
+      Dialog: ({ children }: { children: React.ReactNode }) => createElement("div", null, children),
+      DialogContent: ({ children }: { children: React.ReactNode }) => createElement("div", null, children),
+      DialogTitle: ({ children }: { children: React.ReactNode }) => createElement("div", null, children),
+    }));
+
+    const renderNodeModule = await import("@/components/canvas/nodes/render-node");
+    const RenderNode = renderNodeModule.default;
+
+    await act(async () => {
+      root?.render(
+        createElement(RenderNode, {
+          id: "render-1",
+          data: {},
+          selected: false,
+          dragging: false,
+          zIndex: 0,
+          isConnectable: true,
+          type: "render",
+          xPos: 0,
+          yPos: 0,
+          width: 450,
+          height: 300,
+          sourcePosition: undefined,
+          targetPosition: undefined,
+          positionAbsoluteX: 0,
+          positionAbsoluteY: 0,
+        } as never),
+      );
+    });
+
+    await act(async () => {
+      await Promise.resolve();
+    });
+
+    expect(queueNodeResize).toHaveBeenCalledWith(
+      expect.objectContaining({
+        nodeId: "render-1",
+        width: 450,
+        height: 450,
+      }),
+    );
+  });
 });