undefined)
render(
undefined)}
onCreate={onCreate}
@@ -309,6 +324,26 @@ function installRemoteApi(
}
describe('ProjectSwitcher project activity integration', () => {
+ it('uses one idle button for both rows and restores its keyboard focus', () => {
+ renderSwitcher()
+ const trigger = screen.getByRole('button', { name: '当前项目' })
+ expect(screen.getAllByRole('button')).toEqual([trigger])
+ expect(trigger).toHaveTextContent('Local project')
+ expect(trigger).toHaveAccessibleDescription('暂无活动')
+ fireEvent.click(within(trigger).getByText('暂无活动'))
+ expect(screen.getByRole('region', { name: project.name })).toBeVisible()
+ fireEvent.keyDown(screen.getByRole('dialog', { name: '项目与活动' }), { key: 'Escape' })
+ expect(trigger).toHaveFocus()
+ expect(trigger).toHaveAttribute('aria-expanded', 'false')
+ for (const key of ['Enter', ' ', 'ArrowDown']) {
+ fireEvent.keyDown(trigger, { key })
+ const menu = screen.getByRole('dialog', { name: '项目与活动' })
+ expect(trigger).toHaveAttribute('aria-controls', menu.id)
+ fireEvent.keyDown(menu, { key: 'Escape' })
+ expect(trigger).toHaveFocus()
+ }
+ })
+
it('keeps per-project title counts and menu ordering stable across recovery and Host states', async () => {
const api = installRemoteApi({ connectionState: 'connecting' })
const remote: AssistantProject = {
@@ -317,6 +352,7 @@ describe('ProjectSwitcher project activity integration', () => {
}
const idle = { ...remote, id: 'idle-project', name: 'Idle remote' }
const props = {
+ ...menuProps,
activeProjectId: project.id, projects: [project, remote, idle],
remoteProjectsEnabled: true, onArchive: vi.fn(), onCreate: vi.fn(),
onDelete: vi.fn(), onRemoteCommitted: vi.fn(), onSelect: vi.fn(),
@@ -329,7 +365,7 @@ describe('ProjectSwitcher project activity integration', () => {
const { rerender } = render( {
expect(rows.map((row) => row.querySelector('b')?.textContent))
.toEqual(['Local project', 'Remote activity', 'Idle remote'])
expect(rows[0]!.querySelector('.project-switcher__project-heading'))
- .toHaveTextContent('Local project 1 个运行中')
+ .toHaveTextContent('Local project')
+ expect(rows[0]!.querySelector('.project-activity__counts')).toHaveTextContent('1 个运行中')
const heading = rows[1]!.querySelector('.project-switcher__project-heading')!
- expect(heading).toHaveTextContent('Remote activity3 个待处理 2 个运行中')
- expect(heading.querySelector('b')?.nextElementSibling).toHaveClass('project-activity__counts')
+ expect(heading).toHaveTextContent('Remote activity')
+ expect(heading.nextElementSibling).toHaveClass('project-activity__counts')
+ expect(heading.nextElementSibling).toHaveTextContent('3 个待处理 2 个运行中')
expect(rows[2]!.querySelector('.project-activity__counts')).toBeNull()
}
fireEvent.click(within(menu).getByRole('menuitemradio', { name: /Remote activity/u }))
@@ -360,16 +398,17 @@ describe('ProjectSwitcher runtime fields', () => {
const menu = screen.getByRole('menu')
expect(trigger.closest('.project-switcher')).not.toContainElement(menu)
expect(menu.closest('.floating-portal')?.parentElement).toBe(document.body)
- expect(menu.style.width).toBe('380px')
+ const surface = screen.getByRole('dialog', { name: '项目与活动' })
+ expect(surface.style.width).toBe('920px')
const selected = within(menu).getByRole('menuitemradio', { checked: true })
- await waitFor(() => expect(selected).toHaveFocus())
+ await waitFor(() => expect(screen.getByRole('tab', { name: '全部项目' })).toHaveFocus())
fireEvent.pointerDown(selected)
expect(menu).toBeInTheDocument()
const width = vi.spyOn(window, 'innerWidth', 'get').mockReturnValue(360)
fireEvent(window, new Event('resize'))
- expect(menu.style.width).toBe('328px')
- expect(menu.style.left).toBe('16px')
+ expect(surface.style.width).toBe('328px')
+ expect(surface.style.left).toBe('16px')
width.mockRestore()
fireEvent.keyDown(selected, { key: 'Escape' })
expect(screen.queryByRole('menu')).not.toBeInTheDocument()
@@ -383,14 +422,14 @@ describe('ProjectSwitcher runtime fields', () => {
it.each(['新建项目', '项目设置'])('keeps %s outside the sidebar and restores focus after closing', (name) => {
renderSwitcher()
const trigger = screen.getByRole('button', {
- name: name === '项目设置' ? '当前项目' : name
+ name: '当前项目'
})
fireEvent.click(trigger)
if (name === '项目设置') {
fireEvent.click(screen.getByRole('menuitem', {
name: '管理项目 Local project'
}))
- }
+ } else openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name })
expect(dialog.parentElement?.parentElement).toBe(document.body)
const body = dialog.querySelector('.project-create-card__body')!
@@ -407,7 +446,7 @@ describe('ProjectSwitcher runtime fields', () => {
it('creates an ordinary project with DeepSeek Harness', async () => {
const { onCreate } = renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.change(within(dialog).getByLabelText('名称'), {
target: { value: 'Harness project' }
@@ -473,7 +512,7 @@ describe('ProjectSwitcher runtime fields', () => {
await i18n.changeLanguage('en-US')
renderSwitcher()
- fireEvent.click(screen.getByLabelText('New project'))
+ openCreate('New project')
const dialog = screen.getByRole('dialog', { name: 'New project' })
expect(within(dialog).getByRole('group', { name: 'Default Runtime for new conversations' })).toBeInTheDocument()
expect(within(dialog).getByLabelText('Execution mode')).not.toHaveValue('')
@@ -544,23 +583,31 @@ describe('ProjectSwitcher managed SSH projects', () => {
name: 'Current project'
})
const buildHost = await waitFor(() =>
- within(menu).getByRole('group', {
- name: 'SSH host: Build host'
+ within(menu).getByRole('menuitem', {
+ name: /Build host/u
})
)
- const deployHost = within(menu).getByRole('group', {
- name: 'SSH host: Deploy host'
+ const deployHost = within(menu).getByRole('menuitem', {
+ name: /Deploy host/u
})
expect(buildHost).toHaveTextContent('Connecting')
- expect(buildHost).toHaveTextContent('/srv/api')
+ expect(within(menu).getByRole('menuitemradio', { name: /\/srv\/api/u })).toHaveTextContent('/srv/api')
expect(deployHost).toHaveTextContent('Ready')
- expect(deployHost).toHaveTextContent('/srv/web')
+ expect(within(menu).getByRole('menuitemradio', { name: /\/srv\/web/u })).toHaveTextContent('/srv/web')
expect(within(menu).queryByText(/Managed SSH/u)).not.toBeInTheDocument()
act(() => api.emitConnectionStatus('ready'))
await waitFor(() =>
expect(buildHost).toHaveTextContent('Ready')
)
+ fireEvent.click(buildHost)
+ expect(buildHost).toHaveAttribute('aria-expanded', 'false')
+ expect(within(menu).queryByRole('menuitemradio', { name: /\/srv\/api/u })).not.toBeInTheDocument()
+ fireEvent.change(screen.getByRole('searchbox'), { target: { value: '/srv/api' } })
+ expect(within(menu).getByRole('menuitemradio', { name: /\/srv\/api/u })).toBeInTheDocument()
+ expect(within(menu).queryByRole('menuitemradio', { name: /\/srv\/web/u })).not.toBeInTheDocument()
+ fireEvent.change(screen.getByRole('searchbox'), { target: { value: '' } })
+ expect(buildHost).toHaveAttribute('aria-expanded', 'false')
})
it('does not let an older Host snapshot overwrite a newer connection event', async () => {
@@ -618,8 +665,8 @@ describe('ProjectSwitcher managed SSH projects', () => {
await Promise.resolve()
})
- const hostGroup = await screen.findByRole('group', {
- name: 'SSH host: Build host'
+ const hostGroup = await screen.findByRole('menuitem', {
+ name: /Build host/u
})
expect(hostGroup).toHaveTextContent('Ready')
expect(hostGroup).not.toHaveTextContent('Disconnected')
@@ -669,7 +716,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
expect(
screen.getByRole('button', { name: 'Current project' })
- ).toHaveTextContent('Restoring remote Agent…')
+ ).toHaveAccessibleDescription('No activity Restoring remote Agent…')
fireEvent.click(
screen.getByRole('button', { name: 'Current project' })
)
@@ -694,6 +741,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
executionSpace: { kind: 'ssh', hostId, remoteRootPath: '/srv/project' }
}
const props = {
+ ...menuProps,
onArchive: vi.fn(), onCreate: vi.fn(), onDelete: vi.fn(),
onRemoteCommitted: vi.fn(), onSelect: vi.fn(),
onSelectRoot: vi.fn(), onUpdate: vi.fn(),
@@ -710,7 +758,8 @@ describe('ProjectSwitcher managed SSH projects', () => {
)
const { rerender, unmount } = render(view(remote.id))
const trigger = screen.getByRole('button', { name: 'Current project' })
- expect(within(trigger).getByRole('status')).toHaveTextContent('Recovery completed')
+ expect(trigger).toHaveAccessibleDescription('No activity Recovery completed')
+ expect(trigger).not.toContainElement(screen.getByRole('status'))
await act(async () => { await vi.advanceTimersByTimeAsync(2_000) })
rerender(view(project.id))
fireEvent.click(trigger)
@@ -729,13 +778,15 @@ describe('ProjectSwitcher managed SSH projects', () => {
const next = { ...completed, requestId: '00000000-0000-4000-8000-000000000302' }
rerender(view(remote.id, { ...next, stage: 'network' }))
await act(async () => { await vi.advanceTimersByTimeAsync(5_000) })
- expect(within(trigger).getByRole('status')).toHaveAttribute('aria-busy', 'true')
+ expect(document.getElementById(trigger.getAttribute('aria-describedby')!.split(' ')[1]!)!.querySelector('[role="status"]')).toHaveAttribute('aria-busy', 'true')
rerender(view(remote.id, next))
expect(screen.getAllByText('Recovery completed')).toHaveLength(2)
await act(async () => { await vi.advanceTimersByTimeAsync(3_000) })
expect(screen.queryByText('Recovery completed')).not.toBeInTheDocument()
rerender(view(remote.id, { ...next, requestId: 'new-request' }))
unmount()
+ // Focusing the shared menu schedules jsdom's zero-delay selectionchange.
+ await act(async () => { await vi.advanceTimersByTimeAsync(0) })
expect(vi.getTimerCount()).toBe(0)
})
@@ -750,6 +801,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
const second = { ...remote, id: 'second-project', name: 'Second remote' }
const onRetryRecovery = vi.fn(async () => undefined)
const props = {
+ ...menuProps,
activeProjectId: project.id,
onArchive: vi.fn(), onCreate: vi.fn(), onDelete: vi.fn(),
onRemoteCommitted: vi.fn(), onSelect: vi.fn(), onRetryRecovery,
@@ -807,6 +859,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
const onRetryRecovery = vi.fn(async () => undefined)
render(
undefined)}
onCreate={vi.fn()}
@@ -878,7 +931,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
).not.toBeInTheDocument()
expect(within(menu).queryByText('Remote project')).not.toBeInTheDocument()
- fireEvent.click(screen.getByLabelText('New project'))
+ openCreate('New project')
const dialog = screen.getByRole('dialog', { name: 'New project' })
expect(
within(dialog).queryByRole('button', { name: 'Managed SSH' })
@@ -978,7 +1031,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
await i18n.changeLanguage('en-US')
const api = installRemoteApi()
const { onSelectRoot } = renderSwitcher()
- fireEvent.click(screen.getByLabelText('New project'))
+ openCreate('New project')
const dialog = screen.getByRole('dialog', { name: 'New project' })
fireEvent.click(
within(dialog).getByRole('button', { name: 'Managed SSH' })
@@ -1017,7 +1070,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
it('starts from the home directory when the typed path is invalid', async () => {
const api = installRemoteApi()
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1058,7 +1111,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
}
)
const { onSelectRoot } = renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1120,7 +1173,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
it('keeps the outer dialog open and restores trigger focus after cancel and Escape', async () => {
const api = installRemoteApi()
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1180,7 +1233,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
it('closes the new-project dialog through its top-right button', () => {
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
const close = within(dialog).getByRole('button', {
name: '关闭新建项目'
@@ -1206,7 +1259,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
)
.mockRejectedValueOnce(new Error('Permission denied'))
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1249,7 +1302,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
it.each(['opencode', 'continue'])('saves %s Execute in one request without extra confirmation checklists', async (provider) => {
const api = installRemoteApi()
const { onRemoteCommitted } = renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1311,7 +1364,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
})
)
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1347,7 +1400,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
const api = installRemoteApi()
api.save.mockRejectedValueOnce(new Error('Runtime unavailable'))
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1380,7 +1433,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
const api = installRemoteApi()
api.save.mockImplementationOnce(() => new Promise(() => undefined))
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1454,7 +1507,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
it('uses the local validated Host record and defers remote checks to the requested action', async () => {
const api = installRemoteApi()
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
const dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1531,7 +1584,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
it('never probes remote environments when the project form opens or reopens', async () => {
const api = installRemoteApi()
renderSwitcher()
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
let dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1546,7 +1599,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
within(dialog).getByRole('button', { name: '取消' })
)
- fireEvent.click(screen.getByLabelText('新建项目'))
+ openCreate('新建项目')
dialog = screen.getByRole('dialog', { name: '新建项目' })
fireEvent.click(
within(dialog).getByRole('button', { name: '托管 SSH' })
@@ -1556,7 +1609,7 @@ describe('ProjectSwitcher managed SSH projects', () => {
'此主机已验证。保存项目时才会连接并检查 Agent、工作区和 Runtime。'
)
).toBeInTheDocument()
- expect(api.getSnapshot).toHaveBeenCalledTimes(2)
+ expect(api.getSnapshot).toHaveBeenCalledTimes(4)
expect(api.getRemoteEnvironment).not.toHaveBeenCalled()
expect(api.updateRemoteEnvironment).not.toHaveBeenCalled()
})
diff --git a/src/renderer/src/ProjectSwitcher.tsx b/src/renderer/src/ProjectSwitcher.tsx
index 29da9a72..422a027e 100644
--- a/src/renderer/src/ProjectSwitcher.tsx
+++ b/src/renderer/src/ProjectSwitcher.tsx
@@ -7,16 +7,14 @@ import {
Folder,
FolderOpen,
LoaderCircle,
- Plus,
RadioTower,
RefreshCw,
- Server,
Settings,
Trash2,
X
} from 'lucide-react'
import type { LucideIcon } from 'lucide-react'
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, memo } from 'react'
+import { useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, memo } from 'react'
import { createPortal } from 'react-dom'
import { useTranslation } from 'react-i18next'
import type {
@@ -34,7 +32,6 @@ import {
} from '../../shared/remote-project-candidate-contracts'
import type {
SshDirectoryBrowseResult,
- SshHost,
SshHostAgentConnectionState,
SshHostsSnapshot
} from '../../shared/ssh-host-contracts'
@@ -58,12 +55,19 @@ import { ProjectWorkModeFields } from './ProjectWorkModeFields'
import { ChannelIcon } from './ChannelIcon'
import { SegmentedControl } from './WorkspacePrimitives'
import { InlineHelp } from './InlineHelp'
-import { FloatingPortal } from './FloatingPortal'
+import { WorkspaceMenu } from './WorkspaceMenu'
+import type { ConversationActivity } from './conversation-activity'
+import type { ConversationStore } from './conversation-store'
import { displayErrorMessage } from './error-message'
type ProjectSwitcherProps = {
projects: AssistantProject[]
activeProjectId: string
+ conversationStore: ConversationStore
+ activities: ConversationActivity[]
+ visible?: boolean
+ onOpenConversation: (conversationId: string) => void
+ onNewConversation: (projectId: string) => void
activityByProjectId?: Record
remoteProjectsEnabled?: boolean
runtimeSettings?: RuntimeSettings
@@ -94,6 +98,8 @@ type RemoteHostReadiness =
| { status: 'ready' }
| { status: 'unready' }
+const emptyHosts: SshHostsSnapshot['hosts'] = []
+
function ProjectRecoveryStatus({
state
}: {
@@ -215,6 +221,11 @@ function isRemoteAbsolutePath(value: string): boolean {
function ProjectSwitcherView({
projects,
activeProjectId,
+ conversationStore,
+ activities,
+ visible = true,
+ onOpenConversation,
+ onNewConversation,
activityByProjectId = {},
remoteProjectsEnabled = false,
runtimeSettings,
@@ -229,6 +240,9 @@ function ProjectSwitcherView({
recoveryByProjectId = {}
}: ProjectSwitcherProps): React.JSX.Element {
const { t } = useTranslation('workspace')
+ useLayoutEffect(() => {
+ conversationStore.recordActivityStatuses(activities)
+ }, [activities, conversationStore])
const [dialogMode, setDialogMode] = useState<
'create' | 'settings'
>()
@@ -275,18 +289,31 @@ function ProjectSwitcherView({
useState()
const [remoteDirectoryListing, setRemoteDirectoryListing] =
useState()
- const createButtonRef = useRef(null)
const directoryPickerTriggerRef = useRef(null)
const directoryPickerRef = useRef(null)
const directoryBrowseRequestRef = useRef(0)
const projectPickerRef = useRef(null)
const projectPickerButtonRef = useRef(null)
- const projectPickerMenuRef = useRef(null)
+ const menuId = useId()
const dialogRef = useRef(null)
const restoreFocusTarget = useRef<
'create' | 'picker' | undefined
>(undefined)
const [projectMenuOpen, setProjectMenuOpen] = useState(false)
+ if (!visible && projectMenuOpen) setProjectMenuOpen(false)
+ const closeProjectMenu = useCallback(() => setProjectMenuOpen(false), [])
+ const visibleActivities = useMemo(() => {
+ const visibleIds = new Set(projects.filter((project) => project.kind === 'channel' ||
+ project.executionSpace.kind !== 'ssh' || remoteProjectsEnabled).map((project) => project.id))
+ return activities.filter((activity) => !activity.projectId || visibleIds.has(activity.projectId))
+ }, [activities, projects, remoteProjectsEnabled])
+ const activityCounts = useMemo(() => {
+ const counts = { attention: 0, running: 0, completed: 0 }
+ for (const activity of visibleActivities) {
+ counts[activity.status === 'running' || activity.status === 'completed' ? activity.status : 'attention'] += 1
+ }
+ return counts
+ }, [visibleActivities])
const [retryingRecoveryProjectId, setRetryingRecoveryProjectId] =
useState()
const [dismissedRecoveryByProjectId, setDismissedRecoveryByProjectId] =
@@ -331,13 +358,13 @@ function ProjectSwitcherView({
}
}, [])
- const visibleRecoveryByProjectId = Object.fromEntries(
+ const visibleRecoveryByProjectId = useMemo(() => Object.fromEntries(
Object.entries(recoveryByProjectId).filter(
([projectId, state]) =>
state.stage !== 'completed' ||
dismissedRecoveryByProjectId[projectId] !== state.requestId
)
- )
+ ), [recoveryByProjectId, dismissedRecoveryByProjectId])
const applySshHostsSnapshot = useCallback(
(
snapshot: SshHostsSnapshot,
@@ -419,58 +446,9 @@ function ProjectSwitcherView({
const settingsProject = projects.find(
(project) => project.id === settingsProjectId
)
- const localProjects = projects.filter(
- (project) =>
- project.kind === 'user' &&
- project.executionSpace.kind === 'local'
- )
- const remoteProjects = projects.filter(
- (project) =>
- project.kind === 'user' &&
- project.executionSpace.kind === 'ssh'
- )
- const sshHostById = new Map(
- (sshHosts?.hosts ?? []).map((host) => [host.id, host])
- )
- const remoteProjectGroups = [
- ...remoteProjects.reduce(
- (
- groups,
- project
- ) => {
- if (project.executionSpace.kind !== 'ssh') {
- return groups
- }
- const hostId = project.executionSpace.hostId
- const current = groups.get(hostId)
- if (current) {
- current.projects.push(project)
- } else {
- groups.set(hostId, {
- hostId,
- host: sshHostById.get(hostId),
- projects: [project]
- })
- }
- return groups
- },
- new Map<
- string,
- {
- hostId: string
- host?: SshHost
- projects: AssistantProject[]
- }
- >()
- ).values()
- ]
- const channelProjects = projects.filter(
- (project) => project.kind === 'channel'
- )
- const userProjects = [
- ...localProjects,
- ...(remoteProjectsEnabled ? remoteProjects : [])
- ]
+ const userProjects = useMemo(() => projects.filter((project) =>
+ project.kind === 'user' && (project.executionSpace.kind === 'local' || remoteProjectsEnabled)
+ ), [projects, remoteProjectsEnabled])
const busy =
saving ||
remoteSaving ||
@@ -741,64 +719,6 @@ function ProjectSwitcherView({
}
}
- useLayoutEffect(() => {
- if (!projectMenuOpen) return
- const anchor = projectPickerButtonRef.current
- const menu = projectPickerMenuRef.current
- if (!anchor || !menu) return
- const position = (): void => {
- const rect = anchor.getBoundingClientRect()
- const width = Math.min(380, window.innerWidth - 32)
- menu.style.width = `${width}px`
- menu.style.left = `${Math.max(16, Math.min(rect.left, window.innerWidth - width - 16))}px`
- menu.style.top = `${Math.max(16, Math.min(rect.bottom + 8, window.innerHeight - menu.offsetHeight - 16))}px`
- }
- position()
- const observer = new ResizeObserver(position)
- observer.observe(anchor)
- observer.observe(menu)
- window.addEventListener('resize', position)
- window.addEventListener('scroll', position, true)
- return () => {
- observer.disconnect()
- window.removeEventListener('resize', position)
- window.removeEventListener('scroll', position, true)
- }
- }, [projectMenuOpen])
-
- useEffect(() => {
- if (!projectMenuOpen) {
- return
- }
- const focusFrame = requestAnimationFrame(() => {
- const items = Array.from(
- projectPickerMenuRef.current?.querySelectorAll(
- '[role^="menuitem"]'
- ) ?? []
- )
- const initialItem =
- items.find((item) => item.getAttribute('aria-checked') === 'true') ??
- items[0]
- initialItem?.focus()
- })
- const closeOutside = (event: Event): void => {
- if (
- event.target instanceof Node &&
- !projectPickerRef.current?.contains(event.target) &&
- !projectPickerMenuRef.current?.contains(event.target)
- ) {
- setProjectMenuOpen(false)
- }
- }
- document.addEventListener('pointerdown', closeOutside)
- document.addEventListener('focusin', closeOutside)
- return () => {
- cancelAnimationFrame(focusFrame)
- document.removeEventListener('pointerdown', closeOutside)
- document.removeEventListener('focusin', closeOutside)
- }
- }, [projectMenuOpen])
-
useEffect(() => {
if (!directoryPickerOpen) {
return
@@ -818,14 +738,14 @@ function ProjectSwitcherView({
return activateModalFocus(
() => dialogRef.current?.querySelector('input:not(:disabled), textarea:not(:disabled), select:not(:disabled)') ??
dialogRef.current?.querySelector('button:not(:disabled)') ?? null,
- () => restoreFocusTarget.current === 'create' ? createButtonRef.current : projectPickerButtonRef.current
+ () => projectPickerButtonRef.current
)
}, [dialogMode])
useEffect(() => {
if (!dialogMode) {
if (restoreFocusTarget.current === 'create') {
- createButtonRef.current?.focus()
+ projectPickerButtonRef.current?.focus()
} else if (restoreFocusTarget.current === 'picker') {
projectPickerButtonRef.current?.focus()
}
@@ -1104,9 +1024,9 @@ function ProjectSwitcherView({
}
const renderProjectMenuItem = (
- project: AssistantProject,
- ProjectIcon: LucideIcon
+ project: AssistantProject
): React.JSX.Element => {
+ const ProjectIcon: LucideIcon = project.kind === 'channel' ? RadioTower : Folder
const selected = project.id === activeProjectId
const projectDisplay = getProjectDisplayText(project, t)
const recovery =
@@ -1140,16 +1060,11 @@ function ProjectSwitcherView({
-
+ }} />}
+
{dialogMode && createPortal(
({ id, projectId, title: id, updatedAt, messages: [] })
+
+function setup({ projects = [local, other], conversations = [conversation('Local chat'), conversation('Other chat', other.id)],
+ activities = [] as ConversationActivity[], remoteProjectsEnabled = false } = {}) {
+ const store = createConversationStores(conversations, { flushIntervalMs: 250 }).conversations
+ const actions = { onArchive: vi.fn(), onCreate: vi.fn(), onDelete: vi.fn(), onRemoteCommitted: vi.fn(),
+ onSelect: vi.fn(), onSelectRoot: vi.fn(), onUpdate: vi.fn(), onOpenConversation: vi.fn(), onNewConversation: vi.fn() }
+ const props = { ...actions, projects, conversationStore: store, activeProjectId: local.id, activities, remoteProjectsEnabled }
+ const renders = vi.fn()
+ const view = render( row.conversationId !== 'Finished 0')} />)
+ fireEvent.click(screen.getByRole('button', { name: 'Current project' }))
+ expect(within(screen.getByRole('list', { name: 'Conversations' })).getByRole('button', { name: 'Finished 0' })).toBeInTheDocument()
+ expect(screen.getByRole('region', { name: local.name })).toBeVisible()
+ })
+
+ it('searches across categories, creates in preview scope, and explains channel restrictions', async () => {
+ await i18n.changeLanguage('en-US')
+ const channel: AssistantProject = { ...other, id: 'channel', name: 'Team channel', kind: 'channel', channel: 'wecom' }
+ const { actions } = setup({ projects: [local, other, channel] })
+ fireEvent.click(screen.getByRole('button', { name: 'Current project' }))
+ fireEvent.click(screen.getByRole('tab', { name: 'Local' }))
+ fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'team' } })
+ expect(screen.queryByRole('menuitemradio', { name: /Local workspace/ })).not.toBeInTheDocument()
+ const channelRow = screen.getByRole('menuitemradio', { name: /Team channel/ })
+ fireEvent.pointerOver(channelRow, { pointerType: 'mouse' })
+ expect(screen.getByRole('button', { name: 'New conversation' })).toBeDisabled()
+ expect(screen.getByText(/automatically/i, { selector: '.workspace-menu__channel-note' })).toBeInTheDocument()
+ fireEvent.change(screen.getByRole('searchbox'), { target: { value: 'C:/other' } })
+ fireEvent.pointerOver(screen.getByRole('menuitemradio', { name: /Other workspace/ }), { pointerType: 'mouse' })
+ fireEvent.click(screen.getByRole('button', { name: 'New conversation' }))
+ expect(actions.onNewConversation).toHaveBeenCalledExactlyOnceWith(other.id)
+ })
+
+ it('windows large project lists while keyboard End reaches the last row and Escape restores focus', async () => {
+ await i18n.changeLanguage('en-US')
+ setup({ projects: [local, ...Array.from({ length: 400 }, (_, i) => ({ ...other, id: `p${i}`, name: `Project ${i}` }))] })
+ const trigger = screen.getByRole('button', { name: 'Current project' })
+ fireEvent.click(trigger)
+ expect(screen.getAllByRole('menuitemradio').length).toBeLessThan(120)
+ fireEvent.keyDown(screen.getByRole('menu', { name: 'Current project' }), { key: 'End' })
+ expect(screen.getByRole('menuitemradio', { name: /Project 399/ })).toHaveFocus()
+ fireEvent.keyDown(document.activeElement!, { key: 'Escape' })
+ expect(trigger).toHaveFocus()
+ expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+ })
+
+ it('does not rerender the menu for message content deltas with unchanged summaries', async () => {
+ await i18n.changeLanguage('en-US')
+ const initial = { ...conversation('Streaming chat'), messages: [{ id: 'm', role: 'assistant' as const, content: 'first', createdAt: 1, state: 'streaming' as const }] }
+ const { store, renders } = setup({ conversations: [initial] })
+ act(() => store.rememberOpened(initial.id))
+ fireEvent.click(screen.getByRole('button', { name: 'Current project' }))
+ const activityTimes = store.getActivityTimes()
+ renders.mockClear()
+ act(() => store.set((rows) => rows.map((row) => ({ ...row, updatedAt: Date.now(), messages: [{ ...initial.messages[0]!, content: 'streaming text' }] }))))
+ expect(renders).not.toHaveBeenCalled()
+ expect(store.getActivityTimes()).toBe(activityTimes)
+ })
+
+ it('records activity transitions while closed and promotes task-only completions when opened', async () => {
+ await i18n.changeLanguage('en-US')
+ const conversations = Array.from({ length: 12 }, (_, i) => conversation(`Recent ${i}`, local.id, 1000 - i))
+ const activity: ConversationActivity = { conversationId: 'task-only', projectId: local.id,
+ projectName: local.name, title: 'Older background task', status: 'running' }
+ const { rerender, props, store } = setup({ conversations, activities: [activity] })
+ rerender(
+ anchorRef: React.RefObject
+ controlsRef: React.RefObject
+ id: string
+ renderProject: (project: AssistantProject) => ReactNode
+ onClose: () => void
+ onCreateProject: () => void
+ onNewConversation: (projectId: string) => void
+ onOpenConversation: (conversationId: string) => void
+}
+
+export function WorkspaceMenu({
+ projects, activeProjectId, activities, conversationStore, remoteProjectsEnabled,
+ hosts, connectionStates, anchorRef, controlsRef, id, renderProject,
+ onClose, onCreateProject, onNewConversation, onOpenConversation
+}: WorkspaceMenuProps): React.JSX.Element {
+ const { t } = useTranslation('workspace')
+ const { t: tApp } = useTranslation('app')
+ const titleId = useId()
+ const menuRef = useRef(null)
+ const projectListRef = useRef(null)
+ const conversationListRef = useRef(null)
+ const categoriesRef = useRef(null)
+ const [category, setCategory] = useState('allProjects')
+ if (category === 'remote' && !remoteProjectsEnabled) setCategory('allProjects')
+ const [scope, setScope] = useState(activeProjectId)
+ const [filter, setFilter] = useState('all')
+ const [query, setQuery] = useState('')
+ const [collapsed, setCollapsed] = useState>(() => new Set())
+ const [keyboardProject, setKeyboardProject] = useState()
+ const [keyboardConversation, setKeyboardConversation] = useState()
+ const activityTimes = useSyncExternalStore(conversationStore.subscribeActivityTimes, conversationStore.getActivityTimes)
+ const conversations = useWorkspaceConversations(conversationStore, tApp('conversation.defaultTitle'), activityTimes)
+ const visibleProjects = useMemo(() => projects.filter((project) =>
+ project.kind === 'channel' || project.executionSpace.kind !== 'ssh' || remoteProjectsEnabled
+ ), [projects, remoteProjectsEnabled])
+ const projectById = useMemo(() => new Map(visibleProjects.map((project) => [project.id, project])), [visibleProjects])
+ const availableActivities = useMemo(() => activities.filter((activity) => !activity.projectId || projectById.has(activity.projectId)), [activities, projectById])
+ const availableConversations = useMemo(() => conversations.filter((conversation) => {
+ const project = projectById.get(conversation.projectId ?? '')
+ return (!conversation.projectId || project) && (project?.kind !== 'channel' || conversation.channel)
+ }), [conversations, projectById])
+ const categoryTabs = useMemo(() => {
+ const categories: ProjectCategory[] = ['allProjects', 'local', ...(remoteProjectsEnabled ? ['remote' as const] : []), 'channels']
+ return categories.map((id) => ({ id, label: t(`workspaceMenu.${id}`) }))
+ }, [remoteProjectsEnabled, t])
+ const projectRows = useMemo(() => {
+ const hostById = new Map(hosts.map((host) => [host.id, host]))
+ const search = query.trim().toLocaleLowerCase()
+ const matching = visibleProjects.filter((project) => {
+ const host = project.executionSpace.kind === 'ssh' ? hostById.get(project.executionSpace.hostId) : undefined
+ if (search) return `${getProjectDisplayText(project, t).name} ${project.rootPath} ${host?.name ?? ''} ${host?.hostname ?? ''} ${project.channel ?? ''}`.toLocaleLowerCase().includes(search)
+ const kind = project.kind === 'channel' ? 'channels' : project.executionSpace.kind === 'ssh' ? 'remote' : 'local'
+ return category === 'allProjects' || category === kind
+ })
+ const rows: ProjectRow[] = []
+ const addProjects = (items: AssistantProject[]): void => {
+ for (const project of items) rows.push({ id: project.id, kind: 'project', project })
+ }
+ addProjects(matching.filter((project) => project.kind !== 'channel' && project.executionSpace.kind === 'local'))
+ if (remoteProjectsEnabled) {
+ const groups = new Map()
+ for (const project of matching) {
+ if (project.kind === 'channel' || project.executionSpace.kind !== 'ssh') continue
+ const hostId = project.executionSpace.hostId
+ const group = groups.get(hostId) ?? []
+ group.push(project)
+ groups.set(hostId, group)
+ }
+ for (const [hostId, group] of groups) {
+ rows.push({ id: `host:${hostId}`, kind: 'host', hostId,
+ label: hostById.get(hostId)?.name ?? t('projectSwitcher.selector.unavailableHost'),
+ state: connectionStates[hostId] ?? 'disconnected' })
+ if (search || !collapsed.has(hostId)) addProjects(group)
+ }
+ }
+ addProjects(matching.filter((project) => project.kind === 'channel'))
+ return rows
+ }, [visibleProjects, hosts, query, category, t, remoteProjectsEnabled, connectionStates, collapsed])
+ const rows = useMemo(() => workspaceConversationRows(availableConversations, availableActivities, scope, filter, activityTimes), [availableConversations, availableActivities, scope, filter, activityTimes])
+ const projectIds = useMemo(() => projectRows.map((row) => row.id), [projectRows])
+ const conversationIds = useMemo(() => rows.map((row) => row.id), [rows])
+ const projectWindow = useListWindow({ ids: projectIds, scope: `${category}:${query}`, scrollRef: projectListRef,
+ keepIds: [keyboardProject], enabled: true, resetScrollOnScopeChange: true, estimatedRowHeight: 64 })
+ const conversationWindow = useListWindow({ ids: conversationIds, scope: `${scope}:${filter}`, scrollRef: conversationListRef,
+ keepIds: [keyboardConversation], enabled: true, resetScrollOnScopeChange: true, estimatedRowHeight: 56 })
+ const newProject = projectById.get(scope ?? activeProjectId)
+ const scopeName = scope === null ? t('workspaceMenu.allProjects')
+ : projectById.has(scope) ? getProjectDisplayText(projectById.get(scope)!, t).name : t('projectActivity.unassigned')
+
+ useLayoutEffect(() => {
+ const menu = menuRef.current
+ const anchor = anchorRef.current
+ if (!menu || !anchor) return
+ const position = (): void => {
+ const rect = anchor.getBoundingClientRect()
+ const width = Math.min(920, window.innerWidth - 32)
+ menu.style.width = `${width}px`
+ menu.style.left = `${Math.max(16, Math.min(rect.left, window.innerWidth - width - 16))}px`
+ menu.style.top = `${Math.max(16, Math.min(rect.bottom + 8, window.innerHeight - menu.offsetHeight - 16))}px`
+ }
+ position()
+ const observer = new ResizeObserver(position)
+ observer.observe(anchor)
+ observer.observe(menu)
+ window.addEventListener('resize', position)
+ window.addEventListener('scroll', position, true)
+ return () => {
+ observer.disconnect()
+ window.removeEventListener('resize', position)
+ window.removeEventListener('scroll', position, true)
+ }
+ }, [anchorRef])
+
+ useEffect(() => {
+ const menu = menuRef.current
+ const anchor = anchorRef.current
+ categoriesRef.current?.querySelector('[aria-selected="true"]')?.focus()
+ const outside = (event: Event): void => {
+ if (!menu?.contains(event.target as Node) && !controlsRef.current?.contains(event.target as Node)) onClose()
+ }
+ document.addEventListener('pointerdown', outside)
+ document.addEventListener('focusin', outside)
+ return () => {
+ document.removeEventListener('pointerdown', outside)
+ document.removeEventListener('focusin', outside)
+ if (document.activeElement === document.body || menu?.contains(document.activeElement)) {
+ anchor?.focus()
+ }
+ }
+ }, [anchorRef, controlsRef, onClose])
+
+ function moveFocus(event: React.KeyboardEvent, list: 'projects' | 'conversations'): void {
+ if (!['ArrowDown', 'ArrowUp', 'Home', 'End'].includes(event.key)) return
+ const ids = list === 'projects' ? projectIds : conversationIds
+ if (!ids.length) return
+ const current = (event.target as HTMLElement).closest('[data-list-window-row]')?.dataset.listWindowRow
+ const index = current ? ids.indexOf(current) : -1
+ const next = event.key === 'Home' ? 0 : event.key === 'End' ? ids.length - 1
+ : (index + (event.key === 'ArrowDown' ? 1 : -1) + ids.length) % ids.length
+ event.preventDefault()
+ event.stopPropagation()
+ flushSync(() => (list === 'projects' ? setKeyboardProject : setKeyboardConversation)(ids[next]))
+ const element = (list === 'projects' ? projectListRef : conversationListRef).current
+ const row = Array.from(element?.querySelectorAll('[data-list-window-row]') ?? [])
+ .find((item) => item.dataset.listWindowRow === ids[next])
+ row?.querySelector('button')?.focus()
+ row?.scrollIntoView?.({ block: 'nearest' })
+ }
+
+ return
+
+}
diff --git a/src/renderer/src/WorkspacePrimitives.test.tsx b/src/renderer/src/WorkspacePrimitives.test.tsx
index b7340ac9..25e068db 100644
--- a/src/renderer/src/WorkspacePrimitives.test.tsx
+++ b/src/renderer/src/WorkspacePrimitives.test.tsx
@@ -118,6 +118,13 @@ describe('WorkspacePrimitives', () => {
expect(platformFeaturesTabs).toBeDefined()
expect(platformFeaturesTabs).toMatch(/flex:\s*0 0 auto;/u)
})
+ it('keeps workspace category tabs fixed outside the scrolling project panel', () => {
+ const workspaceStylesheet = readFileSync(join(process.cwd(), 'src', 'renderer', 'src', 'workspace-menu.css'), 'utf8')
+ expect(workspaceStylesheet).toMatch(/\.workspace-menu__categories\s*\{[^}]*flex:\s*0 0 auto;/u)
+ expect(workspaceStylesheet).toMatch(/\.workspace-menu__project-panel\s*\{[^}]*flex:\s*1;[^}]*min-height:\s*0;/u)
+ expect(stylesheet).toMatch(/\.page-tabs\s*\{[^}]*overflow-x:\s*auto;[^}]*flex-wrap:\s*nowrap;/u)
+ })
+
it('keeps shared segmented controls from collapsing beside scrollable content', () => {
const segmentedStyles = stylesheet.match(
/\.segmented-control,\s*\.page-tabs--segmented\s*\{(?[^}]*)\}/u
diff --git a/src/renderer/src/chat-conversation.ts b/src/renderer/src/chat-conversation.ts
index 88b94dcc..42013adb 100644
--- a/src/renderer/src/chat-conversation.ts
+++ b/src/renderer/src/chat-conversation.ts
@@ -21,16 +21,18 @@ function latestMessageTime(messages: readonly Message[]): number | undefined {
return latest;
}
+export function conversationActivityTime(conversation: Conversation): number {
+ const summaryTime = conversation.messageSummary?.latestMessageAt;
+ const messageTime = latestMessageTime(conversation.messages);
+ return (summaryTime === undefined ? messageTime : messageTime === undefined
+ ? summaryTime : Math.max(summaryTime, messageTime)) ?? conversation.updatedAt;
+}
+
export function sortConversationsForDisplay(conversations: readonly Conversation[]): Conversation[] {
// updatedAt tracks snapshot freshness, including every streaming delta.
// Compute stable message times once per conversation, not per comparison.
return conversations.map(conversation => {
- const summaryTime = conversation.messageSummary?.latestMessageAt;
- const messageTime = latestMessageTime(conversation.messages);
- const latest = summaryTime === undefined
- ? messageTime
- : messageTime === undefined ? summaryTime : Math.max(summaryTime, messageTime);
- return { conversation, time: latest ?? conversation.updatedAt };
+ return { conversation, time: conversationActivityTime(conversation) };
}).sort((left, right) =>
Number(Boolean(right.conversation.pinned)) - Number(Boolean(left.conversation.pinned)) ||
right.time - left.time || left.conversation.id.localeCompare(right.conversation.id),
diff --git a/src/renderer/src/conversation-store.test.tsx b/src/renderer/src/conversation-store.test.tsx
index 256781a6..e8abe749 100644
--- a/src/renderer/src/conversation-store.test.tsx
+++ b/src/renderer/src/conversation-store.test.tsx
@@ -34,6 +34,52 @@ afterEach(() => {
});
describe("conversation store", () => {
+ it("tracks visits and status transitions in session memory without changing persisted snapshots", () => {
+ vi.useFakeTimers();
+ vi.setSystemTime(1000);
+ const initial = [conversation("old", [], { projectId: "project", updatedAt: 10 })];
+ const store = createConversationStore(initial, createLiveMessageStore());
+ const persisted = vi.fn();
+ const activity = vi.fn();
+ store.subscribe(persisted);
+ store.subscribeActivityTimes(activity);
+ store.recordActivityStatuses([{ conversationId: "old", status: "running" }]);
+ expect(store.getActivityTimes().size).toBe(0);
+ store.rememberOpened("old");
+ expect(store.getActivityTimes().get("old")).toBe(1000);
+ const visited = store.getActivityTimes();
+ store.recordActivityStatuses([{ conversationId: "old", status: "running" }]);
+ expect(store.getActivityTimes()).toBe(visited);
+ store.recordActivityStatuses([{ conversationId: "old", status: "completed" }]);
+ expect(store.getActivityTimes().get("old")).toBe(1001);
+ const completed = store.getActivityTimes();
+ store.recordActivityStatuses([]);
+ expect(store.getActivityTimes()).toBe(completed);
+ expect(store.getState()).toBe(initial);
+ expect(store.getConversation("old")?.updatedAt).toBe(10);
+ expect(persisted).not.toHaveBeenCalled();
+ expect(activity).toHaveBeenCalledTimes(2);
+ store.recordActivityStatuses([{ conversationId: "old", status: "running" }]);
+ store.recordActivityStatuses([]);
+ expect(store.getActivityTimes().get("old")).toBe(1003);
+ expect(createConversationStore(initial, createLiveMessageStore()).getActivityTimes().size).toBe(0);
+ });
+
+ it("restores the last opened conversation per project and falls back after deletion", () => {
+ const older = conversation("older", [], { projectId: "project", updatedAt: 10 });
+ const recent = conversation("recent", [], { projectId: "project", updatedAt: 20 });
+ const other = conversation("other", [], { projectId: "other", updatedAt: 30 });
+ const store = createConversationStore([older, other, recent], createLiveMessageStore());
+ expect(store.projectConversation("project", false)?.id).toBe("recent");
+ store.rememberOpened("older");
+ store.rememberOpened("other");
+ expect(store.projectConversation("project", false)?.id).toBe("older");
+ expect(store.projectConversation("other", false)?.id).toBe("other");
+ expect(store.projectConversation("project", true)).toBeUndefined();
+ store.set([recent, other]);
+ expect(store.projectConversation("project", false)?.id).toBe("recent");
+ });
+
it("applies updates synchronously, in dispatch order", () => {
const store = createConversationStore([conversation("a")], createLiveMessageStore());
store.set((current) => [...current, conversation("b")]);
diff --git a/src/renderer/src/conversation-store.ts b/src/renderer/src/conversation-store.ts
index fbeac8f6..e4f275ff 100644
--- a/src/renderer/src/conversation-store.ts
+++ b/src/renderer/src/conversation-store.ts
@@ -10,6 +10,8 @@ import {
type ReactNode,
} from "react";
import type { Conversation } from "./chat-conversation";
+import { conversationActivityTime } from "./chat-conversation";
+import type { ConversationActivity } from "./conversation-activity";
import {
createLiveMessageStore,
type ConversationsUpdate,
@@ -40,6 +42,19 @@ export function createConversationStore(
let state = initial;
const listeners = new Set();
const conversationListeners = new Map>();
+ const lastOpenedByProject = new Map();
+ let activityTimes: ReadonlyMap = new Map();
+ let activityStatuses: ReadonlyMap | undefined;
+ const activityListeners = new Set();
+ let lastActivityTime = 0;
+ const touchActivity = (ids: readonly string[]): void => {
+ if (!ids.length) return;
+ lastActivityTime = Math.max(Date.now(), lastActivityTime + 1);
+ const next = new Map(activityTimes);
+ for (const id of ids) next.set(id, lastActivityTime);
+ activityTimes = next;
+ for (const listener of [...activityListeners]) listener();
+ };
const notify = (previous: readonly Conversation[]): void => {
if (conversationListeners.size) {
@@ -58,6 +73,41 @@ export function createConversationStore(
};
return {
+ rememberOpened(conversationId: string): void {
+ const conversation = state.find((item) => item.id === conversationId);
+ if (!conversation) return;
+ if (conversation?.projectId) lastOpenedByProject.set(conversation.projectId, conversationId);
+ touchActivity([conversationId]);
+ },
+ getActivityTimes(): ReadonlyMap {
+ return activityTimes;
+ },
+ subscribeActivityTimes(listener: Listener): () => void {
+ activityListeners.add(listener);
+ return () => { activityListeners.delete(listener); };
+ },
+ recordActivityStatuses(activities: readonly Pick[]): void {
+ const next = new Map(activities.map((activity) => [activity.conversationId, activity.status]));
+ const changed: string[] = [];
+ // Initial activity is a baseline. Acknowledging a completion is not a new run.
+ if (activityStatuses) for (const id of new Set([...activityStatuses.keys(), ...next.keys()])) {
+ const before = activityStatuses.get(id);
+ const after = next.get(id);
+ if (before !== after && !(before === 'completed' && after === undefined)) changed.push(id);
+ }
+ activityStatuses = next;
+ touchActivity(changed);
+ },
+ projectConversation(projectId: string, channel: boolean, candidates = state): Conversation | undefined {
+ const remembered = lastOpenedByProject.get(projectId);
+ let recent: Conversation | undefined;
+ for (const item of candidates) {
+ if (item.projectId !== projectId || (channel && !item.remote)) continue;
+ if (item.id === remembered) return item;
+ if (!recent || conversationActivityTime(item) > conversationActivityTime(recent)) recent = item;
+ }
+ return recent;
+ },
getState(): Conversation[] {
return state;
},
diff --git a/src/renderer/src/i18n/locales/en-US/workspace.ts b/src/renderer/src/i18n/locales/en-US/workspace.ts
index 86cc1f7b..b45cfa36 100644
--- a/src/renderer/src/i18n/locales/en-US/workspace.ts
+++ b/src/renderer/src/i18n/locales/en-US/workspace.ts
@@ -2,6 +2,15 @@ import type { TranslationShape } from '../../resource-types'
import type { workspace as chineseWorkspace } from '../zh-CN/workspace'
export const workspace = {
+ workspaceMenu: {
+ title: 'Projects and activity', close: 'Close projects and activity', search: 'Search projects',
+ allProjects: 'All projects', local: 'Local', remote: 'Remote', channels: 'Channels', categories: 'Project categories',
+ filter: 'Filter conversation status', conversations: 'Conversations', newConversation: 'New conversation',
+ newIn: 'New conversation in {{name}}', noProjects: 'No matching projects. Try another search.',
+ noConversations: 'No conversations in this scope match the filter.',
+ filters: { all: 'All', attention: 'Attention', running: 'Running', completed: 'Completed' },
+ groups: { attention: 'Needs attention', running: 'Running', recent: 'Recent conversations', completed: 'Completed' }
+ },
projectActivity: {
title: 'All project activity',
idle: 'No activity',
diff --git a/src/renderer/src/i18n/locales/zh-CN/workspace.ts b/src/renderer/src/i18n/locales/zh-CN/workspace.ts
index 1fa0d8c7..dd6cd063 100644
--- a/src/renderer/src/i18n/locales/zh-CN/workspace.ts
+++ b/src/renderer/src/i18n/locales/zh-CN/workspace.ts
@@ -1,4 +1,13 @@
export const workspace = {
+ workspaceMenu: {
+ title: '项目与活动', close: '关闭项目与活动', search: '搜索项目',
+ allProjects: '全部项目', local: '本地', remote: '远程', channels: '消息通道', categories: '项目类型',
+ filter: '筛选会话状态', conversations: '会话', newConversation: '新建会话',
+ newIn: '在 {{name}} 中新建会话', noProjects: '没有匹配的项目，请尝试其他关键词。',
+ noConversations: '当前范围内没有符合筛选条件的会话。',
+ filters: { all: '全部', attention: '待处理', running: '运行中', completed: '已完成' },
+ groups: { attention: '待处理', running: '运行中', recent: '最近会话', completed: '已完成' }
+ },
projectActivity: {
title: '全项目活动',
idle: '暂无活动',
diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css
index 464d8d19..e2d155c7 100644
--- a/src/renderer/src/styles.css
+++ b/src/renderer/src/styles.css
@@ -3334,7 +3334,7 @@ textarea:focus-visible {
display: grid;
align-items: center;
gap: var(--space-2);
- grid-template-columns: minmax(0, 1fr) 36px;
+ grid-template-columns: minmax(0, 1fr);
}
.project-switcher__row > .icon-button {
diff --git a/src/renderer/src/workspace-menu-selectors.test.ts b/src/renderer/src/workspace-menu-selectors.test.ts
new file mode 100644
index 00000000..b7e3a78d
--- /dev/null
+++ b/src/renderer/src/workspace-menu-selectors.test.ts
@@ -0,0 +1,43 @@
+import { describe, expect, it } from 'vitest'
+import { deriveConversationActivity } from './conversation-activity'
+import { sameWorkspaceConversations, workspaceConversationRows, type WorkspaceConversation } from './workspace-menu-selectors'
+
+const conversations: WorkspaceConversation[] = Array.from({ length: 15 }, (_, index) => ({
+ id: `c${index}`, title: `Conversation ${index}`, projectId: index === 14 ? 'other' : 'project', time: 100 - index, channel: false
+}))
+
+describe('workspace conversation summaries', () => {
+ it('uses real attention priority, adds ten non-active recent rows, and does not cap completed', () => {
+ const activities = deriveConversationActivity(conversations.map((row, index) => ({
+ ...row, messages: index === 0 ? [{ pendingQuestions: [{}], state: 'streaming' }] : []
+ })), [{ conversationId: 'c0', title: 'task', status: 'running' }], new Set(['c0', 'c1']), [], '', new Set(conversations.slice(2).map((row) => row.id)))
+ const rows = workspaceConversationRows(conversations, activities.activities, 'project', 'all')
+ expect(rows.map((row) => row.id)).toEqual(conversations.slice(0, 12).map((row) => row.id))
+ expect(rows[0]).toMatchObject({ status: 'question', group: 'attention' })
+ expect(workspaceConversationRows(conversations, activities.activities, null, 'attention').map((row) => row.id)).toEqual(['c0'])
+ expect(workspaceConversationRows(conversations, activities.activities, null, 'running').map((row) => row.id)).toEqual(['c1'])
+ expect(workspaceConversationRows(conversations, activities.activities, null, 'completed')).toHaveLength(13)
+ })
+
+ it('keeps viewed completions in recent history after the reminder is acknowledged', () => {
+ const activity = { conversationId: 'c0', projectId: 'project', projectName: 'Project', title: 'Conversation 0', status: 'completed' as const }
+ const before = workspaceConversationRows(conversations, [activity], 'project', 'all')
+ const after = workspaceConversationRows(conversations, [], 'project', 'all')
+ expect(after.map((row) => row.id)).toEqual(before.map((row) => row.id))
+ expect(after[0]?.status).toBeUndefined()
+ expect(workspaceConversationRows(conversations, [], 'project', 'completed')).toEqual([])
+ })
+
+ it('includes task-only activity for exact-ID navigation without requiring hydration', () => {
+ const rows = workspaceConversationRows([], [{ conversationId: 'missing', projectId: 'project', projectName: 'Project', title: 'Background job', status: 'approval' }], 'project', 'all')
+ expect(rows).toHaveLength(1)
+ expect(rows[0]).toMatchObject({ id: 'missing', group: 'attention', status: 'approval' })
+ })
+
+ it('retains equal metadata and notices scope, title and ordering changes', () => {
+ expect(sameWorkspaceConversations(conversations, conversations.map((row) => ({ ...row })))).toBe(true)
+ for (const change of [{ title: 'Changed' }, { time: 101 }, { projectId: 'other' }, { channel: true }]) {
+ expect(sameWorkspaceConversations(conversations, conversations.map((row, index) => index ? row : { ...row, ...change }))).toBe(false)
+ }
+ })
+})
diff --git a/src/renderer/src/workspace-menu-selectors.ts b/src/renderer/src/workspace-menu-selectors.ts
new file mode 100644
index 00000000..fcf5d425
--- /dev/null
+++ b/src/renderer/src/workspace-menu-selectors.ts
@@ -0,0 +1,69 @@
+import { useCallback } from 'react'
+import { conversationActivityTime, getConversationDisplayTitle, type Conversation } from './chat-conversation'
+import { useConversationStoreSelector, type ConversationStore } from './conversation-store'
+import type { ConversationActivity } from './conversation-activity'
+import { sameArrayItems } from './stable-derived-value'
+
+export type WorkspaceConversation = {
+ id: string
+ projectId?: string
+ title: string
+ time: number
+ channel: boolean
+}
+export type WorkspaceFilter = 'all' | 'attention' | 'running' | 'completed'
+export type WorkspaceConversationRow = WorkspaceConversation & {
+ status?: ConversationActivity['status']
+ group: 'attention' | 'running' | 'recent' | 'completed'
+}
+
+export function useWorkspaceConversations(store: ConversationStore, defaultTitle: string, activityTimes: ReadonlyMap): WorkspaceConversation[] {
+ const selector = useCallback((conversations: Conversation[]) => conversations.map((conversation) => ({
+ id: conversation.id,
+ projectId: conversation.projectId,
+ title: getConversationDisplayTitle(conversation, defaultTitle),
+ time: Math.max(conversationActivityTime(conversation), activityTimes.get(conversation.id) ?? 0),
+ channel: Boolean(conversation.remote)
+ })), [defaultTitle, activityTimes])
+ return useConversationStoreSelector(store, selector, sameWorkspaceConversations)
+}
+
+export function sameWorkspaceConversations(a: WorkspaceConversation[], b: WorkspaceConversation[]): boolean {
+ return sameArrayItems(a, b, (left, right) => left.id === right.id && left.projectId === right.projectId &&
+ left.title === right.title && left.time === right.time && left.channel === right.channel)
+}
+
+export function workspaceConversationRows(
+ conversations: readonly WorkspaceConversation[],
+ activities: readonly ConversationActivity[],
+ scope: string | null,
+ filter: WorkspaceFilter,
+ activityTimes?: ReadonlyMap
+): WorkspaceConversationRow[] {
+ const activityById = new Map(activities.map((activity) => [activity.conversationId, activity]))
+ const rows = new Map()
+ for (const conversation of conversations) {
+ if (scope !== null && conversation.projectId !== scope) continue
+ const status = activityById.get(conversation.id)?.status
+ const group = status === 'running' ? 'running' : status && status !== 'completed' ? 'attention' : 'recent'
+ rows.set(conversation.id, { ...conversation, status, group })
+ }
+ // Task activity can arrive before its conversation summary. Navigation already
+ // hydrates that exact ID; preview never needs to fetch the conversation.
+ for (const activity of activities) {
+ if (rows.has(activity.conversationId) || (scope !== null && activity.projectId !== scope)) continue
+ rows.set(activity.conversationId, {
+ id: activity.conversationId, projectId: activity.projectId, title: activity.title,
+ time: activityTimes?.get(activity.conversationId) ?? 0, channel: false, status: activity.status,
+ group: activity.status === 'running' ? 'running' : activity.status === 'completed' ? 'recent' : 'attention'
+ })
+ }
+ const ordered = [...rows.values()].sort((a, b) => b.time - a.time || a.id.localeCompare(b.id))
+ if (filter === 'completed') return ordered.filter((row) => row.status === 'completed').map((row) => ({ ...row, group: 'completed' }))
+ if (filter !== 'all') return ordered.filter((row) => row.group === filter)
+ return [
+ ...ordered.filter((row) => row.group === 'attention'),
+ ...ordered.filter((row) => row.group === 'running'),
+ ...ordered.filter((row) => row.group === 'recent').slice(0, 10)
+ ]
+}
diff --git a/src/renderer/src/workspace-menu.css b/src/renderer/src/workspace-menu.css
new file mode 100644
index 00000000..d1ddca5a
--- /dev/null
+++ b/src/renderer/src/workspace-menu.css
@@ -0,0 +1,271 @@
+.project-switcher__menu.workspace-menu {
+ display: flex;
+ flex-direction: column;
+ height: 640px;
+ max-height: calc(100dvh - 32px);
+ padding: 0;
+ gap: 0;
+ overflow: hidden;
+}
+
+.workspace-menu__header {
+ display: flex;
+ flex: 0 0 auto;
+ align-items: center;
+ justify-content: space-between;
+ padding: var(--space-2) var(--space-4);
+ border-bottom: 1px solid var(--border-default);
+}
+
+.workspace-menu__layout {
+ display: grid;
+ grid-template-columns: minmax(240px, 360px) minmax(0, 1fr);
+ flex: 1;
+ min-height: 0;
+}
+
+.workspace-menu__projects,
+.workspace-menu__activity {
+ display: flex;
+ flex-direction: column;
+ min-width: 0;
+ min-height: 0;
+}
+
+.workspace-menu__projects {
+ background: var(--surface-subtle);
+ border-right: 1px solid var(--border-control);
+}
+
+.workspace-menu__search {
+ box-sizing: border-box;
+ min-width: 0;
+ max-width: calc(100% - 2 * var(--space-3));
+ margin: var(--space-3) var(--space-3) var(--space-2);
+ width: calc(100% - 2 * var(--space-3));
+ flex: 0 0 auto;
+}
+
+.workspace-menu__categories {
+ min-width: 0;
+ padding: 0 var(--space-2) var(--space-2);
+ flex: 0 0 auto;
+ border-bottom: 1px solid var(--border-default);
+}
+
+.workspace-menu__categories .page-tabs {
+ box-sizing: border-box;
+ width: 100%;
+}
+
+.workspace-menu__project-panel {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ min-height: 0;
+ min-width: 0;
+}
+
+.workspace-menu [data-preview="true"] [role="menuitemradio"] {
+ background: var(--accent-subtle);
+ color: var(--accent);
+}
+
+.workspace-menu [role="menuitemradio"][aria-checked="true"]:not(:hover) {
+ background: transparent;
+}
+
+.workspace-menu [data-preview="true"] [role="menuitemradio"][aria-checked="true"]:not(:hover) {
+ background: var(--accent-subtle);
+}
+
+.workspace-menu__project-list,
+.workspace-menu__conversations {
+ flex: 1;
+ min-height: 0;
+ padding: var(--space-2);
+ overflow-y: auto;
+ overscroll-behavior: contain;
+}
+
+.workspace-menu__category {
+ display: block;
+ margin: 0;
+ padding: var(--space-2);
+ color: var(--text-secondary);
+ font-size: var(--font-caption);
+ font-weight: 600;
+}
+
+.workspace-menu__host {
+ width: 100%;
+ cursor: pointer;
+}
+
+.workspace-menu__host[aria-expanded="false"] svg:first-child {
+ transform: rotate(-90deg);
+}
+
+.workspace-menu__toolbar {
+ display: flex;
+ align-items: center;
+ gap: var(--space-2);
+ padding: var(--space-3);
+ border-bottom: 1px solid var(--border-default);
+ flex: 0 0 auto;
+}
+
+.workspace-menu__toolbar .segmented-control {
+ flex: 0 1 auto;
+ min-width: 0;
+ overflow-x: auto;
+}
+
+.workspace-menu__toolbar .segmented-control__option {
+ flex: 0 0 auto;
+ padding-inline: var(--space-2);
+ font-size: var(--font-caption);
+ white-space: nowrap;
+}
+
+.workspace-menu__new {
+ display: flex;
+ align-items: center;
+ gap: var(--space-1);
+ flex: 0 0 auto;
+ margin-left: auto;
+ padding: var(--space-2) var(--space-1);
+ color: var(--accent);
+ background: transparent;
+ font-size: var(--font-caption);
+ white-space: nowrap;
+ border-radius: var(--radius-control);
+}
+
+.workspace-menu__conversation {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ width: 100%;
+ min-width: 0;
+ padding: var(--space-3) var(--space-2);
+ gap: var(--space-3);
+ color: var(--text-primary);
+ background: transparent;
+ border-radius: var(--radius-control);
+ text-align: left;
+}
+
+.workspace-menu__conversation > span {
+ display: grid;
+ min-width: 0;
+ gap: var(--space-1);
+}
+
+.workspace-menu__conversation strong,
+.workspace-menu__conversation small {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.workspace-menu__conversation strong { font-weight: 500; }
+.workspace-menu__conversation small { font-size: var(--font-caption); }
+.workspace-menu__conversation > span > small { color: var(--text-secondary); }
+.workspace-menu__conversation > small { flex: 0 0 auto; }
+.workspace-menu__conversation:hover,
+.workspace-menu__new:not(:disabled):hover { background: var(--accent-subtle); }
+.workspace-menu__new:disabled { opacity: 0.5; cursor: default; }
+.workspace-menu__empty { padding: var(--space-4); color: var(--text-secondary); }
+.workspace-menu__channel-note { padding: var(--space-2) var(--space-3); color: var(--text-secondary); }
+
+.workspace-menu__footer {
+ flex: 0 0 auto;
+ padding: var(--space-2);
+ border-top: 1px solid var(--border-default);
+}
+
+.workspace-menu .project-switcher__menu-item .project-activity__counts {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--space-1) var(--space-2);
+ font-size: var(--font-caption);
+}
+
+.workspace-menu__project-category {
+ margin: var(--space-2) var(--space-2) var(--space-1);
+ padding: var(--space-2) 0 var(--space-1);
+ border-top: 1px solid var(--border-default);
+ color: var(--text-secondary);
+ font-size: var(--font-caption);
+ font-weight: 650;
+}
+
+.workspace-menu__project-list > :first-child .workspace-menu__project-category {
+ margin-top: 0;
+ padding-top: 0;
+ border-top: 0;
+}
+
+.workspace-menu .project-switcher__menu-item {
+ margin-block: var(--space-1);
+}
+
+.workspace-menu .project-switcher__menu-item > [role="menuitemradio"] {
+ box-sizing: border-box;
+ padding-block: var(--space-3);
+}
+
+.workspace-menu .project-switcher__menu-item > [role="menuitemradio"] > span {
+ gap: var(--space-1);
+}
+
+.workspace-menu .project-switcher__menu-item > [role="menuitemradio"] > svg:first-child {
+ color: var(--accent);
+ padding: var(--space-2);
+ background: var(--surface-raised);
+ border-radius: var(--radius-control);
+ box-sizing: content-box;
+}
+
+.project-switcher__trigger.project-switcher__control {
+ box-sizing: border-box;
+ height: 60px;
+ padding-block: var(--space-1);
+}
+
+.project-switcher__activity {
+ color: var(--text-secondary);
+ font-size: var(--font-caption);
+ font-weight: 400;
+}
+
+.project-switcher__control .project-activity__counts {
+ flex-wrap: nowrap;
+ white-space: nowrap;
+}
+
+.project-switcher__control:focus-visible {
+ outline-offset: -2px;
+}
+
+.project-switcher__recovery-feedback {
+ display: block;
+ padding: var(--space-1) var(--space-2);
+}
+
+@media (max-width: 700px) {
+ .workspace-menu__layout { grid-template-columns: minmax(160px, 40%) minmax(0, 1fr); }
+ .workspace-menu__toolbar { padding: var(--space-2); gap: var(--space-1); }
+ .workspace-menu__conversation { flex-direction: column; align-items: flex-start; gap: var(--space-1); }
+ .workspace-menu__conversation > span { max-width: 100%; }
+ .workspace-menu__host { flex-wrap: wrap; }
+ .workspace-menu .project-switcher__menu-settings { opacity: 1; pointer-events: auto; }
+}
+
+@media (max-width: 420px) {
+ .workspace-menu__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
+ .workspace-menu__new { white-space: normal; }
+ .workspace-menu .project-switcher__menu-item > [role="menuitemradio"] { grid-template-columns: minmax(0, 1fr) auto; }
+ .workspace-menu .project-switcher__menu-item > [role="menuitemradio"] > svg:first-child { display: none; }
+}
diff --git a/tests/support/overlay-paths-main.ts b/tests/support/overlay-paths-main.ts
index 3cd4e5ee..5d58bae7 100644
--- a/tests/support/overlay-paths-main.ts
+++ b/tests/support/overlay-paths-main.ts
@@ -25,10 +25,11 @@ app.whenReady().then(async () => {
const database = new AssistantDatabase(join(directory, 'assistant.sqlite'))
database.initialize(directory)
const project = database.listProjects()[0]!
+ const conversationId = randomUUID()
const resultId = randomUUID()
const html = 'Jump to end' + '
'
- database.saveLocalConversations([{ header: { id: randomUUID(), projectId: project.id, title: 'Overlay paths', updatedAt: Date.now() },
+ database.saveLocalConversations([{ header: { id: conversationId, projectId: project.id, title: 'Overlay paths', updatedAt: Date.now() },
messages: [{ id: randomUUID(), role: 'assistant', state: 'complete', createdAt: Date.now(), content: '```html\n' + html + '\n```',
attachments: [{ id: randomUUID(), kind: 'text', name: 'review.pdf', size: 20, preview: 'Saved result', resultId }],
sourceReferences: [{ libraryId: randomUUID(), libraryName: 'Review', documentName: 'Review source', sourceName: 'Fixture',
@@ -155,14 +156,94 @@ app.whenReady().then(async () => {
await key('Escape')
await wait('!document.querySelector(".html-preview-viewer")')
evidence.iframe = true
+ const idleTrigger = await js('document.querySelector(".project-switcher__control").getBoundingClientRect().height')
+ assert.equal(idleTrigger, 60)
+ assert(await js('document.querySelector(".project-switcher__control").matches("button") && document.querySelectorAll(".project-switcher__picker button").length === 1 && !!document.querySelector(".project-switcher__trigger .project-switcher__activity")'))
+ await screenshot('workspace-idle-trigger')
+ database.createTask({ id: randomUUID(), projectId: project.id, conversationId,
+ title: 'Review workspace layout', instructions: 'Layout fixture only', workMode: 'ask', status: 'running' })
+ win.webContents.send(ipcChannels.conversationsChanged)
+ await wait('!!document.querySelector(".project-switcher__control .project-activity__running")')
+ assert.equal(await js('document.querySelector(".project-switcher__control").getBoundingClientRect().height'), idleTrigger)
+ await screenshot('workspace-active-trigger')
+ const workspaceLayouts = []
+ for (const [width, height] of [[1280, 800], [1280, 480], [560, 640]]) {
+ win.setContentSize(width!, height!)
+ await wait(`innerWidth === ${width} && innerHeight === ${height}`)
+ if (width! < 900) {
+ await wait('document.querySelector(".sidebar").inert')
+ await click('.sidebar-toggle')
+ await wait('!document.querySelector(".sidebar").inert')
+ }
+ await js('Promise.all(document.getAnimations().filter(a => a instanceof CSSTransition).map(a => a.finished.catch(() => {})))')
+ for (const theme of ['light', 'dark']) {
+ await js(`document.documentElement.dataset.theme='${theme}'`)
+ await click('.project-switcher__activity')
+ await wait('!!document.querySelector(".workspace-menu")')
+ await js('Promise.all(document.getAnimations().filter(a => a instanceof CSSTransition).map(a => a.finished.catch(() => {})))')
+ const layout = await js<{ bounded: boolean; divider: boolean; compact: boolean; rows: boolean }>(`(() => {
+ const rect = selector => document.querySelector(selector).getBoundingClientRect();
+ const left = rect('.workspace-menu__projects'), input = rect('.workspace-menu__search');
+ const menu = rect('.workspace-menu'), toolbar = rect('.workspace-menu__toolbar');
+ const filters = rect('.workspace-menu__toolbar .segmented-control'), action = rect('.workspace-menu__new');
+ const border = getComputedStyle(document.querySelector('.workspace-menu__projects'));
+ const row = document.querySelector('.workspace-menu [role="menuitemradio"]');
+ const parts = [...row.querySelector('span').children].map(e => e.getBoundingClientRect());
+ return { bounded: input.left >= left.left && input.right <= left.right && menu.left >= 16 && menu.right <= innerWidth - 16 && menu.top >= 16 && menu.bottom <= innerHeight - 16,
+ divider: border.borderRightWidth === '1px' && border.borderRightStyle === 'solid' && border.borderRightColor === getComputedStyle(document.querySelector('.workspace-menu__search')).borderRightColor,
+ compact: toolbar.height < 70 && filters.right <= action.left && Math.abs(filters.top + filters.height / 2 - action.top - action.height / 2) < 2,
+ rows: parts.length >= 3 && parts[0].bottom <= parts[1].top && parts[1].bottom <= parts[2].top };
+ })()`)
+ assert.deepEqual(layout, { bounded: true, divider: true, compact: true, rows: true }, `${width}x${height} ${theme}: ${JSON.stringify(layout)}`)
+ await screenshot(`workspace-${width}x${height}-${theme}`)
+ await key('Escape')
+ await wait('!document.querySelector(".workspace-menu") && document.activeElement.matches(".project-switcher__trigger")')
+ workspaceLayouts.push({ width, height, theme, ...layout })
+ }
+ }
+ evidence.workspaceLayouts = workspaceLayouts
+ evidence.workspaceTriggerHeight = idleTrigger
+ await key('Escape')
win.setContentSize(760, 700)
await wait('document.querySelector(".sidebar").inert')
await click('.sidebar-toggle')
- await click('.project-switcher .icon-button')
+ await click('.project-switcher__trigger')
+ await wait('!!document.querySelector(".workspace-menu")')
+ assert(await js(`(() => {
+ const menu = document.querySelector('.workspace-menu'), r = menu.getBoundingClientRect();
+ return menu.closest('.floating-portal').parentElement === document.querySelector('.sidebar') &&
+ r.left >= 16 && r.right <= innerWidth - 16 && r.top >= 16 && r.bottom <= innerHeight - 16;
+ })()`))
+ await click('.workspace-menu__categories [role="tab"]:last-child')
+ assert(await js('document.querySelectorAll(".workspace-menu [role=menuitemradio]").length === 0'))
+ await click('.workspace-menu__categories [role="tab"]:first-child')
+ assert(await js(`(() => {
+ const tabs = [...document.querySelectorAll('.workspace-menu__categories [role="tab"]')];
+ return tabs.length === 3 && tabs[0].getAttribute('aria-selected') === 'true' &&
+ tabs.every(tab => tab.getBoundingClientRect().top === tabs[0].getBoundingClientRect().top) &&
+ document.querySelectorAll('.workspace-menu [role="menuitemradio"]').length === 1 &&
+ !document.querySelector('.workspace-menu__scope');
+ })()`))
+ evidence.workspaceCategories = true
+ await js('document.querySelector(".workspace-menu [role=menuitemradio]").focus()')
+ await key('Tab')
+ await wait('document.activeElement.matches(".project-switcher__menu-settings")')
+ await js('Promise.all(document.getAnimations().filter(a => a instanceof CSSTransition).map(a => a.finished.catch(() => {})))')
+ assert.equal(await js('getComputedStyle(document.activeElement).opacity'), '1')
+ await click('.project-switcher__menu-settings')
+ await wait('!!document.querySelector(".project-create-card")')
+ await key('Escape')
+ await wait('!document.querySelector(".project-create-card") && document.activeElement.matches(".project-switcher__trigger")')
+ await click('.project-switcher__trigger')
+ await key('Escape')
+ await wait('!document.querySelector(".workspace-menu") && document.activeElement.matches(".project-switcher__trigger")')
+ assert(await js('!document.querySelector(".sidebar").inert'))
+ await click('.project-switcher__trigger')
+ await click('.workspace-menu__footer button')
await wait('!!document.querySelector(".project-create-card") && document.querySelector(".app-shell").inert')
await key('Escape')
await wait('!document.querySelector(".project-create-card")')
- assert(await js('!document.querySelector(".sidebar").inert && document.activeElement.matches(".project-switcher .icon-button")'))
+ assert(await js('!document.querySelector(".sidebar").inert && document.activeElement.matches(".project-switcher__trigger")'))
await key('Escape')
await wait('document.querySelector(".sidebar").inert')
evidence.project = true
{
+ if (event.defaultPrevented) return
+ if (event.key === 'Escape') { event.preventDefault(); event.stopPropagation(); onClose() }
+ if (event.key === 'ArrowRight' && projectListRef.current?.contains(event.target as Node) && rows.length) {
+ event.preventDefault()
+ flushSync(() => setKeyboardConversation(rows[0]!.id))
+ conversationListRef.current?.querySelector('button')?.focus()
+ }
+ if (event.key === 'ArrowLeft' && conversationListRef.current?.contains(event.target as Node)) {
+ event.preventDefault()
+ flushSync(() => setKeyboardProject(scope ?? undefined))
+ const row = Array.from(projectListRef.current?.querySelectorAll('[data-list-window-row]') ?? [])
+ .find((item) => item.dataset.listWindowRow === scope)
+ const target = row?.querySelector('button') ?? categoriesRef.current?.querySelector('[aria-selected="true"]')
+ target?.focus()
+ }
+ }}>
+
+ {t('workspaceMenu.title')}
+
+
+
+
+
+ setQuery(event.target.value)} />
+
+
+
+
+
+ {
+ setCategory(next)
+ if (next === 'allProjects') setScope(null)
+ }} />
+
+
+
+
+ moveFocus(event, 'projects')}>
+ {projectWindow.segments.map((segment) => {
+ if (segment.kind === 'spacer') return
+ const row = projectRows[segment.index]!
+ const previous = projectRows[segment.index - 1]
+ const rowCategory = row.kind === 'host' ? 'remote' : row.project.kind === 'channel' ? 'channels' : row.project.executionSpace.kind === 'ssh' ? 'remote' : 'local'
+ const previousCategory = !previous ? undefined : previous.kind === 'host' ? 'remote' : previous.project.kind === 'channel' ? 'channels' : previous.project.executionSpace.kind === 'ssh' ? 'remote' : 'local'
+ return
+ {
+ if (row.kind === 'project' && event.pointerType !== 'touch' && (event.target as HTMLElement).closest('[role="menuitemradio"]')) setScope(row.project.id)
+ }} onFocus={(event) => {
+ if (row.kind === 'project' && (event.target as HTMLElement).matches('[role="menuitemradio"]')) setScope(row.project.id)
+ }}>
+ {(category === 'allProjects' || query.trim()) && rowCategory !== previousCategory &&
+
+ })}
+ {!projectRows.length && {t(`workspaceMenu.${rowCategory}`)}
} + {row.kind === 'project' ? renderProject(row.project) + : } +{t('workspaceMenu.noProjects')}
} +
+ ({ value, label: t(`workspaceMenu.filters.${value}`) }))} />
+
+
+ {newProject?.kind === 'channel' && {tApp('notices.channelConversationAutomatic')}}
+ moveFocus(event, 'conversations')}>
+ {conversationWindow.segments.map((segment) => {
+ if (segment.kind === 'spacer') return
+ const row = rows[segment.index]!
+ const project = projectById.get(row.projectId ?? '')
+ return
+
+ {(segment.index === 0 || rows[segment.index - 1]?.group !== row.group) &&
+
+ })}
+ {!rows.length && {t(`workspaceMenu.groups.${row.group}`)}
} + +{t('workspaceMenu.noConversations')}
} +Long preview text
'.repeat(80) + '