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>

apps/web/src/components/roles/RoleModal.tsx

@@ -4,6 +4,7 @@ import { useRef, useState } from "react";
 import type { RoleWithResourceCount } from "@planarchy/shared";
 import { trpc } from "~/lib/trpc/client.js";
 import { useFocusTrap } from "~/hooks/useFocusTrap.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 const PRESET_COLORS = [
   "#6366f1",
@@ -110,7 +111,7 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
         <form onSubmit={handleSubmit} className="px-6 py-5 space-y-4">
           <div>
             <label className={labelClass}>
-              Name <span className="text-red-500">*</span>
+              Name <span className="text-red-500">*</span><InfoTooltip content="Role name shown in timelines, allocation pickers, and staffing demands (e.g. 3D Artist, Producer)." />
             </label>
             <input
               type="text"
@@ -127,7 +128,7 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
           </div>
 
           <div>
-            <label className={labelClass}>Description</label>
+            <label className={labelClass}>Description<InfoTooltip content="Optional description of this role's responsibilities." /></label>
             <input
               type="text"
               value={description}
@@ -139,7 +140,7 @@ export function RoleModal({ role, onClose, onSuccess }: RoleModalProps) {
           </div>
 
           <div>
-            <label className={labelClass}>Color</label>
+            <label className={labelClass}>Color<InfoTooltip content="Color used in timeline bars and badge chips for this role." /></label>
             <div className="rounded-2xl border border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800/70">
               <div className="mb-3 flex items-center gap-3">
                 <div

apps/web/src/components/roles/RolesClient.tsx

@@ -8,6 +8,7 @@ import { FilterChips } from "~/components/ui/FilterChips.js";
 import { SortableColumnHeader } from "~/components/ui/SortableColumnHeader.js";
 import { useTableSort } from "~/hooks/useTableSort.js";
 import { useViewPrefs } from "~/hooks/useViewPrefs.js";
+import { InfoTooltip } from "~/components/ui/InfoTooltip.js";
 
 export function RolesClient() {
   const [search, setSearch] = useState("");
@@ -146,9 +147,10 @@ export function RolesClient() {
                 sortField={sortField}
                 sortDir={sortDir}
                 onSort={toggle}
+                tooltip="Role name (e.g. 3D Artist, Producer). Shown in timeline bars and staffing views."
               />
               <th className="text-left px-4 py-3 font-medium text-gray-600 dark:text-gray-400 text-xs uppercase tracking-wider">
-                Description
+                <span className="inline-flex items-center gap-0.5">Description<InfoTooltip content="Optional description of the role's responsibilities and typical work." /></span>
               </th>
               <SortableColumnHeader
                 label="Resources"