feat: project cover art with AI generation, branding rename, RBAC fix, computation graph

- Add DALL-E cover art generation for projects (Azure OpenAI + standard OpenAI)
- CoverArtSection component with generate/upload/remove/focus-point controls
- Client-side image compression (10MB input → WebP/JPEG, max 1920px)
- DALL-E settings in admin panel (deployment, endpoint, API key)
- MCP assistant tools for cover art (generate_project_cover, remove_project_cover)
- Rename "Planarchy" → "plANARCHY" across all UI-facing text (13 files)
- Fix hardcoded canEdit={true} on project detail page — now checks user role
- Computation graph visualization (2D/3D) for calculation rules
- OG image and OpenGraph metadata

Co-Authored-By: claude-flow <ruv@ruv.net>

packages/api/src/router/project.ts

@@ -11,6 +11,9 @@ import { assertBlueprintDynamicFields } from "./blueprint-validation.js";
 import { buildDynamicFieldWhereClauses } from "./custom-field-filters.js";
 import { loadProjectPlanningReadModel } from "./project-planning-read-model.js";
 import { adminProcedure, controllerProcedure, createTRPCRouter, managerProcedure, protectedProcedure, requirePermission } from "../trpc.js";
+import { createDalleClient, isDalleConfigured, parseAiError } from "../ai-client.js";
+
+const MAX_COVER_SIZE = 4 * 1024 * 1024; // 4 MB base64 string length limit (client compresses before upload)
 
 export const projectRouter = createTRPCRouter({
   list: protectedProcedure
@@ -348,4 +351,152 @@ export const projectRouter = createTRPCRouter({
 
       return { id: input.id, name: project.name };
     }),
+
+  // ─── Cover Art ──────────────────────────────────────────────────────────────
+
+  generateCover: managerProcedure
+    .input(z.object({
+      projectId: z.string(),
+      prompt: z.string().max(500).optional(),
+    }))
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
+
+      const project = await findUniqueOrThrow(
+        ctx.db.project.findUnique({
+          where: { id: input.projectId },
+          include: { client: { select: { name: true } } },
+        }),
+        "Project",
+      );
+
+      const settings = await ctx.db.systemSettings.findUnique({
+        where: { id: "singleton" },
+      });
+
+      if (!isDalleConfigured(settings)) {
+        throw new TRPCError({
+          code: "PRECONDITION_FAILED",
+          message: "DALL-E is not configured. Set up the DALL-E deployment in Admin → Settings.",
+        });
+      }
+
+      const clientName = project.client?.name ? ` for ${project.client.name}` : "";
+      const basePrompt = `Professional cover art for a 3D automotive visualization project: "${project.name}"${clientName}. Style: cinematic, modern, photorealistic CGI rendering, dramatic lighting, studio environment. No text or typography in the image.`;
+      const finalPrompt = input.prompt
+        ? `${basePrompt} Additional direction: ${input.prompt}`
+        : basePrompt;
+
+      const dalleClient = createDalleClient(settings!);
+      const model = settings!.aiProvider === "azure" ? settings!.azureDalleDeployment! : "dall-e-3";
+
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      let response: any;
+      try {
+        response = await dalleClient.images.generate({
+          model,
+          prompt: finalPrompt,
+          size: "1024x1024",
+          n: 1,
+          response_format: "b64_json",
+        });
+      } catch (err) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: `DALL-E error: ${parseAiError(err)}`,
+        });
+      }
+
+      const b64 = response.data?.[0]?.b64_json;
+      if (!b64) {
+        throw new TRPCError({
+          code: "INTERNAL_SERVER_ERROR",
+          message: "No image data returned from DALL-E",
+        });
+      }
+
+      const coverImageUrl = `data:image/png;base64,${b64}`;
+
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: { coverImageUrl },
+      });
+
+      return { coverImageUrl };
+    }),
+
+  uploadCover: managerProcedure
+    .input(z.object({
+      projectId: z.string(),
+      imageDataUrl: z.string(),
+    }))
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
+
+      if (!input.imageDataUrl.startsWith("data:image/")) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Invalid image format. Must be a data URL starting with 'data:image/'.",
+        });
+      }
+
+      if (input.imageDataUrl.length > MAX_COVER_SIZE) {
+        throw new TRPCError({
+          code: "BAD_REQUEST",
+          message: "Image too large. Maximum compressed size is 4 MB.",
+        });
+      }
+
+      await findUniqueOrThrow(
+        ctx.db.project.findUnique({ where: { id: input.projectId } }),
+        "Project",
+      );
+
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: { coverImageUrl: input.imageDataUrl },
+      });
+
+      return { coverImageUrl: input.imageDataUrl };
+    }),
+
+  removeCover: managerProcedure
+    .input(z.object({ projectId: z.string() }))
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
+
+      await findUniqueOrThrow(
+        ctx.db.project.findUnique({ where: { id: input.projectId } }),
+        "Project",
+      );
+
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: { coverImageUrl: null },
+      });
+
+      return { ok: true };
+    }),
+
+  updateCoverFocus: managerProcedure
+    .input(z.object({
+      projectId: z.string(),
+      coverFocusY: z.number().int().min(0).max(100),
+    }))
+    .mutation(async ({ ctx, input }) => {
+      requirePermission(ctx, PermissionKey.MANAGE_PROJECTS);
+      await ctx.db.project.update({
+        where: { id: input.projectId },
+        data: { coverFocusY: input.coverFocusY },
+      });
+      return { ok: true };
+    }),
+
+  isDalleConfigured: protectedProcedure
+    .query(async ({ ctx }) => {
+      const settings = await ctx.db.systemSettings.findUnique({
+        where: { id: "singleton" },
+      });
+      return { configured: isDalleConfigured(settings) };
+    }),
 });