Enhance canvas functionality with storage URL resolution and debugging improvements

- Added a fallback mechanism for resolving storage URLs in `canvas-helpers.ts`, improving reliability when URLs are not directly available.
- Introduced new utility functions in `canvas.tsx` for summarizing update and resize payloads, enhancing debugging capabilities during canvas operations.
- Updated `compare-node.tsx` to improve state management and rendering logic, allowing for better handling of incoming edges and display modes.
- Refactored `render-node.tsx` to streamline the rendering process and include detailed logging for debugging render operations.
- Updated `.gitignore` to exclude `.kilo` files, ensuring cleaner repository management.

components/canvas/nodes/compare-surface.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { usePipelinePreview } from "@/hooks/use-pipeline-preview";
+import type { RenderPreviewInput } from "@/lib/canvas-render-preview";
+
+const EMPTY_STEPS: RenderPreviewInput["steps"] = [];
+
+type CompareSurfaceProps = {
+  finalUrl?: string;
+  label?: string;
+  previewInput?: RenderPreviewInput;
+  nodeWidth: number;
+  clipWidthPercent?: number;
+  preferPreview?: boolean;
+};
+
+export default function CompareSurface({
+  finalUrl,
+  label,
+  previewInput,
+  nodeWidth,
+  clipWidthPercent,
+  preferPreview,
+}: CompareSurfaceProps) {
+  const usePreview = Boolean(previewInput && (preferPreview || !finalUrl));
+  const previewSourceUrl = usePreview ? previewInput?.sourceUrl ?? null : null;
+  const previewSteps = usePreview ? previewInput?.steps ?? EMPTY_STEPS : EMPTY_STEPS;
+  const visibleFinalUrl = usePreview ? undefined : finalUrl;
+
+  const { canvasRef, isRendering, error } = usePipelinePreview({
+    sourceUrl: previewSourceUrl,
+    steps: previewSteps,
+    nodeWidth,
+    previewScale: 0.7,
+    maxPreviewWidth: 960,
+  });
+
+  const hasPreview = Boolean(usePreview && previewInput);
+  const clipStyle =
+    typeof clipWidthPercent === "number"
+      ? {
+          clipPath: `inset(0 ${100 - clipWidthPercent}% 0 0)`,
+          WebkitClipPath: `inset(0 ${100 - clipWidthPercent}% 0 0)`,
+        }
+      : undefined;
+
+  return (
+    <div className="pointer-events-none absolute inset-0" style={clipStyle}>
+      {visibleFinalUrl ? (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img
+          src={visibleFinalUrl}
+          alt={label ?? "Comparison image"}
+          className="absolute inset-0 h-full w-full object-contain"
+          draggable={false}
+        />
+      ) : hasPreview ? (
+        <canvas
+          ref={canvasRef}
+          className="absolute inset-0 h-full w-full object-contain"
+        />
+      ) : null}
+
+      {hasPreview ? (
+        <div className="absolute bottom-2 left-2 rounded bg-amber-500/85 px-1.5 py-0.5 text-[10px] font-medium text-black/90 backdrop-blur-sm">
+          {isRendering ? "Live Preview..." : "Live Preview"}
+        </div>
+      ) : null}
+
+      {hasPreview && error ? (
+        <div className="absolute bottom-2 right-2 rounded bg-destructive/85 px-1.5 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm">
+          Preview error
+        </div>
+      ) : null}
+    </div>
+  );
+}