From 6ba091da22f74f3f592ad76bdc940508aa424d39 Mon Sep 17 00:00:00 2001
From: aniongithub <ani@anionline.me>
Date: Sun, 17 May 2026 13:17:57 -0700
Subject: [PATCH] feat(webui): add brand logo and favicon

  - webui/src/assets/favicon.svg: standalone icon with the brand
    accent color baked in, wired into index.html via the
    HtmlWebpackPlugin favicon option.
  - webui/src/Logo.tsx: same artwork as a Preact component that uses
    fill=currentColor so it inherits the surrounding color and works
    in both light and dark themes without per-theme assets.
  - App.tsx + styles.css: render <Logo size={72} /> as an absolutely-
    positioned, muted (opacity 0.45 over var(--fg-dim)) decoration in
    the top-right corner of the page header. pointer-events: none so
    it never intercepts clicks.
---
 webui/src/App.tsx            |  7 ++++++-
 webui/src/Logo.tsx           | 20 ++++++++++++++++++++
 webui/src/assets/favicon.svg |  6 ++++++
 webui/src/styles.css         | 15 +++++++++++++++
 webui/webpack.config.js      |  1 +
 5 files changed, 48 insertions(+), 1 deletion(-)
 create mode 100644 webui/src/Logo.tsx
 create mode 100644 webui/src/assets/favicon.svg

diff --git a/webui/src/App.tsx b/webui/src/App.tsx
index a344a51..cebf80a 100644
--- a/webui/src/App.tsx
+++ b/webui/src/App.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useMemo } from 'preact/hooks';
 import { api, Page } from './mcp';
+import { Logo } from './Logo';
 import { marked } from 'marked';
 import mermaid from 'mermaid';
 
@@ -628,6 +629,7 @@ export function App() {
                 ) : current ? (
                     <>
                         <div class="page-header">
+                            <span class="page-header-logo" aria-hidden="true"><Logo size={72} /></span>
                             <div class="page-title">
                                 <Highlighted text={current.title} query={searchQuery} />
                                 {!editing && (
@@ -689,7 +691,10 @@ export function App() {
                         )}
                     </>
                 ) : (
-                    <div class="empty">select a page</div>
+                    <div class="empty">
+                        <Logo size={96} />
+                        <span>select a page</span>
+                    </div>
                 )}
             </div>
         </div>
diff --git a/webui/src/Logo.tsx b/webui/src/Logo.tsx
new file mode 100644
index 0000000..956762e
--- /dev/null
+++ b/webui/src/Logo.tsx
@@ -0,0 +1,20 @@
+// Brand logo. Uses currentColor so it inherits the surrounding text
+// color (var(--fg-dim) in the page header), giving the right look in
+// both light and dark themes without per-theme assets.
+
+export function Logo({ size = 24 }: { size?: number } = {}) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="41 34 18 18"
+            width={size}
+            height={size}
+            aria-hidden="true"
+        >
+            <g fill="currentColor" stroke="none">
+                <path d="m 52.218,50.524 c 0,0.313 0.25,0.567 0.559,0.567 0.311,0 0.559,-0.254 0.559,-0.567 v -1.883 h 1.318 c 0.836,0 1.516,-0.693 1.516,-1.546 v -1.338 h 1.85 c 0.31,0 0.56,-0.256 0.56,-0.567 0,-0.314 -0.25,-0.57 -0.56,-0.57 h -1.85 v -1.281 h 1.85 c 0.31,0 0.56,-0.254 0.56,-0.566 0,-0.312 -0.25,-0.567 -0.56,-0.567 h -1.85 v -1.282 h 1.85 c 0.31,0 0.56,-0.254 0.56,-0.568 0,-0.312 -0.25,-0.565 -0.56,-0.565 h -1.85 v -1.272 c 0,-0.853 -0.68,-1.543 -1.516,-1.543 H 53.336 V 35.09 c 0,-0.313 -0.249,-0.567 -0.559,-0.567 -0.309,0 -0.559,0.254 -0.559,0.567 v 1.884 H 50.959 V 35.09 c 0,-0.313 -0.25,-0.567 -0.559,-0.567 -0.309,0 -0.557,0.254 -0.557,0.567 v 1.884 H 48.584 V 35.09 c 0,-0.313 -0.251,-0.567 -0.559,-0.567 -0.31,0 -0.56,0.254 -0.56,0.567 v 1.884 H 46.15 c -0.838,0 -1.518,0.692 -1.518,1.545 v 1.58 h -1.85 c -0.309,0 -0.559,0.256 -0.559,0.569 0,0.312 0.25,0.567 0.559,0.567 h 1.85 v 1.279 h -1.85 c -0.309,0 -0.559,0.254 -0.559,0.568 0,0.314 0.25,0.568 0.559,0.568 h 1.85 v 1.281 h -1.85 c -0.309,0 -0.559,0.254 -0.559,0.567 0,0.312 0.25,0.565 0.559,0.565 h 1.85 v 1.029 c 0,0.852 0.68,1.545 1.518,1.545 h 1.316 v 1.883 c 0,0.312 0.25,0.568 0.56,0.568 0.308,0 0.559,-0.256 0.559,-0.568 v -1.88 h 1.259 v 1.883 c 0,0.314 0.248,0.568 0.557,0.568 0.309,0 0.559,-0.254 0.559,-0.568 V 48.64 h 1.259 v 1.884 z m -6.067,-3.019 c -0.222,0 -0.401,-0.184 -0.401,-0.408 v -8.582 c 0,-0.225 0.18,-0.408 0.401,-0.408 h 8.501 c 0.221,0 0.399,0.185 0.399,0.408 v 8.582 c 0,0.225 -0.18,0.408 -0.399,0.408 z" />
+                <path d="m 53.591,39.054 h -6.378 c -0.31,0 -0.559,0.254 -0.559,0.566 v 6.494 c 0,0.312 0.249,0.568 0.559,0.568 h 6.378 c 0.31,0 0.558,-0.257 0.558,-0.568 V 39.62 c -0.002,-0.312 -0.25,-0.566 -0.558,-0.566 z m -0.559,6.492 H 47.77 v -5.357 h 5.263 v 5.357 z" />
+            </g>
+        </svg>
+    );
+}
diff --git a/webui/src/assets/favicon.svg b/webui/src/assets/favicon.svg
new file mode 100644
index 0000000..3f4b7f3
--- /dev/null
+++ b/webui/src/assets/favicon.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="41 34 18 18">
+  <g fill="#0078d4" stroke="none">
+    <path d="m 52.218,50.524 c 0,0.313 0.25,0.567 0.559,0.567 0.311,0 0.559,-0.254 0.559,-0.567 v -1.883 h 1.318 c 0.836,0 1.516,-0.693 1.516,-1.546 v -1.338 h 1.85 c 0.31,0 0.56,-0.256 0.56,-0.567 0,-0.314 -0.25,-0.57 -0.56,-0.57 h -1.85 v -1.281 h 1.85 c 0.31,0 0.56,-0.254 0.56,-0.566 0,-0.312 -0.25,-0.567 -0.56,-0.567 h -1.85 v -1.282 h 1.85 c 0.31,0 0.56,-0.254 0.56,-0.568 0,-0.312 -0.25,-0.565 -0.56,-0.565 h -1.85 v -1.272 c 0,-0.853 -0.68,-1.543 -1.516,-1.543 H 53.336 V 35.09 c 0,-0.313 -0.249,-0.567 -0.559,-0.567 -0.309,0 -0.559,0.254 -0.559,0.567 v 1.884 H 50.959 V 35.09 c 0,-0.313 -0.25,-0.567 -0.559,-0.567 -0.309,0 -0.557,0.254 -0.557,0.567 v 1.884 H 48.584 V 35.09 c 0,-0.313 -0.251,-0.567 -0.559,-0.567 -0.31,0 -0.56,0.254 -0.56,0.567 v 1.884 H 46.15 c -0.838,0 -1.518,0.692 -1.518,1.545 v 1.58 h -1.85 c -0.309,0 -0.559,0.256 -0.559,0.569 0,0.312 0.25,0.567 0.559,0.567 h 1.85 v 1.279 h -1.85 c -0.309,0 -0.559,0.254 -0.559,0.568 0,0.314 0.25,0.568 0.559,0.568 h 1.85 v 1.281 h -1.85 c -0.309,0 -0.559,0.254 -0.559,0.567 0,0.312 0.25,0.565 0.559,0.565 h 1.85 v 1.029 c 0,0.852 0.68,1.545 1.518,1.545 h 1.316 v 1.883 c 0,0.312 0.25,0.568 0.56,0.568 0.308,0 0.559,-0.256 0.559,-0.568 v -1.88 h 1.259 v 1.883 c 0,0.314 0.248,0.568 0.557,0.568 0.309,0 0.559,-0.254 0.559,-0.568 V 48.64 h 1.259 v 1.884 z m -6.067,-3.019 c -0.222,0 -0.401,-0.184 -0.401,-0.408 v -8.582 c 0,-0.225 0.18,-0.408 0.401,-0.408 h 8.501 c 0.221,0 0.399,0.185 0.399,0.408 v 8.582 c 0,0.225 -0.18,0.408 -0.399,0.408 z"/>
+    <path d="m 53.591,39.054 h -6.378 c -0.31,0 -0.559,0.254 -0.559,0.566 v 6.494 c 0,0.312 0.249,0.568 0.559,0.568 h 6.378 c 0.31,0 0.558,-0.257 0.558,-0.568 V 39.62 c -0.002,-0.312 -0.25,-0.566 -0.558,-0.566 z m -0.559,6.492 H 47.77 v -5.357 h 5.263 v 5.357 z"/>
+  </g>
+</svg>
diff --git a/webui/src/styles.css b/webui/src/styles.css
index 0e6b55a..a573b1d 100644
--- a/webui/src/styles.css
+++ b/webui/src/styles.css
@@ -231,6 +231,18 @@ html, body, #root {
 .page-header {
     padding: 32px 40px 16px;
     border-bottom: 1px solid var(--border);
+    position: relative;
+}
+
+.page-header-logo {
+    position: absolute;
+    top: 20px;
+    right: 32px;
+    color: var(--fg-dim);
+    opacity: 0.6;
+    pointer-events: none;
+    display: inline-flex;
+    align-items: center;
 }
 
 .page-title {
@@ -592,12 +604,15 @@ mark {
 
 .empty {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
+    gap: 16px;
     flex: 1;
     color: var(--fg-dim);
     font-size: 16px;
     font-weight: 300;
+    opacity: 0.6;
 }
 
 /* --- Mobile --- */
diff --git a/webui/webpack.config.js b/webui/webpack.config.js
index 78844d6..8fdac07 100644
--- a/webui/webpack.config.js
+++ b/webui/webpack.config.js
@@ -36,6 +36,7 @@ module.exports = {
     new HtmlWebpackPlugin({
       template: './src/index.html',
       filename: 'index.html',
+      favicon: path.resolve(__dirname, 'src/assets/favicon.svg'),
     }),
     new MiniCssExtractPlugin({ filename: 'index.css' }),
   ],