From b7d412b4720e9e08ce8ef02255ae2c1af837a6f6 Mon Sep 17 00:00:00 2001
From: sadfun <job@sadfun.org>
Date: Sun, 6 Sep 2026 11:26:58 +0200
Subject: [PATCH 1/5] Use the Wirebot website logo in the web app

---
 src/miniapp/app.tsx | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/miniapp/app.tsx b/src/miniapp/app.tsx
index 37beea5..aa0857f 100644
--- a/src/miniapp/app.tsx
+++ b/src/miniapp/app.tsx
@@ -1,5 +1,5 @@
 /** Shared browser and Telegram application shell. */
-import { CalendarClock, LogOut, SlidersHorizontal, Sparkles, Terminal } from "lucide-react";
+import { CalendarClock, LogOut, SlidersHorizontal, Sparkles } from "lucide-react";
 import { type ReactElement, useEffect, useState } from "react";
 import { requestSnapshot } from "./api.js";
 import { SchedulesManager } from "./schedules.js";
@@ -101,7 +101,7 @@ export function SettingsApp({
         aria-label="Main navigation"
         brand={
           <>
-            <Terminal aria-hidden="true" />
+            <WirebotLogo />
             <span>
               Wirebot<small>Your Codex workspace</small>
             </span>
@@ -168,7 +168,7 @@ export function SignIn({ error }: { readonly error: string | undefined }): React
           </div>
         }
       >
-        <Terminal className="size-10 text-primary" aria-hidden="true" />
+        <WirebotLogo className="size-10 text-primary" />
       </Placeholder>
     </main>
   );
@@ -200,3 +200,18 @@ function SettingsLoading({
     </div>
   );
 }
+
+/** Robot mark from https://wirebot.ai/. */
+function WirebotLogo({ className }: { readonly className?: string }): ReactElement {
+  return (
+    <svg
+      className={className}
+      viewBox="0 0 248 319"
+      fill="currentColor"
+      aria-hidden="true"
+      focusable="false"
+    >
+      <path d="M105 19 A19 19 0 1 1 143 19 A19 19 0 1 1 105 19 Z M117 31 H131 V79 H117 Z M0 195 A124 124 0 1 1 248 195 A124 124 0 1 1 0 195 Z M97 174 A15 15 0 0 0 67 174 V224 A15 15 0 0 0 97 224 Z M181 174 A15 15 0 0 0 151 174 V224 A15 15 0 0 0 181 224 Z" />
+    </svg>
+  );
+}

From 038e3770ded87a6028495a41b3b6532304eb15d4 Mon Sep 17 00:00:00 2001
From: sadfun <job@sadfun.org>
Date: Sun, 6 Sep 2026 11:30:11 +0200
Subject: [PATCH 2/5] Preserve the website wordmark in the full Wirebot logo

---
 src/miniapp/app.tsx    | 21 ++++++++++++---------
 src/miniapp/styles.css | 11 +++++------
 2 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/src/miniapp/app.tsx b/src/miniapp/app.tsx
index aa0857f..1eca313 100644
--- a/src/miniapp/app.tsx
+++ b/src/miniapp/app.tsx
@@ -102,9 +102,7 @@ export function SettingsApp({
         brand={
           <>
             <WirebotLogo />
-            <span>
-              Wirebot<small>Your Codex workspace</small>
-            </span>
+            <small>Your Codex workspace</small>
           </>
         }
       >
@@ -168,7 +166,7 @@ export function SignIn({ error }: { readonly error: string | undefined }): React
           </div>
         }
       >
-        <WirebotLogo className="size-10 text-primary" />
+        <WirebotLogo className="h-12 w-52 max-w-full text-primary" />
       </Placeholder>
     </main>
   );
@@ -201,17 +199,22 @@ function SettingsLoading({
   );
 }
 
-/** Robot mark from https://wirebot.ai/. */
+/** Full logo from https://wirebot.ai/. */
 function WirebotLogo({ className }: { readonly className?: string }): ReactElement {
   return (
     <svg
       className={className}
-      viewBox="0 0 248 319"
-      fill="currentColor"
-      aria-hidden="true"
+      viewBox="0 0 428.7 100.7"
+      role="img"
+      aria-label="Wirebot"
       focusable="false"
     >
-      <path d="M105 19 A19 19 0 1 1 143 19 A19 19 0 1 1 105 19 Z M117 31 H131 V79 H117 Z M0 195 A124 124 0 1 1 248 195 A124 124 0 1 1 0 195 Z M97 174 A15 15 0 0 0 67 174 V224 A15 15 0 0 0 97 224 Z M181 174 A15 15 0 0 0 151 174 V224 A15 15 0 0 0 181 224 Z" />
+      <g fill="currentColor" transform="translate(0 -174)">
+        <g transform="translate(0 173.97) scale(0.3158)">
+          <path d="M105 19 A19 19 0 1 1 143 19 A19 19 0 1 1 105 19 Z M117 31 H131 V79 H117 Z M0 195 A124 124 0 1 1 248 195 A124 124 0 1 1 0 195 Z M97 174 A15 15 0 0 0 67 174 V224 A15 15 0 0 0 97 224 Z M181 174 A15 15 0 0 0 151 174 V224 A15 15 0 0 0 181 224 Z" />
+        </g>
+        <path d="M122.2 260.0 107.3 211.1H120.2L130.6 248.4H126.7L138.7 211.1H149.3L161.3 248.4H157.5L167.9 211.1H180.4L165.4 260.0H153.8L142.2 225.0H145.8L134.1 260.0Z M198.7 260.0H185.6V211.1H198.7ZM184.2 195.9Q184.2 192.3 186.4 190.1Q188.5 187.8 192.1 187.8Q195.7 187.8 197.9 190.1Q200.0 192.3 200.0 195.9Q200.0 199.3 197.9 201.5Q195.7 203.7 192.1 203.7Q188.5 203.7 186.4 201.5Q184.2 199.3 184.2 195.9Z M218.4 211.1 221.7 224.6V260.0H208.6V211.1ZM219.0 231.3 216.6 230.2V220.2L217.5 219.1Q218.6 217.3 220.9 215.2Q223.1 213.1 226.1 211.6Q229.0 210.0 232.2 210.0Q233.8 210.0 235.1 210.2Q236.4 210.4 237.1 210.9V222.8H233.9Q227.4 222.8 223.9 224.9Q220.4 226.9 219.0 231.3Z M262.0 261.0Q254.7 261.0 249.2 257.9Q243.7 254.7 240.7 249.0Q237.7 243.3 237.7 235.6Q237.7 228.0 240.7 222.2Q243.7 216.5 249.2 213.2Q254.7 210.0 262.0 210.0Q269.4 210.0 274.9 213.3Q280.3 216.6 283.3 222.3Q286.3 228.1 286.3 235.5Q286.3 236.6 286.3 237.6Q286.2 238.7 286.0 239.4H248.4V229.6H276.1L274.1 234.3Q274.1 228.1 271.2 224.2Q268.2 220.3 262.0 220.3Q256.6 220.3 253.3 223.7Q250.0 227.0 250.0 232.6V237.9Q250.0 243.8 253.4 247.2Q256.7 250.5 262.5 250.5Q267.6 250.5 270.5 248.4Q273.4 246.3 275.5 243.2L284.6 248.4Q281.3 254.5 275.7 257.8Q270.0 261.0 262.0 261.0Z M319.1 261.2Q312.7 261.2 307.9 258.0Q303.0 254.8 300.3 249.1Q297.6 243.3 297.6 235.5Q297.6 227.4 300.3 221.7Q302.9 216.0 307.7 213.0Q312.5 210.0 319.0 210.0Q325.7 210.0 330.8 213.2Q335.9 216.4 338.8 222.2Q341.6 227.9 341.6 235.5Q341.6 243.0 338.8 248.8Q335.9 254.6 330.9 257.9Q325.8 261.2 319.1 261.2ZM292.8 260.0V191.9H305.9V223.9H304.9V248.4H305.9L302.6 260.0ZM316.8 249.1Q321.8 249.1 325.1 245.3Q328.3 241.5 328.3 235.5Q328.3 229.5 325.1 225.8Q321.8 222.0 316.8 222.0Q311.8 222.0 308.5 225.8Q305.2 229.5 305.2 235.6Q305.2 241.6 308.5 245.3Q311.8 249.1 316.8 249.1Z M369.8 261.2Q362.2 261.2 356.5 257.9Q350.7 254.7 347.5 248.9Q344.3 243.2 344.3 235.6Q344.3 228.0 347.5 222.2Q350.7 216.5 356.5 213.2Q362.2 210.0 369.8 210.0Q377.4 210.0 383.2 213.2Q388.9 216.5 392.1 222.2Q395.3 228.0 395.3 235.6Q395.3 243.2 392.1 248.9Q388.9 254.7 383.2 257.9Q377.4 261.2 369.8 261.2ZM369.8 248.5Q375.2 248.5 378.6 244.9Q382.0 241.3 382.0 235.6Q382.0 229.8 378.6 226.2Q375.2 222.6 369.8 222.6Q364.4 222.6 361.1 226.1Q357.7 229.7 357.7 235.5Q357.7 241.3 361.1 244.9Q364.4 248.5 369.8 248.5Z M421.1 260.9Q413.6 260.9 409.3 256.9Q404.9 253.0 404.9 244.3V211.7L404.7 211.1L407.4 199.6H418.0V242.2Q418.0 245.4 419.6 246.9Q421.1 248.3 423.5 248.3Q425.1 248.3 426.4 248.1Q427.7 247.8 428.7 247.5V259.7Q427.1 260.3 425.3 260.6Q423.5 260.9 421.1 260.9ZM397.3 223.2V211.1H428.7V223.2Z" />
+      </g>
     </svg>
   );
 }
diff --git a/src/miniapp/styles.css b/src/miniapp/styles.css
index 84937c7..8a7a9fe 100644
--- a/src/miniapp/styles.css
+++ b/src/miniapp/styles.css
@@ -1603,15 +1603,14 @@ button {
   }
   .browserApp .navBrand {
     display: flex;
-    align-items: center;
-    gap: 12px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 6px;
     padding: 0 12px 36px;
-    font-size: 1.2rem;
-    font-weight: 700;
   }
   .browserApp .navBrand svg {
-    width: 32px;
-    height: 32px;
+    width: 160px;
+    height: auto;
     color: var(--primary);
   }
   .browserApp .navBrand small {

From 2002fa0823758b754cae8bc4031e010f81480827 Mon Sep 17 00:00:00 2001
From: sadfun <job@sadfun.org>
Date: Sun, 6 Sep 2026 11:51:09 +0200
Subject: [PATCH 3/5] Keep the Wirebot logo monochrome in both themes

---
 src/miniapp/app.tsx    | 2 +-
 src/miniapp/styles.css | 1 -
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/miniapp/app.tsx b/src/miniapp/app.tsx
index 1eca313..c3dd17f 100644
--- a/src/miniapp/app.tsx
+++ b/src/miniapp/app.tsx
@@ -166,7 +166,7 @@ export function SignIn({ error }: { readonly error: string | undefined }): React
           </div>
         }
       >
-        <WirebotLogo className="h-12 w-52 max-w-full text-primary" />
+        <WirebotLogo className="h-12 w-52 max-w-full" />
       </Placeholder>
     </main>
   );
diff --git a/src/miniapp/styles.css b/src/miniapp/styles.css
index 8a7a9fe..72e78f7 100644
--- a/src/miniapp/styles.css
+++ b/src/miniapp/styles.css
@@ -1611,7 +1611,6 @@ button {
   .browserApp .navBrand svg {
     width: 160px;
     height: auto;
-    color: var(--primary);
   }
   .browserApp .navBrand small {
     display: block;

From c7e5206ea669f2fd90c68acf5308ff91b721d131 Mon Sep 17 00:00:00 2001
From: sadfun <job@sadfun.org>
Date: Sun, 6 Sep 2026 12:03:31 +0200
Subject: [PATCH 4/5] Match the browser theme and favicon to wirebot.ai

---
 scripts/build-assets.ts      |   4 +-
 src/miniapp/favicon.ico      | Bin 0 -> 15086 bytes
 src/miniapp/index.html       |   5 ++-
 src/miniapp/server.ts        |   9 +++-
 src/miniapp/styles.css       |  85 ++++++++++++++++++++++++-----------
 test/fixtures/web-app.ts     |   2 +-
 test/miniapp-browser.test.ts |   2 +
 7 files changed, 75 insertions(+), 32 deletions(-)
 create mode 100644 src/miniapp/favicon.ico

diff --git a/scripts/build-assets.ts b/scripts/build-assets.ts
index d56de65..442f5ad 100644
--- a/scripts/build-assets.ts
+++ b/scripts/build-assets.ts
@@ -11,7 +11,9 @@ const sourceDirectory = `${projectRoot}src/miniapp`;
 const outputDirectory = `${projectRoot}dist/miniapp/public`;
 
 await mkdir(outputDirectory, { recursive: true });
-await copyFile(`${sourceDirectory}/index.html`, `${outputDirectory}/index.html`);
+for (const name of ["index.html", "favicon.ico"]) {
+  await copyFile(`${sourceDirectory}/${name}`, `${outputDirectory}/${name}`);
+}
 
 const result = await Bun.build({
   entrypoints: [`${sourceDirectory}/client.tsx`],
diff --git a/src/miniapp/favicon.ico b/src/miniapp/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..a3fc79d8dd8f025ac61736073eb8b91ca11f0bb2
GIT binary patch
literal 15086
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
S;!hX;oTavGfg&1{cK;u0^}eS7

literal 0
HcmV?d00001

diff --git a/src/miniapp/index.html b/src/miniapp/index.html
index d2dab26..fa81fbc 100644
--- a/src/miniapp/index.html
+++ b/src/miniapp/index.html
@@ -7,9 +7,10 @@
       content="width=device-width, initial-scale=1, viewport-fit=cover"
     />
     <meta name="color-scheme" content="light dark" />
-    <meta name="theme-color" content="#f5f7fb" media="(prefers-color-scheme: light)" />
-    <meta name="theme-color" content="#10141c" media="(prefers-color-scheme: dark)" />
+    <meta name="theme-color" content="#f5f2ec" media="(prefers-color-scheme: light)" />
+    <meta name="theme-color" content="#171717" media="(prefers-color-scheme: dark)" />
     <title>Wirebot</title>
+    <link rel="icon" href="/favicon.ico" sizes="48x48" />
     <link rel="stylesheet" href="/miniapp/app.css" />
   </head>
   <body>
diff --git a/src/miniapp/server.ts b/src/miniapp/server.ts
index 4629c4b..c6ef7c4 100644
--- a/src/miniapp/server.ts
+++ b/src/miniapp/server.ts
@@ -29,13 +29,17 @@ const MAX_REQUEST_BYTES = 32 * 1_024;
 const MAX_AUTH_AGE_SECONDS = 60 * 60;
 const JSON_CONTENT_TYPE = "application/json; charset=utf-8";
 
-const staticAssets = new Map<string, readonly ["index.html" | "app.js" | "app.css", string]>([
+const staticAssets = new Map<
+  string,
+  readonly ["index.html" | "app.js" | "app.css" | "favicon.ico", string]
+>([
   ...["/", "/app", "/app/", "/app/settings", "/app/skills", "/app/schedules"].map(
     (path): [string, readonly ["index.html", string]] => [
       path,
       ["index.html", "text/html; charset=utf-8"],
     ],
   ),
+  ["/favicon.ico", ["favicon.ico", "image/x-icon"]],
   ["/miniapp", ["index.html", "text/html; charset=utf-8"]],
   ["/miniapp/", ["index.html", "text/html; charset=utf-8"]],
   ["/miniapp/app.js", ["app.js", "text/javascript; charset=utf-8"]],
@@ -135,6 +139,7 @@ export class MiniAppServer {
       access(join(this.#assetDirectory, "index.html")),
       access(join(this.#assetDirectory, "app.js")),
       access(join(this.#assetDirectory, "app.css")),
+      access(join(this.#assetDirectory, "favicon.ico")),
     ]);
     await new Promise<void>((resolve, reject) => {
       const onError = (error: Error): void => {
@@ -503,7 +508,7 @@ export class MiniAppServer {
   private async sendAsset(
     response: ServerResponse,
     method: string,
-    name: "index.html" | "app.js" | "app.css",
+    name: "index.html" | "app.js" | "app.css" | "favicon.ico",
     contentType: string,
   ): Promise<void> {
     // Build outputs never change while the process runs; serve them from memory.
diff --git a/src/miniapp/styles.css b/src/miniapp/styles.css
index 72e78f7..f816394 100644
--- a/src/miniapp/styles.css
+++ b/src/miniapp/styles.css
@@ -26,26 +26,26 @@
 :root {
   color-scheme: light;
   --radius: 0.875rem;
-  --background: #f5f7fb;
-  --foreground: #172337;
+  --background: #f5f2ec;
+  --foreground: #171717;
   --card: #ffffff;
   --card-foreground: var(--foreground);
-  --primary: #285bd4;
+  --primary: #126bdd;
   --primary-foreground: #ffffff;
-  --secondary: #eaf0fa;
-  --secondary-foreground: #253b60;
-  --muted: #edf1f7;
-  --muted-foreground: #5d6c81;
-  --accent: #e9effb;
+  --secondary: #e8e5df;
+  --secondary-foreground: #242424;
+  --muted: #eae7e1;
+  --muted-foreground: #66635f;
+  --accent: #e8e5df;
   --accent-foreground: var(--foreground);
   --destructive: #c32e3d;
   --destructive-foreground: #ffffff;
   --switch-thumb: #ffffff;
-  --border: #dce3ee;
-  --input: #c7d2e2;
+  --border: #d7d3cc;
+  --input: #b8b3aa;
   --ring: var(--primary);
-  --section-header: #5d6c81;
-  --tabbar-background: #ffffff;
+  --section-header: #66635f;
+  --tabbar-background: #efede7;
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
@@ -54,22 +54,22 @@
 @media (prefers-color-scheme: dark) {
   :root {
     color-scheme: dark;
-    --background: #10141c;
-    --foreground: #e5ebf5;
-    --card: #191f2b;
-    --primary: #90b4ff;
-    --primary-foreground: #122544;
-    --secondary: #263248;
-    --secondary-foreground: #d9e5ff;
-    --muted: #242d3c;
-    --muted-foreground: #a0aec3;
-    --accent: #293650;
+    --background: #171717;
+    --foreground: #f5f2ec;
+    --card: #202020;
+    --primary: #1e83ff;
+    --primary-foreground: #ffffff;
+    --secondary: #2e2e2e;
+    --secondary-foreground: #f5f2ec;
+    --muted: #2a2a2a;
+    --muted-foreground: #b4b2ad;
+    --accent: #303030;
     --destructive: #ff8793;
     --destructive-foreground: #35151a;
-    --border: #303c50;
-    --input: #42516a;
-    --section-header: #a0aec3;
-    --tabbar-background: #191f2b;
+    --border: #4e4e4e;
+    --input: #5b5b5b;
+    --section-header: #b4b2ad;
+    --tabbar-background: #171717;
   }
 }
 
@@ -1542,6 +1542,39 @@ button {
   min-height: 100dvh;
 }
 
+/* Website palette and shapes, with system typography and accessible button contrast. */
+.browserApp .ui-button,
+.browserApp .navItems a {
+  border-radius: 999px;
+}
+.browserApp .ui-button.bg-primary {
+  background: color-mix(in srgb, var(--primary) 85%, black);
+}
+.browserApp .navItems a:is(:hover, [aria-current="page"]) {
+  background: var(--secondary);
+  color: var(--foreground);
+}
+.browserApp .ui-section-body,
+.browserApp .scheduleCard,
+.browserApp .resetDialog,
+.browserApp .loadingRoot > div {
+  border-radius: 9px;
+  box-shadow: none;
+}
+.browserApp .nativeControl {
+  border-radius: 9px;
+}
+.browserApp .pageHeader {
+  padding-bottom: 28px;
+}
+.browserApp .pageHeader h1 {
+  font-size: clamp(1.75rem, 4vw, 2.25rem);
+  letter-spacing: -0.035em;
+}
+.browserApp .sectionStack {
+  gap: 28px;
+}
+
 .browserHeader {
   display: flex;
   justify-content: space-between;
diff --git a/test/fixtures/web-app.ts b/test/fixtures/web-app.ts
index 628d22e..3bea336 100644
--- a/test/fixtures/web-app.ts
+++ b/test/fixtures/web-app.ts
@@ -64,7 +64,7 @@ export async function startTestApp(assetDirectory?: string, includeTelegram = fa
   const ownedDirectory = assetDirectory === undefined ? assets : undefined;
   if (ownedDirectory !== undefined) {
     await Promise.all(
-      ["index.html", "app.js", "app.css"].map((name) =>
+      ["index.html", "app.js", "app.css", "favicon.ico"].map((name) =>
         Bun.write(
           join(assets, name),
           name === "index.html" ? "<!doctype html><title>Wirebot</title>" : "",
diff --git a/test/miniapp-browser.test.ts b/test/miniapp-browser.test.ts
index a26bfab..93fdbea 100644
--- a/test/miniapp-browser.test.ts
+++ b/test/miniapp-browser.test.ts
@@ -35,10 +35,12 @@ describe("Browser HTTP app", () => {
       "/miniapp/",
       "/miniapp/app.js",
       "/miniapp/app.css",
+      "/favicon.ico",
     ]) {
       expect((await request(path)).status).toBe(200);
       expect((await request(path, { method: "HEAD" })).status).toBe(200);
     }
+    expect((await request("/favicon.ico")).headers.get("content-type")).toBe("image/x-icon");
     expect((await request("/app/unknown")).status).toBe(404);
     expect((await request("/app", { method: "POST" })).status).toBe(405);
     for (const path of [

From 8cbeab3713fa5616e36c8d7d0abf7008b3bb2ec7 Mon Sep 17 00:00:00 2001
From: sadfun <job@sadfun.org>
Date: Sun, 6 Sep 2026 12:04:50 +0200
Subject: [PATCH 5/5] Remove the sidebar logo tagline

---
 src/miniapp/app.tsx    | 10 +---------
 src/miniapp/styles.css | 12 +-----------
 2 files changed, 2 insertions(+), 20 deletions(-)

diff --git a/src/miniapp/app.tsx b/src/miniapp/app.tsx
index c3dd17f..0a489cc 100644
--- a/src/miniapp/app.tsx
+++ b/src/miniapp/app.tsx
@@ -97,15 +97,7 @@ export function SettingsApp({
           <SchedulesManager />
         )}
       </main>
-      <Tabbar
-        aria-label="Main navigation"
-        brand={
-          <>
-            <WirebotLogo />
-            <small>Your Codex workspace</small>
-          </>
-        }
-      >
+      <Tabbar aria-label="Main navigation" brand={<WirebotLogo />}>
         {tabs.map(({ id, label, icon: Icon }) => (
           <Tabbar.Item
             key={id}
diff --git a/src/miniapp/styles.css b/src/miniapp/styles.css
index f816394..006c2fb 100644
--- a/src/miniapp/styles.css
+++ b/src/miniapp/styles.css
@@ -1635,23 +1635,13 @@ button {
     border-right: 1px solid var(--border);
   }
   .browserApp .navBrand {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 6px;
+    display: block;
     padding: 0 12px 36px;
   }
   .browserApp .navBrand svg {
     width: 160px;
     height: auto;
   }
-  .browserApp .navBrand small {
-    display: block;
-    margin-top: 3px;
-    font-size: 0.7rem;
-    font-weight: 400;
-    color: var(--muted-foreground);
-  }
   .browserApp .navItems {
     display: flex;
     flex-direction: column;