Enhance canvas sidebar and toolbar with improved UI and state management

- Integrated NextImage for logo display in the canvas sidebar, enhancing visual consistency. - Updated canvas name handling in the toolbar to ensure proper display and accessibility. - Refactored sidebar layout for better responsiveness and user experience. - Improved state management for category collapsibility in the sidebar, allowing for a more intuitive navigation experience.
2026-04-03 13:51:41 +02:00
parent ef98acd0de
commit 3aaad38e06
9 changed files with 477 additions and 169 deletions
--- a/convex/ai.ts
+++ b/convex/ai.ts
@@ -153,16 +153,35 @@ async function generateImageWithAutoRetry(
  ) => Promise<void>
 ) {
  let lastError: unknown = null;
+  const startedAt = Date.now();

  for (let attempt = 0; attempt <= MAX_IMAGE_RETRIES; attempt++) {
+    const attemptStartedAt = Date.now();
    try {
-      return await operation();
+      const result = await operation();
+      console.info("[generateImageWithAutoRetry] success", {
+        attempts: attempt + 1,
+        totalDurationMs: Date.now() - startedAt,
+        lastAttemptDurationMs: Date.now() - attemptStartedAt,
+      });
+      return result;
    } catch (error) {
      lastError = error;
      const { retryable, category } = categorizeError(error);
      const retryCount = attempt + 1;
      const hasRemainingRetry = retryCount <= MAX_IMAGE_RETRIES;

+      console.warn("[generateImageWithAutoRetry] attempt failed", {
+        attempt: retryCount,
+        maxAttempts: MAX_IMAGE_RETRIES + 1,
+        retryable,
+        hasRemainingRetry,
+        category,
+        attemptDurationMs: Date.now() - attemptStartedAt,
+        totalDurationMs: Date.now() - startedAt,
+        message: errorMessage(error),
+      });
+
      if (!retryable || !hasRemainingRetry) {
        throw error;
      }
@@ -289,11 +308,21 @@ export const generateAndStoreImage = internalAction({
    aspectRatio: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
+    const startedAt = Date.now();
    const apiKey = process.env.OPENROUTER_API_KEY;
    if (!apiKey) {
      throw new Error("OPENROUTER_API_KEY is not set");
    }

+    console.info("[generateAndStoreImage] start", {
+      nodeId: args.nodeId,
+      model: args.model,
+      hasReferenceStorageId: Boolean(args.referenceStorageId),
+      hasReferenceImageUrl: Boolean(args.referenceImageUrl?.trim()),
+      aspectRatio: args.aspectRatio?.trim() || null,
+      promptLength: args.prompt.length,
+    });
+
    let retryCount = 0;
    let referenceImageUrl = args.referenceImageUrl?.trim() || undefined;
    if (args.referenceStorageId) {
@@ -301,38 +330,64 @@ export const generateAndStoreImage = internalAction({
        (await ctx.storage.getUrl(args.referenceStorageId)) ?? undefined;
    }

-    const result = await generateImageWithAutoRetry(
-      () =>
-        generateImageViaOpenRouter(apiKey, {
-          prompt: args.prompt,
-          referenceImageUrl,
-          model: args.model,
-          aspectRatio: args.aspectRatio,
-        }),
-      async (nextRetryCount, maxRetries, failure) => {
-        retryCount = nextRetryCount;
-        await ctx.runMutation(internal.ai.markNodeRetry, {
-          nodeId: args.nodeId,
-          retryCount: nextRetryCount,
-          maxRetries,
-          failureMessage: failure.message,
-        });
+    try {
+      const result = await generateImageWithAutoRetry(
+        () =>
+          generateImageViaOpenRouter(apiKey, {
+            prompt: args.prompt,
+            referenceImageUrl,
+            model: args.model,
+            aspectRatio: args.aspectRatio,
+          }),
+        async (nextRetryCount, maxRetries, failure) => {
+          retryCount = nextRetryCount;
+          await ctx.runMutation(internal.ai.markNodeRetry, {
+            nodeId: args.nodeId,
+            retryCount: nextRetryCount,
+            maxRetries,
+            failureMessage: failure.message,
+          });
+        }
+      );
+
+      const decodeStartedAt = Date.now();
+      const binaryString = atob(result.imageBase64);
+      const bytes = new Uint8Array(binaryString.length);
+      for (let i = 0; i < binaryString.length; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
      }
-    );
+      console.info("[generateAndStoreImage] image decoded", {
+        nodeId: args.nodeId,
+        retryCount,
+        decodeDurationMs: Date.now() - decodeStartedAt,
+        bytes: bytes.length,
+        totalDurationMs: Date.now() - startedAt,
+      });

-    const binaryString = atob(result.imageBase64);
-    const bytes = new Uint8Array(binaryString.length);
-    for (let i = 0; i < binaryString.length; i++) {
-      bytes[i] = binaryString.charCodeAt(i);
+      const storageStartedAt = Date.now();
+      const blob = new Blob([bytes], { type: result.mimeType });
+      const storageId = await ctx.storage.store(blob);
+      console.info("[generateAndStoreImage] image stored", {
+        nodeId: args.nodeId,
+        retryCount,
+        storageDurationMs: Date.now() - storageStartedAt,
+        totalDurationMs: Date.now() - startedAt,
+      });
+
+      return {
+        storageId: storageId as Id<"_storage">,
+        retryCount,
+      };
+    } catch (error) {
+      console.error("[generateAndStoreImage] failed", {
+        nodeId: args.nodeId,
+        retryCount,
+        totalDurationMs: Date.now() - startedAt,
+        message: errorMessage(error),
+        category: categorizeError(error).category,
+      });
+      throw error;
    }
-
-    const blob = new Blob([bytes], { type: result.mimeType });
-    const storageId = await ctx.storage.store(blob);
-
-    return {
-      storageId: storageId as Id<"_storage">,
-      retryCount,
-    };
  },
 });

@@ -349,6 +404,7 @@ export const processImageGeneration = internalAction({
    userId: v.string(),
  },
  handler: async (ctx, args) => {
+    const startedAt = Date.now();
    console.info("[processImageGeneration] start", {
      nodeId: args.nodeId,
      reservationId: args.reservationId ?? null,
@@ -384,7 +440,23 @@ export const processImageGeneration = internalAction({
          actualCost: creditCost,
        });
      }
+
+      console.info("[processImageGeneration] success", {
+        nodeId: args.nodeId,
+        retryCount,
+        totalDurationMs: Date.now() - startedAt,
+        reservationId: args.reservationId ?? null,
+      });
    } catch (error) {
+      console.error("[processImageGeneration] failed", {
+        nodeId: args.nodeId,
+        retryCount,
+        totalDurationMs: Date.now() - startedAt,
+        reservationId: args.reservationId ?? null,
+        category: categorizeError(error).category,
+        message: errorMessage(error),
+      });
+
      if (args.reservationId) {
        try {
          await ctx.runMutation(internal.credits.releaseInternal, {
@@ -406,6 +478,13 @@ export const processImageGeneration = internalAction({
          userId: args.userId,
        });
      }
+
+      console.info("[processImageGeneration] finished", {
+        nodeId: args.nodeId,
+        retryCount,
+        totalDurationMs: Date.now() - startedAt,
+        shouldDecrementConcurrency: args.shouldDecrementConcurrency,
+      });
    }
  },
 });
@@ -421,6 +500,7 @@ export const generateImage = action({
    aspectRatio: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
+    const startedAt = Date.now();
    const canvas = await ctx.runQuery(api.canvases.get, {
      canvasId: args.canvasId,
    });
@@ -477,8 +557,27 @@ export const generateImage = action({
        userId,
      });
      backgroundJobScheduled = true;
+      console.info("[generateImage] background job scheduled", {
+        nodeId: args.nodeId,
+        canvasId: args.canvasId,
+        modelId,
+        reservationId: reservationId ?? null,
+        usageIncremented,
+        durationMs: Date.now() - startedAt,
+      });
      return { queued: true as const, nodeId: args.nodeId };
    } catch (error) {
+      console.error("[generateImage] scheduling failed", {
+        nodeId: args.nodeId,
+        canvasId: args.canvasId,
+        modelId,
+        reservationId: reservationId ?? null,
+        usageIncremented,
+        durationMs: Date.now() - startedAt,
+        category: categorizeError(error).category,
+        message: errorMessage(error),
+      });
+
      if (reservationId) {
        try {
          await ctx.runMutation(api.credits.release, {
--- a/convex/credits.ts
+++ b/convex/credits.ts
@@ -103,31 +103,75 @@ export const listTransactions = query({
 export const getSubscription = query({
  args: {},
  handler: async (ctx) => {
-    const user = await optionalAuth(ctx);
-    if (!user) {
-      return {
-        tier: "free" as const,
-        status: "active" as const,
-      };
-    }
-    const row = await ctx.db
-      .query("subscriptions")
-      .withIndex("by_user", (q) => q.eq("userId", user.userId))
-      .order("desc")
-      .first();
+    const startedAt = Date.now();

-    if (!row) {
-      return {
-        tier: "free" as const,
-        status: "active" as const,
-      };
-    }
+    try {
+      console.info("[credits.getSubscription] start", {
+        durationMs: Date.now() - startedAt,
+      });

-    return {
-      tier: row.tier,
-      status: row.status,
-      currentPeriodEnd: row.currentPeriodEnd,
-    };
+      const user = await optionalAuth(ctx);
+      console.info("[credits.getSubscription] auth resolved", {
+        durationMs: Date.now() - startedAt,
+        userId: user?.userId ?? null,
+      });
+
+      if (!user) {
+        return {
+          tier: "free" as const,
+          status: "active" as const,
+        };
+      }
+
+      const row = await ctx.db
+        .query("subscriptions")
+        .withIndex("by_user", (q) => q.eq("userId", user.userId))
+        .order("desc")
+        .first();
+
+      console.info("[credits.getSubscription] subscription query resolved", {
+        userId: user.userId,
+        durationMs: Date.now() - startedAt,
+        foundRow: Boolean(row),
+      });
+
+      if (!row) {
+        console.info("[credits.getSubscription] no subscription row", {
+          userId: user.userId,
+          durationMs: Date.now() - startedAt,
+        });
+
+        return {
+          tier: "free" as const,
+          status: "active" as const,
+        };
+      }
+
+      console.info("[credits.getSubscription] resolved subscription", {
+        userId: user.userId,
+        subscriptionId: row._id,
+        tier: row.tier,
+        status: row.status,
+        currentPeriodEnd: row.currentPeriodEnd,
+        durationMs: Date.now() - startedAt,
+      });
+
+      return {
+        tier: row.tier,
+        status: row.status,
+        currentPeriodEnd: row.currentPeriodEnd,
+      };
+    } catch (error) {
+      const identity = await ctx.auth.getUserIdentity();
+      console.error("[credits.getSubscription] failed", {
+        durationMs: Date.now() - startedAt,
+        hasIdentity: Boolean(identity),
+        identityIssuer: identity?.issuer ?? null,
+        identitySubject: identity?.subject ?? null,
+        message: error instanceof Error ? error.message : String(error),
+      });
+      throw error;
+    }
  },
 });

--- a/convex/edges.ts
+++ b/convex/edges.ts
@@ -89,16 +89,29 @@ async function assertConnectionPolicy(
 export const list = query({
  args: { canvasId: v.id("canvases") },
  handler: async (ctx, { canvasId }) => {
+    const startedAt = Date.now();
    const user = await requireAuth(ctx);
    const canvas = await ctx.db.get(canvasId);
    if (!canvas || canvas.ownerId !== user.userId) {
      return [];
    }

-    return await ctx.db
+    const edges = await ctx.db
      .query("edges")
      .withIndex("by_canvas", (q) => q.eq("canvasId", canvasId))
      .collect();
+
+    const durationMs = Date.now() - startedAt;
+    if (durationMs >= PERFORMANCE_LOG_THRESHOLD_MS) {
+      console.warn("[edges.list] slow list query", {
+        canvasId,
+        userId: user.userId,
+        edgeCount: edges.length,
+        durationMs,
+      });
+    }
+
+    return edges;
  },
 });

--- a/convex/helpers.ts
+++ b/convex/helpers.ts
@@ -1,6 +1,8 @@
 import { QueryCtx, MutationCtx } from "./_generated/server";
 import { authComponent } from "./auth";

+const AUTH_PERFORMANCE_LOG_THRESHOLD_MS = 100;
+
 type SafeAuthUser = NonNullable<
  Awaited<ReturnType<typeof authComponent.safeGetAuthUser>>
 >;
@@ -15,10 +17,18 @@ export type AuthUser = Omit<SafeAuthUser, "userId"> & { userId: string };
 export async function requireAuth(
  ctx: QueryCtx | MutationCtx
 ): Promise<AuthUser> {
+  const startedAt = Date.now();
  const user = await authComponent.safeGetAuthUser(ctx);
+  const durationMs = Date.now() - startedAt;
+  if (durationMs >= AUTH_PERFORMANCE_LOG_THRESHOLD_MS) {
+    console.warn("[requireAuth] slow auth lookup", {
+      durationMs,
+    });
+  }
  if (!user) {
    const identity = await ctx.auth.getUserIdentity();
    console.error("[requireAuth] safeGetAuthUser returned null", {
+      durationMs,
      hasIdentity: Boolean(identity),
      identityIssuer: identity?.issuer ?? null,
      identitySubject: identity?.subject ?? null,
@@ -28,6 +38,7 @@ export async function requireAuth(
  const userId = user.userId ?? String(user._id);
  if (!userId) {
    console.error("[requireAuth] safeGetAuthUser returned user without userId", {
+      durationMs,
      userRecordId: String(user._id),
    });
    throw new Error("Unauthenticated");
@@ -41,7 +52,14 @@ export async function requireAuth(
 export async function optionalAuth(
  ctx: QueryCtx | MutationCtx
 ): Promise<AuthUser | null> {
+  const startedAt = Date.now();
  const user = await authComponent.safeGetAuthUser(ctx);
+  const durationMs = Date.now() - startedAt;
+  if (durationMs >= AUTH_PERFORMANCE_LOG_THRESHOLD_MS) {
+    console.warn("[optionalAuth] slow auth lookup", {
+      durationMs,
+    });
+  }
  if (!user) {
    return null;
  }
--- a/convex/nodes.ts
+++ b/convex/nodes.ts
@@ -76,6 +76,14 @@ const ADJUSTMENT_MIN_WIDTH = 240;

 const PERFORMANCE_LOG_THRESHOLD_MS = 250;

+function estimateSerializedBytes(value: unknown): number | null {
+  try {
+    return JSON.stringify(value)?.length ?? 0;
+  } catch {
+    return null;
+  }
+}
+
 type RenderOutputResolution = (typeof RENDER_OUTPUT_RESOLUTIONS)[number];
 type RenderFormat = (typeof RENDER_FORMATS)[number];

@@ -545,13 +553,27 @@ async function resolveNodeReferenceForWrite(
 export const list = query({
  args: { canvasId: v.id("canvases") },
  handler: async (ctx, { canvasId }) => {
+    const startedAt = Date.now();
    const user = await requireAuth(ctx);
    await getCanvasOrThrow(ctx, canvasId, user.userId);

-    return await ctx.db
+    const nodes = await ctx.db
      .query("nodes")
      .withIndex("by_canvas", (q) => q.eq("canvasId", canvasId))
      .collect();
+
+    const durationMs = Date.now() - startedAt;
+    if (durationMs >= PERFORMANCE_LOG_THRESHOLD_MS) {
+      console.warn("[nodes.list] slow list query", {
+        canvasId,
+        userId: user.userId,
+        nodeCount: nodes.length,
+        approxPayloadBytes: estimateSerializedBytes(nodes),
+        durationMs,
+      });
+    }
+
+    return nodes;
  },
 });

@@ -678,46 +700,87 @@ export const create = mutation({
    clientRequestId: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
-    const user = await requireAuth(ctx);
-    await getCanvasOrThrow(ctx, args.canvasId, user.userId);
+    const startedAt = Date.now();
+    const approxDataBytes = estimateSerializedBytes(args.data);

-    const existingNodeId = await getIdempotentNodeCreateResult(ctx, {
-      userId: user.userId,
-      mutation: "nodes.create",
-      clientRequestId: args.clientRequestId,
+    console.info("[nodes.create] start", {
      canvasId: args.canvasId,
+      type: args.type,
+      clientRequestId: args.clientRequestId ?? null,
+      approxDataBytes,
    });
-    if (existingNodeId) {
-      return existingNodeId;
+
+    try {
+      const user = await requireAuth(ctx);
+      const authDurationMs = Date.now() - startedAt;
+      await getCanvasOrThrow(ctx, args.canvasId, user.userId);
+
+      const existingNodeId = await getIdempotentNodeCreateResult(ctx, {
+        userId: user.userId,
+        mutation: "nodes.create",
+        clientRequestId: args.clientRequestId,
+        canvasId: args.canvasId,
+      });
+      if (existingNodeId) {
+        console.info("[nodes.create] idempotent hit", {
+          canvasId: args.canvasId,
+          type: args.type,
+          userId: user.userId,
+          authDurationMs,
+          totalDurationMs: Date.now() - startedAt,
+          existingNodeId,
+        });
+        return existingNodeId;
+      }
+
+      const normalizedData = normalizeNodeDataForWrite(args.type, args.data);
+
+      const nodeId = await ctx.db.insert("nodes", {
+        canvasId: args.canvasId,
+        type: args.type as Doc<"nodes">["type"],
+        positionX: args.positionX,
+        positionY: args.positionY,
+        width: args.width,
+        height: args.height,
+        status: "idle",
+        retryCount: 0,
+        data: normalizedData,
+        parentId: args.parentId,
+        zIndex: args.zIndex,
+      });
+
+      // Canvas updatedAt aktualisieren
+      await ctx.db.patch(args.canvasId, { updatedAt: Date.now() });
+      await rememberIdempotentNodeCreateResult(ctx, {
+        userId: user.userId,
+        mutation: "nodes.create",
+        clientRequestId: args.clientRequestId,
+        canvasId: args.canvasId,
+        nodeId,
+      });
+
+      console.info("[nodes.create] success", {
+        canvasId: args.canvasId,
+        type: args.type,
+        userId: user.userId,
+        nodeId,
+        approxDataBytes,
+        authDurationMs,
+        totalDurationMs: Date.now() - startedAt,
+      });
+
+      return nodeId;
+    } catch (error) {
+      console.error("[nodes.create] failed", {
+        canvasId: args.canvasId,
+        type: args.type,
+        clientRequestId: args.clientRequestId ?? null,
+        approxDataBytes,
+        totalDurationMs: Date.now() - startedAt,
+        message: error instanceof Error ? error.message : String(error),
+      });
+      throw error;
    }
-
-    const normalizedData = normalizeNodeDataForWrite(args.type, args.data);
-
-    const nodeId = await ctx.db.insert("nodes", {
-      canvasId: args.canvasId,
-      type: args.type as Doc<"nodes">["type"],
-      positionX: args.positionX,
-      positionY: args.positionY,
-      width: args.width,
-      height: args.height,
-      status: "idle",
-      retryCount: 0,
-      data: normalizedData,
-      parentId: args.parentId,
-      zIndex: args.zIndex,
-    });
-
-    // Canvas updatedAt aktualisieren
-    await ctx.db.patch(args.canvasId, { updatedAt: Date.now() });
-    await rememberIdempotentNodeCreateResult(ctx, {
-      userId: user.userId,
-      mutation: "nodes.create",
-      clientRequestId: args.clientRequestId,
-      canvasId: args.canvasId,
-      nodeId,
-    });
-
-    return nodeId;
  },
 });

--- a/convex/openrouter.ts
+++ b/convex/openrouter.ts
@@ -92,6 +92,14 @@ export async function generateImageViaOpenRouter(
  params: GenerateImageParams
 ): Promise<OpenRouterImageResponse> {
  const modelId = params.model ?? DEFAULT_IMAGE_MODEL;
+  const requestStartedAt = Date.now();
+
+  console.info("[openrouter] request start", {
+    modelId,
+    hasReferenceImageUrl: Boolean(params.referenceImageUrl),
+    aspectRatio: params.aspectRatio?.trim() || null,
+    promptLength: params.prompt.length,
+  });

  // Ohne Referenzbild: einfacher String als content — bei Gemini/OpenRouter sonst oft nur Text (refusal/reasoning) statt Bild.
  const userMessage =
@@ -126,15 +134,33 @@ export async function generateImageViaOpenRouter(
    };
  }

-  const response = await fetch(`${OPENROUTER_BASE_URL}/chat/completions`, {
-    method: "POST",
-    headers: {
-      Authorization: `Bearer ${apiKey}`,
-      "Content-Type": "application/json",
-      "HTTP-Referer": "https://app.lemonspace.io",
-      "X-Title": "LemonSpace",
-    },
-    body: JSON.stringify(body),
+  let response: Response;
+
+  try {
+    response = await fetch(`${OPENROUTER_BASE_URL}/chat/completions`, {
+      method: "POST",
+      headers: {
+        Authorization: `Bearer ${apiKey}`,
+        "Content-Type": "application/json",
+        "HTTP-Referer": "https://app.lemonspace.io",
+        "X-Title": "LemonSpace",
+      },
+      body: JSON.stringify(body),
+    });
+  } catch (error) {
+    console.error("[openrouter] request failed", {
+      modelId,
+      durationMs: Date.now() - requestStartedAt,
+      message: error instanceof Error ? error.message : String(error),
+    });
+    throw error;
+  }
+
+  console.info("[openrouter] response received", {
+    modelId,
+    status: response.status,
+    ok: response.ok,
+    durationMs: Date.now() - requestStartedAt,
  });

  if (!response.ok) {
@@ -221,6 +247,7 @@ export async function generateImageViaOpenRouter(

  let dataUri = rawImage;
  if (rawImage.startsWith("http://") || rawImage.startsWith("https://")) {
+    const imageDownloadStartedAt = Date.now();
    const imgRes = await fetch(rawImage);
    if (!imgRes.ok) {
      throw new ConvexError({
@@ -231,6 +258,12 @@ export async function generateImageViaOpenRouter(
    const mimeTypeFromRes =
      imgRes.headers.get("content-type") ?? "image/png";
    const buf = await imgRes.arrayBuffer();
+    console.info("[openrouter] image downloaded", {
+      modelId,
+      durationMs: Date.now() - imageDownloadStartedAt,
+      bytes: buf.byteLength,
+      mimeType: mimeTypeFromRes,
+    });
    let b64: string;
    if (typeof Buffer !== "undefined") {
      b64 = Buffer.from(buf).toString("base64");
@@ -257,6 +290,14 @@ export async function generateImageViaOpenRouter(
  const base64Data = dataUri.slice(comma + 1);
  const mimeType = meta.replace("data:", "").replace(";base64", "");

+  console.info("[openrouter] image parsed", {
+    modelId,
+    durationMs: Date.now() - requestStartedAt,
+    mimeType: mimeType || "image/png",
+    base64Length: base64Data.length,
+    source: rawImage.startsWith("data:") ? "inline" : "remote-url",
+  });
+
  return {
    imageBase64: base64Data,
    mimeType: mimeType || "image/png",