625 lines
17 KiB
TypeScript
625 lines
17 KiB
TypeScript
import {
|
|
View,
|
|
Text,
|
|
Pressable,
|
|
Modal,
|
|
RefreshControl,
|
|
FlatList,
|
|
type ListRenderItem,
|
|
} from 'react-native'
|
|
import { useSafeAreaInsets } from 'react-native-safe-area-context'
|
|
import { useCallback, useMemo, useState, type ReactElement } from 'react'
|
|
import { router } from 'expo-router'
|
|
import { StyleSheet, UnistylesRuntime, useUnistyles } from 'react-native-unistyles'
|
|
import { formatTimeAgo } from '@/utils/time'
|
|
import { shortenPath } from '@/utils/shorten-path'
|
|
import { type AggregatedAgent } from '@/hooks/use-aggregated-agents'
|
|
import { useSessionStore } from '@/stores/session-store'
|
|
import { AgentStatusDot } from '@/components/agent-status-dot'
|
|
import { prepareWorkspaceTab } from '@/utils/workspace-navigation'
|
|
|
|
interface AgentListProps {
|
|
agents: AggregatedAgent[]
|
|
showCheckoutInfo?: boolean
|
|
isRefreshing?: boolean
|
|
onRefresh?: () => void
|
|
selectedAgentId?: string
|
|
onAgentSelect?: () => void
|
|
listFooterComponent?: ReactElement | null
|
|
showAttentionIndicator?: boolean
|
|
}
|
|
|
|
interface AgentListSection {
|
|
key: string
|
|
title: string
|
|
data: AggregatedAgent[]
|
|
}
|
|
|
|
function deriveDateSectionLabel(lastActivityAt: Date): string {
|
|
const now = new Date()
|
|
const todayStart = new Date(now.getFullYear(), now.getMonth(), now.getDate())
|
|
const yesterdayStart = new Date(todayStart.getTime() - 24 * 60 * 60 * 1000)
|
|
const activityStart = new Date(
|
|
lastActivityAt.getFullYear(),
|
|
lastActivityAt.getMonth(),
|
|
lastActivityAt.getDate()
|
|
)
|
|
|
|
if (activityStart.getTime() >= todayStart.getTime()) {
|
|
return 'Today'
|
|
}
|
|
if (activityStart.getTime() >= yesterdayStart.getTime()) {
|
|
return 'Yesterday'
|
|
}
|
|
|
|
const diffTime = todayStart.getTime() - activityStart.getTime()
|
|
const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
|
|
if (diffDays <= 7) {
|
|
return 'This week'
|
|
}
|
|
if (diffDays <= 30) {
|
|
return 'This month'
|
|
}
|
|
return 'Older'
|
|
}
|
|
|
|
function formatStatusLabel(status: AggregatedAgent['status']): string {
|
|
switch (status) {
|
|
case 'initializing':
|
|
return 'Starting'
|
|
case 'idle':
|
|
return 'Idle'
|
|
case 'running':
|
|
return 'Running'
|
|
case 'error':
|
|
return 'Error'
|
|
case 'closed':
|
|
return 'Closed'
|
|
default:
|
|
return status
|
|
}
|
|
}
|
|
|
|
function SessionBadge({
|
|
label,
|
|
tone = 'neutral',
|
|
}: {
|
|
label: string
|
|
tone?: 'neutral' | 'warning' | 'danger'
|
|
}) {
|
|
return (
|
|
<View
|
|
style={[
|
|
styles.badge,
|
|
tone === 'warning' && styles.badgeWarning,
|
|
tone === 'danger' && styles.badgeDanger,
|
|
]}
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.badgeText,
|
|
tone === 'warning' && styles.badgeTextWarning,
|
|
tone === 'danger' && styles.badgeTextDanger,
|
|
]}
|
|
>
|
|
{label}
|
|
</Text>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
function SessionRow({
|
|
agent,
|
|
isMobile,
|
|
selectedAgentId,
|
|
showAttentionIndicator,
|
|
onPress,
|
|
onLongPress,
|
|
}: {
|
|
agent: AggregatedAgent
|
|
isMobile: boolean
|
|
selectedAgentId?: string
|
|
showAttentionIndicator: boolean
|
|
onPress: (agent: AggregatedAgent) => void
|
|
onLongPress: (agent: AggregatedAgent) => void
|
|
}) {
|
|
const timeAgo = formatTimeAgo(agent.lastActivityAt)
|
|
const agentKey = `${agent.serverId}:${agent.id}`
|
|
const isSelected = selectedAgentId === agentKey
|
|
const statusLabel = formatStatusLabel(agent.status)
|
|
const projectPath = shortenPath(agent.cwd)
|
|
|
|
return (
|
|
<Pressable
|
|
style={({ pressed, hovered }) => [
|
|
styles.row,
|
|
isSelected && styles.rowSelected,
|
|
hovered && styles.rowHovered,
|
|
pressed && styles.rowPressed,
|
|
]}
|
|
onPress={() => onPress(agent)}
|
|
onLongPress={() => onLongPress(agent)}
|
|
testID={`agent-row-${agent.serverId}-${agent.id}`}
|
|
>
|
|
<View style={styles.rowLeading}>
|
|
<AgentStatusDot status={agent.status} requiresAttention={agent.requiresAttention} />
|
|
</View>
|
|
<View style={styles.rowContent}>
|
|
<View style={styles.rowTitleRow}>
|
|
<Text
|
|
style={[styles.sessionTitle, isSelected && styles.sessionTitleHighlighted]}
|
|
numberOfLines={1}
|
|
>
|
|
{agent.title || 'New session'}
|
|
</Text>
|
|
{agent.archivedAt ? <SessionBadge label="Archived" /> : null}
|
|
{(agent.pendingPermissionCount ?? 0) > 0 ? (
|
|
<SessionBadge label={`${agent.pendingPermissionCount} pending`} tone="warning" />
|
|
) : null}
|
|
{!isMobile && showAttentionIndicator && agent.requiresAttention ? (
|
|
<SessionBadge label="Attention" tone="danger" />
|
|
) : null}
|
|
</View>
|
|
{isMobile && (
|
|
<View style={styles.rowMetaRow}>
|
|
<Text style={styles.sessionMetaText} numberOfLines={1}>
|
|
{projectPath}
|
|
</Text>
|
|
<Text style={styles.sessionMetaSeparator}>·</Text>
|
|
<Text style={styles.sessionMetaText}>{statusLabel}</Text>
|
|
<Text style={styles.sessionMetaSeparator}>·</Text>
|
|
<Text style={styles.sessionMetaText}>{timeAgo}</Text>
|
|
{agent.serverLabel ? (
|
|
<>
|
|
<Text style={styles.sessionMetaSeparator}>·</Text>
|
|
<Text style={styles.sessionMetaText} numberOfLines={1}>
|
|
{agent.serverLabel}
|
|
</Text>
|
|
</>
|
|
) : null}
|
|
</View>
|
|
)}
|
|
</View>
|
|
{!isMobile && (
|
|
<>
|
|
<Text style={styles.columnMeta} numberOfLines={1}>
|
|
{projectPath}
|
|
</Text>
|
|
<Text style={styles.columnMetaFixed}>{statusLabel}</Text>
|
|
<Text style={styles.columnMetaFixed}>{timeAgo}</Text>
|
|
</>
|
|
)}
|
|
{isMobile && showAttentionIndicator && agent.requiresAttention ? (
|
|
<View style={styles.rowTrailing}>
|
|
<SessionBadge label="Attention" tone="danger" />
|
|
</View>
|
|
) : null}
|
|
</Pressable>
|
|
)
|
|
}
|
|
|
|
function SessionTableSection({
|
|
section,
|
|
isMobile,
|
|
selectedAgentId,
|
|
showAttentionIndicator,
|
|
onAgentPress,
|
|
onAgentLongPress,
|
|
}: {
|
|
section: AgentListSection
|
|
isMobile: boolean
|
|
selectedAgentId?: string
|
|
showAttentionIndicator: boolean
|
|
onAgentPress: (agent: AggregatedAgent) => void
|
|
onAgentLongPress: (agent: AggregatedAgent) => void
|
|
}) {
|
|
return (
|
|
<View style={styles.sectionBlock}>
|
|
<View style={styles.sectionHeading}>
|
|
<Text style={styles.sectionTitle}>{section.title}</Text>
|
|
</View>
|
|
|
|
<View style={styles.listCard}>
|
|
{section.data.map((agent, index) => (
|
|
<View
|
|
key={`${agent.serverId}:${agent.id}`}
|
|
style={index > 0 ? styles.rowDivider : undefined}
|
|
>
|
|
<SessionRow
|
|
agent={agent}
|
|
isMobile={isMobile}
|
|
selectedAgentId={selectedAgentId}
|
|
showAttentionIndicator={showAttentionIndicator}
|
|
onPress={onAgentPress}
|
|
onLongPress={onAgentLongPress}
|
|
/>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export function AgentList({
|
|
agents,
|
|
isRefreshing = false,
|
|
onRefresh,
|
|
selectedAgentId,
|
|
onAgentSelect,
|
|
listFooterComponent,
|
|
showAttentionIndicator = true,
|
|
}: AgentListProps) {
|
|
const { theme } = useUnistyles()
|
|
const insets = useSafeAreaInsets()
|
|
const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null)
|
|
const isMobile = UnistylesRuntime.breakpoint === 'xs' || UnistylesRuntime.breakpoint === 'sm'
|
|
|
|
const actionClient = useSessionStore((state) =>
|
|
actionAgent?.serverId ? (state.sessions[actionAgent.serverId]?.client ?? null) : null
|
|
)
|
|
|
|
const isActionSheetVisible = actionAgent !== null
|
|
const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !actionClient)
|
|
|
|
const handleAgentPress = useCallback(
|
|
(agent: AggregatedAgent) => {
|
|
if (isActionSheetVisible) {
|
|
return
|
|
}
|
|
|
|
const serverId = agent.serverId
|
|
const agentId = agent.id
|
|
|
|
onAgentSelect?.()
|
|
|
|
const route = prepareWorkspaceTab({
|
|
serverId,
|
|
workspaceId: agent.cwd,
|
|
target: { kind: 'agent', agentId },
|
|
})
|
|
router.navigate(route as any)
|
|
},
|
|
[isActionSheetVisible, onAgentSelect]
|
|
)
|
|
|
|
const handleAgentLongPress = useCallback((agent: AggregatedAgent) => {
|
|
setActionAgent(agent)
|
|
}, [])
|
|
|
|
const handleCloseActionSheet = useCallback(() => {
|
|
setActionAgent(null)
|
|
}, [])
|
|
|
|
const handleArchiveAgent = useCallback(() => {
|
|
if (!actionAgent || !actionClient) {
|
|
return
|
|
}
|
|
void actionClient.archiveAgent(actionAgent.id)
|
|
setActionAgent(null)
|
|
}, [actionAgent, actionClient])
|
|
|
|
const sections = useMemo((): AgentListSection[] => {
|
|
const order = ['Today', 'Yesterday', 'This week', 'This month', 'Older'] as const
|
|
const buckets = new Map<string, AggregatedAgent[]>()
|
|
for (const agent of agents) {
|
|
const label = deriveDateSectionLabel(agent.lastActivityAt)
|
|
const existing = buckets.get(label) ?? []
|
|
existing.push(agent)
|
|
buckets.set(label, existing)
|
|
}
|
|
|
|
const result: AgentListSection[] = []
|
|
for (const label of order) {
|
|
const data = buckets.get(label)
|
|
if (!data || data.length === 0) {
|
|
continue
|
|
}
|
|
result.push({ key: `date:${label}`, title: label, data })
|
|
}
|
|
return result
|
|
}, [agents])
|
|
|
|
const renderSection: ListRenderItem<AgentListSection> = useCallback(
|
|
({ item: section }) => (
|
|
<SessionTableSection
|
|
section={section}
|
|
isMobile={isMobile}
|
|
selectedAgentId={selectedAgentId}
|
|
showAttentionIndicator={showAttentionIndicator}
|
|
onAgentPress={handleAgentPress}
|
|
onAgentLongPress={handleAgentLongPress}
|
|
/>
|
|
),
|
|
[handleAgentLongPress, handleAgentPress, isMobile, selectedAgentId, showAttentionIndicator]
|
|
)
|
|
|
|
const keyExtractor = useCallback((section: AgentListSection) => section.key, [])
|
|
|
|
return (
|
|
<>
|
|
<FlatList
|
|
data={sections}
|
|
style={styles.list}
|
|
contentContainerStyle={styles.listContent}
|
|
keyExtractor={keyExtractor}
|
|
renderItem={renderSection}
|
|
showsVerticalScrollIndicator={false}
|
|
keyboardShouldPersistTaps="handled"
|
|
ListFooterComponent={listFooterComponent}
|
|
refreshControl={
|
|
onRefresh ? (
|
|
<RefreshControl
|
|
refreshing={isRefreshing}
|
|
onRefresh={onRefresh}
|
|
tintColor={theme.colors.foregroundMuted}
|
|
colors={[theme.colors.foregroundMuted]}
|
|
/>
|
|
) : undefined
|
|
}
|
|
/>
|
|
|
|
<Modal
|
|
visible={isActionSheetVisible}
|
|
animationType="fade"
|
|
transparent
|
|
onRequestClose={handleCloseActionSheet}
|
|
>
|
|
<View style={styles.sheetOverlay}>
|
|
<Pressable style={styles.sheetBackdrop} onPress={handleCloseActionSheet} />
|
|
<View
|
|
style={[
|
|
styles.sheetContainer,
|
|
{ paddingBottom: Math.max(insets.bottom, theme.spacing[6]) },
|
|
]}
|
|
>
|
|
<View style={styles.sheetHandle} />
|
|
<Text style={styles.sheetTitle}>
|
|
{isActionDaemonUnavailable ? 'Host offline' : 'Archive this session?'}
|
|
</Text>
|
|
<View style={styles.sheetButtonRow}>
|
|
<Pressable
|
|
style={[styles.sheetButton, styles.sheetCancelButton]}
|
|
onPress={handleCloseActionSheet}
|
|
testID="agent-action-cancel"
|
|
>
|
|
<Text style={styles.sheetCancelText}>Cancel</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
disabled={isActionDaemonUnavailable}
|
|
style={[styles.sheetButton, styles.sheetArchiveButton]}
|
|
onPress={handleArchiveAgent}
|
|
testID="agent-action-archive"
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.sheetArchiveText,
|
|
isActionDaemonUnavailable && styles.sheetArchiveTextDisabled,
|
|
]}
|
|
>
|
|
Archive
|
|
</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</>
|
|
)
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
list: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
},
|
|
listContent: {
|
|
paddingHorizontal: {
|
|
xs: theme.spacing[3],
|
|
md: theme.spacing[6],
|
|
},
|
|
paddingTop: theme.spacing[2],
|
|
paddingBottom: theme.spacing[6],
|
|
gap: theme.spacing[1],
|
|
},
|
|
sectionBlock: {
|
|
marginTop: theme.spacing[2],
|
|
},
|
|
sectionHeading: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
gap: theme.spacing[3],
|
|
paddingHorizontal: theme.spacing[1],
|
|
marginBottom: theme.spacing[2],
|
|
},
|
|
sectionTitle: {
|
|
fontSize: theme.fontSize.sm,
|
|
fontWeight: theme.fontWeight.medium,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
listCard: {
|
|
overflow: {
|
|
xs: 'hidden' as const,
|
|
md: 'visible' as const,
|
|
},
|
|
borderRadius: {
|
|
xs: theme.borderRadius.lg,
|
|
md: 0,
|
|
},
|
|
},
|
|
rowDivider: {
|
|
borderTopWidth: {
|
|
xs: StyleSheet.hairlineWidth,
|
|
md: 0,
|
|
},
|
|
borderTopColor: theme.colors.border,
|
|
},
|
|
row: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
paddingVertical: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[3],
|
|
borderRadius: {
|
|
xs: theme.borderRadius.lg,
|
|
md: 0,
|
|
},
|
|
marginBottom: {
|
|
xs: theme.spacing[1],
|
|
md: 0,
|
|
},
|
|
},
|
|
rowLeading: {
|
|
marginRight: theme.spacing[3],
|
|
},
|
|
rowContent: {
|
|
flex: 1,
|
|
minWidth: 0,
|
|
},
|
|
rowTitleRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flexWrap: 'wrap',
|
|
gap: theme.spacing[2],
|
|
},
|
|
rowMetaRow: {
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
flexWrap: 'wrap',
|
|
gap: theme.spacing[1],
|
|
marginTop: 2,
|
|
},
|
|
rowTrailing: {
|
|
marginLeft: theme.spacing[2],
|
|
},
|
|
rowSelected: {
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
rowHovered: {
|
|
backgroundColor: theme.colors.surface1,
|
|
},
|
|
rowPressed: {
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
sessionTitle: {
|
|
flexShrink: 1,
|
|
fontSize: theme.fontSize.sm,
|
|
fontWeight: '500',
|
|
color: theme.colors.foreground,
|
|
opacity: 0.86,
|
|
},
|
|
sessionTitleHighlighted: {
|
|
opacity: 1,
|
|
},
|
|
sessionMetaText: {
|
|
maxWidth: '100%',
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
sessionMetaSeparator: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
opacity: 0.7,
|
|
},
|
|
columnMeta: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
flexShrink: 1,
|
|
minWidth: 60,
|
|
maxWidth: 200,
|
|
marginLeft: theme.spacing[4],
|
|
},
|
|
columnMetaFixed: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
flexShrink: 0,
|
|
width: 72,
|
|
textAlign: 'right' as const,
|
|
},
|
|
badge: {
|
|
paddingHorizontal: theme.spacing[2],
|
|
paddingVertical: theme.spacing[1],
|
|
borderRadius: theme.borderRadius.full,
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
badgeWarning: {
|
|
backgroundColor: 'rgba(245, 158, 11, 0.12)',
|
|
},
|
|
badgeDanger: {
|
|
backgroundColor: 'rgba(239, 68, 68, 0.14)',
|
|
},
|
|
badgeText: {
|
|
fontSize: theme.fontSize.xs,
|
|
fontWeight: theme.fontWeight.medium,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
badgeTextWarning: {
|
|
color: theme.colors.palette.amber[500],
|
|
},
|
|
badgeTextDanger: {
|
|
color: theme.colors.palette.red[300],
|
|
},
|
|
sheetOverlay: {
|
|
flex: 1,
|
|
justifyContent: 'flex-end',
|
|
},
|
|
sheetBackdrop: {
|
|
position: 'absolute',
|
|
top: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
left: 0,
|
|
backgroundColor: 'rgba(0,0,0,0.35)',
|
|
},
|
|
sheetContainer: {
|
|
backgroundColor: theme.colors.surface2,
|
|
borderTopLeftRadius: theme.borderRadius['2xl'],
|
|
borderTopRightRadius: theme.borderRadius['2xl'],
|
|
paddingHorizontal: theme.spacing[6],
|
|
paddingTop: theme.spacing[4],
|
|
gap: theme.spacing[4],
|
|
},
|
|
sheetHandle: {
|
|
alignSelf: 'center',
|
|
width: 40,
|
|
height: 4,
|
|
borderRadius: theme.borderRadius.full,
|
|
backgroundColor: theme.colors.foregroundMuted,
|
|
opacity: 0.3,
|
|
},
|
|
sheetTitle: {
|
|
fontSize: theme.fontSize.lg,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
color: theme.colors.foreground,
|
|
textAlign: 'center',
|
|
},
|
|
sheetButtonRow: {
|
|
flexDirection: 'row',
|
|
gap: theme.spacing[3],
|
|
},
|
|
sheetButton: {
|
|
flex: 1,
|
|
borderRadius: theme.borderRadius.lg,
|
|
paddingVertical: theme.spacing[4],
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
sheetArchiveButton: {
|
|
backgroundColor: theme.colors.primary,
|
|
},
|
|
sheetArchiveText: {
|
|
color: theme.colors.primaryForeground,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
fontSize: theme.fontSize.base,
|
|
},
|
|
sheetArchiveTextDisabled: {
|
|
opacity: 0.5,
|
|
},
|
|
sheetCancelButton: {
|
|
backgroundColor: theme.colors.surface1,
|
|
},
|
|
sheetCancelText: {
|
|
color: theme.colors.foreground,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
fontSize: theme.fontSize.base,
|
|
},
|
|
}))
|