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'); + }); });