Replace reconnecting badge with pull-to-refresh

UX improvements:
- Remove misleading "Reconnecting..." badge overlay
- Implement native pull-to-refresh gesture on agent list
- Add manual refresh capability via pull gesture

Technical changes:
- Add refreshSession() method to session context
- Add refreshAll() to useAggregatedAgents hook
- Integrate RefreshControl in AgentList component
- Use isRevalidating state for refresh indicator
- Apply theme colors to RefreshControl for consistency

Benefits:
- Familiar iOS/Android UX pattern
- No UI overlays blocking content
- Clear user action (pull) → clear feedback (refresh)
- Accurate state representation (syncing vs reconnecting)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Mohamed Boudra
2025-12-03 02:57:38 +00:00
co-authored by Claude
parent 348cb9d637
commit e346b4c026
6 changed files with 58 additions and 33 deletions
@@ -1,4 +1,4 @@
import { useMemo } from "react";
import { useMemo, useCallback } from "react";
import { useDaemonConnections } from "@/contexts/daemon-connections-context";
import { useSessionStore } from "@/stores/session-store";
import type { AgentDirectoryEntry } from "@/types/agent-directory";
@@ -13,13 +13,24 @@ export interface AggregatedAgentsResult {
isLoading: boolean;
isInitialLoad: boolean;
isRevalidating: boolean;
refreshAll: () => void;
}
export function useAggregatedAgents(): AggregatedAgentsResult {
const { connectionStates } = useDaemonConnections();
const sessions = useSessionStore((state) => state.sessions);
return useMemo(() => {
const refreshAll = useCallback(() => {
console.log('[useAggregatedAgents] Manual refresh triggered for all sessions');
for (const [serverId, session] of Object.entries(sessions)) {
if (session?.methods?.refreshSession) {
console.log(`[useAggregatedAgents] Refreshing session ${serverId}`);
session.methods.refreshSession();
}
}
}, [sessions]);
const result = useMemo(() => {
const allAgents: AggregatedAgent[] = [];
// Derive agent directory from all sessions
@@ -124,4 +135,9 @@ export function useAggregatedAgents(): AggregatedAgentsResult {
isRevalidating,
};
}, [sessions, connectionStates]);
return {
...result,
refreshAll,
};
}
@@ -30,6 +30,7 @@ export type DaemonSession = SessionState & {
restartServer: (reason?: string) => void;
initializeAgent: (params: { agentId: string; requestId?: string }) => void;
refreshAgent: (params: { agentId: string; requestId?: string }) => void;
refreshSession: () => void;
cancelAgentRun: (agentId: string) => void;
sendAgentMessage: (
agentId: string,