From b2db7a413c3e379a129ce354a2f90b00c058a2f6 Mon Sep 17 00:00:00 2001
From: Aarav Sharma <iamcoder18@gmail.com>
Date: Mon, 22 Jun 2026 19:10:38 -0600
Subject: [PATCH] fix(console): show real Kilo logo in navbar

The Kilo Console navbar rendered a hardcoded capital "K" letter
inside a 1rem yellow badge instead of the actual Kilo logo. The base
.header-mark style in kilo-web-ui was designed for a single-letter
mark, which is why no image reference existed in the first place.

Swap the letter for the canonical Kilo logo (copied from the VS Code
extension's assets) and drop the redundant "Kilo" wordmark next to
it since the logo already carries the brand name. The new .header-mark-logo
override strips the badge chrome (background, color, font props) so the
SVG renders cleanly, and uses import.meta.env.BASE_URL so the asset
URL resolves correctly whether the console is served by Vite (base /)
or by the CLI's static server under /console/.

Also replace the brand link's plain <a> with the router's <A> component
so the home href is automatically prefixed with the configured router
base, keeping navigation aligned with the asset URL under /console/.
---
 .changeset/console-navbar-kilo-logo.md                 |  5 +++++
 packages/kilo-console/public/kilo-logo.svg             |  4 ++++
 .../src/components/app-header/AppHeader.tsx            | 10 ++++------
 packages/kilo-console/src/styles/base.css              | 10 ++++++++++
 4 files changed, 23 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/console-navbar-kilo-logo.md
 create mode 100644 packages/kilo-console/public/kilo-logo.svg

diff --git a/.changeset/console-navbar-kilo-logo.md b/.changeset/console-navbar-kilo-logo.md
new file mode 100644
index 00000000000..04f108b4abd
--- /dev/null
+++ b/.changeset/console-navbar-kilo-logo.md
@@ -0,0 +1,5 @@
+---
+"@kilocode/kilo-console": patch
+---
+
+Replace the hardcoded "K" letter in the Kilo Console navbar with the real Kilo logo, and drop the redundant "Kilo" wordmark since the logo already carries the name.
diff --git a/packages/kilo-console/public/kilo-logo.svg b/packages/kilo-console/public/kilo-logo.svg
new file mode 100644
index 00000000000..53469c85fee
--- /dev/null
+++ b/packages/kilo-console/public/kilo-logo.svg
@@ -0,0 +1,4 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M512 0H0V512H512V0Z" fill="black"/>
+<path d="M322 377H377V421H307.857L278 391.143V322H322V377ZM421 307.857L391.143 278H322V322L377 322V377H421V307.857ZM234 278H190V322H234V278ZM91 391.143L120.857 421H234V377H135V278H91V391.143ZM371.172 189.999V120.856L341.315 90.9995H278V135H327.172V189.999H278V233.999H421V189.999H371.172ZM135 91H91V233.999H135V184.5H190V233.999H234V184.5L190 140.5H135V91ZM234 91H190V140.5H234V91Z" fill="#FAF74F"/>
+</svg>
diff --git a/packages/kilo-console/src/components/app-header/AppHeader.tsx b/packages/kilo-console/src/components/app-header/AppHeader.tsx
index 7721ddc8447..ceac360228e 100644
--- a/packages/kilo-console/src/components/app-header/AppHeader.tsx
+++ b/packages/kilo-console/src/components/app-header/AppHeader.tsx
@@ -1,18 +1,16 @@
 import { IconButton } from "@kilocode/kilo-web-ui/icon-button"
+import { A } from "@solidjs/router"
 import { OmniSearch } from "./OmniSearch"
 
 export function AppHeader() {
   return (
     <header class="app-header">
-      <a class="header-brand" href="/projects" aria-label="Kilo Console home">
-        <span class="header-mark" aria-hidden="true">
-          K
-        </span>
+      <A class="header-brand" href="/projects" aria-label="Kilo Console home">
+        <img class="header-mark header-mark-logo" src={`${import.meta.env.BASE_URL}kilo-logo.svg`} alt="" width="28" height="28" />
         <span class="header-title">
-          <strong>Kilo</strong>
           <span>Console</span>
         </span>
-      </a>
+      </A>
 
       <OmniSearch />
 
diff --git a/packages/kilo-console/src/styles/base.css b/packages/kilo-console/src/styles/base.css
index c0e70b77935..a9869437d69 100644
--- a/packages/kilo-console/src/styles/base.css
+++ b/packages/kilo-console/src/styles/base.css
@@ -4,6 +4,16 @@
   color: var(--text-base);
 }
 
+.kilo-console .header-mark-logo {
+  width: 1.75rem;
+  height: 1.75rem;
+  background: transparent;
+  color: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+}
+
 * {
   box-sizing: border-box;
 }