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 ? (
<>
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 (
+
+ );
+}
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 @@
+
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' }),
],