+
{
+ if (event.key === 'Enter' || event.key === ' ') {
+ event.preventDefault()
+ onToggle?.()
+ }
+ }
+ : undefined
+ }
+ className={cn(
+ 'group flex h-7 select-none items-center gap-1.5 rounded-md px-1.5 py-1 text-muted-foreground transition-colors',
+ isInteractive && 'cursor-pointer hover:bg-accent/60 hover:text-foreground',
+ className
+ )}
+ >
+
{group.state ? (
) : null}
-
+
{group.label}
-
+
{group.threads.length}
diff --git a/src/renderer/src/components/activity/activity-thread-grouping.search-cache.test.ts b/src/renderer/src/components/activity/activity-thread-grouping.search-cache.test.ts
new file mode 100644
index 00000000000..4c5b003eac4
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-grouping.search-cache.test.ts
@@ -0,0 +1,53 @@
+import { describe, expect, it } from 'vitest'
+import {
+ activityThreadMatchesSearchQuery,
+ getThreadSearchTextComputeCount
+} from './activity-thread-grouping'
+import type { AgentPaneThread } from './activity-thread-types'
+import { makeTab, makeWorktree } from './ActivityPrototypePage-test-fixtures'
+
+function makeThread(paneKey: string, paneTitle: string): AgentPaneThread {
+ return {
+ paneKey,
+ tab: makeTab(),
+ worktree: makeWorktree(),
+ repo: null,
+ currentAgentState: null,
+ currentAgentEntry: null,
+ latestEvent: null,
+ latestTimestamp: 1_000,
+ agentType: 'claude',
+ unread: false,
+ paneTitle,
+ responsePreview: 'x'.repeat(2_000),
+ events: []
+ }
+}
+
+describe('activity thread search text cache', () => {
+ it('builds a thread searchable text once per thread identity across keystrokes', () => {
+ const thread = makeThread('tab-1:leaf-1', 'Refactor billing pipeline')
+ const before = getThreadSearchTextComputeCount()
+ // Simulate typing a query letter by letter against the same thread objects.
+ for (const searchQuery of ['r', 're', 'ref', 'refa', 'refac']) {
+ expect(activityThreadMatchesSearchQuery({ thread, searchQuery })).toBe(true)
+ }
+ expect(getThreadSearchTextComputeCount() - before).toBe(1)
+ })
+
+ it('recomputes when thread data changes (new thread identity)', () => {
+ const before = getThreadSearchTextComputeCount()
+ const first = makeThread('tab-1:leaf-1', 'First title')
+ const rebuilt = makeThread('tab-1:leaf-1', 'Second title')
+ expect(activityThreadMatchesSearchQuery({ thread: first, searchQuery: 'first' })).toBe(true)
+ expect(activityThreadMatchesSearchQuery({ thread: rebuilt, searchQuery: 'second' })).toBe(true)
+ expect(getThreadSearchTextComputeCount() - before).toBe(2)
+ })
+
+ it('keeps match semantics: state labels, workspace, and previews still match', () => {
+ const thread = makeThread('tab-1:leaf-1', 'My task')
+ expect(activityThreadMatchesSearchQuery({ thread, searchQuery: 'feature' })).toBe(true)
+ expect(activityThreadMatchesSearchQuery({ thread, searchQuery: 'zzz-no-match' })).toBe(false)
+ expect(activityThreadMatchesSearchQuery({ thread, searchQuery: '' })).toBe(true)
+ })
+})
diff --git a/src/renderer/src/components/activity/activity-thread-grouping.ts b/src/renderer/src/components/activity/activity-thread-grouping.ts
index 1744c0b84f6..0730aa68b5d 100644
--- a/src/renderer/src/components/activity/activity-thread-grouping.ts
+++ b/src/renderer/src/components/activity/activity-thread-grouping.ts
@@ -18,19 +18,23 @@ import type {
AgentPaneThread
} from './activity-thread-types'
+// Attention-needing groups first (interrupted included: it's stopped and awaiting the user) so they're never buried under Working/Done.
const ACTIVITY_STATUS_GROUP_ORDER: ActivityStatusGroupId[] = [
+ 'waiting',
+ 'blocked',
+ 'interrupted',
'working',
'monitoring',
- 'blocked',
- 'waiting',
- 'done',
- 'interrupted'
+ 'done'
]
export function getActivityThreadGroup(
thread: AgentPaneThread,
groupBy: ActivityGroupBy
): { key: string; label: string } {
+ if (groupBy === 'none') {
+ return { key: 'all', label: '' }
+ }
if (groupBy === 'status') {
const state = threadAgentState(thread)
if (!thread.currentAgentState && state === 'done' && thread.latestEvent?.entry.interrupted) {
@@ -59,6 +63,9 @@ export function buildActivityThreadGroups(
threads: AgentPaneThread[],
groupBy: ActivityGroupBy
): ActivityThreadGroup[] {
+ if (groupBy === 'none') {
+ return threads.length > 0 ? [{ key: 'all', label: '', threads }] : []
+ }
const groups: ActivityThreadGroup[] = []
const groupIndexByKey = new Map
()
for (const thread of threads) {
@@ -74,7 +81,7 @@ export function buildActivityThreadGroups(
return groups
}
-function threadStatusGroupId(thread: AgentPaneThread): ActivityStatusGroupId {
+export function threadStatusGroupId(thread: AgentPaneThread): ActivityStatusGroupId {
const state = threadAgentState(thread)
if (!thread.currentAgentState && state === 'done' && thread.latestEvent?.entry.interrupted) {
return 'interrupted'
@@ -118,7 +125,7 @@ export function groupActivityThreadsByStatus(threads: AgentPaneThread[]): Activi
})
}
-function threadSearchText(thread: AgentPaneThread): string {
+function buildThreadSearchText(thread: AgentPaneThread): string {
const latest = thread.latestEvent
const stateLabel = threadAgentStateLabel(thread)
const currentPrompt = thread.currentAgentEntry
@@ -132,6 +139,28 @@ function threadSearchText(thread: AgentPaneThread): string {
return `${thread.paneTitle} ${getActivityThreadWorkspaceTitle(thread.worktree)} ${thread.worktree.branch ?? ''} ${thread.repo?.displayName ?? ''} ${formatAgentTypeLabel(thread.agentType)} ${stateLabel} ${currentPrompt} ${rawCurrentPrompt} ${currentSummary} ${thread.responsePreview} ${latestEventText}`.toLowerCase()
}
+// Why: thread objects are rebuilt only when the underlying store data changes, so their
+// identity is a correct cache key; without this every keystroke re-lowercases a large
+// string per thread. WeakMap so dropped threads release their text.
+const threadSearchTextCache = new WeakMap()
+let threadSearchTextComputeCount = 0
+
+/** Test hook: how many times search text was actually (re)built. */
+export function getThreadSearchTextComputeCount(): number {
+ return threadSearchTextComputeCount
+}
+
+function threadSearchText(thread: AgentPaneThread): string {
+ const cached = threadSearchTextCache.get(thread)
+ if (cached !== undefined) {
+ return cached
+ }
+ threadSearchTextComputeCount += 1
+ const text = buildThreadSearchText(thread)
+ threadSearchTextCache.set(thread, text)
+ return text
+}
+
export const ACTIVITY_SEARCH_QUERY_MAX_BYTES = 2 * 1024
export function isActivitySearchQueryTooLarge(
diff --git a/src/renderer/src/components/activity/activity-thread-hover-card-summary.tsx b/src/renderer/src/components/activity/activity-thread-hover-card-summary.tsx
new file mode 100644
index 00000000000..37b0658f0d9
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-hover-card-summary.tsx
@@ -0,0 +1,230 @@
+import React, { useCallback, useMemo } from 'react'
+import { Cloud, Copy, FolderGit2, GitBranch, Laptop, LocateFixed, Server } from 'lucide-react'
+import { toast } from 'sonner'
+import { useAppStore } from '@/store'
+import { RepoBadgeMark } from '@/components/repo/RepoBadgeLabel'
+import { AgentIcon } from '@/lib/agent-catalog'
+import { agentTypeToIconAgent, formatAgentTypeLabel } from '@/lib/agent-status'
+import { getWorktreeGitIdentityDisplay } from '@/lib/worktree-git-identity-display'
+import { jumpToWorktreeFromSidebar } from '@/lib/worktree-jump-navigation'
+import { translate } from '@/i18n/i18n'
+import { cn } from '@/lib/utils'
+import {
+ getExecutionHostLabel,
+ getWorktreeExecutionHostId,
+ parseExecutionHostId
+} from '../../../../shared/execution-host'
+import type { GlobalSettings } from '../../../../shared/global-settings-types'
+import { getHostDisplayLabelOverrides } from '../../../../shared/host-setting-overrides'
+import CommentMarkdown from '../sidebar/CommentMarkdown'
+import { DetailHeader, MetadataActionIcon } from '../sidebar/WorktreeCardMetadataControls'
+import {
+ WorktreeCardDetailSection,
+ WorktreeCardDetailSectionContent
+} from '../sidebar/WorktreeCardDetailSection'
+import { EventTime, ThreadAgentStateIndicator } from './activity-thread-controls'
+import { activityThreadRowCopy, threadAgentStateLabel } from './activity-thread-presentation'
+import { getActivityThreadWorkspaceTitle } from '@/lib/activity-thread-display'
+import type { AgentPaneThread } from './activity-thread-types'
+
+export function ActivityThreadHoverCardSummary({
+ thread,
+ settings,
+ onJumpToWorkspace,
+ canJumpToWorkspace
+}: {
+ thread: AgentPaneThread
+ settings: GlobalSettings | null | undefined
+ onJumpToWorkspace?: (event: React.MouseEvent) => void
+ canJumpToWorkspace?: boolean
+}): React.JSX.Element {
+ const { worktree, repo } = thread
+ const sshTargetLabels = useAppStore((s) => s.sshTargetLabels)
+ const runtimeEnvironments = useAppStore((s) => s.runtimeEnvironments)
+ const executionHostId = getWorktreeExecutionHostId(worktree, repo ?? undefined)
+ const parsedHost = parseExecutionHostId(executionHostId)
+ const hostLabelOverrides = useMemo(() => getHostDisplayLabelOverrides(settings), [settings])
+ const hostDisplayLabel = useMemo(() => {
+ const override = hostLabelOverrides.get(executionHostId)
+ if (override) {
+ return override
+ }
+ if (parsedHost?.kind === 'runtime') {
+ const environment = runtimeEnvironments.find((entry) => entry.id === parsedHost.environmentId)
+ if (environment?.name) {
+ return environment.name
+ }
+ }
+ if (parsedHost?.kind === 'ssh') {
+ const target = sshTargetLabels.get(parsedHost.targetId)
+ if (target) {
+ return target
+ }
+ }
+ return getExecutionHostLabel(executionHostId)
+ }, [executionHostId, hostLabelOverrides, parsedHost, runtimeEnvironments, sshTargetLabels])
+ const branchIdentityDisplay = useMemo(() => getWorktreeGitIdentityDisplay(worktree), [worktree])
+ const { taskTitle, needsAttention } = activityThreadRowCopy(thread)
+ const workspaceTitle = getActivityThreadWorkspaceTitle(worktree)
+ const copyPathLabel = translate(
+ 'auto.components.activity.ActivityThreadHoverCard.copyPath',
+ 'Copy path'
+ )
+
+ const isKnownWorktree = useAppStore((s) =>
+ Boolean(s.getKnownWorktreeById(worktree.id, executionHostId))
+ )
+ const canJump = canJumpToWorkspace ?? isKnownWorktree
+
+ const handleJumpToWorkspace = useCallback(
+ (event: React.MouseEvent) => {
+ event.stopPropagation()
+ if (onJumpToWorkspace) {
+ onJumpToWorkspace(event)
+ } else {
+ const state = useAppStore.getState()
+ if (state.getKnownWorktreeById(worktree.id, executionHostId)) {
+ state.acknowledgeAgents([thread.paneKey])
+ jumpToWorktreeFromSidebar(worktree.id, { executionHostId })
+ }
+ }
+ },
+ [executionHostId, onJumpToWorkspace, thread.paneKey, worktree.id]
+ )
+
+ const handleCopyPath = useCallback(async () => {
+ if (!worktree.path) {
+ return
+ }
+ try {
+ await window.api.ui.writeClipboardText(worktree.path)
+ toast.success(
+ translate(
+ 'auto.components.activity.ActivityThreadHoverCard.pathCopied',
+ 'Path copied to clipboard'
+ )
+ )
+ } catch {
+ toast.error(
+ translate(
+ 'auto.components.activity.ActivityThreadHoverCard.copyPathFailed',
+ 'Failed to copy path'
+ )
+ )
+ }
+ }, [worktree.path])
+
+ return (
+ <>
+
+
+
+
+
+
+ {formatAgentTypeLabel(thread.agentType)}
+
+
+
+
+ {threadAgentStateLabel(thread)}
+
+ •
+
+
+
+
+ {taskTitle}
+
+
+ {thread.responsePreview ? (
+
+
+ ) : null}
+
+
+
+ ) : null
+ }
+ />
+
+
+ {repo ? (
+
+
+ {repo.displayName}
+
+
+ ) : null}
+
+ {workspaceTitle}
+
+
+
+ {branchIdentityDisplay.kind === 'branch'
+ ? branchIdentityDisplay.branchName
+ : branchIdentityDisplay.sidebarLabel}
+
+
+ ) : null}
+
+
+ {parsedHost?.kind === 'runtime' ? (
+ {hostDisplayLabel}
+
+
+ {worktree.path ? (
+
+
+ {worktree.path}
+
+
+
+
+ ) : null}
+
+
+
+ )
+}
diff --git a/src/renderer/src/components/activity/activity-thread-hover-card.test.tsx b/src/renderer/src/components/activity/activity-thread-hover-card.test.tsx
new file mode 100644
index 00000000000..0e604a16098
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-hover-card.test.tsx
@@ -0,0 +1,238 @@
+// @vitest-environment happy-dom
+
+import React, { act, type ReactElement, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { TooltipProvider } from '@/components/ui/tooltip'
+import type { Worktree } from '../../../../shared/worktree/types'
+import { ActivityThreadHoverCard } from './activity-thread-hover-card'
+import { ActivityThreadRow } from './activity-thread-row'
+import type { AgentPaneThread } from './activity-thread-types'
+import { makeRepo, makeTab, makeWorktree } from './ActivityPrototypePage-test-fixtures'
+
+vi.mock('@/components/ui/hover-card', () => ({
+ HoverCard: ({
+ children,
+ onOpenChange
+ }: {
+ children: ReactNode
+ onOpenChange?: (open: boolean) => void
+ }) => {
+ React.useEffect(() => onOpenChange?.(true), [onOpenChange])
+ return <>{children}
+ },
+ HoverCardContent: ({ children, className }: { children: ReactNode; className?: string }) => (
+
+ {children}
+
+ ),
+ HoverCardTrigger: ({ children }: { children: ReactNode }) => <>{children}
+}))
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true
+
+function createTestThread(overrides: Partial = {}): AgentPaneThread {
+ const repo = makeRepo()
+ const worktree: Worktree = {
+ ...makeWorktree(),
+ displayName: 'm4air-audit',
+ branch: 'feat/m4air-performance',
+ path: '/Users/test/projects/orca/worktrees/m4air-audit',
+ comment: 'Notes for performance audit',
+ hostId: 'runtime:m4air-env-id' as const
+ }
+ const tab = makeTab()
+
+ return {
+ paneKey: 'tab-1:leaf-1',
+ tab,
+ worktree,
+ repo,
+ agentType: 'claude',
+ latestEvent: null,
+ currentAgentState: 'working',
+ currentAgentEntry: null,
+ events: [],
+ unread: false,
+ paneTitle: 'Audit current HEAD on m4air environment',
+ responsePreview: 'Auditing terminal PTY and IME bug categories...',
+ latestTimestamp: 1700000000000,
+ ...overrides
+ }
+}
+
+function Harness({
+ thread,
+ selected = false,
+ onSelect = vi.fn(),
+ onJump = vi.fn(),
+ onMarkRead = vi.fn(),
+ onMarkUnread = vi.fn()
+}: {
+ thread: AgentPaneThread
+ selected?: boolean
+ onSelect?: () => void
+ onJump?: () => void
+ onMarkRead?: () => void
+ onMarkUnread?: () => void
+}): ReactElement {
+ return (
+
+
+ )
+}
+
+describe('ActivityThreadHoverCard and ActivityThreadRow', () => {
+ let container: HTMLDivElement
+ let root: Root
+
+ beforeEach(() => {
+ container = document.createElement('div')
+ document.body.appendChild(container)
+ root = createRoot(container)
+ })
+
+ afterEach(() => {
+ act(() => root.unmount())
+ container.remove()
+ document.body.replaceChildren()
+ })
+
+ it('renders the thread row with task title and workspace label', async () => {
+ const thread = createTestThread()
+
+ await act(async () => {
+ root.render((
+ 'button[aria-label="Mark thread as read"]'
+ )
+ expect(markReadButton).not.toBeNull()
+
+ act(() => {
+ markReadButton?.click()
+ })
+
+ expect(onMarkRead).toHaveBeenCalledWith(thread)
+ expect(onSelect).not.toHaveBeenCalled()
+ })
+
+ it('renders hover card content with workspace info, host, task details, and notes', async () => {
+ const thread = createTestThread({
+ worktree: {
+ ...makeWorktree(),
+ displayName: 'm4air-audit',
+ branch: 'feat/m4air-performance',
+ path: '/Users/test/projects/orca/worktrees/m4air-audit',
+ comment: 'Performance investigation notes',
+ hostId: 'runtime:m4air-env' as const
+ }
+ })
+
+ await act(async () => {
+ root.render(
+
+
+ Hover Target
+
+
+ )
+ })
+
+ const content = container.querySelector('[data-testid="hover-card-content"]')?.textContent ?? ''
+
+ // Workspace & Host info
+ expect(content).toContain('Workspace')
+ expect(content).toContain('m4air-audit')
+ expect(content).toContain('feat/m4air-performance')
+ expect(content).toContain('/Users/test/projects/orca/worktrees/m4air-audit')
+
+ // Agent & Task details
+ expect(content).toContain('Claude')
+ expect(content).toContain('Audit current HEAD on m4air environment')
+ expect(content).toContain('Auditing terminal PTY and IME bug categories...')
+
+ // Notes
+ expect(content).toContain('Notes')
+ expect(content).toContain('Performance investigation notes')
+ })
+
+ it('allows clicking row while preventing inner hover interactions from bubbling', async () => {
+ const onSelect = vi.fn()
+ const thread = createTestThread()
+
+ await act(async () => {
+ root.render(('[data-worktree-card-surface="true"]')
+ expect(card).not.toBeNull()
+
+ await act(async () => {
+ card?.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ })
+
+ expect(onSelect).toHaveBeenCalledTimes(1)
+ })
+
+ it('triggers jump to workspace from the hover card crosshair locator button', async () => {
+ const onJump = vi.fn()
+ const thread = createTestThread()
+
+ await act(async () => {
+ root.render(
+
+
+ Hover Target
+
+
+ )
+ })
+
+ const jumpButton = container.querySelector(
+ 'button[aria-label="Jump to workspace"]'
+ )
+ expect(jumpButton).not.toBeNull()
+
+ act(() => {
+ jumpButton?.click()
+ })
+
+ expect(onJump).toHaveBeenCalledWith(thread)
+ })
+})
diff --git a/src/renderer/src/components/activity/activity-thread-hover-card.tsx b/src/renderer/src/components/activity/activity-thread-hover-card.tsx
new file mode 100644
index 00000000000..9bb4ed83887
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-hover-card.tsx
@@ -0,0 +1,407 @@
+import React, { useCallback } from 'react'
+import { ExternalLink, MonitorUp, Pencil, StickyNote } from 'lucide-react'
+import { toast } from 'sonner'
+import { Badge } from '@/components/ui/badge'
+import { HoverCard, HoverCardContent, HoverCardTrigger } from '@/components/ui/hover-card'
+import { LinearIcon } from '@/components/icons/LinearIcon'
+import { JiraIcon } from '@/components/icons/JiraIcon'
+import { SelectedTextCopyMenu } from '@/components/SelectedTextCopyMenu'
+import { translate } from '@/i18n/i18n'
+import CommentMarkdown from '../sidebar/CommentMarkdown'
+import { DetailHeader, MetadataActionIcon } from '../sidebar/WorktreeCardMetadataControls'
+import {
+ WorktreeCardDetailSection,
+ WorktreeCardDetailSectionContent
+} from '../sidebar/WorktreeCardDetailSection'
+import { LinearStateBadge } from '../sidebar/WorktreeCardMetadataStatusBadges'
+import { WorktreeCardIssueDetailSection } from '../sidebar/WorktreeCardIssueDetailSection'
+import { WorktreeCardReviewDetailSection } from '../sidebar/WorktreeCardReviewDetailSection'
+import { WorktreeCardAutomationDetailSection } from '../sidebar/WorktreeCardAutomationDetailSection'
+import { WorktreeCardCliDetailSection } from '../sidebar/WorktreeCardCliDetailSection'
+import { WorktreeCardPortsDetails } from '../sidebar/WorktreeCardPorts'
+import { WORKTREE_NATIVE_CONTEXT_MENU_ATTR } from '../sidebar/WorktreeContextMenu'
+import { useWorktreeCardDetailsHoverControl } from '../sidebar/worktree-card-details-hover-state'
+import { useWorktreeCardFoundation } from '../sidebar/use-worktree-card-foundation'
+import { useWorktreeCardReviewDetails } from '../sidebar/use-worktree-card-review-details'
+import { useWorktreeCardLinkedDetails } from '../sidebar/use-worktree-card-linked-details'
+import { useWorktreeCardLifecycleEffects } from '../sidebar/use-worktree-card-lifecycle-effects'
+import { useWorktreeCardSecondaryDetails } from '../sidebar/use-worktree-card-secondary-details'
+import { getReviewLabel } from '../sidebar/worktree-review-helpers'
+import { ActivityThreadHoverCardSummary } from './activity-thread-hover-card-summary'
+import type { AgentPaneThread } from './activity-thread-types'
+
+export type ActivityThreadHoverCardProps = {
+ thread: AgentPaneThread
+ children: React.ReactElement
+ openDelay?: number
+ closeDelay?: number
+ onJumpToWorkspace?: (thread: AgentPaneThread) => void
+ canJumpToWorkspace?: boolean
+}
+
+export function ActivityThreadHoverCard({
+ thread,
+ children,
+ openDelay = 200,
+ closeDelay = 120,
+ onJumpToWorkspace,
+ canJumpToWorkspace
+}: ActivityThreadHoverCardProps): React.JSX.Element {
+ const detailsHoverControl = useWorktreeCardDetailsHoverControl()
+
+ return (
+
+ {children}
+ {detailsHoverControl.hoverOpen ? (
+
+ )
+}
+
+function ActivityThreadHoverCardContent({
+ thread,
+ detailsHoverControl,
+ onJumpToWorkspace,
+ canJumpToWorkspace
+}: {
+ thread: AgentPaneThread
+ detailsHoverControl: ReturnType
+ onJumpToWorkspace?: (thread: AgentPaneThread) => void
+ canJumpToWorkspace?: boolean
+}): React.JSX.Element {
+ const { worktree, repo } = thread
+ const foundation = useWorktreeCardFoundation({ worktree, repo: repo ?? undefined })
+ const review = useWorktreeCardReviewDetails({
+ worktree,
+ repo: repo ?? undefined,
+ settings: foundation.settings,
+ projectGroups: foundation.projectGroups,
+ cardProps: foundation.cardProps,
+ newCardStyle: foundation.newCardStyle
+ })
+ const linked = useWorktreeCardLinkedDetails({
+ worktree,
+ newCardStyle: foundation.newCardStyle,
+ deleteState: foundation.deleteState,
+ branch: review.branch,
+ issueEntry: review.issueEntry,
+ linearIssueEntry: review.linearIssueEntry,
+ linearIssueFallbackEntry: review.linearIssueFallbackEntry,
+ prDisplay: review.prDisplay
+ })
+
+ const hoverDetailsOpen = detailsHoverControl.hoverOpen
+
+ useWorktreeCardLifecycleEffects({
+ worktree,
+ repo: repo ?? undefined,
+ isFolder: review.isFolder,
+ hostedReviewCacheKey: review.hostedReviewCacheKey,
+ cachedBranchFallbackGitHubPRNumber: review.cachedBranchFallbackGitHubPRNumber,
+ linkedGitLabMR: review.linkedGitLabMR,
+ linkedBitbucketPR: review.linkedBitbucketPR,
+ linkedAzureDevOpsPR: review.linkedAzureDevOpsPR,
+ linkedGiteaPR: review.linkedGiteaPR,
+ branch: review.branch,
+ fetchHostedReviewForBranch: foundation.fetchHostedReviewForBranch,
+ shouldRefreshHostedReview: false,
+ newCardStyle: true,
+ hoverDetailsOpen,
+ showIssue: true,
+ issueCacheKey: review.issueCacheKey,
+ fetchIssue: foundation.fetchIssue,
+ showLinearIssue: true,
+ fetchLinearIssue: foundation.fetchLinearIssue
+ })
+
+ const secondary = useWorktreeCardSecondaryDetails({
+ worktree,
+ repo: repo ?? undefined,
+ statusPrDisplay: null,
+ showStatus: true,
+ showIssue: true,
+ showLinearIssue: true,
+ showJiraIssue: true,
+ showPR: true,
+ showAutomation: true,
+ showCli: true,
+ showComment: true,
+ showPorts: true,
+ issueDisplay: linked.issueDisplay,
+ linearIssue: linked.linearIssue,
+ linearIssueDisplay: linked.linearIssueDisplay,
+ jiraIssueDisplay: linked.jiraIssueDisplay,
+ prDisplay: review.prDisplay,
+ linkedGitLabMR: review.linkedGitLabMR,
+ linkedBitbucketPR: review.linkedBitbucketPR,
+ linkedAzureDevOpsPR: review.linkedAzureDevOpsPR,
+ linkedGiteaPR: review.linkedGiteaPR,
+ cardProps: foundation.cardProps,
+ newCardStyle: foundation.newCardStyle,
+ compactCards: foundation.compactCards,
+ agentActivityDisplayMode: foundation.agentActivityDisplayMode,
+ workspacePorts: foundation.workspacePorts,
+ openTaskPage: foundation.openTaskPage,
+ updateWorktreeMeta: foundation.updateWorktreeMeta,
+ settings: foundation.settings
+ })
+
+ const copyLinkedWorkItemLink = useCallback(async (url: string, label: string) => {
+ try {
+ await window.api.ui.writeClipboardText(url)
+ toast.success(
+ translate('auto.components.sidebar.WorktreeCardMeta.copyLinkSuccess', '{{value0}} copied', {
+ value0: label
+ })
+ )
+ } catch {
+ toast.error(
+ translate('auto.components.sidebar.WorktreeCardMeta.copyLinkFailure', 'Failed to copy link')
+ )
+ }
+ }, [])
+
+ const handleCopyIssueLink = useCallback(() => {
+ if (!secondary.hoverIssue?.url) {
+ return
+ }
+ detailsHoverControl.closeHover()
+ void copyLinkedWorkItemLink(
+ secondary.hoverIssue.url,
+ translate('auto.components.sidebar.WorktreeCardMeta.issueLinkLabel', 'Issue link')
+ )
+ }, [copyLinkedWorkItemLink, detailsHoverControl, secondary.hoverIssue?.url])
+
+ const handleCopyReviewLink = useCallback(() => {
+ if (!secondary.hoverReview?.url) {
+ return
+ }
+ void copyLinkedWorkItemLink(
+ secondary.hoverReview.url,
+ translate('auto.components.sidebar.WorktreeCardMeta.reviewLinkLabel', '{{value0}} link', {
+ value0: getReviewLabel(secondary.hoverReview)
+ })
+ )
+ }, [copyLinkedWorkItemLink, secondary.hoverReview])
+
+ const dismissAndRun = useCallback(
+ (handler: ((event: React.MouseEvent) => void) | undefined) => (event: React.MouseEvent) => {
+ detailsHoverControl.closeHover()
+ handler?.(event)
+ },
+ [detailsHoverControl]
+ )
+
+ return (
+ event.stopPropagation()}
+ onDoubleClick={(event) => event.stopPropagation()}
+ >
+
+ onJumpToWorkspace(thread)) : undefined
+ }
+ canJumpToWorkspace={canJumpToWorkspace}
+ />
+
+ {/* GitHub / GitLab Issue */}
+ {
+ detailsHoverControl.closeHover()
+ secondary.handleOpenIssueInBrowser(url)
+ }
+ : undefined
+ }
+ />
+
+ {/* Linear Issue */}
+ {secondary.hoverLinearIssue && (
+
+
+
+ )}
+ {secondary.hoverLinearIssue.url && (
+
+
+ )}
+
+ }
+ />
+
+
+ {secondary.hoverLinearIssue.title}
+
+ {((secondary.hoverLinearIssue.labels &&
+ secondary.hoverLinearIssue.labels.length > 0) ||
+ secondary.hoverLinearIssue.stateName) && (
+
+ {secondary.hoverLinearIssue.stateName && (
+
+ {label}
+
+ ))}
+
+ )}
+
+
+ )}
+
+ {/* Jira Issue */}
+ {secondary.hoverJiraIssue && (
+
+
+
+ }
+ />
+
+
+ {secondary.hoverJiraIssue.title}
+
+
+
+ )}
+
+ {/* Pull Request / Review */}
+
+
+
+ }
+ />
+
+
+
+ )}
+
+ {/* Ports */}
+ {foundation.workspacePorts.length > 0 && (
+
+
+ )
+}
diff --git a/src/renderer/src/components/activity/activity-thread-list-pane-collapsible.test.tsx b/src/renderer/src/components/activity/activity-thread-list-pane-collapsible.test.tsx
new file mode 100644
index 00000000000..6db25785dc6
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-list-pane-collapsible.test.tsx
@@ -0,0 +1,292 @@
+// @vitest-environment happy-dom
+
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { TooltipProvider } from '@/components/ui/tooltip'
+import { ActivityStatusGroupHeader } from './activity-thread-controls'
+import { ActivityThreadListPane } from './activity-thread-list-pane'
+import type { ActivityThreadGroup, AgentPaneThread } from './activity-thread-types'
+import { makeTab, makeWorktree } from './ActivityPrototypePage-test-fixtures'
+
+globalThis.IS_REACT_ACT_ENVIRONMENT = true
+
+const mockThread: AgentPaneThread = {
+ paneKey: 'tab-1:agent-1',
+ tab: makeTab(),
+ worktree: makeWorktree(),
+ repo: null,
+ currentAgentState: null,
+ currentAgentEntry: null,
+ latestEvent: null,
+ latestTimestamp: 1000,
+ agentType: 'claude',
+ unread: false,
+ paneTitle: 'Test agent',
+ responsePreview: 'Done testing',
+ events: []
+}
+
+const mockGroup: ActivityThreadGroup = {
+ key: 'done',
+ label: 'Done',
+ state: 'done',
+ threads: [mockThread]
+}
+
+describe('ActivityStatusGroupHeader', () => {
+ let container: HTMLDivElement
+ let root: Root
+
+ beforeEach(() => {
+ container = document.createElement('div')
+ document.body.appendChild(container)
+ root = createRoot(container)
+ })
+
+ afterEach(() => {
+ act(() => root.unmount())
+ container.remove()
+ document.body.replaceChildren()
+ })
+
+ it('renders group label, count, and expanded state', () => {
+ const onToggle = vi.fn()
+ act(() => {
+ root.render(
+
+
+ )
+ })
+
+ const header = container.querySelector('[role="button"]')
+ expect(header).not.toBeNull()
+ expect(header?.getAttribute('aria-expanded')).toBe('true')
+ expect(header?.textContent).toContain('Done')
+ expect(header?.textContent).toContain('1')
+ })
+
+ it('triggers onToggle on click and on keydown (Enter / Space)', () => {
+ const onToggle = vi.fn()
+ act(() => {
+ root.render(
+
+
+ )
+ })
+
+ const header = container.querySelector('[role="button"]') as HTMLElement
+ act(() => {
+ header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ })
+ expect(onToggle).toHaveBeenCalledTimes(1)
+
+ act(() => {
+ header.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true }))
+ })
+ expect(onToggle).toHaveBeenCalledTimes(2)
+
+ act(() => {
+ header.dispatchEvent(new KeyboardEvent('keydown', { key: ' ', bubbles: true }))
+ })
+ expect(onToggle).toHaveBeenCalledTimes(3)
+ })
+
+ it('renders collapsed state with aria-expanded false', () => {
+ const onToggle = vi.fn()
+ act(() => {
+ root.render(
+
+
+ )
+ })
+
+ const header = container.querySelector('[role="button"]')
+ expect(header?.getAttribute('aria-expanded')).toBe('false')
+ })
+
+ it('supports custom className and uses accessible contrast tokens without hardcoded white background', () => {
+ act(() => {
+ root.render(
+
+
+ )
+ })
+
+ const header = container.querySelector('div')
+ expect(header?.className).toContain('custom-header-class')
+ expect(header?.className).not.toContain('bg-background/95')
+ })
+})
+
+describe('ActivityThreadListPane collapsible sections', () => {
+ let container: HTMLDivElement
+ let root: Root
+
+ beforeEach(() => {
+ container = document.createElement('div')
+ document.body.appendChild(container)
+ root = createRoot(container)
+ })
+
+ afterEach(() => {
+ act(() => root.unmount())
+ container.remove()
+ document.body.replaceChildren()
+ })
+
+ it('toggles thread visibility when header is clicked in uncontrolled mode', () => {
+ const inputRef = { current: null }
+ act(() => {
+ root.render(
+
+ true}
+ showFilterControls={false}
+ showOptionsMenu={false}
+ />
+
+ )
+ })
+
+ // Initially open: thread row should be visible
+ expect(container.textContent).toContain('Test agent')
+
+ // Click header to collapse
+ const header = container.querySelector('[role="button"]') as HTMLElement
+ act(() => {
+ header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ })
+
+ // Thread row should now be hidden
+ expect(container.textContent).not.toContain('Test agent')
+ expect(header.getAttribute('aria-expanded')).toBe('false')
+
+ // Click header again to re-expand
+ act(() => {
+ header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ })
+
+ expect(container.textContent).toContain('Test agent')
+ expect(header.getAttribute('aria-expanded')).toBe('true')
+ })
+
+ it('respects controlled collapsedGroupKeys and invokes onToggleGroupCollapse', () => {
+ const inputRef = { current: null }
+ const onToggleGroup = vi.fn()
+ act(() => {
+ root.render(
+
+ true}
+ showFilterControls={false}
+ showOptionsMenu={false}
+ collapsedGroupKeys={new Set(['done'])}
+ onToggleGroupCollapse={onToggleGroup}
+ />
+
+ )
+ })
+
+ // Controlled as collapsed: thread row should not be rendered
+ expect(container.textContent).not.toContain('Test agent')
+
+ // Click header
+ const header = container.querySelector('[role="button"]') as HTMLElement
+ act(() => {
+ header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ })
+
+ expect(onToggleGroup).toHaveBeenCalledWith('done')
+ })
+
+ it('keeps mark-unread enabled for the thread whose terminal pane is selected', () => {
+ const inputRef = { current: null }
+ const onMarkThreadUnread = vi.fn()
+ act(() => {
+ root.render(
+
+ true}
+ allowMarkUnreadWhenSelected
+ showFilterControls={false}
+ showOptionsMenu={false}
+ />
+
+ )
+ })
+
+ const markUnreadButton = container.querySelector(
+ 'button[aria-label="Mark thread unread"]'
+ ) as HTMLButtonElement | null
+ expect(markUnreadButton).not.toBeNull()
+ expect(markUnreadButton?.disabled).toBe(false)
+
+ act(() => {
+ markUnreadButton?.click()
+ })
+ expect(onMarkThreadUnread).toHaveBeenCalledWith(mockThread)
+ })
+})
diff --git a/src/renderer/src/components/activity/activity-thread-list-pane.tsx b/src/renderer/src/components/activity/activity-thread-list-pane.tsx
index 4411d385e0b..9c2beee6e0c 100644
--- a/src/renderer/src/components/activity/activity-thread-list-pane.tsx
+++ b/src/renderer/src/components/activity/activity-thread-list-pane.tsx
@@ -1,19 +1,29 @@
-import React from 'react'
-import { BellDot, Search } from 'lucide-react'
-import { Input } from '@/components/ui/input'
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
import {
- Select,
- SelectContent,
- SelectItem,
- SelectTrigger,
- SelectValue
-} from '@/components/ui/select'
-import { Toggle } from '@/components/ui/toggle'
-import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+ defaultRangeExtractor,
+ measureElement as measureVirtualElementSize,
+ observeElementRect,
+ useVirtualizer,
+ type Range
+} from '@tanstack/react-virtual'
import { cn } from '@/lib/utils'
import { translate } from '@/i18n/i18n'
-import { ActivityStatusGroupHeader, ActivityThreadOptionsMenu } from './activity-thread-controls'
-import { ActivityThreadRow } from './activity-thread-row'
+import { ActivityThreadListToolbar } from './activity-thread-list-toolbar'
+import {
+ getActiveStickyHeaderIndex,
+ getActiveStickyHeaderIndexForScroll,
+ getPreviousStickyHeaderIndex
+} from '../sidebar/worktree-list/viewport/virtual-rows'
+import { ActivityThreadVirtualRow } from './activity-thread-virtual-row'
+import { ActivityThreadListResizeHandle } from './activity-thread-list-resize-handle'
+import {
+ buildActivityVirtualItems,
+ estimateActivityVirtualItemSize,
+ findActivityThreadItemIndex,
+ getActivityHeaderItemIndexes,
+ getActivityVirtualItemKey
+} from './activity-thread-virtual-items'
+import { ActivityThreadCollapseContext } from './activity-thread-collapse-context'
import type {
ActivityGroupBy,
ActivityThreadGroup,
@@ -21,6 +31,16 @@ import type {
ThreadReadFilter
} from './activity-thread-types'
+const ZERO_RECT_FALLBACK_VIEWPORT = { width: 320, height: 600 }
+const observeActivityListRect: typeof observeElementRect = (instance, cb) =>
+ observeElementRect(instance, (rect) => {
+ cb(rect.height > 0 ? rect : ZERO_RECT_FALLBACK_VIEWPORT)
+ })
+
+// A saved offset the content cannot contain yet is restored once it can; past
+// this window it is stale (the list shrank) and restoring would yank the viewport.
+const DEFERRED_SCROLL_RESTORE_WINDOW_MS = 3000
+
export function ActivityThreadListPane({
threadListRef,
threadListWidth,
@@ -32,21 +52,34 @@ export function ActivityThreadListPane({
readFilter,
onReadFilterChange,
compactMode,
+ showChildAgents,
hasUnreadThreads,
onCompactModeChange,
+ onShowChildAgentsChange,
onMarkAllThreadsRead,
+ hasCompletedThreads,
+ onClearCompleted,
visibleThreadGroups,
visibleThreadCount,
selectedPaneKey,
onSelectThread,
onJumpToWorkspace,
+ onMarkThreadRead,
onMarkThreadUnread,
canJumpToWorkspace,
+ allowMarkUnreadWhenSelected = false,
+ showJumpAction = true,
isThreadListResizing,
- onResizeStart
+ onResizeStart,
+ showFilterControls = true,
+ showOptionsMenu = true,
+ scopeFilterRow,
+ collapsedGroupKeys,
+ onToggleGroupCollapse,
+ scrollTopRef
}: {
- threadListRef: React.RefObject
- threadListWidth: number
+ threadListRef?: React.RefObject
+ threadListWidth?: number
activityFilterInputRef: React.RefObject
query: string
onQueryChange: (query: string) => void
@@ -55,163 +88,308 @@ export function ActivityThreadListPane({
readFilter: ThreadReadFilter
onReadFilterChange: (readFilter: ThreadReadFilter) => void
compactMode: boolean
+ showChildAgents?: boolean
hasUnreadThreads: boolean
onCompactModeChange: (compactMode: boolean) => void
- onMarkAllThreadsRead: () => void
+ onShowChildAgentsChange?: (showChildAgents: boolean) => void
+ onMarkAllThreadsRead?: () => void
+ hasCompletedThreads?: boolean
+ onClearCompleted?: () => void
visibleThreadGroups: ActivityThreadGroup[]
visibleThreadCount: number
selectedPaneKey: string | null
onSelectThread: (thread: AgentPaneThread) => void
onJumpToWorkspace: (thread: AgentPaneThread) => void
+ onMarkThreadRead: (thread: AgentPaneThread) => void
onMarkThreadUnread: (thread: AgentPaneThread) => void
canJumpToWorkspace: (thread: AgentPaneThread) => boolean
- isThreadListResizing: boolean
- onResizeStart: React.MouseEventHandler
+ allowMarkUnreadWhenSelected?: boolean
+ showJumpAction?: boolean
+ isThreadListResizing?: boolean
+ onResizeStart?: React.MouseEventHandler
+ showFilterControls?: boolean
+ showOptionsMenu?: boolean
+ /** Rendered between the toolbar and the list; carries the active-scope chips row. */
+ scopeFilterRow?: React.ReactNode
+ collapsedGroupKeys?: ReadonlySet
+ onToggleGroupCollapse?: (groupKey: string) => void
+ /** Optional view-local scroll memory; updated without triggering React renders. */
+ scrollTopRef?: React.MutableRefObject
}): React.JSX.Element {
+ const [internalCollapsedGroupKeys, setInternalCollapsedGroupKeys] = useState>(
+ () => new Set()
+ )
+ // Precedence: explicit props, then a caller-owned context (hosts that unmount
+ // the pane on body switches), then pane-local state.
+ const contextCollapse = useContext(ActivityThreadCollapseContext)
+ const isControlled = collapsedGroupKeys !== undefined && onToggleGroupCollapse !== undefined
+ const effectiveCollapsedGroupKeys = isControlled
+ ? collapsedGroupKeys
+ : (contextCollapse?.collapsedGroupKeys ?? internalCollapsedGroupKeys)
+ const handleToggleGroup = isControlled
+ ? onToggleGroupCollapse
+ : (contextCollapse?.onToggleGroupCollapse ??
+ ((groupKey: string) => {
+ setInternalCollapsedGroupKeys((prev) => {
+ const next = new Set(prev)
+ if (next.has(groupKey)) {
+ next.delete(groupKey)
+ } else {
+ next.add(groupKey)
+ }
+ return next
+ })
+ }))
+
+ const scrollContainerRef = useRef(null)
+ const hasRestoredScrollRef = useRef(false)
+ const handleScroll = useCallback(
+ (event: React.UIEvent) => {
+ if (!scrollTopRef) {
+ return
+ }
+ const scrollTop = event.currentTarget.scrollTop
+ // A clamp-to-0 fired before the deferred restore must not wipe the saved offset.
+ if (!hasRestoredScrollRef.current) {
+ if (scrollTop === 0) {
+ return
+ }
+ hasRestoredScrollRef.current = true
+ }
+ scrollTopRef.current = scrollTop
+ },
+ [scrollTopRef]
+ )
+ const virtualItems = useMemo(
+ () =>
+ buildActivityVirtualItems({
+ groups: visibleThreadGroups,
+ groupBy,
+ collapsedGroupKeys: effectiveCollapsedGroupKeys
+ }),
+ [visibleThreadGroups, groupBy, effectiveCollapsedGroupKeys]
+ )
+ const headerItemIndexes = useMemo(
+ () => getActivityHeaderItemIndexes(virtualItems),
+ [virtualItems]
+ )
+ const selectedItemIndex = useMemo(
+ () => findActivityThreadItemIndex(virtualItems, selectedPaneKey),
+ [virtualItems, selectedPaneKey]
+ )
+
+ // Why keyed on virtualItems: getItemKey identity is a measurement-memo input in tanstack
+ // virtual. A per-render closure recomputes every row on unrelated re-renders; a fully stable
+ // one would miss same-count reorders. Changing exactly with the items is the correct middle.
+ const getItemKey = useCallback(
+ (index: number) => {
+ const item = virtualItems[index]
+ return item ? getActivityVirtualItemKey(item) : `__stale_${index}`
+ },
+ [virtualItems]
+ )
+ const virtualizer = useVirtualizer({
+ count: virtualItems.length,
+ getScrollElement: () => scrollContainerRef.current,
+ estimateSize: (index) => estimateActivityVirtualItemSize(virtualItems[index], compactMode),
+ getItemKey,
+ measureElement: (element, entry, instance) => {
+ const measured = measureVirtualElementSize(element, entry, instance)
+ if (measured > 0) {
+ return measured
+ }
+ const index = Number.parseInt(element.getAttribute('data-index') ?? '', 10)
+ return estimateActivityVirtualItemSize(
+ Number.isNaN(index) ? undefined : virtualItems[index],
+ compactMode
+ )
+ },
+ rangeExtractor: useCallback(
+ (range: Range) => {
+ const activeStickyIndex =
+ groupBy !== 'none'
+ ? getActiveStickyHeaderIndex(headerItemIndexes, range.startIndex)
+ : null
+ const previousStickyIndex =
+ activeStickyIndex !== null
+ ? getPreviousStickyHeaderIndex(headerItemIndexes, activeStickyIndex)
+ : null
+ const indexSet = new Set(defaultRangeExtractor(range))
+ if (activeStickyIndex !== null) {
+ indexSet.add(activeStickyIndex)
+ }
+ if (previousStickyIndex !== null) {
+ indexSet.add(previousStickyIndex)
+ }
+ if (selectedItemIndex !== null && selectedItemIndex >= 0) {
+ indexSet.add(selectedItemIndex)
+ }
+ return Array.from(indexSet).sort((a, b) => a - b)
+ },
+ [groupBy, headerItemIndexes, selectedItemIndex]
+ ),
+ overscan: 8,
+ observeElementRect: observeActivityListRect,
+ useFlushSync: false
+ })
+
+ // Row heights differ between densities; drop stale measurements on toggle (not on mount).
+ const measuredCompactModeRef = useRef(compactMode)
+ useEffect(() => {
+ if (measuredCompactModeRef.current === compactMode) {
+ return
+ }
+ measuredCompactModeRef.current = compactMode
+ virtualizer.measure()
+ }, [virtualizer, compactMode])
+
+ // Restore only once the (estimated) content can contain the saved offset, so a
+ // pre-hydration mount doesn't clamp the restore to 0.
+ const totalSize = virtualizer.getTotalSize()
+ const restoreArmedAtRef = useRef(null)
+ useEffect(() => {
+ if (!scrollTopRef || hasRestoredScrollRef.current) {
+ return
+ }
+ if (restoreArmedAtRef.current === null) {
+ restoreArmedAtRef.current = Date.now()
+ } else if (Date.now() - restoreArmedAtRef.current > DEFERRED_SCROLL_RESTORE_WINDOW_MS) {
+ // The list stayed too small for the saved offset (it shrank); firing the
+ // restore on some later growth would yank the viewport out from the user.
+ hasRestoredScrollRef.current = true
+ scrollTopRef.current = 0
+ return
+ }
+ const scrollContainer = scrollContainerRef.current
+ if (!scrollContainer) {
+ return
+ }
+ // Against the max offset, not the content height: a viewport taller than the
+ // remaining content clamps the assignment to 0 and burns the one restore.
+ const maxScrollTop = Math.max(0, totalSize - scrollContainer.clientHeight)
+ if (scrollTopRef.current > maxScrollTop) {
+ return
+ }
+ scrollContainer.scrollTop = scrollTopRef.current
+ hasRestoredScrollRef.current = true
+ }, [scrollTopRef, totalSize])
+
+ const scrollOffset = virtualizer.scrollOffset ?? 0
+ const activeStickyHeaderIndex =
+ groupBy !== 'none'
+ ? getActiveStickyHeaderIndexForScroll({
+ rangeStartIndex: virtualizer.range?.startIndex ?? 0,
+ scrollOffset,
+ stickyHeaderIndexes: headerItemIndexes,
+ virtualItems: virtualizer.getVirtualItems()
+ })
+ : null
+
+ const resizable = onResizeStart !== undefined
return (
-
-
-
-
-
onGroupByChange(value as ActivityGroupBy)}
+
+
+
-
-
-
-
- {translate('auto.components.activity.ActivityPrototypePage.4a3986b200', 'Status')}
-
-
- {translate('auto.components.activity.ActivityPrototypePage.8c3b621ddf', 'Project')}
-
-
- {translate('auto.components.activity.ActivityPrototypePage.b29191b3e0', 'Worktree')}
-
-
- {translate('auto.components.activity.ActivityPrototypePage.f6396e1f85', 'Agent')}
-
-
-
-
-
- onReadFilterChange(pressed ? 'unread' : 'all')}
- variant="outline"
- size="sm"
- className={cn(
- 'size-8 shrink-0 p-0',
- readFilter === 'unread'
- ? '!border-primary !bg-primary !text-primary-foreground shadow-xs ring-2 ring-primary/35 hover:!bg-primary/90 hover:!text-primary-foreground'
- : 'text-muted-foreground hover:text-foreground'
- )}
- aria-label={translate(
- 'auto.components.activity.ActivityPrototypePage.d1a88df9a8',
- 'Show unread threads only'
- )}
- >
-
-
-
+ {virtualizer.getVirtualItems().map((virtualRow) => {
+ const item = virtualItems[virtualRow.index]
+ if (!item) {
+ return null
+ }
+ const isActiveSticky =
+ item.type === 'header' && virtualRow.index === activeStickyHeaderIndex
+ return (
+
+ )
+ })}
+
+ {visibleThreadCount === 0 ? (
+
{translate(
- 'auto.components.activity.ActivityPrototypePage.d1a88df9a8',
- 'Show unread threads only'
+ 'auto.components.activity.ActivityPrototypePage.7cd632006b',
+ 'No agent activity matches these filters.'
)}
-
-
- {/* Why (overflow menu): "Mark all read" is low-frequency and destructive-feeling; behind `…` keeps the toolbar on the frequent Filter + unread toggle. */}
-
+
+ ) : null}
- {visibleThreadGroups.map((group) => (
-
- onSelectThread(thread)}
- onJump={() => onJumpToWorkspace(thread)}
- onMarkUnread={() => onMarkThreadUnread(thread)}
- canJump={canJumpToWorkspace(thread)}
- compactMode={compactMode}
- />
- ))}
-
- ))}
- {visibleThreadCount === 0 ? (
-
- {translate(
- 'auto.components.activity.ActivityPrototypePage.7cd632006b',
- 'No agent activity matches these filters.'
- )}
-
- ) : null}
-
+ collapseState?: ActivityThreadCollapseState
+ }
+): void {
+ act(() => {
+ root.render(
+
+
+ true}
+ showFilterControls={false}
+ showOptionsMenu={false}
+ scrollTopRef={args.scrollTopRef}
+ />
+
+
+ )
+ })
+}
+
+describe('ActivityThreadListPane virtualization', () => {
+ let container: HTMLDivElement
+ let root: Root
+
+ beforeEach(() => {
+ container = document.createElement('div')
+ document.body.appendChild(container)
+ root = createRoot(container)
+ })
+
+ afterEach(() => {
+ act(() => root.unmount())
+ container.remove()
+ document.body.replaceChildren()
+ })
+
+ function mountedRowCount(): number {
+ return container.querySelectorAll('[data-worktree-card-surface="true"]').length
+ }
+
+ it('mounts a viewport-bounded number of rows, not one per thread', () => {
+ renderPane(root, { threads: makeManyThreads() })
+ const mounted = mountedRowCount()
+ expect(mounted).toBeGreaterThan(0)
+ // Viewport (600px fallback) / ~96px rows + 2x overscan(8); far below THREAD_COUNT.
+ expect(mounted).toBeLessThanOrEqual(40)
+ // Off-screen rows are not in the DOM at all.
+ expect(container.textContent).not.toContain('Virtual agent 250')
+ })
+
+ it('keeps the selected off-screen row mounted so activation stays accessible', () => {
+ renderPane(root, {
+ threads: makeManyThreads(),
+ selectedPaneKey: 'tab-250:leaf-250'
+ })
+ const selected = container.querySelector('[data-worktree-card-active="primary"]')
+ expect(selected).not.toBeNull()
+ expect(selected?.textContent).toContain('Virtual agent 250')
+ // Still virtualized: pinning the selection must not mount the rest of the list.
+ expect(mountedRowCount()).toBeLessThanOrEqual(41)
+ })
+
+ it('does not mount an off-screen row when its thread data updates', () => {
+ const threads = makeManyThreads()
+ renderPane(root, { threads })
+ const before = mountedRowCount()
+
+ const updated = [...threads]
+ updated[250] = { ...threads[250], paneTitle: 'Virtual agent 250 UPDATED', unread: true }
+ renderPane(root, { threads: updated })
+
+ expect(container.textContent).not.toContain('Virtual agent 250 UPDATED')
+ expect(mountedRowCount()).toBe(before)
+ })
+
+ it('renders every row for a short list', () => {
+ renderPane(root, { threads: [makeThread(0), makeThread(1), makeThread(2)] })
+ expect(mountedRowCount()).toBe(3)
+ expect(container.textContent).toContain('Virtual agent 0')
+ expect(container.textContent).toContain('Virtual agent 2')
+ })
+
+ it('keeps the saved scroll offset when the pane mounts before threads hydrate', () => {
+ const scrollTopRef = { current: 360 }
+ renderPane(root, { threads: [], scrollTopRef })
+ const scrollContainer = container.querySelector('.overflow-y-auto')
+ // Empty list cannot contain the offset: restore is deferred, not clamped to 0.
+ act(() => {
+ if (scrollContainer) {
+ scrollContainer.scrollTop = 0
+ scrollContainer.dispatchEvent(new Event('scroll', { bubbles: true }))
+ }
+ })
+ expect(scrollTopRef.current).toBe(360)
+
+ renderPane(root, { threads: makeManyThreads(), scrollTopRef })
+ expect(container.querySelector('.overflow-y-auto')?.scrollTop).toBe(360)
+ })
+
+ it('restores caller-held collapse state across remounts', () => {
+ // Models the sidebar: the caller owns the Set and provides it via context.
+ let collapsed: ReadonlySet = new Set()
+ const collapseState = (): ActivityThreadCollapseState => ({
+ collapsedGroupKeys: collapsed,
+ onToggleGroupCollapse: (groupKey: string) => {
+ const next = new Set(collapsed)
+ if (next.has(groupKey)) {
+ next.delete(groupKey)
+ } else {
+ next.add(groupKey)
+ }
+ collapsed = next
+ }
+ })
+ renderPane(root, { threads: makeManyThreads(), collapseState: collapseState() })
+ const header = container.querySelector('[role="button"]') as HTMLElement
+ act(() => {
+ header.dispatchEvent(new MouseEvent('click', { bubbles: true }))
+ })
+ renderPane(root, { threads: makeManyThreads(), collapseState: collapseState() })
+ expect(container.querySelector('[role="button"]')?.getAttribute('aria-expanded')).toBe('false')
+
+ act(() => root.unmount())
+ root = createRoot(container)
+ renderPane(root, { threads: makeManyThreads(), collapseState: collapseState() })
+ const remountedHeader = container.querySelector('[role="button"]')
+ expect(remountedHeader?.getAttribute('aria-expanded')).toBe('false')
+ })
+
+ it('disarms a stale deferred restore instead of yanking the viewport on late growth', () => {
+ vi.useFakeTimers()
+ vi.setSystemTime(1_000_000)
+ try {
+ const scrollTopRef = { current: 360 }
+ // Mounts with a list too small to contain the saved offset (it shrank).
+ renderPane(root, { threads: [makeThread(0)], scrollTopRef })
+ const scrollContainer = container.querySelector('.overflow-y-auto')
+ expect(scrollContainer?.scrollTop).toBe(0)
+
+ // Well past the restore window, the list grows beyond the saved offset.
+ vi.setSystemTime(1_010_000)
+ renderPane(root, { threads: makeManyThreads(), scrollTopRef })
+
+ expect(container.querySelector('.overflow-y-auto')?.scrollTop).toBe(0)
+ expect(scrollTopRef.current).toBe(0)
+ } finally {
+ vi.useRealTimers()
+ }
+ })
+
+ it('restores the Agents scroll position without storing it in React state', () => {
+ const scrollTopRef = { current: 240 }
+ renderPane(root, { threads: makeManyThreads(), scrollTopRef })
+ const scrollContainer = container.querySelector('.overflow-y-auto')
+ expect(scrollContainer?.scrollTop).toBe(240)
+
+ act(() => {
+ if (scrollContainer) {
+ scrollContainer.scrollTop = 360
+ scrollContainer.dispatchEvent(new Event('scroll', { bubbles: true }))
+ }
+ })
+ expect(scrollTopRef.current).toBe(360)
+
+ act(() => root.unmount())
+ root = createRoot(container)
+ renderPane(root, { threads: makeManyThreads(), scrollTopRef })
+ expect(container.querySelector('.overflow-y-auto')?.scrollTop).toBe(360)
+ })
+})
diff --git a/src/renderer/src/components/activity/activity-thread-list-resize-handle.tsx b/src/renderer/src/components/activity/activity-thread-list-resize-handle.tsx
new file mode 100644
index 00000000000..a97a7ce223b
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-list-resize-handle.tsx
@@ -0,0 +1,37 @@
+import type React from 'react'
+import { cn } from '@/lib/utils'
+import { translate } from '@/i18n/i18n'
+
+export function ActivityThreadListResizeHandle({
+ isResizing,
+ onResizeStart
+}: {
+ isResizing?: boolean
+ onResizeStart?: React.MouseEventHandler
+}): React.JSX.Element {
+ return (
+
+ )
+}
diff --git a/src/renderer/src/components/activity/activity-thread-list-toolbar.tsx b/src/renderer/src/components/activity/activity-thread-list-toolbar.tsx
new file mode 100644
index 00000000000..f1ad0fb9057
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-list-toolbar.tsx
@@ -0,0 +1,227 @@
+import React from 'react'
+import { BellDot, CheckCheck, Search, Trash2, X } from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import { Input } from '@/components/ui/input'
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue
+} from '@/components/ui/select'
+import { Toggle } from '@/components/ui/toggle'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { cn } from '@/lib/utils'
+import { translate } from '@/i18n/i18n'
+import { ActivityThreadOptionsMenu } from './activity-thread-controls'
+import type { ActivityGroupBy, ThreadReadFilter } from './activity-thread-types'
+
+export function ActivityThreadListToolbar({
+ activityFilterInputRef,
+ query,
+ onQueryChange,
+ groupBy,
+ onGroupByChange,
+ readFilter,
+ onReadFilterChange,
+ compactMode,
+ showChildAgents,
+ hasUnreadThreads,
+ onCompactModeChange,
+ onShowChildAgentsChange,
+ onMarkAllThreadsRead,
+ hasCompletedThreads,
+ onClearCompleted,
+ resizable,
+ showFilterControls,
+ showOptionsMenu
+}: {
+ activityFilterInputRef: React.RefObject
+ query: string
+ onQueryChange: (query: string) => void
+ groupBy: ActivityGroupBy
+ onGroupByChange: (groupBy: ActivityGroupBy) => void
+ readFilter: ThreadReadFilter
+ onReadFilterChange: (readFilter: ThreadReadFilter) => void
+ compactMode: boolean
+ showChildAgents?: boolean
+ hasUnreadThreads: boolean
+ onCompactModeChange: (compactMode: boolean) => void
+ onShowChildAgentsChange?: (showChildAgents: boolean) => void
+ onMarkAllThreadsRead?: () => void
+ hasCompletedThreads?: boolean
+ onClearCompleted?: () => void
+ resizable: boolean
+ showFilterControls: boolean
+ showOptionsMenu: boolean
+}): React.JSX.Element | null {
+ const showToolbar = showFilterControls || showOptionsMenu
+ if (!showToolbar) {
+ return null
+ }
+
+ return (
+ <>
+
+
+ {showFilterControls ? (
+
+ {
+ onQueryChange('')
+ activityFilterInputRef.current?.focus()
+ }}
+ >
+
+ ) : null}
+
+ ) : null}
+ {resizable ? (
+
onGroupByChange(value as ActivityGroupBy)}
+ >
+
+
+
+
+ {translate('auto.components.activity.ActivityPrototypePage.none', 'None')}
+
+
+ {translate('auto.components.activity.ActivityPrototypePage.4a3986b200', 'Status')}
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.8c3b621ddf',
+ 'Project'
+ )}
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.b29191b3e0',
+ 'Worktree'
+ )}
+
+
+ {translate('auto.components.activity.ActivityPrototypePage.f6396e1f85', 'Agent')}
+
+
+
+ ) : null}
+ {showFilterControls ? (
+
+
+ onReadFilterChange(pressed ? 'unread' : 'all')}
+ size="sm"
+ className={cn(
+ 'size-7 shrink-0 p-0 rounded-md transition-all',
+ readFilter === 'unread'
+ ? '!border border-primary/50 !bg-primary/20 !text-primary shadow-xs hover:!bg-primary/30'
+ : 'text-muted-foreground hover:text-foreground hover:bg-muted/50'
+ )}
+ aria-label={translate(
+ 'auto.components.activity.ActivityPrototypePage.d1a88df9a8',
+ 'Show unread threads only'
+ )}
+ >
+
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.d1a88df9a8',
+ 'Show unread threads only'
+ )}
+
+
+ ) : null}
+ {showOptionsMenu ? (
+
+ ) : null}
+
+
+ {onMarkAllThreadsRead ? (
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.023ff75afe',
+ 'Mark all read'
+ )}
+
+
+ ) : null}
+ {onClearCompleted ? (
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.clearCompleted',
+ 'Clear completed'
+ )}
+
+
+ ) : null}
+
+ ) : null}
+
+ )
+}
diff --git a/src/renderer/src/components/activity/activity-thread-options-menu.tsx b/src/renderer/src/components/activity/activity-thread-options-menu.tsx
new file mode 100644
index 00000000000..a7d50a108ac
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-options-menu.tsx
@@ -0,0 +1,291 @@
+import React from 'react'
+import {
+ BellDot,
+ Check,
+ CheckCheck,
+ GitFork,
+ Layers,
+ MoreVertical,
+ Rows3,
+ Search,
+ Trash2
+} from 'lucide-react'
+import { Button } from '@/components/ui/button'
+import {
+ DropdownMenu,
+ DropdownMenuCheckboxItem,
+ DropdownMenuContent,
+ DropdownMenuItem,
+ DropdownMenuRadioGroup,
+ DropdownMenuRadioItem,
+ DropdownMenuSeparator,
+ DropdownMenuSub,
+ DropdownMenuSubContent,
+ DropdownMenuSubTrigger,
+ DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
+import { translate } from '@/i18n/i18n'
+import { ActivityScopeFilterMenuSections } from './activity-scope-filter-controls'
+import type { ActivityGroupBy } from './activity-thread-types'
+
+const ALIGNED_CHECKBOX_ITEM_CLASS = 'pl-2 [&>span.absolute]:hidden'
+
+function getActivityGroupByLabel(groupBy: ActivityGroupBy): string {
+ switch (groupBy) {
+ case 'none':
+ return translate('auto.components.activity.ActivityPrototypePage.none', 'None')
+ case 'status':
+ return translate('auto.components.activity.ActivityPrototypePage.4a3986b200', 'Status')
+ case 'project':
+ return translate('auto.components.activity.ActivityPrototypePage.8c3b621ddf', 'Project')
+ case 'worktree':
+ return translate('auto.components.activity.ActivityPrototypePage.b29191b3e0', 'Worktree')
+ case 'agent':
+ return translate('auto.components.activity.ActivityPrototypePage.f6396e1f85', 'Agent')
+ }
+}
+
+export function ActivityThreadOptionsMenu({
+ groupBy,
+ onGroupByChange,
+ compactMode,
+ showChildAgents = false,
+ hasUnreadThreads,
+ hasCompletedThreads = false,
+ onCompactModeChange,
+ onShowChildAgentsChange,
+ onMarkAllThreadsRead,
+ onClearCompleted,
+ onSearch,
+ unreadOnly = false,
+ onToggleUnread
+}: {
+ groupBy?: ActivityGroupBy
+ onGroupByChange?: (groupBy: ActivityGroupBy) => void
+ compactMode: boolean
+ showChildAgents?: boolean
+ hasUnreadThreads: boolean
+ hasCompletedThreads?: boolean
+ onCompactModeChange: (compactMode: boolean) => void
+ onShowChildAgentsChange?: (showChildAgents: boolean) => void
+ onMarkAllThreadsRead?: () => void
+ onClearCompleted?: () => void
+ onSearch?: () => void
+ unreadOnly?: boolean
+ onToggleUnread?: () => void
+}): React.JSX.Element {
+ const skipCloseAutoFocusRef = React.useRef(false)
+
+ return (
+
+
+
+ {/* Why: keep Tooltip and Dropdown from composing refs onto the same button (Radix setRef crash loop). */}
+
+
+
+
+
+
+
+
+ {translate('auto.components.activity.ActivityPrototypePage.a472a14700', 'More options')}
+
+
+ {
+ if (skipCloseAutoFocusRef.current) {
+ event.preventDefault()
+ skipCloseAutoFocusRef.current = false
+ }
+ }}
+ >
+ {onSearch || onToggleUnread ? (
+ <>
+ {onSearch ? (
+ {
+ skipCloseAutoFocusRef.current = true
+ onSearch()
+ }}
+ >
+
+ {translate('auto.components.activity.ActivityPrototypePage.search', 'Search')}
+
+
+ ) : null}
+ {onToggleUnread ? (
+
+
+ onToggleUnread()}
+ onSelect={(event) => event.preventDefault()}
+ >
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.showUnreadOnly',
+ 'Show unread only'
+ )}
+
+ {hasUnreadThreads ? (
+
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.unreadOnlyDescription',
+ 'Filters the activity list to show only threads with unread updates.'
+ )}
+
+
+ ) : null}
+
+
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.770d458144',
+ 'Group by'
+ )}
+
+
+ {getActivityGroupByLabel(groupBy)}
+
+
+
+
+ onGroupByChange(value as ActivityGroupBy)}
+ >
+ {[
+ ['none', 'None', 'auto.components.activity.ActivityPrototypePage.none'],
+ ['status', 'Status', 'auto.components.activity.ActivityPrototypePage.4a3986b200'],
+ [
+ 'project',
+ 'Project',
+ 'auto.components.activity.ActivityPrototypePage.8c3b621ddf'
+ ],
+ [
+ 'worktree',
+ 'Worktree',
+ 'auto.components.activity.ActivityPrototypePage.b29191b3e0'
+ ],
+ ['agent', 'Agent', 'auto.components.activity.ActivityPrototypePage.f6396e1f85']
+ ].map(([value, label, key]) => (
+ event.preventDefault()}
+ >
+ {translate(key, label)}
+
+ ))}
+
+
+
+ ) : null}
+
+
+ onCompactModeChange(checked === true)}
+ onSelect={(event) => event.preventDefault()}
+ >
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.f70e4bec47',
+ 'Compact mode'
+ )}
+
+ {compactMode ?
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.compactModeDescription',
+ 'Shows shorter thread rows with one-line titles and two-line status messages.'
+ )}
+
+
+ {onShowChildAgentsChange ? (
+ onShowChildAgentsChange(checked === true)}
+ onSelect={(event) => event.preventDefault()}
+ >
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.showChildAgents',
+ 'Show child agents'
+ )}
+
+ {showChildAgents ?
+ ) : null}
+ {onMarkAllThreadsRead || onClearCompleted ? (
+ <>
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.023ff75afe',
+ 'Mark all read'
+ )}
+
+
+ ) : null}
+ {onClearCompleted ? (
+
+
+ {translate(
+ 'auto.components.activity.ActivityPrototypePage.clearCompleted',
+ 'Clear completed'
+ )}
+
+
+ ) : null}
+
+ ) : null}
+
+
+ )
+}
diff --git a/src/renderer/src/components/activity/activity-thread-presentation.test.ts b/src/renderer/src/components/activity/activity-thread-presentation.test.ts
new file mode 100644
index 00000000000..6aa3efc1a32
--- /dev/null
+++ b/src/renderer/src/components/activity/activity-thread-presentation.test.ts
@@ -0,0 +1,97 @@
+import { describe, expect, it } from 'vitest'
+import type { AgentPaneThread } from './activity-thread-types'
+import { activityThreadRowCopy } from './activity-thread-presentation'
+import { formatShortTimeAgo } from '@/lib/short-time-ago'
+import {
+ makeRepo,
+ makeTabWithIds,
+ makeWorktree,
+ PANE_KEY
+} from './ActivityPrototypePage-test-fixtures'
+
+function makeThread(overrides: Partial = {}): AgentPaneThread {
+ const worktree = makeWorktree()
+ return {
+ paneKey: PANE_KEY,
+ paneTitle: 'low hanging issues',
+ agentType: 'codex',
+ worktree,
+ repo: makeRepo(),
+ tab: makeTabWithIds('tab-1', worktree.id),
+ events: [],
+ latestEvent: null,
+ latestTimestamp: 1_000,
+ currentAgentState: null,
+ currentAgentEntry: null,
+ unread: false,
+ responsePreview: '',
+ ...overrides
+ }
+}
+
+describe('formatShortTimeAgo', () => {
+ it('uses short units', () => {
+ const now = 1_000_000
+ expect(formatShortTimeAgo(now - 10_000, now)).toBe('now')
+ expect(formatShortTimeAgo(now - 5 * 60_000, now)).toBe('5m')
+ expect(formatShortTimeAgo(now - 20 * 60 * 60_000, now)).toBe('20h')
+ expect(formatShortTimeAgo(now - 2 * 24 * 60 * 60_000, now)).toBe('2d')
+ })
+})
+
+describe('activityThreadRowCopy', () => {
+ it('leads with the task and the last activity, not project or workspace', () => {
+ const copy = activityThreadRowCopy(
+ makeThread({
+ responsePreview: 'Filed 8 issues from the audit.'
+ })
+ )
+ expect(copy.taskTitle).toBe('low hanging issues')
+ expect(copy.statusLine).toBe('Filed 8 issues from the audit.')
+ expect(copy.statusKind).toBe('message')
+ expect(copy.needsAttention).toBe(false)
+ expect(copy.workspaceLabel).toBe('feature')
+ })
+
+ it('names the live tool while working', () => {
+ const copy = activityThreadRowCopy(
+ makeThread({
+ paneTitle: 'Fix checkout race',
+ currentAgentState: 'working',
+ responsePreview: 'Edit src/checkout/session.ts'
+ })
+ )
+ expect(copy.statusKind).toBe('tool')
+ expect(copy.statusLine).toBe('Edit src/checkout/session.ts')
+ })
+
+ it('falls back to a state label when a live agent has no preview', () => {
+ const copy = activityThreadRowCopy(
+ makeThread({
+ paneTitle: 'Review PR 1842',
+ currentAgentState: 'waiting',
+ responsePreview: ''
+ })
+ )
+ expect(copy.statusKind).toBe('state')
+ expect(copy.statusLine).toBe('Waiting for input')
+ expect(copy.needsAttention).toBe(true)
+ })
+
+ it('does not invent a status line for a finished agent with no reply', () => {
+ const copy = activityThreadRowCopy(makeThread({ currentAgentState: null, responsePreview: '' }))
+ expect(copy.statusKind).toBe('none')
+ expect(copy.statusLine).toBe('')
+ })
+
+ it('does not repeat the task title as the last-message line', () => {
+ const copy = activityThreadRowCopy(
+ makeThread({
+ paneTitle: 'low hanging issues',
+ responsePreview: 'low hanging issues'
+ })
+ )
+ expect(copy.statusKind).toBe('none')
+ expect(copy.statusLine).toBe('')
+ })
+})
diff --git a/src/renderer/src/components/activity/activity-thread-presentation.ts b/src/renderer/src/components/activity/activity-thread-presentation.ts
index 167d2f30954..93d69c7688a 100644
--- a/src/renderer/src/components/activity/activity-thread-presentation.ts
+++ b/src/renderer/src/components/activity/activity-thread-presentation.ts
@@ -1,8 +1,10 @@
import { agentStateLabel, type AgentDotState } from '@/components/AgentStateDot'
import { formatAgentTypeLabel } from '@/lib/agent-status'
import { getAgentRowPrimaryText } from '@/lib/agent-row-primary-text'
+import { showsAgentToolPreview } from '@/lib/agent-row-tool-preview'
import {
getActivityThreadTaskTitle,
+ getActivityThreadWorkspaceTitle,
resolveActivityThreadStatusPreview
} from '@/lib/activity-thread-display'
import { formatUiRelativeTime } from '@/i18n/relative-time-format'
@@ -24,8 +26,8 @@ export function formatAbsoluteDate(timestamp: number): string {
return absoluteDateFormatter.format(new Date(timestamp))
}
-export function formatRelativeTime(timestamp: number): string {
- return formatUiRelativeTime(timestamp - Date.now())
+export function formatRelativeTime(timestamp: number, now = Date.now()): string {
+ return formatUiRelativeTime(timestamp - now)
}
function truncatePreservingSurrogates(value: string, maxLength: number): string {
@@ -111,3 +113,57 @@ export function threadAgentStateLabel(thread: AgentPaneThread): string {
}
return agentStateLabel(state)
}
+
+export type ActivityThreadStatusKind = 'tool' | 'message' | 'state' | 'none'
+
+export type ActivityThreadRowCopy = {
+ taskTitle: string
+ statusLine: string
+ statusKind: ActivityThreadStatusKind
+ needsAttention: boolean
+ workspaceLabel: string
+}
+
+function normalizeScanLabel(value: string): string {
+ return value.trim().toLowerCase().replace(/[-_]+/g, ' ').replace(/\s+/g, ' ')
+}
+
+function previewDuplicatesIdentity(preview: string, title: string, workspace: string): boolean {
+ const normalized = normalizeScanLabel(preview)
+ if (!normalized) {
+ return true
+ }
+ return normalized === normalizeScanLabel(title) || normalized === normalizeScanLabel(workspace)
+}
+
+export function activityThreadRowCopy(thread: AgentPaneThread): ActivityThreadRowCopy {
+ const workspaceLabel = getActivityThreadWorkspaceTitle(thread.worktree)
+ const taskTitle = thread.paneTitle.trim() || workspaceLabel
+ const renderedPreview = activityThreadResponseRenderPreview({
+ responsePreview: thread.responsePreview
+ })
+ const liveState = thread.currentAgentState ?? thread.latestEvent?.state ?? null
+ const toolPreviewState = liveState === 'monitoring' ? null : liveState
+ const state = threadAgentState(thread)
+ const needsAttention = state === 'waiting' || state === 'blocked' || state === 'permission'
+ if (renderedPreview && !previewDuplicatesIdentity(renderedPreview, taskTitle, workspaceLabel)) {
+ return {
+ taskTitle,
+ statusLine: renderedPreview,
+ // Monitoring is a distinct live state, not a tool-running row state.
+ statusKind: showsAgentToolPreview(toolPreviewState) ? 'tool' : 'message',
+ needsAttention,
+ workspaceLabel
+ }
+ }
+ if (state !== 'done' && state !== 'idle') {
+ return {
+ taskTitle,
+ statusLine: threadAgentStateLabel(thread),
+ statusKind: 'state',
+ needsAttention,
+ workspaceLabel
+ }
+ }
+ return { taskTitle, statusLine: '', statusKind: 'none', needsAttention, workspaceLabel }
+}
diff --git a/src/renderer/src/components/activity/activity-thread-row.tsx b/src/renderer/src/components/activity/activity-thread-row.tsx
index 77750f6c390..93d4d5ec18f 100644
--- a/src/renderer/src/components/activity/activity-thread-row.tsx
+++ b/src/renderer/src/components/activity/activity-thread-row.tsx
@@ -2,207 +2,213 @@ import React from 'react'
import { Bell, ExternalLink } from 'lucide-react'
import { AgentIcon } from '@/lib/agent-catalog'
import { agentTypeToIconAgent, formatAgentTypeLabel } from '@/lib/agent-status'
-import { getActivityThreadWorkspaceTitle } from '@/lib/activity-thread-display'
import { Button } from '@/components/ui/button'
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
import { cn } from '@/lib/utils'
import { translate } from '@/i18n/i18n'
import { FilledBellIcon } from '../sidebar/WorktreeCardHelpers'
import CommentMarkdown from '../sidebar/CommentMarkdown'
-import {
- ActivityProjectLabel,
- EventTime,
- ThreadAgentStateIndicator
-} from './activity-thread-controls'
-import { activityThreadResponseRenderPreview } from './activity-thread-presentation'
+import { EventTime, ThreadAgentStateIndicator } from './activity-thread-controls'
+import { ActivityThreadHoverCard } from './activity-thread-hover-card'
+import { activityThreadRowCopy } from './activity-thread-presentation'
import type { AgentPaneThread } from './activity-thread-types'
-function isEventFromNestedInteractiveElement(
- target: EventTarget | null,
- currentTarget: HTMLElement
-): boolean {
- if (!(target instanceof HTMLElement)) {
- return false
- }
- const interactiveTarget = target.closest(
- 'a, button, input, select, textarea, [role="button"], [role="link"], [tabindex]:not([tabindex="-1"])'
- )
- return (
- interactiveTarget instanceof HTMLElement &&
- interactiveTarget !== currentTarget &&
- currentTarget.contains(interactiveTarget)
- )
-}
-
-export function ActivityThreadRow({
+// Why React.memo: rows are pure functions of these props; thread identity is stable across
+// query/selection/group re-renders, so memo keeps a keystroke or selection change from
+// re-rendering every mounted row. Callbacks take the thread so parents can pass stable handlers.
+export const ActivityThreadRow = React.memo(function ActivityThreadRow({
thread,
selected,
onSelect,
onJump,
+ onMarkRead,
onMarkUnread,
canJump,
- compactMode
+ compactMode,
+ disableMarkUnread = false,
+ showJumpAction = true
}: {
thread: AgentPaneThread
selected: boolean
- onSelect: () => void
- onJump: () => void
- onMarkUnread: () => void
+ onSelect: (thread: AgentPaneThread) => void
+ onJump: (thread: AgentPaneThread) => void
+ onMarkRead: (thread: AgentPaneThread) => void
+ onMarkUnread: (thread: AgentPaneThread) => void
canJump: boolean
compactMode: boolean
+ disableMarkUnread?: boolean
+ showJumpAction?: boolean
}): React.JSX.Element {
- const renderedResponsePreview = activityThreadResponseRenderPreview({
- responsePreview: thread.responsePreview
- })
- const workspaceTitle = getActivityThreadWorkspaceTitle(thread.worktree)
- const taskTitle = thread.paneTitle
+ const { taskTitle, statusLine, statusKind, needsAttention, workspaceLabel } =
+ activityThreadRowCopy(thread)
+ const showMarkdownStatus = statusKind === 'message'
const agentLabel = formatAgentTypeLabel(thread.agentType)
- const showStatusPreview =
- !compactMode &&
- renderedResponsePreview.length > 0 &&
- renderedResponsePreview !== taskTitle &&
- renderedResponsePreview !== workspaceTitle
+
return (
- {
- // Why: markdown responses can contain links; keyboard activation on a nested link follows the link instead of selecting the row.
- if (isEventFromNestedInteractiveElement(event.target, event.currentTarget)) {
- return
- }
- if (event.key === 'Enter' || event.key === ' ') {
- event.preventDefault()
- onSelect()
- }
- }}
- className={cn(
- // Why (WorktreeCard cues): selected = tint+shadow, beats hover; unread = weight + left bar only; stacking all three confused selected vs unread on hover.
- // Why (asymmetric padding): title leading-snug adds ~3px above cap-height; smaller top pad evens the row.
- 'group relative flex w-full cursor-pointer flex-col gap-1 border-b border-border px-3 pt-2.5 pb-3 text-left transition-colors',
- selected
- ? 'bg-black/[0.08] shadow-[0_1px_2px_rgba(0,0,0,0.04)] dark:bg-white/[0.10] dark:shadow-[0_1px_2px_rgba(0,0,0,0.03)]'
- : 'hover:bg-accent/40'
- )}
+
- {thread.unread ? (
-
-
-
- onSelect(thread)}
+ role="listitem"
+ aria-label={taskTitle}
+ aria-current={selected ? 'true' : undefined}
+ className={cn(
+ 'group relative flex w-full cursor-pointer flex-col gap-1.5 rounded-lg border border-transparent px-1.5 py-2.5 text-left transition-[background-color,border-color,opacity,box-shadow] duration-200 outline-none select-none worktree-sidebar-card-hover focus-visible:ring-1 focus-visible:ring-ring',
+ selected && 'border-transparent'
+ )}
+ >
+