diff --git a/web/src/utils/format.test.ts b/web/src/utils/format.test.ts
new file mode 100644
index 00000000..5187b267
--- /dev/null
+++ b/web/src/utils/format.test.ts
@@ -0,0 +1,32 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { relativeTime } from './format'
+
+describe('relativeTime', () => {
+ beforeEach(() => {
+ vi.useFakeTimers()
+ vi.setSystemTime(new Date('2026-05-09T12:00:00Z'))
+ })
+
+ afterEach(() => {
+ vi.useRealTimers()
+ })
+
+ it('returns empty string for empty input', () => {
+ expect(relativeTime('')).toBe('')
+ })
+
+ it('returns the original value for invalid timestamps', () => {
+ expect(relativeTime('not-a-time')).toBe('not-a-time')
+ })
+
+ it('returns 刚刚 for times within one minute', () => {
+ expect(relativeTime('2026-05-09T11:59:30Z')).toBe('刚刚')
+ })
+
+ it('returns minute, hour, day, and month suffixes for older timestamps', () => {
+ expect(relativeTime('2026-05-09T11:55:00Z')).toBe('5m')
+ expect(relativeTime('2026-05-09T09:00:00Z')).toBe('3h')
+ expect(relativeTime('2026-05-06T12:00:00Z')).toBe('3d')
+ expect(relativeTime('2026-03-05T12:00:00Z')).toBe('2mo')
+ })
+})
diff --git a/web/src/utils/format.ts b/web/src/utils/format.ts
index 0996efb2..011170af 100644
--- a/web/src/utils/format.ts
+++ b/web/src/utils/format.ts
@@ -10,7 +10,7 @@ export function formatDate(date: Date | string): string {
return d.toLocaleDateString('zh-CN', { month: 'short', day: 'numeric' })
}
-/** 格式化 Token 数量（带 K/M 后缀） */
+/** 格式化 Token 数量，带 K/M 后缀 */
export function formatTokenCount(n: number): string {
if (n >= 1_000_000) return `${(n / 1_000_000).toFixed(1)}M`
if (n >= 1_000) return `${(n / 1_000).toFixed(1)}K`
@@ -19,25 +19,31 @@ export function formatTokenCount(n: number): string {
/** 截断文本 */
export function truncate(text: string, maxLen: number): string {
- if (text.length <= maxLen) return text
- return text.slice(0, maxLen - 3) + '...'
+ if (text.length <= maxLen) return text
+ return text.slice(0, maxLen - 3) + '...'
}
-/** 绠€鐭浉瀵规椂闂?*/
+/** 返回简短的相对时间文案 */
export function relativeTime(time: string): string {
- if (!time) return ''
- const d = new Date(time)
- if (isNaN(d.getTime())) return time
- const now = Date.now()
- const diff = now - d.getTime()
- const sec = Math.floor(diff / 1000)
- if (sec < 60) return '鍒氬垰'
- const min = Math.floor(sec / 60)
- if (min < 60) return `${min}m`
- const hr = Math.floor(min / 60)
- if (hr < 24) return `${hr}h`
- const day = Math.floor(hr / 24)
- if (day < 30) return `${day}d`
- const mon = Math.floor(day / 30)
- return `${mon}mo`
+ if (!time) return ''
+
+ const d = new Date(time)
+ if (isNaN(d.getTime())) return time
+
+ const now = Date.now()
+ const diff = now - d.getTime()
+ const sec = Math.floor(diff / 1000)
+ if (sec < 60) return '刚刚'
+
+ const min = Math.floor(sec / 60)
+ if (min < 60) return `${min}m`
+
+ const hr = Math.floor(min / 60)
+ if (hr < 24) return `${hr}h`
+
+ const day = Math.floor(hr / 24)
+ if (day < 30) return `${day}d`
+
+ const mon = Math.floor(day / 30)
+ return `${mon}mo`
}
From df6fb1e5ba09b4ebedbe752764ad79a5f47301a5 Mon Sep 17 00:00:00 2001
From: Yumiue <229866007@qq.com>
Date: Sat, 9 May 2026 10:32:51 +0800
Subject: [PATCH 4/6] =?UTF-8?q?refactor(web):=E7=BE=8E=E5=8C=96=E7=95=8C?=
=?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../panels/FileChangePanel.test.tsx | 124 +++++++-
web/src/components/panels/FileChangePanel.tsx | 282 +++++++++++++-----
2 files changed, 325 insertions(+), 81 deletions(-)
diff --git a/web/src/components/panels/FileChangePanel.test.tsx b/web/src/components/panels/FileChangePanel.test.tsx
index d0d95bbb..097e0957 100644
--- a/web/src/components/panels/FileChangePanel.test.tsx
+++ b/web/src/components/panels/FileChangePanel.test.tsx
@@ -313,11 +313,13 @@ describe('FileChangePanel', () => {
expect(screen.getByTestId('change-card-fc-4')).toHaveStyle({ flexShrink: '0' })
})
- it('keeps both fixed tabs visible', () => {
+ it('keeps both fixed tabs visible in the primary switcher and hides secondary chips by default', () => {
render(
)
- expect(screen.getByTestId(`preview-tab-${CHANGES_PREVIEW_TAB_ID}`)).toBeTruthy()
- expect(screen.getByTestId(`preview-tab-${GIT_DIFF_PREVIEW_TAB_ID}`)).toBeTruthy()
+ const primaryTabs = screen.getByTestId('preview-primary-tabs')
+ expect(primaryTabs).toContainElement(screen.getByTestId(`preview-tab-${CHANGES_PREVIEW_TAB_ID}`))
+ expect(primaryTabs).toContainElement(screen.getByTestId(`preview-tab-${GIT_DIFF_PREVIEW_TAB_ID}`))
+ expect(screen.queryByTestId('preview-secondary-tabs')).toBeNull()
})
it('opens a git diff file tab from the fixed git diff view', async () => {
@@ -342,6 +344,122 @@ describe('FileChangePanel', () => {
expect(preview.textContent).toContain('before::after')
})
+ it('renders file preview tabs in the secondary chip row instead of mixing them into the primary switcher', () => {
+ useUIStore.setState({
+ previewTabs: [
+ {
+ id: CHANGES_PREVIEW_TAB_ID,
+ kind: 'changes',
+ title: '鏂囦欢鍙樻洿',
+ closable: false,
+ },
+ {
+ id: GIT_DIFF_PREVIEW_TAB_ID,
+ kind: 'git-diff',
+ title: 'Git Diff',
+ closable: false,
+ },
+ {
+ id: 'file:cmd/neocode/main.go',
+ kind: 'file',
+ title: 'main.go',
+ closable: true,
+ path: 'cmd/neocode/main.go',
+ content: 'package main',
+ loading: false,
+ loaded: true,
+ error: '',
+ truncated: false,
+ is_binary: false,
+ },
+ ],
+ activePreviewTabId: 'file:cmd/neocode/main.go',
+ } as never)
+
+ render(
)
+
+ const primaryTabs = screen.getByTestId('preview-primary-tabs')
+ const secondaryTabs = screen.getByTestId('preview-secondary-tabs')
+ expect(primaryTabs).toContainElement(screen.getByTestId(`preview-tab-${CHANGES_PREVIEW_TAB_ID}`))
+ expect(primaryTabs).toContainElement(screen.getByTestId(`preview-tab-${GIT_DIFF_PREVIEW_TAB_ID}`))
+ expect(primaryTabs).not.toContainElement(screen.getByTestId('preview-tab-file:cmd/neocode/main.go'))
+ expect(secondaryTabs).toContainElement(screen.getByTestId('preview-tab-file:cmd/neocode/main.go'))
+ })
+
+ it('marks the fixed git diff switcher as context-active while a git diff file chip is selected', async () => {
+ render(
)
+
+ fireEvent.click(screen.getByTestId(`preview-tab-${GIT_DIFF_PREVIEW_TAB_ID}`))
+ fireEvent.click(await screen.findByTestId('git-diff-entry-src/main.go'))
+
+ await waitFor(() => {
+ expect(mockGatewayAPI.readGitDiffFile).toHaveBeenCalledWith({ path: 'src/main.go' })
+ })
+
+ expect(screen.getByTestId(`preview-tab-${GIT_DIFF_PREVIEW_TAB_ID}`)).toHaveAttribute('data-context-active', 'true')
+ expect(screen.getByTestId('preview-tab-git-diff-file:src/main.go')).toHaveAttribute('aria-selected', 'true')
+ })
+
+ it('falls back to the fixed git diff tab after closing the active git diff file chip', async () => {
+ render(
)
+
+ fireEvent.click(screen.getByTestId(`preview-tab-${GIT_DIFF_PREVIEW_TAB_ID}`))
+ fireEvent.click(await screen.findByTestId('git-diff-entry-src/main.go'))
+
+ await waitFor(() => {
+ expect(screen.getByTestId('preview-tab-git-diff-file:src/main.go')).toBeTruthy()
+ })
+
+ fireEvent.click(screen.getByTestId('preview-tab-close-git-diff-file:src/main.go'))
+
+ expect(useUIStore.getState().activePreviewTabId).toBe(GIT_DIFF_PREVIEW_TAB_ID)
+ expect(screen.queryByTestId('preview-tab-git-diff-file:src/main.go')).toBeNull()
+ })
+
+ it('keeps keyboard roving focus across both fixed tabs and file chips', () => {
+ useUIStore.setState({
+ previewTabs: [
+ {
+ id: CHANGES_PREVIEW_TAB_ID,
+ kind: 'changes',
+ title: '鏂囦欢鍙樻洿',
+ closable: false,
+ },
+ {
+ id: GIT_DIFF_PREVIEW_TAB_ID,
+ kind: 'git-diff',
+ title: 'Git Diff',
+ closable: false,
+ },
+ {
+ id: 'file:cmd/neocode/main.go',
+ kind: 'file',
+ title: 'main.go',
+ closable: true,
+ path: 'cmd/neocode/main.go',
+ content: 'package main',
+ loading: false,
+ loaded: true,
+ error: '',
+ truncated: false,
+ is_binary: false,
+ },
+ ],
+ activePreviewTabId: CHANGES_PREVIEW_TAB_ID,
+ } as never)
+
+ render(
)
+
+ const changesTab = screen.getByTestId(`preview-tab-${CHANGES_PREVIEW_TAB_ID}`)
+ changesTab.focus()
+ fireEvent.keyDown(changesTab, { key: 'ArrowRight' })
+ expect(useUIStore.getState().activePreviewTabId).toBe(GIT_DIFF_PREVIEW_TAB_ID)
+
+ const gitDiffTab = screen.getByTestId(`preview-tab-${GIT_DIFF_PREVIEW_TAB_ID}`)
+ fireEvent.keyDown(gitDiffTab, { key: 'ArrowRight' })
+ expect(useUIStore.getState().activePreviewTabId).toBe('file:cmd/neocode/main.go')
+ })
+
it('opens expanded nested untracked files from the git diff list', async () => {
mockGatewayAPI.listGitDiffFiles.mockResolvedValue({
payload: {
diff --git a/web/src/components/panels/FileChangePanel.tsx b/web/src/components/panels/FileChangePanel.tsx
index 1148b462..b8947a48 100644
--- a/web/src/components/panels/FileChangePanel.tsx
+++ b/web/src/components/panels/FileChangePanel.tsx
@@ -110,6 +110,13 @@ function getPreviewBadge(tab: PreviewTab, fileChanges: FileChange[]) {
return null
}
+function getContextPreviewTabID(activeTab: PreviewTab | undefined) {
+ if (!activeTab) return CHANGES_PREVIEW_TAB_ID
+ if (activeTab.kind === 'file') return CHANGES_PREVIEW_TAB_ID
+ if (activeTab.kind === 'git-diff-file') return GIT_DIFF_PREVIEW_TAB_ID
+ return activeTab.id
+}
+
function formatPreviewMeta(tab: FilePreviewTab) {
const segments: string[] = []
if (typeof tab.size === 'number') {
@@ -484,6 +491,22 @@ function PreviewTabStrip({
onClose: (id: string) => void
}) {
const tabRefs = useRef
>({})
+ const fixedTabs = useMemo(
+ () => tabs.filter((tab) => tab.kind === 'changes' || tab.kind === 'git-diff'),
+ [tabs],
+ )
+ const previewFileTabs = useMemo(
+ () => tabs.filter((tab) => tab.kind === 'file' || tab.kind === 'git-diff-file'),
+ [tabs],
+ )
+ const activeTab = useMemo(
+ () => tabs.find((tab) => tab.id === activeTabId),
+ [activeTabId, tabs],
+ )
+ const contextTabId = useMemo(
+ () => getContextPreviewTabID(activeTab),
+ [activeTab],
+ )
useEffect(() => {
const active = tabRefs.current[activeTabId]
@@ -521,53 +544,107 @@ function PreviewTabStrip({
}
}
- return (
-
- {tabs.map((tab, index) => {
- const badge = getPreviewBadge(tab, fileChanges)
- const active = tab.id === activeTabId
+ const renderTab = (tab: PreviewTab, index: number, appearance: 'switcher' | 'chip') => {
+ const badge = getPreviewBadge(tab, fileChanges)
+ const active = tab.id === activeTabId
+ const contextActive = appearance === 'switcher' && !active && tab.id === contextTabId
+ const title = tab.kind === 'file' || tab.kind === 'git-diff-file' ? tab.path : tab.title
+
+ if (appearance === 'switcher') {
+ return (
+
+ )
+ }
- return (
-
+
+ {tab.closable && (
+
- )
- })}
+
+
+ )}
+
+
+
+ {fixedTabs.map((tab) => {
+ const index = tabs.findIndex((entry) => entry.id === tab.id)
+ return renderTab(tab, index, 'switcher')
+ })}
+
+
+ {previewFileTabs.length > 0 && (
+
+ {previewFileTabs.map((tab) => {
+ const index = tabs.findIndex((entry) => entry.id === tab.id)
+ return renderTab(tab, index, 'chip')
+ })}
+
+ )}