fix(frontend): render project watermark icons full-size above the composer with detail-preserving grayscale — #353 (QA verte)

Cause: the monochrome-first treatment from #351 flattened the emoji
artwork through an alpha mask (transparent fill + zero-offset
text-shadow), dropping internal details (the ghost lost its tongue and
eyes), and the watermark box did not occupy the full space available
above the chat composer.
Fix: new .project-cell-illustration-area container (container-type:
size) wrapping the scroll zone so the absolute watermark spans the
whole region between the agent toolbar and the composer; glyph keeps
the OS full-colour emoji artwork as source and is neutralised with a
non-destructive CSS filter (grayscale(1) contrast(0.92)) so internal
tones and details stay visible in black and white; glyph sized to
min(100cqw - 8px, 100cqh - 12px); text-variation selector U+FE0E
stripping removed (full emoji preserved) and project-theme tint
plumbing (accessibleProjectAccent/onProjectThemeChanged) dropped as
superseded by grayscale; empty label and overlay z-layering untouched.
QA verte reconfirmée par Git: npm test -- CustomAgentChatView.test.tsx
projectIcons.test.tsx 96/96, npm run typecheck OK, npm run build OK,
npm test 1396/1396, git diff --check OK.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/features/agents/CustomAgentChatView.test.tsx

@@ -12,7 +12,6 @@ import {
   hasProjectCliInteraction,
 } from "@/features/projects/projectCliInteractionActivity";
 import { publishProjectIconChanged } from "@/features/projects/projectIcons";
-import { publishProjectThemeChanged } from "@/features/projects/projectTheme";
 import {
   PluginCommandRegistry,
   PluginLayoutRegistry,
@@ -217,16 +216,10 @@ describe("CustomAgentChatView", () => {
     expect((watermark.firstElementChild as HTMLElement | null)?.style.width).toBe("100%");
     expect((watermark.firstElementChild as HTMLElement | null)?.style.height).toBe("100%");
     expect((watermark.firstElementChild as HTMLElement | null)?.className).toContain("project-cell-illustration__glyph");
-    expect(watermark.textContent).toBe("🐍\uFE0E");
+    expect(watermark.textContent).toBe("🐍");
-    expect(watermark.dataset.colorMode).toBe("monochrome");
+    expect(watermark.parentElement?.className).toContain("project-cell-illustration-area");
-    expect(watermark.style.getPropertyValue("--project-illustration-tint")).toBe("var(--color-muted, #9aa7b4)");
     publishProjectIconChanged({ projectId: "project-1", icon: { set: "emoji", name: "star" } });
-    await waitFor(() => expect(watermark.textContent).toBe("⭐\uFE0E"));
+    await waitFor(() => expect(watermark.textContent).toBe("⭐"));
-    publishProjectThemeChanged({ projectId: "project-1", themeColor: "#7c3aed" });
-    await waitFor(() => {
-      expect(watermark.dataset.colorMode).toBe("project");
-      expect(watermark.style.getPropertyValue("--project-illustration-tint")).toBe("#945DF0");
-    });
     expect(screen.getByTestId("custom-agent-chat-scroll").className).toContain("z-10");
     expect(screen.getByTestId("custom-agent-chat-composer").className).toContain("bg-raised/40");
   });

frontend/src/features/agents/CustomAgentChatView.tsx

@@ -15,7 +15,6 @@ import {
   useRef,
   useState,
   type ClipboardEvent,
-  type CSSProperties,
   type KeyboardEvent,
   type MouseEvent as ReactMouseEvent,
   type RefObject,
@@ -46,11 +45,6 @@ import {
 } from "@/features/projects/projectCliInteractionActivity";
 import { Button, EntryTimestamp, Spinner, cn, normalizeTimestamp } from "@/shared";
 import { onProjectIconChanged, ProjectIcon } from "@/features/projects/projectIcons";
-import {
-  accessibleProjectAccent,
-  onProjectThemeChanged,
-  validThemeColor,
-} from "@/features/projects/projectTheme";
 import type {
   ChatAttachmentInput,
   ChatDraftScope,
@@ -1077,7 +1071,6 @@ export function CustomAgentChatView({
   const [stopTerminalOverride, setStopTerminalOverride] = useState(false);
   const [error, setError] = useState<ChatErrorState | null>(null);
   const [projectIcon, setProjectIcon] = useState<ProjectIconRef | null>(null);
-  const [projectThemeColor, setProjectThemeColor] = useState<string | null>(null);
   const scrollRef = useRef<HTMLDivElement | null>(null);
   const composerRef = useRef<HTMLTextAreaElement | null>(null);
   const chatRootRef = useRef<HTMLDivElement | null>(null);
@@ -1135,21 +1128,14 @@ export function CustomAgentChatView({
     void project?.readProjectSettings(projectId).then((settings) => {
       if (!cancelled) {
         setProjectIcon(settings.icon ?? null);
-        setProjectThemeColor(validThemeColor(settings.themeColor));
       }
     }).catch(() => undefined);
     const unsubscribeIcon = onProjectIconChanged((change) => {
       if (change.projectId === projectId) setProjectIcon(change.icon);
     });
-    const unsubscribeTheme = onProjectThemeChanged((change) => {
-      if (change.projectId === projectId) {
-        setProjectThemeColor(validThemeColor(change.themeColor));
-      }
-    });
     return () => {
       cancelled = true;
       unsubscribeIcon();
-      unsubscribeTheme();
     };
   }, [project, projectId]);
 
@@ -2789,28 +2775,6 @@ export function CustomAgentChatView({
       data-testid="custom-agent-chat-view"
       className="custom-agent-chat-view relative z-0 flex h-full min-h-0 flex-col overflow-hidden bg-surface text-content"
     >
-      <div
-        data-testid="project-icon-watermark"
-        data-color-mode={projectThemeColor ? "project" : "monochrome"}
-        aria-hidden="true"
-        className="project-cell-illustration pointer-events-none absolute z-0 flex items-center justify-center overflow-hidden"
-        style={{
-          pointerEvents: "none",
-          "--project-illustration-tint": projectThemeColor
-            ? accessibleProjectAccent(projectThemeColor)
-            : "var(--color-muted, #9aa7b4)",
-        } as CSSProperties}
-      >
-        <ProjectIcon
-          icon={projectIcon}
-          fallbackLabel={projectFallbackLabel}
-          surface="watermark"
-          size="100%"
-          decorative
-          className="project-cell-illustration__glyph"
-          style={{ fontSize: "min(88cqw, 88cqh)" }}
-        />
-      </div>
       <div
         role="toolbar"
         aria-label={t("custom.actions")}
@@ -2978,6 +2942,22 @@ export function CustomAgentChatView({
         </div>
       )}
 
+      <div className="project-cell-illustration-area relative z-10 flex min-h-0 flex-1 basis-0 overflow-hidden">
+        <div
+          data-testid="project-icon-watermark"
+          aria-hidden="true"
+          className="project-cell-illustration pointer-events-none absolute z-0 flex items-center justify-center overflow-hidden"
+          style={{ pointerEvents: "none" }}
+        >
+          <ProjectIcon
+            icon={projectIcon}
+            fallbackLabel={projectFallbackLabel}
+            surface="watermark"
+            size="100%"
+            decorative
+            className="project-cell-illustration__glyph"
+          />
+        </div>
         <div
           ref={scrollRef}
           data-testid="custom-agent-chat-scroll"
@@ -3049,6 +3029,7 @@ export function CustomAgentChatView({
             ))
           )}
         </div>
+      </div>
 
       <div
         data-testid="custom-agent-chat-composer"

frontend/src/features/projects/projectIcons.test.tsx

@@ -43,7 +43,7 @@ describe("project emoji catalogue", () => {
     expect(getByRole("img").dataset.projectIcon).toBe("none");
   });
 
-  it("requests a monochrome text presentation for watermark emoji only", () => {
+  it("keeps the full emoji artwork available for grayscale watermark rendering", () => {
     const { getByTestId } = render(
       <>
         <ProjectIcon icon={{ set: "emoji", name: "star" }} data-testid="product-icon" />
@@ -57,8 +57,8 @@ describe("project emoji catalogue", () => {
     );
 
     expect(getByTestId("product-icon").textContent).toBe("⭐");
-    expect(getByTestId("watermark-icon").textContent).toBe("⭐\uFE0E");
+    expect(getByTestId("watermark-icon").textContent).toBe("⭐");
-    expect((getByTestId("watermark-icon") as HTMLElement).style.fontFamily).toContain("system-ui");
+    expect((getByTestId("watermark-icon") as HTMLElement).style.fontFamily).toContain("Color Emoji");
   });
 });
 

frontend/src/features/projects/projectIcons.tsx

@@ -210,9 +210,6 @@ export function ProjectIcon({ icon: ref, fallbackLabel, size = 32, className, st
   const label = entry?.label ?? fallbackInitial(ref, fallbackLabel);
   const numericSize = typeof size === "number" ? size : null;
   const glyph = entry?.glyph ?? fallbackInitial(ref, fallbackLabel);
-  const renderedGlyph = surface === "watermark" && entry
-    ? `${glyph.replace(/\uFE0F/g, "\uFE0E")}${glyph.includes("\uFE0F") ? "" : "\uFE0E"}`
-    : glyph;
   return (
     <span
       {...htmlProps}
@@ -226,13 +223,11 @@ export function ProjectIcon({ icon: ref, fallbackLabel, size = 32, className, st
       style={{
         display: "inline-flex", alignItems: "center", justifyContent: "center",
         width: size, height: size, fontSize: numericSize ? Math.max(16, numericSize * 0.72) : "62%",
-        fontFamily: surface === "watermark"
+        fontFamily: '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif',
-          ? "ui-sans-serif, system-ui, sans-serif"
-          : '"Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif',
         fontWeight: entry ? 400 : 700, lineHeight: 1, flexShrink: 0, ...style,
       }}
     >
-      {renderedGlyph}
+      {glyph}
     </span>
   );
 }

frontend/src/shared/styles/theme.css

@@ -107,23 +107,21 @@
     container-type: size;
   }
 
+  .project-cell-illustration-area {
+    container-type: size;
+  }
+
   .project-cell-illustration {
     inset: 6px 4px;
-    color: transparent;
+    opacity: 0.085;
-    opacity: 0.045;
   }
 
-  .project-cell-illustration[data-color-mode="project"] {
+  /* Keep the operating system's full-colour emoji artwork as the source image:
-    opacity: 0.065;
+     grayscale preserves internal tones and details that a monochrome alpha
-  }
+     mask (for example color: transparent + text-shadow) would flatten. */
-
-  /* Emoji fonts may ignore the text-variation selector and retain their own
-     palette. Painting a zero-offset text shadow through the glyph alpha mask
-     guarantees one semantic project tint without depending on the host font. */
   .project-cell-illustration__glyph {
-    color: transparent;
+    filter: grayscale(1) contrast(0.92);
-    -webkit-text-fill-color: transparent;
+    font-size: min(calc(100cqw - 8px), calc(100cqh - 12px)) !important;
-    text-shadow: 0 0 0 var(--project-illustration-tint, var(--color-muted));
   }
 
   .project-cell-empty-label {