From fd071323890cad8e2a4022892b416ec77b06422a Mon Sep 17 00:00:00 2001
From: Vincent Koc <vincentkoc@ieee.org>
Date: Thu, 12 Mar 2026 23:35:46 -0400
Subject: [PATCH] UI: fix control chat logo fallback

---
 ui/src/ui/app-render.ts              |  3 ++-
 ui/src/ui/views/agents-utils.test.ts | 12 ++++++++++++
 ui/src/ui/views/agents-utils.ts      |  2 +-
 ui/src/ui/views/login-gate.ts        |  3 ++-
 4 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/ui/src/ui/app-render.ts b/ui/src/ui/app-render.ts
index 1b5390adc..74644f077 100644
--- a/ui/src/ui/app-render.ts
+++ b/ui/src/ui/app-render.ts
@@ -78,6 +78,7 @@ import "./components/dashboard-header.ts";
 import { buildExternalLinkRel, EXTERNAL_LINK_TARGET } from "./external-link.ts";
 import { icons } from "./icons.ts";
 import { normalizeBasePath, TAB_GROUPS, subtitleForTab, titleForTab } from "./navigation.ts";
+import { agentLogoUrl } from "./views/agents-utils.ts";
 import {
   resolveAgentConfig,
   resolveConfiguredCronModelSuggestions,
@@ -450,7 +451,7 @@ export function renderApp(state: AppViewState) {
             ? nothing
             : html`
           <div class="sidebar-brand">
-            <img class="sidebar-brand__logo" src="${basePath ? `${basePath}/favicon.svg` : "/favicon.svg"}" alt="OpenClaw" />
+            <img class="sidebar-brand__logo" src="${agentLogoUrl(basePath)}" alt="OpenClaw" />
             <span class="sidebar-brand__title">OpenClaw</span>
           </div>
         `
diff --git a/ui/src/ui/views/agents-utils.test.ts b/ui/src/ui/views/agents-utils.test.ts
index eea9bec03..8935520c2 100644
--- a/ui/src/ui/views/agents-utils.test.ts
+++ b/ui/src/ui/views/agents-utils.test.ts
@@ -1,5 +1,6 @@
 import { describe, expect, it } from "vitest";
 import {
+  agentLogoUrl,
   resolveConfiguredCronModelSuggestions,
   resolveEffectiveModelFallbacks,
   sortLocaleStrings,
@@ -98,3 +99,14 @@ describe("sortLocaleStrings", () => {
     expect(sortLocaleStrings(new Set(["beta", "alpha"]))).toEqual(["alpha", "beta"]);
   });
 });
+
+describe("agentLogoUrl", () => {
+  it("keeps base-mounted control UI logo paths absolute to the mount", () => {
+    expect(agentLogoUrl("/ui")).toBe("/ui/favicon.svg");
+    expect(agentLogoUrl("/apps/openclaw/")).toBe("/apps/openclaw/favicon.svg");
+  });
+
+  it("uses a route-relative fallback before basePath bootstrap finishes", () => {
+    expect(agentLogoUrl("")).toBe("favicon.svg");
+  });
+});
diff --git a/ui/src/ui/views/agents-utils.ts b/ui/src/ui/views/agents-utils.ts
index 45b39e5a7..1eb28892b 100644
--- a/ui/src/ui/views/agents-utils.ts
+++ b/ui/src/ui/views/agents-utils.ts
@@ -215,7 +215,7 @@ export function resolveAgentAvatarUrl(
 
 export function agentLogoUrl(basePath: string): string {
   const base = basePath?.trim() ? basePath.replace(/\/$/, "") : "";
-  return base ? `${base}/favicon.svg` : "/favicon.svg";
+  return base ? `${base}/favicon.svg` : "favicon.svg";
 }
 
 function isLikelyEmoji(value: string) {
diff --git a/ui/src/ui/views/login-gate.ts b/ui/src/ui/views/login-gate.ts
index d63a12c04..77613822c 100644
--- a/ui/src/ui/views/login-gate.ts
+++ b/ui/src/ui/views/login-gate.ts
@@ -4,10 +4,11 @@ import { renderThemeToggle } from "../app-render.helpers.ts";
 import type { AppViewState } from "../app-view-state.ts";
 import { icons } from "../icons.ts";
 import { normalizeBasePath } from "../navigation.ts";
+import { agentLogoUrl } from "./agents-utils.ts";
 
 export function renderLoginGate(state: AppViewState) {
   const basePath = normalizeBasePath(state.basePath ?? "");
-  const faviconSrc = basePath ? `${basePath}/favicon.svg` : "/favicon.svg";
+  const faviconSrc = agentLogoUrl(basePath);
 
   return html`
     <div class="login-gate">