diff --git a/.changeset/web-header-long-branch-display.md b/.changeset/web-header-long-branch-display.md
new file mode 100644
index 000000000..6015b0266
--- /dev/null
+++ b/.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.
diff --git a/apps/kimi-web/src/components/ChatHeader.vue b/apps/kimi-web/src/components/ChatHeader.vue
index d02a92e96..780eab63f 100644
--- a/apps/kimi-web/src/components/ChatHeader.vue
+++ b/apps/kimi-web/src/components/ChatHeader.vue
@@ -281,7 +281,13 @@ function startArchive(): void {
:title="t('header.gitTooltip')"
@click="emit('openChanges')"
>
- {{ branch || t('header.detached') }}
+
+ {{ branch || t('header.detached') }}
+
↑{{ ahead }}
↓{{ behind }}
@@ -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;
diff --git a/apps/kimi-web/test/chat-header.test.ts b/apps/kimi-web/test/chat-header.test.ts
index 2a0f2aa6b..65ec20d7d 100644
--- a/apps/kimi-web/test/chat-header.test.ts
+++ b/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');
+ });
});