fix(web): show longer branch names in chat header (#958)

.changeset/web-header-long-branch-display.md

@@ -0,0 +1,5 @@
+---
+"@moonshot-ai/kimi-code": patch
+---
+
+Show longer branch names in the web chat header and expose the full name on hover.

apps/kimi-web/src/components/ChatHeader.vue

@@ -281,7 +281,13 @@ function startArchive(): void {
       :title="t('header.gitTooltip')"
       @click="emit('openChanges')"
     >
-      <span class="ch-branch" :class="{ 'ch-detached': !branch }">{{ branch || t('header.detached') }}</span>
+      <span
+        class="ch-branch"
+        :class="{ 'ch-detached': !branch }"
+        :title="branch || t('header.detached')"
+      >
+        {{ branch || t('header.detached') }}
+      </span>
       <span v-if="ahead > 0 || behind > 0" class="ch-pill ch-sync-pill">
         <span v-if="ahead > 0" class="ch-ahead">↑{{ ahead }}</span>
         <span v-if="behind > 0" class="ch-behind">↓{{ behind }}</span>
@@ -361,11 +367,20 @@ function startArchive(): void {
   color: var(--muted);
   font-family: var(--mono);
   font-size: calc(var(--ui-font-size) - 2px);
+  flex: 0 1 auto;
+  max-width: none;
   min-width: 0;
   cursor: pointer;
 }
 .ch-git:hover .ch-branch { color: var(--ink); }
-.ch-branch { color: var(--dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; margin-right: 4px; }
+.ch-branch {
+  color: var(--dim);
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-right: 4px;
+}
 .ch-detached { color: var(--muted); font-style: italic; }
 .ch-pill {
   display: inline-flex;

apps/kimi-web/test/chat-header.test.ts

@@ -22,7 +22,9 @@ describe('ChatHeader', () => {
     const wrapper = mount(ChatHeader, {
       props: {
         isGitRepo: true,
-        gitInfo: { branch: 'main', ahead: 0, behind: 0 },
+        branch: 'main',
+        ahead: 0,
+        behind: 0,
         changesCount: 3,
         gitDiffStats: { totalAdditions: 10, totalDeletions: 2 },
       },
@@ -42,4 +44,33 @@ describe('ChatHeader', () => {
 
     expect(wrapper.find('.ch-git').exists()).toBe(false);
   });
+
+  it('renders the full branch name and exposes it via title', () => {
+    const branch = 'feat/web-session-lazy-loading/very-long-branch-name-for-header-display';
+
+    const wrapper = mount(ChatHeader, {
+      props: {
+        isGitRepo: true,
+        branch,
+      },
+      global: { plugins: [i18n] },
+    });
+
+    const branchEl = wrapper.find('.ch-branch');
+
+    expect(branchEl.text()).toBe(branch);
+    expect(branchEl.attributes('title')).toBe(branch);
+  });
+
+  it('renders the detached label with title when branch is empty', () => {
+    const wrapper = mount(ChatHeader, {
+      props: { isGitRepo: true },
+      global: { plugins: [i18n] },
+    });
+
+    const branchEl = wrapper.find('.ch-branch');
+
+    expect(branchEl.text()).toBe('detached');
+    expect(branchEl.attributes('title')).toBe('detached');
+  });
 });