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.
This commit is contained in:
2026-04-10 08:48:34 +02:00
parent 26d008705f
commit 463830f178
12 changed files with 711 additions and 10 deletions

View File

@@ -346,6 +346,96 @@ describe("canvas flow reconciliation helpers", () => {
expect(result.nextPendingLocalNodeDataPins.size).toBe(0);
});
it("keeps pinned local node size until convex catches up", () => {
const pinnedSize = { width: 419, height: 466 };
const result = reconcileCanvasFlowNodes({
previousNodes: [
{
id: "node-1",
type: "render",
position: { x: 120, y: 80 },
data: {},
style: pinnedSize,
},
],
incomingNodes: [
{
id: "node-1",
type: "render",
position: { x: 120, y: 80 },
data: {},
style: { width: 640, height: 360 },
},
],
convexNodes: [{ _id: asNodeId("node-1"), type: "render" }],
deletingNodeIds: new Set(),
resolvedRealIdByClientRequest: new Map(),
pendingConnectionCreateIds: new Set(),
preferLocalPositionNodeIds: new Set(),
pendingLocalPositionPins: new Map(),
pendingLocalNodeSizePins: new Map([["node-1", pinnedSize]]),
pendingMovePins: new Map(),
});
expect(result.nodes).toEqual([
{
id: "node-1",
type: "render",
position: { x: 120, y: 80 },
data: {},
style: pinnedSize,
},
]);
expect(result.nextPendingLocalNodeSizePins).toEqual(
new Map([["node-1", pinnedSize]]),
);
});
it("clears pinned local node size once convex matches the persisted size", () => {
const pinnedSize = { width: 419, height: 466 };
const result = reconcileCanvasFlowNodes({
previousNodes: [
{
id: "node-1",
type: "render",
position: { x: 120, y: 80 },
data: {},
style: pinnedSize,
},
],
incomingNodes: [
{
id: "node-1",
type: "render",
position: { x: 120, y: 80 },
data: {},
style: pinnedSize,
},
],
convexNodes: [{ _id: asNodeId("node-1"), type: "render" }],
deletingNodeIds: new Set(),
resolvedRealIdByClientRequest: new Map(),
pendingConnectionCreateIds: new Set(),
preferLocalPositionNodeIds: new Set(),
pendingLocalPositionPins: new Map(),
pendingLocalNodeSizePins: new Map([["node-1", pinnedSize]]),
pendingMovePins: new Map(),
});
expect(result.nodes).toEqual([
{
id: "node-1",
type: "render",
position: { x: 120, y: 80 },
data: {},
style: pinnedSize,
},
]);
expect(result.nextPendingLocalNodeSizePins.size).toBe(0);
});
it("filters deleting nodes from incoming reconciliation results", () => {
const result = reconcileCanvasFlowNodes({
previousNodes: [

View File

@@ -39,6 +39,7 @@ type HarnessProps = {
previousConvexNodeIdsSnapshot: Set<string>;
pendingLocalPositionPins?: Map<string, { x: number; y: number }>;
pendingLocalNodeDataPins?: Map<string, unknown>;
pendingLocalNodeSizePins?: Map<string, { width: number; height: number }>;
preferLocalPositionNodeIds?: Set<string>;
isResizingRefOverride?: { current: boolean };
};
@@ -82,6 +83,9 @@ function HookHarness(props: HarnessProps) {
const pendingLocalNodeDataUntilConvexMatchesRef = useRef(
props.pendingLocalNodeDataPins ?? new Map<string, unknown>(),
);
const pendingLocalNodeSizeUntilConvexMatchesRef = useRef(
props.pendingLocalNodeSizePins ?? new Map<string, { width: number; height: number }>(),
);
const preferLocalPositionNodeIdsRef = useRef(
props.preferLocalPositionNodeIds ?? new Set<string>(),
);
@@ -120,6 +124,7 @@ function HookHarness(props: HarnessProps) {
pendingConnectionCreatesRef,
pendingLocalPositionUntilConvexMatchesRef,
pendingLocalNodeDataUntilConvexMatchesRef,
pendingLocalNodeSizeUntilConvexMatchesRef,
preferLocalPositionNodeIdsRef,
isDragging: isDraggingRef,
isResizing: isResizingRef,

View File

@@ -160,7 +160,7 @@ describe("useCanvasSyncEngine", () => {
getEnqueueSyncMutation: () => enqueueSyncMutation,
getRunBatchRemoveNodes: () => vi.fn(async () => undefined),
getRunSplitEdgeAtExistingNode: () => vi.fn(async () => undefined),
getSetNodes: () => setNodes,
getSetNodes: () => setNodes as never,
});
await controller.queueNodeDataUpdate({
@@ -177,4 +177,46 @@ describe("useCanvasSyncEngine", () => {
data: { blackPoint: 209 },
});
});
it("pins local node size immediately when queueing a resize", async () => {
const enqueueSyncMutation = vi.fn(async () => undefined);
let nodes = [
{
id: "node-1",
type: "render",
position: { x: 0, y: 0 },
data: {},
style: { width: 640, height: 360 },
},
];
const setNodes = (updater: (current: typeof nodes) => typeof nodes) => {
nodes = updater(nodes);
return nodes;
};
const controller = createCanvasSyncEngineController({
canvasId: asCanvasId("canvas-1"),
isSyncOnline: true,
getEnqueueSyncMutation: () => enqueueSyncMutation,
getRunBatchRemoveNodes: () => vi.fn(async () => undefined),
getRunSplitEdgeAtExistingNode: () => vi.fn(async () => undefined),
getSetNodes: () => setNodes as never,
});
await controller.queueNodeResize({
nodeId: asNodeId("node-1"),
width: 419,
height: 466,
});
expect(nodes[0]?.style).toEqual({ width: 419, height: 466 });
expect(controller.pendingLocalNodeSizeUntilConvexMatchesRef.current).toEqual(
new Map([["node-1", { width: 419, height: 466 }]]),
);
expect(enqueueSyncMutation).toHaveBeenCalledWith("resizeNode", {
nodeId: asNodeId("node-1"),
width: 419,
height: 466,
});
});
});

View File

@@ -354,6 +354,49 @@ function applyLocalNodeDataPins(args: {
};
}
function nodeStyleIncludesSizePin(
style: RFNode["style"] | undefined,
pin: { width: number; height: number },
): boolean {
return style?.width === pin.width && style?.height === pin.height;
}
function applyLocalNodeSizePins(args: {
nodes: RFNode[];
pendingLocalNodeSizePins: ReadonlyMap<string, { width: number; height: number }>;
}): {
nodes: RFNode[];
nextPendingLocalNodeSizePins: Map<string, { width: number; height: number }>;
} {
const nodeIds = new Set(args.nodes.map((node) => node.id));
const nextPendingLocalNodeSizePins = new Map(
[...args.pendingLocalNodeSizePins].filter(([nodeId]) => nodeIds.has(nodeId)),
);
const nodes = args.nodes.map((node) => {
const pin = nextPendingLocalNodeSizePins.get(node.id);
if (!pin) return node;
if (nodeStyleIncludesSizePin(node.style, pin)) {
nextPendingLocalNodeSizePins.delete(node.id);
return node;
}
return {
...node,
style: {
...(node.style ?? {}),
width: pin.width,
height: pin.height,
},
};
});
return {
nodes,
nextPendingLocalNodeSizePins,
};
}
export function reconcileCanvasFlowNodes(args: {
previousNodes: RFNode[];
incomingNodes: RFNode[];
@@ -364,12 +407,14 @@ export function reconcileCanvasFlowNodes(args: {
preferLocalPositionNodeIds: ReadonlySet<string>;
pendingLocalPositionPins: ReadonlyMap<string, { x: number; y: number }>;
pendingLocalNodeDataPins?: ReadonlyMap<string, unknown>;
pendingLocalNodeSizePins?: ReadonlyMap<string, { width: number; height: number }>;
pendingMovePins: ReadonlyMap<string, { x: number; y: number }>;
}): {
nodes: RFNode[];
inferredRealIdByClientRequest: Map<string, Id<"nodes">>;
nextPendingLocalPositionPins: Map<string, { x: number; y: number }>;
nextPendingLocalNodeDataPins: Map<string, unknown>;
nextPendingLocalNodeSizePins: Map<string, { width: number; height: number }>;
clearedPreferLocalPositionNodeIds: string[];
} {
const inferredRealIdByClientRequest = inferPendingConnectionNodeHandoff({
@@ -392,8 +437,12 @@ export function reconcileCanvasFlowNodes(args: {
nodes: mergedNodes,
pendingLocalNodeDataPins: args.pendingLocalNodeDataPins ?? new Map(),
});
const pinnedNodes = applyLocalPositionPins({
const sizePinnedNodes = applyLocalNodeSizePins({
nodes: dataPinnedNodes.nodes,
pendingLocalNodeSizePins: args.pendingLocalNodeSizePins ?? new Map(),
});
const pinnedNodes = applyLocalPositionPins({
nodes: sizePinnedNodes.nodes,
pendingLocalPositionPins: args.pendingLocalPositionPins,
});
const nodes = applyPinnedNodePositionsReadOnly(
@@ -419,6 +468,7 @@ export function reconcileCanvasFlowNodes(args: {
inferredRealIdByClientRequest,
nextPendingLocalPositionPins: pinnedNodes.nextPendingLocalPositionPins,
nextPendingLocalNodeDataPins: dataPinnedNodes.nextPendingLocalNodeDataPins,
nextPendingLocalNodeSizePins: sizePinnedNodes.nextPendingLocalNodeSizePins,
clearedPreferLocalPositionNodeIds,
};
}

View File

@@ -119,6 +119,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
pendingConnectionCreatesRef,
pendingLocalPositionUntilConvexMatchesRef,
pendingLocalNodeDataUntilConvexMatchesRef,
pendingLocalNodeSizeUntilConvexMatchesRef,
preferLocalPositionNodeIdsRef,
},
actions: {
@@ -454,6 +455,7 @@ function CanvasInner({ canvasId }: CanvasInnerProps) {
pendingConnectionCreatesRef,
pendingLocalPositionUntilConvexMatchesRef,
pendingLocalNodeDataUntilConvexMatchesRef,
pendingLocalNodeSizeUntilConvexMatchesRef,
preferLocalPositionNodeIdsRef,
isDragging,
isResizing,

View File

@@ -21,6 +21,9 @@ type CanvasFlowReconciliationRefs = {
Map<string, PositionPin>
>;
pendingLocalNodeDataUntilConvexMatchesRef: MutableRefObject<Map<string, unknown>>;
pendingLocalNodeSizeUntilConvexMatchesRef: MutableRefObject<
Map<string, { width: number; height: number }>
>;
preferLocalPositionNodeIdsRef: MutableRefObject<Set<string>>;
isDragging: MutableRefObject<boolean>;
isResizing: MutableRefObject<boolean>;
@@ -56,6 +59,7 @@ export function useCanvasFlowReconciliation(args: {
pendingConnectionCreatesRef,
pendingLocalPositionUntilConvexMatchesRef,
pendingLocalNodeDataUntilConvexMatchesRef,
pendingLocalNodeSizeUntilConvexMatchesRef,
preferLocalPositionNodeIdsRef,
isDragging,
isResizing,
@@ -135,6 +139,8 @@ export function useCanvasFlowReconciliation(args: {
pendingLocalPositionPins: pendingLocalPositionUntilConvexMatchesRef.current,
pendingLocalNodeDataPins:
pendingLocalNodeDataUntilConvexMatchesRef.current,
pendingLocalNodeSizePins:
pendingLocalNodeSizeUntilConvexMatchesRef.current,
pendingMovePins,
});
@@ -144,6 +150,8 @@ export function useCanvasFlowReconciliation(args: {
reconciliation.nextPendingLocalPositionPins;
pendingLocalNodeDataUntilConvexMatchesRef.current =
reconciliation.nextPendingLocalNodeDataPins;
pendingLocalNodeSizeUntilConvexMatchesRef.current =
reconciliation.nextPendingLocalNodeSizePins;
for (const nodeId of reconciliation.clearedPreferLocalPositionNodeIds) {
preferLocalPositionNodeIdsRef.current.delete(nodeId);
}
@@ -162,6 +170,7 @@ export function useCanvasFlowReconciliation(args: {
pendingConnectionCreatesRef,
pendingLocalPositionUntilConvexMatchesRef,
pendingLocalNodeDataUntilConvexMatchesRef,
pendingLocalNodeSizeUntilConvexMatchesRef,
preferLocalPositionNodeIdsRef,
resolvedRealIdByClientRequestRef,
]);

View File

@@ -214,6 +214,9 @@ export function createCanvasSyncEngineController({
const pendingLocalNodeDataUntilConvexMatchesRef = {
current: new Map<string, unknown>(),
};
const pendingLocalNodeSizeUntilConvexMatchesRef = {
current: new Map<string, { width: number; height: number }>(),
};
const preferLocalPositionNodeIdsRef = { current: new Set<string>() };
const flushPendingResizeForClientRequest = async (
@@ -223,6 +226,10 @@ export function createCanvasSyncEngineController({
const pendingResize = pendingResizeAfterCreateRef.current.get(clientRequestId);
if (!pendingResize) return;
pendingResizeAfterCreateRef.current.delete(clientRequestId);
pendingLocalNodeSizeUntilConvexMatchesRef.current.delete(
`${OPTIMISTIC_NODE_PREFIX}${clientRequestId}`,
);
pinNodeSizeLocally(realId as string, pendingResize);
await getEnqueueSyncMutation()("resizeNode", {
nodeId: realId,
width: pendingResize.width,
@@ -245,6 +252,25 @@ export function createCanvasSyncEngineController({
);
};
const pinNodeSizeLocally = (nodeId: string, size: { width: number; height: number }): void => {
pendingLocalNodeSizeUntilConvexMatchesRef.current.set(nodeId, size);
const setNodes = getSetNodes?.();
setNodes?.((current) =>
current.map((node) =>
node.id === nodeId
? {
...node,
style: {
...(node.style ?? {}),
width: size.width,
height: size.height,
},
}
: node,
),
);
};
const flushPendingDataForClientRequest = async (
clientRequestId: string,
realId: Id<"nodes">,
@@ -265,6 +291,10 @@ export function createCanvasSyncEngineController({
height: number;
}): Promise<void> => {
const rawNodeId = args.nodeId as string;
pinNodeSizeLocally(rawNodeId, {
width: args.width,
height: args.height,
});
if (!isOptimisticNodeId(rawNodeId) || !getIsSyncOnline()) {
await getEnqueueSyncMutation()("resizeNode", args);
return;
@@ -276,6 +306,11 @@ export function createCanvasSyncEngineController({
: undefined;
if (resolvedRealId) {
pendingLocalNodeSizeUntilConvexMatchesRef.current.delete(rawNodeId);
pinNodeSizeLocally(resolvedRealId as string, {
width: args.width,
height: args.height,
});
await getEnqueueSyncMutation()("resizeNode", {
nodeId: resolvedRealId,
width: args.width,
@@ -337,6 +372,7 @@ export function createCanvasSyncEngineController({
pendingMoveAfterCreateRef.current.delete(clientRequestId);
pendingResizeAfterCreateRef.current.delete(clientRequestId);
pendingDataAfterCreateRef.current.delete(clientRequestId);
pendingLocalNodeSizeUntilConvexMatchesRef.current.delete(realId as string);
pendingLocalNodeDataUntilConvexMatchesRef.current.delete(realId as string);
pendingEdgeSplitByClientRequestRef.current.delete(clientRequestId);
pendingConnectionCreatesRef.current.delete(clientRequestId);
@@ -487,6 +523,7 @@ export function createCanvasSyncEngineController({
pendingConnectionCreatesRef,
pendingLocalPositionUntilConvexMatchesRef,
pendingLocalNodeDataUntilConvexMatchesRef,
pendingLocalNodeSizeUntilConvexMatchesRef,
preferLocalPositionNodeIdsRef,
flushPendingResizeForClientRequest,
flushPendingDataForClientRequest,
@@ -1858,6 +1895,8 @@ export function useCanvasSyncEngine({
controller.pendingLocalPositionUntilConvexMatchesRef,
pendingLocalNodeDataUntilConvexMatchesRef:
controller.pendingLocalNodeDataUntilConvexMatchesRef,
pendingLocalNodeSizeUntilConvexMatchesRef:
controller.pendingLocalNodeSizeUntilConvexMatchesRef,
preferLocalPositionNodeIdsRef: controller.preferLocalPositionNodeIdsRef,
pendingCreatePromiseByClientRequestRef,
},

View File

@@ -145,12 +145,40 @@ export function categorizeError(error: unknown): {
export function formatTerminalStatusMessage(error: unknown): string {
const code = getErrorCode(error);
if (code) {
if (code === "OPENROUTER_STRUCTURED_OUTPUT_INVALID_JSON") {
return "Provider: Strukturierte Antwort konnte nicht gelesen werden";
}
if (code === "OPENROUTER_STRUCTURED_OUTPUT_MISSING_CONTENT") {
return "Provider: Strukturierte Antwort fehlt";
}
if (code && code !== "OPENROUTER_STRUCTURED_OUTPUT_HTTP_ERROR") {
return code;
}
const message = errorMessage(error).trim() || "Generation failed";
const { category } = categorizeError(error);
const convexData =
error instanceof ConvexError ? (error.data as ErrorData | undefined) : undefined;
const convexDataMessage =
typeof convexData?.message === "string" ? convexData.message.trim() : "";
const convexDataStatus =
typeof convexData?.status === "number" && Number.isFinite(convexData.status)
? convexData.status
: null;
const message =
code === "OPENROUTER_STRUCTURED_OUTPUT_HTTP_ERROR"
? convexDataMessage ||
(convexDataStatus !== null
? `HTTP ${convexDataStatus}`
: "Anfrage fehlgeschlagen")
: errorMessage(error).trim() || "Generation failed";
const { category } =
code === "OPENROUTER_STRUCTURED_OUTPUT_HTTP_ERROR"
? { category: "provider" as const }
: categorizeError(error);
const prefixByCategory: Record<Exclude<ErrorCategory, "unknown">, string> = {
credits: "Credits",

View File

@@ -2,6 +2,155 @@ import { ConvexError } from "convex/values";
export const OPENROUTER_BASE_URL = "https://openrouter.ai/api/v1";
function parseJsonSafely(text: string):
| { ok: true; value: unknown }
| { ok: false } {
try {
return { ok: true, value: JSON.parse(text) };
} catch {
return { ok: false };
}
}
function extractTextFromStructuredContent(content: unknown): string | undefined {
if (typeof content === "string") {
return content;
}
if (!Array.isArray(content)) {
return undefined;
}
const textParts: string[] = [];
for (const part of content) {
if (typeof part === "string") {
textParts.push(part);
continue;
}
if (!part || typeof part !== "object") {
continue;
}
const partRecord = part as Record<string, unknown>;
if (typeof partRecord.text === "string") {
textParts.push(partRecord.text);
}
}
return textParts.length > 0 ? textParts.join("") : undefined;
}
function extractFencedJsonPayload(text: string): string | undefined {
const fencedBlockRegex = /```(?:json)?\s*([\s\S]*?)\s*```/gi;
let match: RegExpExecArray | null;
while ((match = fencedBlockRegex.exec(text)) !== null) {
const payload = match[1];
if (typeof payload === "string" && payload.trim() !== "") {
return payload;
}
}
return undefined;
}
function extractBalancedJsonCandidate(text: string, startIndex: number): string | undefined {
const startChar = text[startIndex];
if (startChar !== "{" && startChar !== "[") {
return undefined;
}
const expectedClosings: string[] = [];
let inString = false;
let isEscaped = false;
for (let i = startIndex; i < text.length; i += 1) {
const ch = text[i]!;
if (inString) {
if (isEscaped) {
isEscaped = false;
continue;
}
if (ch === "\\") {
isEscaped = true;
continue;
}
if (ch === '"') {
inString = false;
}
continue;
}
if (ch === '"') {
inString = true;
continue;
}
if (ch === "{") {
expectedClosings.push("}");
continue;
}
if (ch === "[") {
expectedClosings.push("]");
continue;
}
if (ch === "}" || ch === "]") {
const expected = expectedClosings.pop();
if (expected !== ch) {
return undefined;
}
if (expectedClosings.length === 0) {
return text.slice(startIndex, i + 1);
}
}
}
return undefined;
}
function extractFirstBalancedJson(text: string): string | undefined {
for (let i = 0; i < text.length; i += 1) {
const ch = text[i]!;
if (ch !== "{" && ch !== "[") {
continue;
}
const candidate = extractBalancedJsonCandidate(text, i);
if (candidate) {
return candidate;
}
}
return undefined;
}
function parseStructuredJsonFromMessageContent(contentText: string):
| { ok: true; value: unknown }
| { ok: false } {
const direct = parseJsonSafely(contentText);
if (direct.ok) {
return direct;
}
const fencedPayload = extractFencedJsonPayload(contentText);
if (fencedPayload) {
const fenced = parseJsonSafely(fencedPayload);
if (fenced.ok) {
return fenced;
}
}
const balancedPayload = extractFirstBalancedJson(contentText);
if (balancedPayload) {
const balanced = parseJsonSafely(balancedPayload);
if (balanced.ok) {
return balanced;
}
}
return { ok: false };
}
export async function generateStructuredObjectViaOpenRouter<T>(
apiKey: string,
args: {
@@ -33,6 +182,7 @@ export async function generateStructuredObjectViaOpenRouter<T>(
schema: args.schema,
},
},
plugins: [{ id: "response-healing" }],
}),
});
@@ -46,21 +196,31 @@ export async function generateStructuredObjectViaOpenRouter<T>(
}
const data = await response.json();
const content = data?.choices?.[0]?.message?.content;
const message = data?.choices?.[0]?.message as
| Record<string, unknown>
| undefined;
if (typeof content !== "string" || content.trim() === "") {
const parsed = message?.parsed;
if (parsed && typeof parsed === "object") {
return parsed as T;
}
const contentText = extractTextFromStructuredContent(message?.content);
if (typeof contentText !== "string" || contentText.trim() === "") {
throw new ConvexError({
code: "OPENROUTER_STRUCTURED_OUTPUT_MISSING_CONTENT",
});
}
try {
return JSON.parse(content) as T;
} catch {
const parsedContent = parseStructuredJsonFromMessageContent(contentText);
if (!parsedContent.ok) {
throw new ConvexError({
code: "OPENROUTER_STRUCTURED_OUTPUT_INVALID_JSON",
});
}
return parsedContent.value as T;
}
export interface OpenRouterModel {

View File

@@ -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);

View File

@@ -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({

View File

@@ -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,
}),
);
});
});