feat(forge): show a collapsed large file as the strip of unchanged lines

A large file in the changes view started behind a notice and an outlined
button. It now starts as one strip drawn and opened like the collapsed
unchanged lines, which names its changed line count. Binary files and
files too large to show use the same strip without an action.

packages/experimental/client-ui-forge/src/client/ChangesTab.module.css

@@ -318,15 +318,6 @@
   white-space: nowrap;
 }
 
-.fileMessage {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin: 0;
-  padding: 12px 16px;
-  color: var(--dsw-alias-label-secondary);
-}
-
 /* Lines of one file: one column of grid rows, or two cells per row side by side. */
 .code {
   overflow-x: auto;
@@ -433,24 +424,31 @@
 }
 
 /* Collapsed unchanged lines; the row expands them. */
-.gap {
+/* Collapsed unchanged lines, a collapsed large file, and a file whose lines cannot be drawn share one strip;
+   only the first two open on a click. */
+.gap,
+.fileNote {
   display: flex;
   align-items: center;
   gap: 6px;
   box-sizing: border-box;
   width: 100%;
   min-height: 26px;
+  margin: 0;
   padding: 0 12px;
   border: 0;
   background: var(--forge-fill);
   color: var(--dsw-alias-label-tertiary);
-  cursor: pointer;
   font-family: var(--dsw-font-family);
   font-size: 12px;
   line-height: 18px;
   text-align: left;
 }
 
+.gap {
+  cursor: pointer;
+}
+
 .gap:hover:not(:disabled) {
   background: var(--dsw-alias-interactive-bg-hover);
   color: var(--dsw-alias-label-primary);

packages/experimental/client-ui-forge/src/client/DiffFile.tsx

@@ -7,7 +7,7 @@
 import { useMemo, useState, type ReactNode } from 'react'
 import clsx from 'clsx'
 import {
-  Button, FileTypeIcon, IconChevronDownOutlineRegular, IconChevronsUpDownOutlineRegular, IconEllipsisOutlineRegular,
+  FileTypeIcon, IconChevronDownOutlineRegular, IconChevronsUpDownOutlineRegular, IconEllipsisOutlineRegular,
   languageForPath, Menu, MenuItemButton, PathLabel, useCodeHighlighter, type CodeHighlighter, type HighlightSpan,
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { PropsLocale } from '@deepseek-ai/dsh-client-ui-slots'
@@ -177,15 +177,16 @@ function Lines({ file, text, open, onExpand, split, wrap, t }: Pick<DiffFileProp
 
 function Body(props: DiffFileProps): ReactNode {
   const { file, large, revealed, onReveal, t } = props
-  if (file.binary) return <p className={css.fileMessage}>{t('diff.binary')}</p>
-  if (file.oversized) return <p className={css.fileMessage}>{t('diff.fileTooLarge')}</p>
+  if (file.binary) return <p className={css.fileNote}>{t('diff.binary')}</p>
+  if (file.oversized) return <p className={css.fileNote}>{t('diff.fileTooLarge')}</p>
   if (file.hunks.length === 0) return null
   if (large && !revealed) {
+    // A large file starts as one collapsed strip, drawn and opened like the collapsed unchanged lines.
     return (
-      <div className={css.fileMessage}>
-        <span>{t('diff.oversized')}</span>
-        <Button size="sm" variant="outline" onClick={onReveal}>{t('diff.showAnyway')}</Button>
-      </div>
+      <button type="button" className={css.gap} onClick={onReveal}>
+        <IconChevronsUpDownOutlineRegular size={12} />
+        {t('diff.largeCollapsed', { count: (file.additions + file.deletions).toLocaleString('en-US') })}
+      </button>
     )
   }
   return <Lines {...props} />

packages/experimental/client-ui-forge/src/client/locales.ts

@@ -117,8 +117,7 @@ export const zh = {
   'diff.badgeUncommitted': '未提交',
   'diff.binary': '二进制文件，无法显示变更',
   'diff.binaryLabel': '二进制',
-  'diff.oversized': '文件较大，默认收起',
-  'diff.showAnyway': '仍然显示',
+  'diff.largeCollapsed': '文件较大，{count} 行变更已收起',
   'diff.fileTooLarge': '文件太大，无法显示变更',
   'diff.error': '无法读取变更',
   'diff.tooLarge': '变更太大，无法在这里显示',
@@ -313,8 +312,7 @@ export const en: Record<ForgePanelKey, string> = {
   'diff.badgeUncommitted': 'Uncommitted',
   'diff.binary': 'Binary file; its changes cannot be shown',
   'diff.binaryLabel': 'Binary',
-  'diff.oversized': 'Large file, collapsed by default',
-  'diff.showAnyway': 'Show anyway',
+  'diff.largeCollapsed': 'Large file: {count} changed lines collapsed',
   'diff.fileTooLarge': 'This file is too large to show',
   'diff.error': 'The changes could not be read',
   'diff.tooLarge': 'These changes are too large to show here',

packages/experimental/client-ui-forge/tests/changes-tab.client.spec.tsx

@@ -437,13 +437,12 @@ describe('ChangesTab layout', () => {
     expect(m.section('src/app.ts').querySelector(`.${css.code}`)).not.toBeNull()
 
     const first = m.section('data/huge-1.txt')
-    expect(within(first).getByText(en['diff.oversized'])).toBeTruthy()
-    fireEvent.click(within(first).getByRole('button', { name: en['diff.showAnyway'] }))
+    fireEvent.click(within(first).getByRole('button', { name: 'Large file: 1,001 changed lines collapsed' }))
     // A file with additions only keeps one column in the side-by-side layout.
     expect(first.querySelectorAll('[data-diff-line="add"]')).toHaveLength(1001)
     expect(first.querySelector('[data-diff-pair]')).toBeNull()
     fireEvent.click(within(m.section('data/huge-6.txt')).getByRole('button', { name: 'Expand huge-6.txt' }))
-    expect(within(m.section('data/huge-6.txt')).getByText(en['diff.oversized'])).toBeTruthy()
+    expect(within(m.section('data/huge-6.txt')).getByRole('button', { name: 'Large file: 1,001 changed lines collapsed' })).toBeTruthy()
   })
 
   it('collapses every file from the toolbar while any is expanded, and expands every file once all are collapsed', async () => {