fix: complete white-label branding across all surfaces (3.6.2) (#23)

Previously several surfaces showed "Sairo" regardless of APP_NAME, and APP_LOGO
/ PRIMARY_COLOR were fetched but never applied. Now:

- APP_NAME follows through everywhere: browser tab title, og:title (link/social
  previews e.g. Slack unfurls), PWA manifest name, welcome modal, update banner,
  and the public share page. The title/og/description/theme-color and the
  manifest are injected SERVER-SIDE (serve_spa + /manifest.json) so a branded
  deployment is correct on first paint — no flash from "Sairo" while the client
  fetches branding.
- APP_LOGO is rendered (login, both app headers, share page).
- PRIMARY_COLOR is applied to the UI accent (--primary/hover/ring) and the tab
  theme-color.

Injection refactored into pure functions (_apply_branding_html, _branded_manifest)
with unit tests. Bump to 3.6.2 (Helm chart 1.4.2). Backend 68 tests pass; full
browser e2e (login/welcome/color/logo + share page + no-flash HTML/manifest)
verified against a branded instance.

Author: ashwathstephen

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to Sairo are documented here. This project uses [Semantic Versioning](https://semver.org/).
 
+## [3.6.2] - 2026-07-02
+
+White-label branding is now complete and seamless across every surface.
+
+### Fixed
+
+- **The app name follows `APP_NAME` everywhere.** Previously several surfaces showed "Sairo" regardless of `APP_NAME`: the browser tab title, the `og:title` used in link/social previews (e.g. Slack unfurls), the PWA manifest name, the first-run welcome modal, the update banner, and the public share-download page. The title/og/description/theme-color and the manifest are now injected **server-side**, so a branded deployment is correct the instant the page loads — no flash from "Sairo" while the client fetches branding.
+- **`APP_LOGO` is now rendered** (login screen, app headers, and the share page) — it was previously fetched but never displayed.
+- **`PRIMARY_COLOR` is now applied** to the UI accent (primary/hover/focus-ring and the tab theme-color) — previously read but never used.
+
 ## [3.6.1] - 2026-07-02
 
 Fixes for the activation metric and white-label branding.

backend/main.py

@@ -25,7 +25,7 @@
 from botocore.exceptions import ClientError
 from fastapi import FastAPI, UploadFile, File, Form, HTTPException, Query, Depends, Cookie, Request
 from fastapi.staticfiles import StaticFiles
-from fastapi.responses import RedirectResponse, FileResponse, StreamingResponse, JSONResponse
+from fastapi.responses import RedirectResponse, FileResponse, StreamingResponse, JSONResponse, HTMLResponse
 import pyotp
 from passlib.hash import bcrypt
 from pydantic import BaseModel
@@ -294,7 +294,7 @@ async def s3_error_handler(request, exc):
 
 
 _app_start_time = time.time()
-SAIRO_VERSION = "3.6.1"
+SAIRO_VERSION = "3.6.2"
 
 
 def _version_gt(a: str, b: str) -> bool:
@@ -6889,15 +6889,69 @@ def bucket_info_compat(user: dict = Depends(get_current_user)):
 
 
 # ── Serve React SPA ─────────────────────────────────────────────────────────
+# ── White-label branding injection (pure, unit-testable) ─────────────────────
+
+def _brand_name_color():
+    return (os.environ.get("APP_NAME", "Sairo"),
+            os.environ.get("PRIMARY_COLOR", "#3b82f6"))
+
+def _apply_branding_html(doc: str, name: str, color: str) -> str:
+    """Rewrite the brandable fields of index.html — tab title, og:title,
+    description, theme-color — from APP_NAME / PRIMARY_COLOR. Done server-side so
+    a white-label deployment is correct the instant the page loads (no client
+    flash from "Sairo", and correct og:title for link/social previews)."""
+    import re, html as _html
+    n = _html.escape(name, quote=True)
+    c = _html.escape(color, quote=True)
+    doc = re.sub(r"<title>.*?</title>", f"<title>{n}</title>", doc, count=1, flags=re.S)
+    doc = re.sub(r'(<meta property="og:title" content=")[^"]*(")', rf"\g<1>{n}\g<2>", doc)
+    doc = re.sub(r'(<meta name="description" content=")Sairo\b', rf"\g<1>{n}", doc)
+    doc = re.sub(r'(<meta name="theme-color" content=")[^"]*(")', rf"\g<1>{c}\g<2>", doc)
+    return doc
+
+def _branded_manifest(m: dict, name: str, color: str) -> dict:
+    """PWA manifest branded from APP_NAME / PRIMARY_COLOR."""
+    m = dict(m)
+    m["name"] = name
+    m["short_name"] = name
+    if color:
+        m["theme_color"] = color
+    return m
+
+
 static_dir = os.path.join(os.path.dirname(__file__), "static")
 if os.path.isdir(static_dir):
     app.mount("/assets", StaticFiles(directory=os.path.join(static_dir, "assets")), name="assets")
 
+    _spa_cache: dict = {}
+
+    def _spa_index_html():
+        if "html" not in _spa_cache:
+            try:
+                with open(os.path.join(static_dir, "index.html"), encoding="utf-8") as f:
+                    _spa_cache["html"] = _apply_branding_html(f.read(), *_brand_name_color())
+            except Exception:
+                _spa_cache["html"] = None
+        return _spa_cache["html"]
+
+    @app.get("/manifest.json")
+    def serve_manifest():
+        try:
+            with open(os.path.join(static_dir, "manifest.json"), encoding="utf-8") as f:
+                m = json.load(f)
+        except Exception:
+            m = {"start_url": "/", "display": "standalone"}
+        return JSONResponse(_branded_manifest(m, *_brand_name_color()))
+
     @app.get("/{path:path}")
     def serve_spa(path: str):
         file_path = os.path.realpath(os.path.join(static_dir, path))
         if not file_path.startswith(os.path.realpath(static_dir)):
             raise HTTPException(403, "Forbidden")
         if os.path.isfile(file_path):
             return FileResponse(file_path)
+        # SPA entry: serve index.html with the app name/colour baked in.
+        doc = _spa_index_html()
+        if doc is not None:
+            return HTMLResponse(doc)
         return FileResponse(os.path.join(static_dir, "index.html"))

backend/test_main.py

@@ -667,6 +667,52 @@ def test_first_search_records_even_when_index_not_ready(self, app, client, admin
             "first_search_at must record even when the search 503s during indexing"
 
 
+class TestBrandingInjection:
+    """3.6.2 white-label: APP_NAME / PRIMARY_COLOR are injected into the served
+    HTML + manifest server-side, so a branded deployment never leaks "Sairo"
+    (tab title, og:title for link previews, PWA name) and shows no load flash."""
+
+    SAMPLE_HTML = (
+        '<title>Sairo</title>\n'
+        '<meta property="og:title" content="Sairo" />\n'
+        '<meta name="description" content="Sairo — S3-compatible object storage browser" />\n'
+        '<meta name="theme-color" content="#3b82f6" />'
+    )
+
+    def test_html_fields_follow_app_name_and_color(self):
+        m = _main_module()
+        out = m._apply_branding_html(self.SAMPLE_HTML, "Objex", "#e11d48")
+        assert "<title>Objex</title>" in out
+        assert 'property="og:title" content="Objex"' in out            # link/social previews
+        assert 'content="Objex — S3-compatible' in out                 # description
+        assert 'name="theme-color" content="#e11d48"' in out           # tab/PWA colour
+        assert "Sairo" not in out                                      # no leak anywhere
+
+    def test_html_default_keeps_sairo(self):
+        m = _main_module()
+        out = m._apply_branding_html(self.SAMPLE_HTML, "Sairo", "#3b82f6")
+        assert "<title>Sairo</title>" in out                           # vanilla install unchanged
+
+    def test_html_escapes_app_name(self):
+        m = _main_module()
+        out = m._apply_branding_html("<title>Sairo</title>", "A&B<x>", "#000")
+        assert "A&amp;B&lt;x&gt;" in out and "<title>A&B<x></title>" not in out
+
+    def test_manifest_branded(self):
+        m = _main_module()
+        out = m._branded_manifest(
+            {"name": "Sairo", "short_name": "Sairo", "theme_color": "#3b82f6", "start_url": "/"},
+            "Objex", "#e11d48")
+        assert out["name"] == "Objex" and out["short_name"] == "Objex"
+        assert out["theme_color"] == "#e11d48"
+        assert out["start_url"] == "/"   # untouched fields preserved
+
+    def test_manifest_default_keeps_sairo(self):
+        m = _main_module()
+        out = m._branded_manifest({"name": "Sairo", "short_name": "Sairo"}, "Sairo", "#3b82f6")
+        assert out["name"] == "Sairo"
+
+
 # ── Health Check ─────────────────────────────────────────
 
 class TestHealth:

charts/sairo/Chart.yaml

@@ -2,8 +2,8 @@ apiVersion: v2
 name: sairo-helm
 description: S3-compatible object storage browser with search, versioning, and analytics
 type: application
-version: 1.4.1
-appVersion: "3.6.1"
+version: 1.4.2
+appVersion: "3.6.2"
 keywords:
   - s3
   - object-storage

frontend/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "sairo",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "S3-compatible object storage browser with search, versioning, and analytics",
   "private": true,
   "type": "module",

frontend/package.json

@@ -173,6 +173,20 @@ function MainApp() {
     if (branding.app_name) document.title = branding.app_name;
   }, [branding.app_name]);
 
+  // Apply a white-label PRIMARY_COLOR to the accent CSS variables (main accent,
+  // hover, focus ring) so a branded deployment is recoloured throughout the UI.
+  useEffect(() => {
+    const hex = branding.primary_color;
+    const m = /^#?([0-9a-f]{6})$/i.exec(hex || "");
+    if (!m) return;
+    const [r, g, b] = [0, 2, 4].map(i => parseInt(m[1].slice(i, i + 2), 16));
+    const dark = (v, f) => Math.max(0, Math.round(v * (1 - f)));
+    const root = document.documentElement.style;
+    root.setProperty("--primary", `#${m[1]}`);
+    root.setProperty("--primary-hover", `rgb(${dark(r, .12)}, ${dark(g, .12)}, ${dark(b, .12)})`);
+    root.setProperty("--primary-ring", `rgba(${r}, ${g}, ${b}, 0.3)`);
+  }, [branding.primary_color]);
+
   // Listen for session-expired events from api.js (replaces hard page reload)
   useEffect(() => {
     const handler = () => {
@@ -604,6 +618,14 @@ function MainApp() {
   }
 
   const appName = branding.app_name || "Sairo";
+  // White-label logo: use APP_LOGO when set, else the default mark.
+  const logoMark = branding.app_logo
+    ? <img src={branding.app_logo} alt={appName} style={{ height: 22, width: "auto", display: "block" }} />
+    : (
+      <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" width="22" height="22">
+        <path d="M28 10c0 3-4 5.5-8 5.5S12 13 12 10s4-5.5 8-5.5 8 2.5 8 5.5z"/><path d="M28 20c0 3-4 5.5-8 5.5S12 23 12 20"/><path d="M28 30c0 3-4 5.5-8 5.5S12 33 12 30"/><line x1="12" y1="10" x2="12" y2="30"/><line x1="28" y1="10" x2="28" y2="30"/>
+      </svg>
+    );
 
   const userBadge = (
     <div className="user-badge">
@@ -621,9 +643,7 @@ function MainApp() {
         <header>
           <div className="header-left">
             <span className="header-logo-mark">
-              <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" width="22" height="22">
-                <path d="M28 10c0 3-4 5.5-8 5.5S12 13 12 10s4-5.5 8-5.5 8 2.5 8 5.5z"/><path d="M28 20c0 3-4 5.5-8 5.5S12 23 12 20"/><path d="M28 30c0 3-4 5.5-8 5.5S12 33 12 30"/><line x1="12" y1="10" x2="12" y2="30"/><line x1="28" y1="10" x2="28" y2="30"/>
-              </svg>
+              {logoMark}
             </span>
             <h1>{appName}</h1>
             <span className="bucket-name">Object Storage</span>
@@ -647,7 +667,7 @@ function MainApp() {
             </span>
             <div className="ub-body">
               <div className="ub-head">
-                Sairo <strong>v{updateInfo.latest}</strong> is here <span className="ub-cur">· you're on v{updateInfo.current}</span>
+                {appName} <strong>v{updateInfo.latest}</strong> is here <span className="ub-cur">· you're on v{updateInfo.current}</span>
               </div>
               <div className="ub-chips">
                 {UPDATE_HIGHLIGHTS.map((h) => <span className="ub-chip" key={h}>{h}</span>)}
@@ -672,7 +692,7 @@ function MainApp() {
         <BucketList onSelect={navigateBucket} role={user.role} onDashboard={setDashboardBucket} />
         {showAuditLog && <AuditLog onClose={() => setShowAuditLog(false)} />}
         {dashboardBucket && <StorageDashboard bucket={dashboardBucket} onClose={() => setDashboardBucket(null)} onNavigate={(pfx) => { setDashboardBucket(null); setHash(dashboardBucket, pfx); }} />}
-        {showWelcome && <Welcome onDismiss={() => setShowWelcome(false)} />}
+        {showWelcome && <Welcome onDismiss={() => setShowWelcome(false)} appName={appName} />}
         {showTokenManager && <TokenManager onClose={() => setShowTokenManager(false)} />}
         {showLicense && <LicenseManager onClose={() => setShowLicense(false)} />}
         {showUserManager && <UserManager onClose={() => setShowUserManager(false)} currentUser={user} />}
@@ -696,9 +716,7 @@ function MainApp() {
       <header>
         <div className="header-left">
           <span className="header-logo-mark" style={{ cursor: "pointer" }} onClick={goHome}>
-            <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" width="20" height="20">
-              <path d="M28 10c0 3-4 5.5-8 5.5S12 13 12 10s4-5.5 8-5.5 8 2.5 8 5.5z"/><path d="M28 20c0 3-4 5.5-8 5.5S12 23 12 20"/><path d="M28 30c0 3-4 5.5-8 5.5S12 33 12 30"/><line x1="12" y1="10" x2="12" y2="30"/><line x1="28" y1="10" x2="28" y2="30"/>
-            </svg>
+            {logoMark}
           </span>
           <h1 style={{ cursor: "pointer" }} onClick={goHome}>{appName}</h1>
           <span className="bucket-name">{bucket}</span>

frontend/src/App.jsx

@@ -166,13 +166,17 @@ export default function Login({ onLogin, branding = {} }) {
         <form className="login-form" onSubmit={handleSubmit}>
           <div className="login-branding">
             <div className="login-logo-mark">
-              <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" width="32" height="32">
-                <path d="M28 10c0 3-4 5.5-8 5.5S12 13 12 10s4-5.5 8-5.5 8 2.5 8 5.5z"/>
-                <path d="M28 20c0 3-4 5.5-8 5.5S12 23 12 20"/>
-                <path d="M28 30c0 3-4 5.5-8 5.5S12 33 12 30"/>
-                <line x1="12" y1="10" x2="12" y2="30"/>
-                <line x1="28" y1="10" x2="28" y2="30"/>
-              </svg>
+              {branding.app_logo ? (
+                <img src={branding.app_logo} alt={appName} style={{ height: 40, width: "auto" }} />
+              ) : (
+                <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" width="32" height="32">
+                  <path d="M28 10c0 3-4 5.5-8 5.5S12 13 12 10s4-5.5 8-5.5 8 2.5 8 5.5z"/>
+                  <path d="M28 20c0 3-4 5.5-8 5.5S12 23 12 20"/>
+                  <path d="M28 30c0 3-4 5.5-8 5.5S12 33 12 30"/>
+                  <line x1="12" y1="10" x2="12" y2="30"/>
+                  <line x1="28" y1="10" x2="28" y2="30"/>
+                </svg>
+              )}
             </div>
             <h1>{appName}</h1>
             <p className="login-subtitle">Object storage, <span className="login-subtitle-fade">beautifully browsed.</span></p>

frontend/src/components/Login.jsx

@@ -1,12 +1,16 @@
 import React, { useState, useEffect } from "react";
-import { resolveShareLink } from "../api";
+import { resolveShareLink, getBranding } from "../api";
 
 export default function SharePage({ token }) {
   const [data, setData] = useState(null);
   const [error, setError] = useState(null);
   const [loading, setLoading] = useState(true);
   const [password, setPassword] = useState("");
   const [needsPassword, setNeedsPassword] = useState(false);
+  const [brand, setBrand] = useState({ app_name: "Sairo" });
+
+  // Brand the public share page (name + accent) from the deployment's settings.
+  useEffect(() => { getBranding().then(setBrand).catch(() => {}); }, []);
 
   const fetchLink = async (pwd = "") => {
     setLoading(true);
@@ -41,10 +45,14 @@ export default function SharePage({ token }) {
     <div className="share-page">
       <div className="share-card">
         <div className="share-logo">
-          <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" width="28" height="28" style={{ color: "#3b82f6" }}>
-            <path d="M28 10c0 3-4 5.5-8 5.5S12 13 12 10s4-5.5 8-5.5 8 2.5 8 5.5z"/><path d="M28 20c0 3-4 5.5-8 5.5S12 23 12 20"/><path d="M28 30c0 3-4 5.5-8 5.5S12 33 12 30"/><line x1="12" y1="10" x2="12" y2="30"/><line x1="28" y1="10" x2="28" y2="30"/>
-          </svg>
-          Sairo
+          {brand.app_logo ? (
+            <img src={brand.app_logo} alt={brand.app_name || "Sairo"} style={{ height: 28, width: "auto" }} />
+          ) : (
+            <svg viewBox="0 0 40 40" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" width="28" height="28" style={{ color: brand.primary_color || "#3b82f6" }}>
+              <path d="M28 10c0 3-4 5.5-8 5.5S12 13 12 10s4-5.5 8-5.5 8 2.5 8 5.5z"/><path d="M28 20c0 3-4 5.5-8 5.5S12 23 12 20"/><path d="M28 30c0 3-4 5.5-8 5.5S12 33 12 30"/><line x1="12" y1="10" x2="12" y2="30"/><line x1="28" y1="10" x2="28" y2="30"/>
+            </svg>
+          )}
+          {brand.app_name || "Sairo"}
         </div>
         {loading ? (
           <div className="share-loading"><div className="spinner" /> Loading...</div>

frontend/src/components/SharePage.jsx

@@ -7,7 +7,7 @@ const TIPS = [
   { icon: "\uD83D\uDCC4", title: "Preview", desc: "Click the eye icon to preview images, text, CSV, JSON, and Parquet schemas." },
 ];
 
-export default function Welcome({ onDismiss }) {
+export default function Welcome({ onDismiss, appName = "Sairo" }) {
   const handleDismiss = () => {
     localStorage.setItem("sairo-onboarded", "1");
     onDismiss();
@@ -16,7 +16,7 @@ export default function Welcome({ onDismiss }) {
   return (
     <div className="modal-overlay" onClick={handleDismiss}>
       <div className="modal" role="dialog" aria-modal="true" onClick={(e) => e.stopPropagation()} style={{ maxWidth: 480 }}>
-        <h2>Welcome to Sairo</h2>
+        <h2>Welcome to {appName}</h2>
         <p style={{ color: "var(--text-muted)", marginBottom: 16 }}>Here are a few tips to get you started:</p>
         <div className="welcome-tips">
           {TIPS.map((t, i) => (