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/canvas-helpers.ts

@@ -79,6 +79,19 @@ export type PendingEdgeSplit = {
   positionY: number;
 };
 
+function resolveStorageFallbackUrl(storageId: string): string | undefined {
+  const convexBaseUrl = process.env.NEXT_PUBLIC_CONVEX_URL;
+  if (!convexBaseUrl) {
+    return undefined;
+  }
+
+  try {
+    return new URL(`/api/storage/${storageId}`, convexBaseUrl).toString();
+  } catch {
+    return undefined;
+  }
+}
+
 export function withResolvedCompareData(nodes: RFNode[], edges: RFEdge[]): RFNode[] {
   const persistedEdges = edges.filter((edge) => edge.className !== "temp");
   let hasNodeUpdates = false;
@@ -97,12 +110,25 @@ export function withResolvedCompareData(nodes: RFNode[], edges: RFEdge[]): RFNod
       if (!source) continue;
 
       const srcData = source.data as { url?: string; label?: string };
+      const sourceDataRecord = source.data as Record<string, unknown>;
+      const storageIdCandidate =
+        typeof sourceDataRecord.storageId === "string"
+          ? sourceDataRecord.storageId
+          : typeof sourceDataRecord.lastUploadStorageId === "string"
+            ? sourceDataRecord.lastUploadStorageId
+            : undefined;
+      const hasSourceUrl = typeof srcData.url === "string" && srcData.url.length > 0;
+      const storageFallbackUrl =
+        !hasSourceUrl && storageIdCandidate
+          ? resolveStorageFallbackUrl(storageIdCandidate)
+          : undefined;
+      const resolvedSourceUrl = srcData.url ?? storageFallbackUrl;
 
       if (edge.targetHandle === "left") {
-        leftUrl = srcData.url;
+        leftUrl = resolvedSourceUrl;
         leftLabel = srcData.label ?? source.type ?? "Before";
       } else if (edge.targetHandle === "right") {
-        rightUrl = srcData.url;
+        rightUrl = resolvedSourceUrl;
         rightLabel = srcData.label ?? source.type ?? "After";
       }
     }