660 lines
19 KiB
TypeScript
660 lines
19 KiB
TypeScript
import {
|
|
View,
|
|
Text,
|
|
Pressable,
|
|
Modal,
|
|
RefreshControl,
|
|
SectionList,
|
|
type ViewToken,
|
|
type SectionListRenderItem,
|
|
} from "react-native";
|
|
import {
|
|
useCallback,
|
|
useMemo,
|
|
useRef,
|
|
useState,
|
|
type ReactElement,
|
|
} from "react";
|
|
import { router, usePathname } from "expo-router";
|
|
import { StyleSheet, useUnistyles } from "react-native-unistyles";
|
|
import { useQueries, useQueryClient, type UseQueryOptions } from "@tanstack/react-query";
|
|
import { ChevronDown, ChevronRight } from "lucide-react-native";
|
|
import { formatTimeAgo } from "@/utils/time";
|
|
import { shortenPath } from "@/utils/shorten-path";
|
|
import { deriveBranchLabel, deriveProjectPath } from "@/utils/agent-display-info";
|
|
import {
|
|
groupAgents,
|
|
parseRepoShortNameFromRemoteUrl,
|
|
type ProjectGroup,
|
|
type DateGroup,
|
|
} from "@/utils/agent-grouping";
|
|
import { type AggregatedAgent } from "@/hooks/use-aggregated-agents";
|
|
import { useSessionStore } from "@/stores/session-store";
|
|
import {
|
|
CHECKOUT_STATUS_STALE_TIME,
|
|
type CheckoutStatusPayload,
|
|
checkoutStatusQueryKey,
|
|
useCheckoutStatusCacheOnly,
|
|
} from "@/hooks/use-checkout-status-query";
|
|
import {
|
|
buildAgentNavigationKey,
|
|
startNavigationTiming,
|
|
} from "@/utils/navigation-timing";
|
|
|
|
type SectionType =
|
|
| { type: "project"; data: ProjectGroup }
|
|
| { type: "date"; data: DateGroup };
|
|
|
|
interface SectionData {
|
|
key: string;
|
|
title: string;
|
|
type: "project" | "date";
|
|
data: AggregatedAgent[];
|
|
/** For project sections, the first agent's serverId (to lookup checkout status) */
|
|
firstAgentServerId?: string;
|
|
/** For project sections, the first agent's id (to lookup checkout status) */
|
|
firstAgentId?: string;
|
|
}
|
|
|
|
interface GroupedAgentListProps {
|
|
agents: AggregatedAgent[];
|
|
isRefreshing?: boolean;
|
|
onRefresh?: () => void;
|
|
selectedAgentId?: string;
|
|
onAgentSelect?: () => void;
|
|
listFooterComponent?: ReactElement | null;
|
|
}
|
|
|
|
interface SectionHeaderProps {
|
|
section: SectionData;
|
|
isCollapsed: boolean;
|
|
agentCount: number;
|
|
onToggle: () => void;
|
|
}
|
|
|
|
function SectionHeader({
|
|
section,
|
|
isCollapsed,
|
|
agentCount,
|
|
onToggle,
|
|
}: SectionHeaderProps) {
|
|
const { theme } = useUnistyles();
|
|
|
|
// For project sections, try to get repo name from checkout status
|
|
const checkoutQuery = useCheckoutStatusCacheOnly({
|
|
serverId: section.firstAgentServerId ?? "",
|
|
agentId: section.firstAgentId ?? "",
|
|
});
|
|
const checkout = checkoutQuery.data ?? null;
|
|
|
|
// Derive display title: prefer repo name from remote URL, fallback to path-based name
|
|
let displayTitle = section.title;
|
|
if (section.type === "project" && checkout?.isGit && checkout.remoteUrl) {
|
|
const repoName = parseRepoShortNameFromRemoteUrl(checkout.remoteUrl);
|
|
if (repoName) {
|
|
displayTitle = repoName;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Pressable
|
|
style={({ hovered }) => [
|
|
styles.sectionHeader,
|
|
hovered && styles.sectionHeaderHovered,
|
|
]}
|
|
onPress={onToggle}
|
|
>
|
|
<View style={styles.sectionHeaderLeft}>
|
|
{isCollapsed ? (
|
|
<ChevronRight
|
|
size={14}
|
|
color={theme.colors.foregroundMuted}
|
|
style={styles.chevron}
|
|
/>
|
|
) : (
|
|
<ChevronDown
|
|
size={14}
|
|
color={theme.colors.foregroundMuted}
|
|
style={styles.chevron}
|
|
/>
|
|
)}
|
|
<Text style={styles.sectionTitle} numberOfLines={1}>
|
|
{displayTitle}
|
|
</Text>
|
|
</View>
|
|
<Text style={styles.sectionCount}>{agentCount}</Text>
|
|
</Pressable>
|
|
);
|
|
}
|
|
|
|
export function GroupedAgentList({
|
|
agents,
|
|
isRefreshing = false,
|
|
onRefresh,
|
|
selectedAgentId,
|
|
onAgentSelect,
|
|
listFooterComponent,
|
|
}: GroupedAgentListProps) {
|
|
const { theme } = useUnistyles();
|
|
const pathname = usePathname();
|
|
const queryClient = useQueryClient();
|
|
const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null);
|
|
const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
|
|
new Set()
|
|
);
|
|
|
|
// Get the methods for the specific server
|
|
const methods = useSessionStore((state) =>
|
|
actionAgent?.serverId
|
|
? state.sessions[actionAgent.serverId]?.methods
|
|
: undefined
|
|
);
|
|
const deleteAgent = methods?.deleteAgent;
|
|
|
|
const isActionSheetVisible = actionAgent !== null;
|
|
const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !methods);
|
|
|
|
const handleAgentPress = useCallback(
|
|
(serverId: string, agentId: string) => {
|
|
if (isActionSheetVisible) {
|
|
return;
|
|
}
|
|
|
|
// Clear attention flag when opening agent
|
|
const session = useSessionStore.getState().sessions[serverId];
|
|
if (session?.client) {
|
|
session.client.clearAgentAttention(agentId);
|
|
}
|
|
|
|
const navigationKey = buildAgentNavigationKey(serverId, agentId);
|
|
startNavigationTiming(navigationKey, {
|
|
from: "home",
|
|
to: "agent",
|
|
params: { serverId, agentId },
|
|
});
|
|
|
|
const shouldReplace = pathname.startsWith("/agent/");
|
|
const navigate = shouldReplace ? router.replace : router.push;
|
|
|
|
onAgentSelect?.();
|
|
|
|
navigate(`/agent/${serverId}/${agentId}` as any);
|
|
},
|
|
[isActionSheetVisible, pathname, onAgentSelect]
|
|
);
|
|
|
|
const handleAgentLongPress = useCallback((agent: AggregatedAgent) => {
|
|
setActionAgent(agent);
|
|
}, []);
|
|
|
|
const handleCloseActionSheet = useCallback(() => {
|
|
setActionAgent(null);
|
|
}, []);
|
|
|
|
const handleDeleteAgent = useCallback(() => {
|
|
if (!actionAgent || !deleteAgent) {
|
|
return;
|
|
}
|
|
deleteAgent(actionAgent.id);
|
|
setActionAgent(null);
|
|
}, [actionAgent, deleteAgent]);
|
|
|
|
const toggleSection = useCallback((sectionKey: string) => {
|
|
setCollapsedSections((prev) => {
|
|
const next = new Set(prev);
|
|
if (next.has(sectionKey)) {
|
|
next.delete(sectionKey);
|
|
} else {
|
|
next.add(sectionKey);
|
|
}
|
|
return next;
|
|
});
|
|
}, []);
|
|
|
|
// Subscribe to checkout status cache entries so project grouping can react
|
|
// to remote URL updates (e.g. git worktrees in different directories).
|
|
const checkoutCacheQueries = useQueries({
|
|
queries: agents.map(
|
|
(agent): UseQueryOptions<CheckoutStatusPayload> => ({
|
|
queryKey: checkoutStatusQueryKey(agent.serverId, agent.id),
|
|
enabled: false,
|
|
staleTime: CHECKOUT_STATUS_STALE_TIME,
|
|
queryFn: async (): Promise<CheckoutStatusPayload> => {
|
|
throw new Error("checkout status cache-only query should not run");
|
|
},
|
|
})
|
|
),
|
|
});
|
|
|
|
const remoteUrlByAgentKey = useMemo(() => {
|
|
const result = new Map<string, string | null>();
|
|
for (let i = 0; i < agents.length; i++) {
|
|
const agent = agents[i];
|
|
if (!agent) {
|
|
continue;
|
|
}
|
|
const checkout = checkoutCacheQueries[i]?.data ?? null;
|
|
const remoteUrl = checkout?.remoteUrl ?? null;
|
|
result.set(`${agent.serverId}:${agent.id}`, remoteUrl);
|
|
}
|
|
return result;
|
|
}, [agents, checkoutCacheQueries]);
|
|
|
|
// Group agents
|
|
const { activeGroups, inactiveGroups } = useMemo(
|
|
() =>
|
|
groupAgents(agents, {
|
|
getRemoteUrl: (agent) =>
|
|
remoteUrlByAgentKey.get(`${agent.serverId}:${agent.id}`) ?? null,
|
|
}),
|
|
[agents, remoteUrlByAgentKey]
|
|
);
|
|
|
|
// Build sections for SectionList
|
|
const sections: SectionData[] = useMemo(() => {
|
|
const result: SectionData[] = [];
|
|
|
|
for (const group of activeGroups) {
|
|
const sectionKey = `project:${group.projectKey}`;
|
|
const isCollapsed = collapsedSections.has(sectionKey);
|
|
const firstAgent = group.agents[0];
|
|
result.push({
|
|
key: sectionKey,
|
|
title: group.projectName,
|
|
type: "project",
|
|
data: isCollapsed ? [] : group.agents,
|
|
firstAgentServerId: firstAgent?.serverId,
|
|
firstAgentId: firstAgent?.id,
|
|
});
|
|
}
|
|
|
|
for (const group of inactiveGroups) {
|
|
const sectionKey = `date:${group.label}`;
|
|
const isCollapsed = collapsedSections.has(sectionKey);
|
|
result.push({
|
|
key: sectionKey,
|
|
title: group.label,
|
|
type: "date",
|
|
data: isCollapsed ? [] : group.agents,
|
|
});
|
|
}
|
|
|
|
return result;
|
|
}, [activeGroups, inactiveGroups, collapsedSections]);
|
|
|
|
const viewabilityConfig = useMemo(
|
|
() => ({ itemVisiblePercentThreshold: 30 }),
|
|
[]
|
|
);
|
|
|
|
const onViewableItemsChanged = useRef(
|
|
({ viewableItems }: { viewableItems: Array<ViewToken> }) => {
|
|
for (const token of viewableItems) {
|
|
const agent = token.item as AggregatedAgent | undefined;
|
|
if (!agent) {
|
|
continue;
|
|
}
|
|
|
|
const session = useSessionStore.getState().sessions[agent.serverId];
|
|
const client = session?.client ?? null;
|
|
const isConnected = session?.connection.isConnected ?? false;
|
|
if (!client || !isConnected) {
|
|
continue;
|
|
}
|
|
|
|
const queryKey = checkoutStatusQueryKey(agent.serverId, agent.id);
|
|
const queryState = queryClient.getQueryState(queryKey);
|
|
const isFetching = queryState?.fetchStatus === "fetching";
|
|
const isFresh =
|
|
typeof queryState?.dataUpdatedAt === "number" &&
|
|
Date.now() - queryState.dataUpdatedAt < CHECKOUT_STATUS_STALE_TIME;
|
|
if (isFetching || isFresh) {
|
|
continue;
|
|
}
|
|
|
|
void queryClient.prefetchQuery({
|
|
queryKey,
|
|
queryFn: async () => await client.getCheckoutStatus(agent.id),
|
|
staleTime: CHECKOUT_STATUS_STALE_TIME,
|
|
});
|
|
}
|
|
}
|
|
);
|
|
|
|
const AgentListRow = useCallback(
|
|
({ agent }: { agent: AggregatedAgent }) => {
|
|
const timeAgo = formatTimeAgo(agent.lastActivityAt);
|
|
const agentKey = `${agent.serverId}:${agent.id}`;
|
|
const isSelected = selectedAgentId === agentKey;
|
|
const isRunning = agent.status === "running";
|
|
const statusColor = isRunning
|
|
? theme.colors.palette.blue[500]
|
|
: agent.requiresAttention
|
|
? theme.colors.success
|
|
: null;
|
|
|
|
const checkoutQuery = useCheckoutStatusCacheOnly({
|
|
serverId: agent.serverId,
|
|
agentId: agent.id,
|
|
});
|
|
const checkout = checkoutQuery.data ?? null;
|
|
const projectPath = deriveProjectPath(agent.cwd, checkout);
|
|
const branchLabel = deriveBranchLabel(checkout);
|
|
|
|
return (
|
|
<Pressable
|
|
style={({ pressed, hovered }) => [
|
|
styles.agentItem,
|
|
isSelected && styles.agentItemSelected,
|
|
hovered && styles.agentItemHovered,
|
|
pressed && styles.agentItemPressed,
|
|
]}
|
|
onPress={() => handleAgentPress(agent.serverId, agent.id)}
|
|
onLongPress={() => handleAgentLongPress(agent)}
|
|
testID={`agent-row-${agent.serverId}-${agent.id}`}
|
|
>
|
|
{({ hovered }) => (
|
|
<View style={styles.agentContent}>
|
|
<View style={styles.row}>
|
|
{statusColor && (
|
|
<View
|
|
style={[styles.statusDot, { backgroundColor: statusColor }]}
|
|
/>
|
|
)}
|
|
<Text
|
|
style={[
|
|
styles.agentTitle,
|
|
(isSelected || hovered) && styles.agentTitleHighlighted,
|
|
]}
|
|
numberOfLines={1}
|
|
>
|
|
{agent.title || "New Agent"}
|
|
</Text>
|
|
</View>
|
|
|
|
<Text style={styles.secondaryRow} numberOfLines={1}>
|
|
{shortenPath(projectPath)}
|
|
{branchLabel ? ` · ${branchLabel}` : ""} · {timeAgo}
|
|
</Text>
|
|
</View>
|
|
)}
|
|
</Pressable>
|
|
);
|
|
},
|
|
[
|
|
handleAgentLongPress,
|
|
handleAgentPress,
|
|
selectedAgentId,
|
|
theme.colors.palette.blue,
|
|
theme.colors.success,
|
|
]
|
|
);
|
|
|
|
const renderItem: SectionListRenderItem<AggregatedAgent, SectionData> =
|
|
useCallback(
|
|
({ item: agent }) => <AgentListRow agent={agent} />,
|
|
[AgentListRow]
|
|
);
|
|
|
|
const renderSectionHeader = useCallback(
|
|
({ section }: { section: SectionData }) => {
|
|
const isCollapsed = collapsedSections.has(section.key);
|
|
const agentCount =
|
|
section.type === "project"
|
|
? activeGroups.find((g) => `project:${g.projectKey}` === section.key)
|
|
?.agents.length ?? 0
|
|
: inactiveGroups.find((g) => `date:${g.label}` === section.key)
|
|
?.agents.length ?? 0;
|
|
|
|
return (
|
|
<SectionHeader
|
|
section={section}
|
|
isCollapsed={isCollapsed}
|
|
agentCount={agentCount}
|
|
onToggle={() => toggleSection(section.key)}
|
|
/>
|
|
);
|
|
},
|
|
[collapsedSections, activeGroups, inactiveGroups, toggleSection]
|
|
);
|
|
|
|
const keyExtractor = useCallback(
|
|
(agent: AggregatedAgent) => `${agent.serverId}:${agent.id}`,
|
|
[]
|
|
);
|
|
|
|
return (
|
|
<>
|
|
<SectionList
|
|
sections={sections}
|
|
style={styles.list}
|
|
contentContainerStyle={styles.listContent}
|
|
keyExtractor={keyExtractor}
|
|
renderItem={renderItem}
|
|
renderSectionHeader={renderSectionHeader}
|
|
stickySectionHeadersEnabled={false}
|
|
extraData={selectedAgentId}
|
|
showsVerticalScrollIndicator={false}
|
|
keyboardShouldPersistTaps="handled"
|
|
initialNumToRender={12}
|
|
windowSize={7}
|
|
maxToRenderPerBatch={12}
|
|
updateCellsBatchingPeriod={16}
|
|
ListFooterComponent={listFooterComponent}
|
|
onViewableItemsChanged={onViewableItemsChanged.current}
|
|
viewabilityConfig={viewabilityConfig}
|
|
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}>
|
|
<View style={styles.sheetHandle} />
|
|
<Text style={styles.sheetTitle}>
|
|
{actionAgent?.title || "Delete agent"}
|
|
</Text>
|
|
<Text style={styles.sheetSubtitle}>
|
|
{isActionDaemonUnavailable
|
|
? "This host is offline—actions will be available once it reconnects automatically."
|
|
: "Removing this agent only deletes it from Paseo. Claude/Codex keeps the original project."}
|
|
</Text>
|
|
<Pressable
|
|
disabled={!deleteAgent || isActionDaemonUnavailable}
|
|
style={[styles.sheetButton, styles.sheetDeleteButton]}
|
|
onPress={handleDeleteAgent}
|
|
testID="agent-action-delete"
|
|
>
|
|
<Text
|
|
style={[
|
|
styles.sheetDeleteText,
|
|
(!deleteAgent || isActionDaemonUnavailable) &&
|
|
styles.sheetDeleteTextDisabled,
|
|
]}
|
|
>
|
|
{isActionDaemonUnavailable ? "Host offline" : "Delete agent"}
|
|
</Text>
|
|
</Pressable>
|
|
<Pressable
|
|
style={[styles.sheetButton, styles.sheetCancelButton]}
|
|
onPress={handleCloseActionSheet}
|
|
testID="agent-action-cancel"
|
|
>
|
|
<Text style={styles.sheetCancelText}>Cancel</Text>
|
|
</Pressable>
|
|
</View>
|
|
</View>
|
|
</Modal>
|
|
</>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create((theme) => ({
|
|
list: {
|
|
flex: 1,
|
|
minHeight: 0,
|
|
},
|
|
listContent: {
|
|
paddingHorizontal: theme.spacing[4],
|
|
paddingTop: theme.spacing[2],
|
|
paddingBottom: theme.spacing[4],
|
|
},
|
|
sectionHeader: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
paddingVertical: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[2],
|
|
marginTop: theme.spacing[2],
|
|
borderRadius: theme.borderRadius.md,
|
|
},
|
|
sectionHeaderHovered: {
|
|
backgroundColor: theme.colors.surface1,
|
|
},
|
|
sectionHeaderLeft: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
flex: 1,
|
|
minWidth: 0,
|
|
},
|
|
chevron: {
|
|
marginRight: theme.spacing[1],
|
|
},
|
|
sectionTitle: {
|
|
fontSize: theme.fontSize.sm,
|
|
fontWeight: theme.fontWeight.medium,
|
|
color: theme.colors.foregroundMuted,
|
|
flex: 1,
|
|
},
|
|
sectionCount: {
|
|
fontSize: theme.fontSize.xs,
|
|
color: theme.colors.foregroundMuted,
|
|
marginLeft: theme.spacing[2],
|
|
},
|
|
agentItem: {
|
|
paddingVertical: theme.spacing[2],
|
|
paddingHorizontal: theme.spacing[3],
|
|
borderRadius: theme.borderRadius.lg,
|
|
marginBottom: theme.spacing[1],
|
|
},
|
|
agentItemSelected: {
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
agentItemHovered: {
|
|
backgroundColor: theme.colors.surface1,
|
|
},
|
|
agentItemPressed: {
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
agentContent: {
|
|
flex: 1,
|
|
gap: theme.spacing[0],
|
|
},
|
|
row: {
|
|
flexDirection: "row",
|
|
alignItems: "center",
|
|
gap: theme.spacing[2],
|
|
},
|
|
agentTitle: {
|
|
flex: 1,
|
|
fontSize: theme.fontSize.base,
|
|
fontWeight: {
|
|
xs: "400",
|
|
md: "300",
|
|
},
|
|
color: theme.colors.foreground,
|
|
opacity: 0.8,
|
|
},
|
|
agentTitleHighlighted: {
|
|
color: theme.colors.foreground,
|
|
opacity: 1,
|
|
},
|
|
secondaryRow: {
|
|
fontSize: theme.fontSize.sm,
|
|
fontWeight: "300",
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
statusDot: {
|
|
width: 8,
|
|
height: 8,
|
|
borderRadius: theme.borderRadius.full,
|
|
},
|
|
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],
|
|
paddingBottom: theme.spacing[6],
|
|
gap: theme.spacing[4],
|
|
},
|
|
sheetHandle: {
|
|
alignSelf: "center",
|
|
width: 40,
|
|
height: 4,
|
|
borderRadius: theme.borderRadius.full,
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
sheetTitle: {
|
|
fontSize: theme.fontSize.lg,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
color: theme.colors.foreground,
|
|
},
|
|
sheetSubtitle: {
|
|
fontSize: theme.fontSize.sm,
|
|
color: theme.colors.foregroundMuted,
|
|
},
|
|
sheetButton: {
|
|
borderRadius: theme.borderRadius.lg,
|
|
paddingVertical: theme.spacing[3],
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
},
|
|
sheetDeleteButton: {
|
|
backgroundColor: theme.colors.destructive,
|
|
},
|
|
sheetDeleteText: {
|
|
color: theme.colors.destructiveForeground,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
},
|
|
sheetDeleteTextDisabled: {
|
|
opacity: 0.5,
|
|
},
|
|
sheetCancelButton: {
|
|
backgroundColor: theme.colors.surface2,
|
|
},
|
|
sheetCancelText: {
|
|
color: theme.colors.foreground,
|
|
fontWeight: theme.fontWeight.semibold,
|
|
},
|
|
}));
|