From 1c7e2e57b43b0ed7ab7ac55bdfd9a71ff4f157d0 Mon Sep 17 00:00:00 2001
From: Shellishack <40737228+Shellishack@users.noreply.github.com>
Date: Mon, 6 Apr 2026 04:57:13 +0800
Subject: [PATCH] feat(branding): add logo URL support for tenant branding
 across the application

---
 packages/app/api/routes/auth.ts                  |  2 +-
 packages/app/api/routes/tenant.ts                |  1 +
 packages/app/shared/index.ts                     |  2 ++
 packages/app/web/app/layouts/DashboardLayout.tsx | 12 ++++++++++--
 packages/app/web/app/pages/Login.tsx             | 11 +++++++++--
 packages/app/web/app/pages/Register.tsx          |  6 ++++--
 packages/app/web/app/pages/Settings.tsx          | 13 +++++++++++++
 packages/app/web/index.html                      |  5 ++++-
 8 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/packages/app/api/routes/auth.ts b/packages/app/api/routes/auth.ts
index 2094834..3d581b3 100644
--- a/packages/app/api/routes/auth.ts
+++ b/packages/app/api/routes/auth.ts
@@ -146,7 +146,7 @@ authRouter.get('/status', async (_req, res) => {
   const tenant = await db.tenant.findFirst({ select: { name: true, settings: true } });
   const settings = tenant?.settings as TenantSettings | null;
   const allowRegistration = settings?.allowRegistration !== false;
-  res.json({ ok: true, data: { hasProject: !!tenant, projectName: tenant?.name ?? null, allowRegistration } });
+  res.json({ ok: true, data: { hasProject: !!tenant, projectName: tenant?.name ?? null, allowRegistration, logoUrl: settings?.logoUrl ?? null } });
 });
 
 // ── POST /auth/login ─────────────────────────────────────────────────────────
diff --git a/packages/app/api/routes/tenant.ts b/packages/app/api/routes/tenant.ts
index cce868b..01baca7 100644
--- a/packages/app/api/routes/tenant.ts
+++ b/packages/app/api/routes/tenant.ts
@@ -10,6 +10,7 @@ const updateSettingsSchema = z.object({
   settings: z
     .object({
       siteTitle:     z.string().max(100).optional(),
+      logoUrl:       z.string().max(500).nullable().optional(),
       personaName:   z.string().min(1).max(80).optional(),
       personaPrompt: z.string().max(4000).optional(),
       endUserAccess: z.enum(['anonymous', 'whitelist', 'blacklist']).optional(),
diff --git a/packages/app/shared/index.ts b/packages/app/shared/index.ts
index 0d13efa..8932f42 100644
--- a/packages/app/shared/index.ts
+++ b/packages/app/shared/index.ts
@@ -51,6 +51,8 @@ export interface OnboardingBranding {
 export interface TenantSettings {
   /** Custom browser tab title (falls back to tenant name if not set) */
   siteTitle?: string;
+  /** Project logo URL — used in the sidebar, login/register pages, and as the browser favicon */
+  logoUrl?: string;
   /** Display name for the AI persona shown to end-users */
   personaName: string;
   /** System prompt that defines the bot's behaviour */
diff --git a/packages/app/web/app/layouts/DashboardLayout.tsx b/packages/app/web/app/layouts/DashboardLayout.tsx
index adc6004..d872e44 100644
--- a/packages/app/web/app/layouts/DashboardLayout.tsx
+++ b/packages/app/web/app/layouts/DashboardLayout.tsx
@@ -3,6 +3,7 @@ import { Link, Outlet, useNavigate, useLocation } from 'react-router-dom';
 import { LayoutDashboard, Users, UserCheck, Radio, Settings, LogOut, MessageSquare, BotMessageSquare, Globe } from 'lucide-react';
 import { isAuthenticated, clearAuth, getUser, getTenant } from '@/lib/auth';
 import { cn } from '@/lib/utils';
+import type { TenantSettings } from '@clawscale/shared';
 
 const navItems: { href: string; icon: typeof LayoutDashboard; label: string; exact?: boolean }[] = [
   { href: '/dashboard', icon: LayoutDashboard, label: 'Dashboard', exact: true },
@@ -26,7 +27,12 @@ export default function DashboardLayout() {
     } else {
       setReady(true);
       const t = getTenant();
-      if (t) document.title = t.settings?.siteTitle || `${t.name} — ClawScale`;
+      if (t) {
+        const s = t.settings as TenantSettings | undefined;
+        document.title = s?.siteTitle || `${t.name} — ClawScale`;
+        const favicon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+        if (favicon) favicon.href = s?.logoUrl || '/logo.png';
+      }
     }
   }, [navigate]);
 
@@ -34,6 +40,8 @@ export default function DashboardLayout() {
 
   const user = getUser();
   const tenant = getTenant();
+  const tenantSettings = tenant?.settings as TenantSettings | undefined;
+  const projectLogo = tenantSettings?.logoUrl || '/logo.png';
 
   function handleLogout() {
     clearAuth();
@@ -44,7 +52,7 @@ export default function DashboardLayout() {
     <div className="flex h-screen bg-gray-50">
       <aside className="flex w-60 flex-col bg-navy-900 text-white">
         <Link to="/" className="flex items-center gap-2.5 px-5 py-5 border-b border-white/10">
-          <img src="/logo.png" alt="ClawScale" width={28} height={28} className="h-7 w-7" />
+          <img src={projectLogo} alt="ClawScale" width={28} height={28} className="h-7 w-7 rounded object-cover" />
           <div>
             <span className="font-semibold text-white text-base">ClawScale</span>
             <p className="text-[10px] text-white/40 leading-none mt-0.5">by ClayPulse</p>
diff --git a/packages/app/web/app/pages/Login.tsx b/packages/app/web/app/pages/Login.tsx
index 8a3165e..be9c7f2 100644
--- a/packages/app/web/app/pages/Login.tsx
+++ b/packages/app/web/app/pages/Login.tsx
@@ -1,4 +1,4 @@
-import { useState, type FormEvent } from 'react';
+import { useState, useEffect, type FormEvent } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { Loader2 } from 'lucide-react';
 import { api } from '@/lib/api';
@@ -11,6 +11,13 @@ export default function Login() {
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
   const [loading, setLoading] = useState(false);
+  const [logoUrl, setLogoUrl] = useState('/logo.png');
+
+  useEffect(() => {
+    api.get<ApiResponse<{ hasProject: boolean; projectName: string | null; allowRegistration: boolean; logoUrl: string | null }>>('/auth/status').then((res) => {
+      if (res.ok && res.data.logoUrl) setLogoUrl(res.data.logoUrl);
+    });
+  }, []);
 
   async function handleSubmit(e: FormEvent) {
     e.preventDefault(); setError(''); setLoading(true);
@@ -26,7 +33,7 @@ export default function Login() {
     <div className="flex min-h-screen items-center justify-center bg-navy-950 px-4">
       <div className="w-full max-w-sm">
         <div className="flex items-center justify-center gap-2.5 mb-8">
-          <img src="/logo.png" alt="ClawScale" width={32} height={32} className="h-8 w-8" />
+          <img src={logoUrl} alt="ClawScale" width={32} height={32} className="h-8 w-8 rounded object-cover" />
           <span className="text-2xl font-semibold text-white">ClawScale</span>
         </div>
 
diff --git a/packages/app/web/app/pages/Register.tsx b/packages/app/web/app/pages/Register.tsx
index 2e02d70..ccf0b04 100644
--- a/packages/app/web/app/pages/Register.tsx
+++ b/packages/app/web/app/pages/Register.tsx
@@ -13,12 +13,14 @@ export default function Register() {
   const [hasProject, setHasProject] = useState<boolean | null>(null);
   const [projectName, setProjectName] = useState('');
   const [registrationDisabled, setRegistrationDisabled] = useState(false);
+  const [logoUrl, setLogoUrl] = useState('/logo.png');
 
   useEffect(() => {
-    api.get<ApiResponse<{ hasProject: boolean; projectName: string | null; allowRegistration: boolean }>>('/auth/status').then((res) => {
+    api.get<ApiResponse<{ hasProject: boolean; projectName: string | null; allowRegistration: boolean; logoUrl: string | null }>>('/auth/status').then((res) => {
       if (res.ok) {
         setHasProject(res.data.hasProject);
         setProjectName(res.data.projectName ?? '');
+        if (res.data.logoUrl) setLogoUrl(res.data.logoUrl);
         if (res.data.hasProject && !res.data.allowRegistration) {
           setRegistrationDisabled(true);
         }
@@ -60,7 +62,7 @@ export default function Register() {
     <div className="flex min-h-screen items-center justify-center bg-navy-950 px-4 py-12">
       <div className="w-full max-w-sm">
         <div className="flex items-center justify-center gap-2.5 mb-8">
-          <img src="/logo.png" alt="ClawScale" width={32} height={32} className="h-8 w-8" />
+          <img src={logoUrl} alt="ClawScale" width={32} height={32} className="h-8 w-8 rounded object-cover" />
           <span className="text-2xl font-semibold text-white">ClawScale</span>
         </div>
 
diff --git a/packages/app/web/app/pages/Settings.tsx b/packages/app/web/app/pages/Settings.tsx
index 9530691..830a9ef 100644
--- a/packages/app/web/app/pages/Settings.tsx
+++ b/packages/app/web/app/pages/Settings.tsx
@@ -20,6 +20,7 @@ export default function Settings() {
   const [deleteProjectConfirm, setDeleteProjectConfirm] = useState('');
   const [name, setName] = useState('');
   const [siteTitle, setSiteTitle] = useState('');
+  const [logoUrl, setLogoUrl] = useState('');
   const [endUserAccess, setEndUserAccess] = useState<TenantSettings['endUserAccess']>('anonymous');
   const [clawscaleModel, setClawscaleModel] = useState('openai:gpt-5.4-mini');
   const [clawscaleApiKey, setClawscaleApiKey] = useState('');
@@ -38,6 +39,7 @@ export default function Settings() {
         setTenant(t); setName(t.name);
         const s = t.settings as TenantSettings;
         setSiteTitle(s.siteTitle ?? '');
+        setLogoUrl(s.logoUrl ?? '');
         setEndUserAccess(s.endUserAccess ?? 'anonymous');
         setClawscaleModel(s.clawscale?.llm?.model ?? 'openai:gpt-5.4-mini');
         setApiKeySet(!!s.clawscale?.llm?.apiKey && s.clawscale.llm.apiKey !== '');
@@ -58,6 +60,7 @@ export default function Settings() {
         name,
         settings: {
           siteTitle: siteTitle || undefined,
+          logoUrl: logoUrl || null,
           defaultHomePage: defaultHomePage || null,
           allowRegistration,
           endUserAccess,
@@ -76,6 +79,8 @@ export default function Settings() {
       storeTenant(res.data);
       const s = res.data.settings as TenantSettings;
       document.title = s.siteTitle || `${res.data.name} — ClawScale`;
+      const favicon = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+      if (favicon) favicon.href = s.logoUrl || '/logo.png';
       setTimeout(() => setSuccess(false), 3000);
     } finally { setSaving(false); }
   }
@@ -108,6 +113,14 @@ export default function Settings() {
               <input className="input" value={siteTitle} onChange={(e) => setSiteTitle(e.target.value)} disabled={!isAdmin} placeholder={`${name || 'Project'} — ClawScale`} />
               <p className="text-xs text-gray-400 mt-1">Custom title for the browser tab. Leave blank to use the default.</p>
             </div>
+            <div>
+              <label className="label">Logo URL</label>
+              <div className="flex items-center gap-3">
+                {logoUrl && <img src={logoUrl} alt="Logo preview" className="h-10 w-10 rounded-lg object-cover border border-gray-200" />}
+                <input className="input flex-1" placeholder="https://example.com/logo.png" value={logoUrl} onChange={(e) => setLogoUrl(e.target.value)} disabled={!isAdmin} />
+              </div>
+              <p className="text-xs text-gray-400 mt-1">Used as the sidebar logo, browser favicon, and on login/register pages. Leave blank for the default.</p>
+            </div>
             <div>
               <label className="label">Default home page</label>
               <select className="input" value={defaultHomePage} onChange={(e) => setDefaultHomePage(e.target.value)} disabled={!isAdmin}>
diff --git a/packages/app/web/index.html b/packages/app/web/index.html
index 5c7f9f2..deca3c4 100644
--- a/packages/app/web/index.html
+++ b/packages/app/web/index.html
@@ -8,7 +8,10 @@
     <script>
       try {
         var t = JSON.parse(localStorage.getItem('cs_tenant') || '');
-        if (t) document.title = t.settings && t.settings.siteTitle || t.name + ' \u2014 ClawScale';
+        if (t) {
+          document.title = t.settings && t.settings.siteTitle || t.name + ' \u2014 ClawScale';
+          if (t.settings && t.settings.logoUrl) document.querySelector('link[rel="icon"]').href = t.settings.logoUrl;
+        }
       } catch (e) {}
     </script>
   </head>