Restore the Clash chatbot avatar across brand surfaces

apps/desktop/src/electron-version.test.ts

@@ -176,17 +176,17 @@ describe("desktop Electron runtime", () => {
     expect(readFileSync(iconUrl).subarray(0, 4).toString("ascii")).toBe("icns");
   });
 
-  it("uses a full-size centered Clash C desktop icon source", () => {
+  it("uses a full-size centered desktop icon source", () => {
     const iconSvg = readFileSync(
       new URL("../build/icon.svg", import.meta.url),
       "utf8",
     );
 
     expect(iconSvg).toContain('viewBox="0 0 1024 1024"');
     expect(iconSvg).toContain('rx="216"');
-    expect(iconSvg).toContain('aria-label="Clash C app icon"');
-    expect(iconSvg).toContain('stroke="#FF6B50"');
-    expect(iconSvg).not.toMatch(/<ellipse|agent|face/i);
+    expect(iconSvg).toContain(
+      "translate(512 512) scale(0.86) translate(-636 -601)",
+    );
   });
 
   it("injects the desktop runtime mode into the renderer", () => {

apps/web/app/agent-logo-contract.test.ts

@@ -0,0 +1,43 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { describe, expect, it } from "vitest";
+
+const repoRoot = join(import.meta.dirname, "../../..");
+
+const readRepoFile = (path: string) =>
+  readFileSync(join(repoRoot, path), "utf8");
+
+describe("Clash agent logo contract", () => {
+  it("uses the chatbot avatar for the packaged desktop application", () => {
+    const source = readRepoFile("apps/desktop/build/icon.svg");
+
+    expect(source).toContain('aria-label="Clash app icon"');
+    expect(source.match(/<ellipse/g)).toHaveLength(2);
+    expect(source).toContain('stroke="#171412"');
+    expect(source).toContain('fill="#FF6B50"');
+    expect(source).not.toContain("Clash C app icon");
+  });
+
+  it("uses the chatbot avatar across browser and product logo surfaces", () => {
+    const favicon = readRepoFile("apps/web/public/favicon.svg");
+    const mark = readRepoFile("apps/web/public/brand/logo-mark.svg");
+    const html = readRepoFile("apps/web/index.html");
+    const consumers = [
+      "apps/web/app/root.tsx",
+      "apps/web/app/routes/login.tsx",
+      "packages/web-ui/src/components/ProjectsClient.tsx",
+      "packages/web-ui/src/components/SettingsClient.tsx",
+      "packages/web-ui/src/components/TopNavigation.tsx",
+    ]
+      .map(readRepoFile)
+      .join("\n");
+
+    expect(favicon).toBe(mark);
+    expect(mark.match(/<ellipse/g)).toHaveLength(2);
+    expect(mark).toContain("#FF6B50");
+    expect(html).toContain('href="/favicon.svg"');
+    expect(html).not.toContain('href="/favicon-c.svg"');
+    expect(consumers).toContain("/brand/logo-mark.svg");
+    expect(consumers).not.toContain("/brand/logo-c");
+  });
+});

apps/web/app/root-route-primitives.test.ts

@@ -60,24 +60,6 @@ describe("root route primitives", () => {
     expect(sitemap).not.toContain("/login");
   });
 
-  it("publishes cache-busted Clash C install icons", () => {
-    const html = readFileSync(
-      new URL("../index.html", import.meta.url),
-      "utf8",
-    );
-    const webManifest = JSON.parse(
-      readFileSync(new URL("../public/site.webmanifest", import.meta.url), "utf8"),
-    ) as { icons?: Array<{ src?: string }> };
-
-    expect(html).toContain('href="/favicon-c.svg"');
-    expect(html).toContain('href="/apple-touch-icon-c.png"');
-    expect(webManifest.icons?.map((icon) => icon.src)).toEqual([
-      "/icon-c-192.png",
-      "/icon-c-512.png",
-      "/maskable-icon-c-512.png",
-    ]);
-  });
-
   it("keeps the desktop runtime callout legible in dark mode", () => {
     const css = readFileSync(new URL("./globals.css", import.meta.url), "utf8");
 

apps/web/app/root.tsx

@@ -92,7 +92,7 @@ export function ErrorBoundary() {
 
       <section className="relative w-full max-w-xl">
         <div className="mb-8 flex items-center gap-3">
-          <img src="/brand/logo-c-error.svg" alt="Clash" className="h-11 w-11" />
+          <img src="/brand/logo-mark-error.svg" alt="Clash" className="h-11 w-11" />
           <div>
             <p className="text-xs font-semibold uppercase tracking-[0.18em] text-brand">Route paused</p>
             <h1 className="font-display text-3xl font-bold tracking-tight sm:text-4xl">

apps/web/app/routes/login.tsx

@@ -178,13 +178,13 @@ export default function LoginRoute() {
             >
               <span className="relative block h-10 w-10">
                 <img
-                  src="/brand/logo-c.svg"
+                  src="/brand/logo-mark.svg"
                   alt=""
                   className="h-10 w-10 object-contain dark:hidden"
                   draggable={false}
                 />
                 <img
-                  src="/brand/logo-c.svg"
+                  src="/brand/logo-mark-dark.svg"
                   alt=""
                   className="hidden h-10 w-10 object-contain dark:block"
                   draggable={false}

apps/web/app/theme-contract.test.ts

@@ -304,7 +304,7 @@ describe("application theme contract", () => {
     expect(css).toMatch(
       /\.dark \.clash-copilot-launcher \.clash-agent-motion__pen\s*\{[\s\S]*?fill: #ff6b50/,
     );
-    expect(topNavigation).toContain('/brand/logo-c.svg');
+    expect(topNavigation).toContain('/brand/logo-mark-dark.svg');
     expect(topNavigation).not.toContain("dark:grayscale");
   });
 
@@ -333,7 +333,7 @@ describe("application theme contract", () => {
     expect(login).toContain("dark:text-neutral-50");
     expect(login).toContain("dark:text-neutral-100");
     expect(login).toContain("dark:placeholder:text-neutral-500");
-    expect(login).toContain('/brand/logo-c.svg');
+    expect(login).toContain('/brand/logo-mark-dark.svg');
   });
 
   it("exposes Appearance as a real persisted settings section", () => {

apps/web/index.html

@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/favicon-c.svg" />
-    <link rel="alternate icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-c.png" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/site.webmanifest" />
     <link rel="canonical" href="https://clash.video/" />
     <meta

apps/web/public/_headers

@@ -17,33 +17,18 @@
 /favicon.svg
   Cache-Control: public, max-age=86400
 
-/favicon-c.svg
-  Cache-Control: public, max-age=86400
-
 /apple-touch-icon.png
   Cache-Control: public, max-age=86400
 
-/apple-touch-icon-c.png
-  Cache-Control: public, max-age=86400
-
 /icon-192.png
   Cache-Control: public, max-age=86400
 
-/icon-c-192.png
-  Cache-Control: public, max-age=86400
-
 /icon-512.png
   Cache-Control: public, max-age=86400
 
-/icon-c-512.png
-  Cache-Control: public, max-age=86400
-
 /maskable-icon-512.png
   Cache-Control: public, max-age=86400
 
-/maskable-icon-c-512.png
-  Cache-Control: public, max-age=86400
-
 /og-image.png
   Cache-Control: public, max-age=86400