feat: enhance dashboard and canvas components with credit management features

- Integrated CreditOverview and RecentTransactions components into the dashboard for better credit visibility. - Updated canvas toolbar to display current credit balance using CreditDisplay. - Improved AI image and prompt nodes to show credit costs and handle credit availability checks during image generation. - Added new queries for fetching recent transactions and monthly usage statistics to support dashboard features. - Refactored existing code to streamline credit-related functionalities across components.
2026-03-26 22:15:03 +01:00
parent 886a530f26
commit 8d62ee27a2
12 changed files with 796 additions and 297 deletions
--- a/convex/ai.ts
+++ b/convex/ai.ts
@@ -17,6 +17,7 @@ export const generateImage = action({
    aspectRatio: v.optional(v.string()),
  },
  handler: async (ctx, args) => {
+    // Auth: über requireAuth in runMutation — kein verschachteltes getCurrentUser (ConvexError → generische Client-Fehler).
    const internalCreditsEnabled =
      process.env.INTERNAL_CREDITS_ENABLED === "true";

@@ -31,13 +32,9 @@ export const generateImage = action({
      throw new Error(`Unknown model: ${modelId}`);
    }

-    if (!(await ctx.runQuery(api.auth.getCurrentUser, {}))) {
-      throw new Error("User not found");
-    }
-
    const reservationId = internalCreditsEnabled
      ? await ctx.runMutation(api.credits.reserve, {
-          estimatedCost: modelConfig.estimatedCostPerImage,
+          estimatedCost: modelConfig.creditCost,
          description: `Bildgenerierung — ${modelConfig.name}`,
          model: modelId,
          nodeId: args.nodeId,
@@ -76,7 +73,7 @@ export const generateImage = action({
      const existing = await ctx.runQuery(api.nodes.get, { nodeId: args.nodeId });
      if (!existing) throw new Error("Node not found");
      const prev = (existing.data ?? {}) as Record<string, unknown>;
-      const creditCost = modelConfig.estimatedCostPerImage;
+      const creditCost = modelConfig.creditCost;

      const aspectRatio =
        args.aspectRatio?.trim() ||
@@ -89,6 +86,7 @@ export const generateImage = action({
          storageId,
          prompt: args.prompt,
          model: modelId,
+          modelLabel: modelConfig.name,
          modelTier: modelConfig.tier,
          generatedAt: Date.now(),
          creditCost,
--- a/convex/credits.ts
+++ b/convex/credits.ts
@@ -85,17 +85,30 @@ export const listTransactions = query({
 });

 /**
- * Aktuelle Subscription des Users abrufen.
+ * Aktuelle Subscription des Users abrufen (kompakt, immer definiert für die UI).
 */
 export const getSubscription = query({
  args: {},
  handler: async (ctx) => {
    const user = await requireAuth(ctx);
-    return await ctx.db
+    const row = await ctx.db
      .query("subscriptions")
      .withIndex("by_user", (q) => q.eq("userId", user.userId))
      .order("desc")
      .first();
+
+    if (!row) {
+      return {
+        tier: "free" as const,
+        status: "active" as const,
+      };
+    }
+
+    return {
+      tier: row.tier,
+      status: row.status,
+      currentPeriodEnd: row.currentPeriodEnd,
+    };
  },
 });

@@ -119,6 +132,61 @@ export const getDailyUsage = query({
  },
 });

+/**
+ * Neueste Transaktionen des Users abrufen (für Dashboard "Recent Activity").
+ * Ähnlich wie listTransactions, aber als dedizierter Query mit explizitem Limit.
+ */
+export const getRecentTransactions = query({
+  args: {
+    limit: v.optional(v.number()),
+  },
+  handler: async (ctx, args) => {
+    const user = await requireAuth(ctx);
+    const limit = args.limit ?? 10;
+
+    return await ctx.db
+      .query("creditTransactions")
+      .withIndex("by_user", (q) => q.eq("userId", user.userId))
+      .order("desc")
+      .take(limit);
+  },
+});
+
+/**
+ * Monatliche Credit-Statistiken des Users abrufen (für Dashboard Verbrauchsbalken).
+ * Berechnet: monatlicher Verbrauch (nur committed usage-Transaktionen) + Anzahl Generierungen.
+ */
+export const getUsageStats = query({
+  args: {},
+  handler: async (ctx) => {
+    const user = await requireAuth(ctx);
+
+    const now = new Date();
+    const monthStart = new Date(now.getFullYear(), now.getMonth(), 1).getTime();
+
+    const transactions = await ctx.db
+      .query("creditTransactions")
+      .withIndex("by_user", (q) => q.eq("userId", user.userId))
+      .order("desc")
+      .collect();
+
+    const monthlyTransactions = transactions.filter(
+      (t) =>
+        t._creationTime >= monthStart &&
+        t.status === "committed" &&
+        t.type === "usage"
+    );
+
+    return {
+      monthlyUsage: monthlyTransactions.reduce(
+        (sum, t) => sum + Math.abs(t.amount),
+        0
+      ),
+      totalGenerations: monthlyTransactions.length,
+    };
+  },
+});
+
 // ============================================================================
 // Mutations — Credit Balance Management
 // ============================================================================
@@ -171,6 +239,49 @@ export const initBalance = mutation({
  },
 });

+/**
+ * Nur Testphase: schreibt dem eingeloggten User Gutschrift gut.
+ * In Produktion deaktiviert, außer ALLOW_TEST_CREDIT_GRANT ist in Convex auf "true" gesetzt.
+ */
+export const grantTestCredits = mutation({
+  args: {
+    amount: v.optional(v.number()),
+  },
+  handler: async (ctx, { amount = 2000 }) => {
+    if (process.env.ALLOW_TEST_CREDIT_GRANT !== "true") {
+      throw new Error("Test-Gutschriften sind deaktiviert (ALLOW_TEST_CREDIT_GRANT).");
+    }
+    if (amount <= 0 || amount > 1_000_000) {
+      throw new Error("Ungültiger Betrag.");
+    }
+    const user = await requireAuth(ctx);
+    const balance = await ctx.db
+      .query("creditBalances")
+      .withIndex("by_user", (q) => q.eq("userId", user.userId))
+      .unique();
+
+    if (!balance) {
+      throw new Error("Keine Credit-Balance — zuerst einloggen / initBalance.");
+    }
+
+    const next = balance.balance + amount;
+    await ctx.db.patch(balance._id, {
+      balance: next,
+      updatedAt: Date.now(),
+    });
+
+    await ctx.db.insert("creditTransactions", {
+      userId: user.userId,
+      amount,
+      type: "subscription",
+      status: "committed",
+      description: `Testphase — Gutschrift (${amount} Cr)`,
+    });
+
+    return { newBalance: next };
+  },
+});
+
 // ============================================================================
 // Mutations — Reservation + Commit (Kern des Credit-Systems)
 // ============================================================================
--- a/convex/openrouter.ts
+++ b/convex/openrouter.ts
@@ -5,6 +5,8 @@ export interface OpenRouterModel {
  name: string;
  tier: "budget" | "standard" | "premium";
  estimatedCostPerImage: number; // in Euro-Cent (for credit reservation)
+  /** Gleiche Einheit wie UI „Cr“ / lib/ai-models creditCost */
+  creditCost: number;
 }

 // Phase 1: Gemini 2.5 Flash Image only.
@@ -15,6 +17,7 @@ export const IMAGE_MODELS: Record<string, OpenRouterModel> = {
    name: "Gemini 2.5 Flash",
    tier: "standard",
    estimatedCostPerImage: 4, // ~€0.04 in Euro-Cent
+    creditCost: 4,
  },
 };

@@ -33,6 +36,48 @@ export interface OpenRouterImageResponse {
  mimeType: string;
 }

+const DATA_IMAGE_URI =
+  /data:image\/[\w+.+-]+;base64,[A-Za-z0-9+/=\s]+/;
+
+function firstDataImageUriInString(s: string): string | undefined {
+  const m = s.match(DATA_IMAGE_URI);
+  if (!m) return undefined;
+  return m[0]!.replace(/\s+/g, "");
+}
+
+function dataUriFromContentPart(p: Record<string, unknown>): string | undefined {
+  const block = (p.image_url ?? p.imageUrl) as
+    | Record<string, unknown>
+    | undefined;
+  const url = block?.url;
+  if (typeof url === "string" && url.startsWith("data:")) {
+    return url;
+  }
+  if (typeof url === "string" && (url.startsWith("http://") || url.startsWith("https://"))) {
+    return url;
+  }
+
+  const inline =
+    (p.inline_data ?? p.inlineData) as
+      | Record<string, unknown>
+      | undefined;
+  if (inline && typeof inline.data === "string") {
+    const mime =
+      typeof inline.mime_type === "string"
+        ? inline.mime_type
+        : typeof inline.mimeType === "string"
+          ? inline.mimeType
+          : "image/png";
+    return `data:${mime};base64,${inline.data}`;
+  }
+
+  if (p.type === "text" && typeof p.text === "string") {
+    return firstDataImageUriInString(p.text);
+  }
+
+  return undefined;
+}
+
 /**
 * Calls the OpenRouter API to generate an image.
 * Uses the chat/completions endpoint with a vision-capable model that returns
@@ -46,30 +91,31 @@ export async function generateImageViaOpenRouter(
 ): Promise<OpenRouterImageResponse> {
  const modelId = params.model ?? DEFAULT_IMAGE_MODEL;

-  // Build message content — text prompt, optionally with a reference image
-  const userContent: object[] = [];
-
-  if (params.referenceImageUrl) {
-    userContent.push({
-      type: "image_url",
-      image_url: { url: params.referenceImageUrl },
-    });
-  }
-
-  userContent.push({
-    type: "text",
-    text: params.prompt,
-  });
+  // Ohne Referenzbild: einfacher String als content — bei Gemini/OpenRouter sonst oft nur Text (refusal/reasoning) statt Bild.
+  const userMessage =
+    params.referenceImageUrl != null && params.referenceImageUrl !== ""
+      ? {
+          role: "user" as const,
+          content: [
+            {
+              type: "image_url" as const,
+              image_url: { url: params.referenceImageUrl },
+            },
+            {
+              type: "text" as const,
+              text: params.prompt,
+            },
+          ],
+        }
+      : {
+          role: "user" as const,
+          content: params.prompt,
+        };

  const body: Record<string, unknown> = {
    model: modelId,
    modalities: ["image", "text"],
-    messages: [
-      {
-        role: "user",
-        content: userContent,
-      },
-    ],
+    messages: [userMessage],
  };

  if (params.aspectRatio?.trim()) {
@@ -96,21 +142,110 @@ export async function generateImageViaOpenRouter(

  const data = await response.json();

-  // OpenRouter returns generated images in message.images (separate from content)
-  const images = data?.choices?.[0]?.message?.images;
-
-  if (!images || images.length === 0) {
-    throw new Error("No image found in OpenRouter response");
+  const message = data?.choices?.[0]?.message as Record<string, unknown> | undefined;
+  if (!message) {
+    throw new Error("OpenRouter: choices[0].message fehlt");
  }

-  const imageUrl = images[0]?.image_url?.url;
-  if (!imageUrl) {
-    throw new Error("Image block missing image_url.url");
+  let rawImage: string | undefined;
+
+  const images = message.images;
+  if (Array.isArray(images) && images.length > 0) {
+    const first = images[0] as Record<string, unknown>;
+    const block = (first.image_url ?? first.imageUrl) as
+      | Record<string, unknown>
+      | undefined;
+    const url = block?.url;
+    if (typeof url === "string") {
+      rawImage = url;
+    }
  }

-  // The URL is a data URI: "data:image/png;base64,<data>"
-  const dataUri: string = imageUrl;
-  const [meta, base64Data] = dataUri.split(",");
+  const content = message.content;
+  if (!rawImage && Array.isArray(content)) {
+    for (const part of content) {
+      if (!part || typeof part !== "object") continue;
+      const p = part as Record<string, unknown>;
+      const uri = dataUriFromContentPart(p);
+      if (uri) {
+        rawImage = uri;
+        break;
+      }
+    }
+  }
+
+  if (!rawImage && typeof content === "string") {
+    rawImage = firstDataImageUriInString(content);
+  }
+
+  const refusal = message.refusal;
+  if (
+    (!rawImage || (!rawImage.startsWith("data:") && !rawImage.startsWith("http"))) &&
+    refusal != null &&
+    String(refusal).length > 0
+  ) {
+    const r =
+      typeof refusal === "string" ? refusal : JSON.stringify(refusal);
+    throw new Error(`OpenRouter: Modell lehnt ab — ${r.slice(0, 500)}`);
+  }
+
+  if (
+    !rawImage ||
+    (!rawImage.startsWith("data:") &&
+      !rawImage.startsWith("http://") &&
+      !rawImage.startsWith("https://"))
+  ) {
+    const reasoning =
+      typeof message.reasoning === "string"
+        ? message.reasoning.slice(0, 400)
+        : "";
+    const contentPreview =
+      typeof content === "string"
+        ? content.slice(0, 400)
+        : Array.isArray(content)
+          ? JSON.stringify(content).slice(0, 400)
+          : "";
+    throw new Error(
+      `OpenRouter: kein Bild in der Antwort. Keys: ${Object.keys(message).join(", ")}. ` +
+        (reasoning ? `reasoning: ${reasoning}` : `content: ${contentPreview}`),
+    );
+  }
+
+  let dataUri = rawImage;
+  if (rawImage.startsWith("http://") || rawImage.startsWith("https://")) {
+    const imgRes = await fetch(rawImage);
+    if (!imgRes.ok) {
+      throw new Error(
+        `OpenRouter: Bild-URL konnte nicht geladen werden (${imgRes.status})`,
+      );
+    }
+    const mimeTypeFromRes =
+      imgRes.headers.get("content-type") ?? "image/png";
+    const buf = await imgRes.arrayBuffer();
+    let b64: string;
+    if (typeof Buffer !== "undefined") {
+      b64 = Buffer.from(buf).toString("base64");
+    } else {
+      const bytes = new Uint8Array(buf);
+      let binary = "";
+      for (let i = 0; i < bytes.length; i++) {
+        binary += String.fromCharCode(bytes[i]!);
+      }
+      b64 = btoa(binary);
+    }
+    dataUri = `data:${mimeTypeFromRes};base64,${b64}`;
+  }
+
+  if (!dataUri.startsWith("data:")) {
+    throw new Error("OpenRouter: Bild konnte nicht als data-URI erstellt werden");
+  }
+
+  const comma = dataUri.indexOf(",");
+  if (comma === -1) {
+    throw new Error("OpenRouter: data-URI ohne Base64-Teil");
+  }
+  const meta = dataUri.slice(0, comma);
+  const base64Data = dataUri.slice(comma + 1);
  const mimeType = meta.replace("data:", "").replace(";base64", "");

  return {