From 3e342ec80e5d06f984601cbeb1246a280eac73f3 Mon Sep 17 00:00:00 2001
From: qer <wbxl2000@outlook.com>
Date: Tue, 23 Jun 2026 21:29:10 +0800
Subject: [PATCH] feat(web): show dev-mode indicator in sidebar

Tint the sidebar logo yellow and append the connected backend host:port to the title when the page is served by the Vite dev server, so local development tabs are easy to tell apart. Inert in production.
---
 .changeset/web-dev-mode-indicator.md     |  5 +++++
 apps/kimi-web/src/components/Sidebar.vue | 25 ++++++++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/web-dev-mode-indicator.md

diff --git a/.changeset/web-dev-mode-indicator.md b/.changeset/web-dev-mode-indicator.md
new file mode 100644
index 0000000000..ce863b7560
--- /dev/null
+++ b/.changeset/web-dev-mode-indicator.md
@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Add a development-mode indicator to the web sidebar for local development.
diff --git a/apps/kimi-web/src/components/Sidebar.vue b/apps/kimi-web/src/components/Sidebar.vue
index 354c4b7d77..ee6251e79a 100644
--- a/apps/kimi-web/src/components/Sidebar.vue
+++ b/apps/kimi-web/src/components/Sidebar.vue
@@ -5,12 +5,19 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
+import { serverEndpointLabel } from '../api/config';
 import type { Session, WorkspaceGroup as WorkspaceGroupType, WorkspaceView } from '../types';
 import SessionRow from './SessionRow.vue';
 import WorkspaceGroup from './WorkspaceGroup.vue';
 
 const { t } = useI18n();
 
+// Dev-only affordance: when the page is served by the Vite dev server, the
+// logo turns yellow and the backend host:port is appended to the title —
+// handy for telling several dev tabs apart. In production this is all inert.
+const isDev = import.meta.env.DEV;
+const endpoint = isDev ? serverEndpointLabel() : '';
+
 const props = withDefaults(
   defineProps<{
     activeWorkspace: WorkspaceView | null;
@@ -395,7 +402,7 @@ function blinkOnce(): void {
       <!-- Header: logo + settings (no hard border — flows into workspace list) -->
       <div class="ch">
         <div class="ch-brand">
-          <svg ref="logoRef" class="ch-logo" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Kimi Code" @click="blinkOnce">
+          <svg ref="logoRef" class="ch-logo" :class="{ 'is-dev': isDev }" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Kimi Code" @click="blinkOnce">
             <defs>
               <mask id="kimiEyes" maskUnits="userSpaceOnUse">
                 <rect x="0" y="0" width="32" height="22" fill="#fff" />
@@ -407,7 +414,7 @@ function blinkOnce(): void {
             </defs>
             <rect x="1" y="1" width="30" height="20" rx="6" fill="var(--logo)" mask="url(#kimiEyes)" />
           </svg>
-          <span class="ch-name">Kimi Code</span>
+          <span class="ch-name">Kimi Code<span v-if="isDev" class="ch-endpoint"> · {{ endpoint }}</span></span>
         </div>
         <button
           type="button"
@@ -645,6 +652,12 @@ function blinkOnce(): void {
 .ch-logo:hover {
   transform: scale(1.08);
 }
+/* Dev-only: tint the mark yellow so a `pnpm dev:web` tab is obvious at a
+   glance. `--logo` is read by the mark's `fill`; overriding it on the svg
+   recolors just this instance. */
+.ch-logo.is-dev {
+  --logo: #f5b301;
+}
 .ch-brand {
   display: flex;
   align-items: center;
@@ -662,6 +675,14 @@ function blinkOnce(): void {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+/* Dev-only: backend host:port appended to the title. Kept secondary so the
+   product name still leads. */
+.ch-endpoint {
+  color: var(--muted);
+  font-family: var(--mono);
+  font-weight: 400;
+  font-size: calc(var(--ui-font-size) - 1px);
+}
 
 /* In narrow sidebars the product name drops out so the logo keeps its fixed
    size and the action buttons remain reachable. */