jb/paseo
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update files

Browse Source
This commit is contained in:
Mohamed Boudra
2026-01-28 15:41:21 +07:00
parent f7935f9cc1
commit d158dcf77a
2 changed files with 100 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/agent-list.tsx
+50 -45
View File
@@ -8,6 +8,7 @@ import {
type ViewToken, type ViewToken,
type SectionListRenderItem, type SectionListRenderItem,
} from "react-native"; } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useCallback, useMemo, useRef, useState, type ReactElement } from "react"; import { useCallback, useMemo, useRef, useState, type ReactElement } from "react";
import { router, usePathname } from "expo-router"; import { router, usePathname } from "expo-router";
import { StyleSheet, useUnistyles } from "react-native-unistyles"; import { StyleSheet, useUnistyles } from "react-native-unistyles";
@@ -81,6 +82,7 @@ export function AgentList({
const { theme } = useUnistyles(); const { theme } = useUnistyles();
const pathname = usePathname(); const pathname = usePathname();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const insets = useSafeAreaInsets();
const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null); const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null);
// Get the methods for the specific server // Get the methods for the specific server
@@ -89,7 +91,7 @@ export function AgentList({
? state.sessions[actionAgent.serverId]?.methods ? state.sessions[actionAgent.serverId]?.methods
: undefined : undefined
); );
const deleteAgent = methods?.deleteAgent; const archiveAgent = methods?.archiveAgent;
const isActionSheetVisible = actionAgent !== null; const isActionSheetVisible = actionAgent !== null;
const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !methods); const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !methods);
@@ -131,13 +133,13 @@ export function AgentList({
setActionAgent(null); setActionAgent(null);
}, []); }, []);
const handleDeleteAgent = useCallback(() => { const handleArchiveAgent = useCallback(() => {
if (!actionAgent || !deleteAgent) { if (!actionAgent || !archiveAgent) {
return; return;
} }
deleteAgent(actionAgent.id); archiveAgent(actionAgent.id);
setActionAgent(null); setActionAgent(null);
}, [actionAgent, deleteAgent]); }, [actionAgent, archiveAgent]);
const viewabilityConfig = useMemo( const viewabilityConfig = useMemo(
() => ({ itemVisiblePercentThreshold: 30 }), () => ({ itemVisiblePercentThreshold: 30 }),
@@ -329,39 +331,38 @@ export function AgentList({
style={styles.sheetBackdrop} style={styles.sheetBackdrop}
onPress={handleCloseActionSheet} onPress={handleCloseActionSheet}
/> />
<View style={styles.sheetContainer}> <View style={[styles.sheetContainer, { paddingBottom: Math.max(insets.bottom, theme.spacing[6]) }]}>
<View style={styles.sheetHandle} /> <View style={styles.sheetHandle} />
<Text style={styles.sheetTitle}> <Text style={styles.sheetTitle}>
{actionAgent?.title || "Delete agent"}
</Text>
<Text style={styles.sheetSubtitle}>
{isActionDaemonUnavailable {isActionDaemonUnavailable
? "This host is offline—actions will be available once it reconnects automatically." ? "Host offline"
: "Removing this agent only deletes it from Paseo. Claude/Codex keeps the original project."} : "Archive this agent?"}
</Text> </Text>
<Pressable <View style={styles.sheetButtonRow}>
disabled={!deleteAgent || isActionDaemonUnavailable} <Pressable
style={[styles.sheetButton, styles.sheetDeleteButton]} style={[styles.sheetButton, styles.sheetCancelButton]}
onPress={handleDeleteAgent} onPress={handleCloseActionSheet}
testID="agent-action-delete" testID="agent-action-cancel"
>
<Text
style={[
styles.sheetDeleteText,
(!deleteAgent || isActionDaemonUnavailable) &&
styles.sheetDeleteTextDisabled,
]}
> >
{isActionDaemonUnavailable ? "Host offline" : "Delete agent"} <Text style={styles.sheetCancelText}>Cancel</Text>
</Text> </Pressable>
</Pressable> <Pressable
<Pressable disabled={!archiveAgent || isActionDaemonUnavailable}
style={[styles.sheetButton, styles.sheetCancelButton]} style={[styles.sheetButton, styles.sheetArchiveButton]}
onPress={handleCloseActionSheet} onPress={handleArchiveAgent}
testID="agent-action-cancel" testID="agent-action-archive"
> >
<Text style={styles.sheetCancelText}>Cancel</Text> <Text
</Pressable> style={[
styles.sheetArchiveText,
(!archiveAgent || isActionDaemonUnavailable) &&
styles.sheetArchiveTextDisabled,
]}
>
Archive
</Text>
</Pressable>
</View>
</View> </View>
</View> </View>
</Modal> </Modal>
@@ -456,7 +457,6 @@ const styles = StyleSheet.create((theme) => ({
borderTopRightRadius: theme.borderRadius["2xl"], borderTopRightRadius: theme.borderRadius["2xl"],
paddingHorizontal: theme.spacing[6], paddingHorizontal: theme.spacing[6],
paddingTop: theme.spacing[4], paddingTop: theme.spacing[4],
paddingBottom: theme.spacing[6],
gap: theme.spacing[4], gap: theme.spacing[4],
}, },
sheetHandle: { sheetHandle: {
@@ -464,38 +464,43 @@ const styles = StyleSheet.create((theme) => ({
width: 40, width: 40,
height: 4, height: 4,
borderRadius: theme.borderRadius.full, borderRadius: theme.borderRadius.full,
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.foregroundMuted,
opacity: 0.3,
}, },
sheetTitle: { sheetTitle: {
fontSize: theme.fontSize.lg, fontSize: theme.fontSize.lg,
fontWeight: theme.fontWeight.semibold, fontWeight: theme.fontWeight.semibold,
color: theme.colors.foreground, color: theme.colors.foreground,
textAlign: "center",
}, },
sheetSubtitle: { sheetButtonRow: {
fontSize: theme.fontSize.sm, flexDirection: "row",
color: theme.colors.foregroundMuted, gap: theme.spacing[3],
}, },
sheetButton: { sheetButton: {
flex: 1,
borderRadius: theme.borderRadius.lg, borderRadius: theme.borderRadius.lg,
paddingVertical: theme.spacing[3], paddingVertical: theme.spacing[4],
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
sheetDeleteButton: { sheetArchiveButton: {
backgroundColor: theme.colors.destructive, backgroundColor: theme.colors.primary,
}, },
sheetDeleteText: { sheetArchiveText: {
color: theme.colors.destructiveForeground, color: theme.colors.primaryForeground,
fontWeight: theme.fontWeight.semibold, fontWeight: theme.fontWeight.semibold,
fontSize: theme.fontSize.base,
}, },
sheetDeleteTextDisabled: { sheetArchiveTextDisabled: {
opacity: 0.5, opacity: 0.5,
}, },
sheetCancelButton: { sheetCancelButton: {
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.surface1,
}, },
sheetCancelText: { sheetCancelText: {
color: theme.colors.foreground, color: theme.colors.foreground,
fontWeight: theme.fontWeight.semibold, fontWeight: theme.fontWeight.semibold,
fontSize: theme.fontSize.base,
}, },
})); }));
packages/app/src/components/grouped-agent-list.tsx
+50 -45
View File
@@ -5,6 +5,7 @@ import {
Modal, Modal,
Image, Image,
} from "react-native"; } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { import {
useCallback, useCallback,
useMemo, useMemo,
@@ -194,6 +195,7 @@ export function GroupedAgentList({
const { theme } = useUnistyles(); const { theme } = useUnistyles();
const pathname = usePathname(); const pathname = usePathname();
const queryClient = useQueryClient(); const queryClient = useQueryClient();
const insets = useSafeAreaInsets();
const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null); const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null);
const [collapsedSections, setCollapsedSections] = useState<Set<string>>( const [collapsedSections, setCollapsedSections] = useState<Set<string>>(
new Set() new Set()
@@ -205,7 +207,7 @@ export function GroupedAgentList({
? state.sessions[actionAgent.serverId]?.methods ? state.sessions[actionAgent.serverId]?.methods
: undefined : undefined
); );
const deleteAgent = methods?.deleteAgent; const archiveAgent = methods?.archiveAgent;
const isActionSheetVisible = actionAgent !== null; const isActionSheetVisible = actionAgent !== null;
const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !methods); const isActionDaemonUnavailable = Boolean(actionAgent?.serverId && !methods);
@@ -247,13 +249,13 @@ export function GroupedAgentList({
setActionAgent(null); setActionAgent(null);
}, []); }, []);
const handleDeleteAgent = useCallback(() => { const handleArchiveFromSheet = useCallback(() => {
if (!actionAgent || !deleteAgent) { if (!actionAgent || !archiveAgent) {
return; return;
} }
deleteAgent(actionAgent.id); archiveAgent(actionAgent.id);
setActionAgent(null); setActionAgent(null);
}, [actionAgent, deleteAgent]); }, [actionAgent, archiveAgent]);
const toggleSection = useCallback((sectionKey: string) => { const toggleSection = useCallback((sectionKey: string) => {
setCollapsedSections((prev) => { setCollapsedSections((prev) => {
@@ -557,39 +559,38 @@ export function GroupedAgentList({
style={styles.sheetBackdrop} style={styles.sheetBackdrop}
onPress={handleCloseActionSheet} onPress={handleCloseActionSheet}
/> />
<View style={styles.sheetContainer}> <View style={[styles.sheetContainer, { paddingBottom: Math.max(insets.bottom, theme.spacing[6]) }]}>
<View style={styles.sheetHandle} /> <View style={styles.sheetHandle} />
<Text style={styles.sheetTitle}> <Text style={styles.sheetTitle}>
{actionAgent?.title || "Delete agent"}
</Text>
<Text style={styles.sheetSubtitle}>
{isActionDaemonUnavailable {isActionDaemonUnavailable
? "This host is offline—actions will be available once it reconnects automatically." ? "Host offline"
: "Removing this agent only deletes it from Paseo. Claude/Codex keeps the original project."} : "Archive this agent?"}
</Text> </Text>
<Pressable <View style={styles.sheetButtonRow}>
disabled={!deleteAgent || isActionDaemonUnavailable} <Pressable
style={[styles.sheetButton, styles.sheetDeleteButton]} style={[styles.sheetButton, styles.sheetCancelButton]}
onPress={handleDeleteAgent} onPress={handleCloseActionSheet}
testID="agent-action-delete" testID="agent-action-cancel"
>
<Text
style={[
styles.sheetDeleteText,
(!deleteAgent || isActionDaemonUnavailable) &&
styles.sheetDeleteTextDisabled,
]}
> >
{isActionDaemonUnavailable ? "Host offline" : "Delete agent"} <Text style={styles.sheetCancelText}>Cancel</Text>
</Text> </Pressable>
</Pressable> <Pressable
<Pressable disabled={!archiveAgent || isActionDaemonUnavailable}
style={[styles.sheetButton, styles.sheetCancelButton]} style={[styles.sheetButton, styles.sheetArchiveButton]}
onPress={handleCloseActionSheet} onPress={handleArchiveFromSheet}
testID="agent-action-cancel" testID="agent-action-archive"
> >
<Text style={styles.sheetCancelText}>Cancel</Text> <Text
</Pressable> style={[
styles.sheetArchiveText,
(!archiveAgent || isActionDaemonUnavailable) &&
styles.sheetArchiveTextDisabled,
]}
>
Archive
</Text>
</Pressable>
</View>
</View> </View>
</View> </View>
</Modal> </Modal>
@@ -736,7 +737,6 @@ const styles = StyleSheet.create((theme) => ({
borderTopRightRadius: theme.borderRadius["2xl"], borderTopRightRadius: theme.borderRadius["2xl"],
paddingHorizontal: theme.spacing[6], paddingHorizontal: theme.spacing[6],
paddingTop: theme.spacing[4], paddingTop: theme.spacing[4],
paddingBottom: theme.spacing[6],
gap: theme.spacing[4], gap: theme.spacing[4],
}, },
sheetHandle: { sheetHandle: {
@@ -744,38 +744,43 @@ const styles = StyleSheet.create((theme) => ({
width: 40, width: 40,
height: 4, height: 4,
borderRadius: theme.borderRadius.full, borderRadius: theme.borderRadius.full,
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.foregroundMuted,
opacity: 0.3,
}, },
sheetTitle: { sheetTitle: {
fontSize: theme.fontSize.lg, fontSize: theme.fontSize.lg,
fontWeight: theme.fontWeight.semibold, fontWeight: theme.fontWeight.semibold,
color: theme.colors.foreground, color: theme.colors.foreground,
textAlign: "center",
}, },
sheetSubtitle: { sheetButtonRow: {
fontSize: theme.fontSize.sm, flexDirection: "row",
color: theme.colors.foregroundMuted, gap: theme.spacing[3],
}, },
sheetButton: { sheetButton: {
flex: 1,
borderRadius: theme.borderRadius.lg, borderRadius: theme.borderRadius.lg,
paddingVertical: theme.spacing[3], paddingVertical: theme.spacing[4],
alignItems: "center", alignItems: "center",
justifyContent: "center", justifyContent: "center",
}, },
sheetDeleteButton: { sheetArchiveButton: {
backgroundColor: theme.colors.destructive, backgroundColor: theme.colors.primary,
}, },
sheetDeleteText: { sheetArchiveText: {
color: theme.colors.destructiveForeground, color: theme.colors.primaryForeground,
fontWeight: theme.fontWeight.semibold, fontWeight: theme.fontWeight.semibold,
fontSize: theme.fontSize.base,
}, },
sheetDeleteTextDisabled: { sheetArchiveTextDisabled: {
opacity: 0.5, opacity: 0.5,
}, },
sheetCancelButton: { sheetCancelButton: {
backgroundColor: theme.colors.surface2, backgroundColor: theme.colors.surface1,
}, },
sheetCancelText: { sheetCancelText: {
color: theme.colors.foreground, color: theme.colors.foreground,
fontWeight: theme.fontWeight.semibold, fontWeight: theme.fontWeight.semibold,
fontSize: theme.fontSize.base,
}, },
})); }));