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

feat: add "Requires Attention" agent grouping feature

Browse Source 
Implement a new UI section that surfaces agents requiring user attention at the top of the agent list. This includes agents that are running, have pending permissions, or have errors.

**Backend changes:**
- Add `requiresAttention` field to agent projections and SDK types
- Implement logic in AgentManager to detect attention states (running, pending permissions, errors)
- Add WebSocket message handler to notify clients of attention state changes
- Update session state to include attention tracking

**Frontend changes:**
- Add "REQUIRES ATTENTION" section in agent-list component with visual prominence
- Update useAggregatedAgents hook to expose `requiresAttention` agents
- Enhance session store to track and update attention states
- Add real-time updates via WebSocket for attention state changes
- Update type definitions across agent directory and stream types

Verified working via Playwright MCP testing on localhost:8081.

🤖 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-04 11:27:08 +00:00
co-authored by Claude
parent fd36c9b8e2
commit 0f1758709d
16 changed files with 305 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/agent-input-area.tsx
+1
View File
@@ -125,6 +125,7 @@ export function AgentInputArea({ agentId, serverId }: AgentInputAreaProps) {
on: () => () => {},
sendPing: () => {},
sendUserMessage: () => {},
clearAgentAttention: () => {},
subscribeConnectionStatus: () => () => {},
getConnectionState: () => ({ isConnected: false, isConnecting: false }),
}),
packages/app/src/components/agent-list.tsx
+116 -58
View File
@@ -1,5 +1,5 @@
import { View, Text, Pressable, FlatList, Modal, RefreshControl, type ListRenderItem } from "react-native";
import { useCallback, useState } from "react";
import { View, Text, Pressable, SectionList, Modal, RefreshControl, type SectionListRenderItem } from "react-native";
import { useCallback, useState, useMemo } from "react";
import { router } from "expo-router";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { formatTimeAgo } from "@/utils/time";
@@ -15,10 +15,39 @@ interface AgentListProps {
onRefresh?: () => void;
}
interface AgentSection {
title: string;
data: AggregatedAgent[];
}
export function AgentList({ agents, isRefreshing = false, onRefresh }: AgentListProps) {
const { theme } = useUnistyles();
const [actionAgent, setActionAgent] = useState<AggregatedAgent | null>(null);
// Group agents by attention status
const sections = useMemo<AgentSection[]>(() => {
const requiresAttention: AggregatedAgent[] = [];
const normal: AggregatedAgent[] = [];
for (const agent of agents) {
if (agent.requiresAttention) {
requiresAttention.push(agent);
} else {
normal.push(agent);
}
}
const result: AgentSection[] = [];
if (requiresAttention.length > 0) {
result.push({ title: "Requires Attention", data: requiresAttention });
}
if (normal.length > 0) {
result.push({ title: "All Agents", data: normal });
}
return result;
}, [agents]);
// Get the methods for the specific server
const methods = useSessionStore((state) =>
actionAgent?.serverId ? state.sessions[actionAgent.serverId]?.methods : undefined
@@ -33,6 +62,13 @@ export function AgentList({ agents, isRefreshing = false, onRefresh }: AgentList
if (isActionSheetVisible) {
return;
}
// Clear attention flag when opening agent
const session = useSessionStore.getState().sessions[serverId];
if (session?.ws) {
session.ws.clearAgentAttention(agentId);
}
const navigationKey = buildAgentNavigationKey(serverId, agentId);
startNavigationTiming(navigationKey, {
from: "home",
@@ -66,75 +102,75 @@ export function AgentList({ agents, isRefreshing = false, onRefresh }: AgentList
setActionAgent(null);
}, [actionAgent, deleteAgent]);
const renderAgentItem = useCallback<ListRenderItem<AggregatedAgent>>(
const renderAgentItem = useCallback<SectionListRenderItem<AggregatedAgent, AgentSection>>(
({ item: agent }) => {
const statusColor = getAgentStatusColor(agent.status);
const statusLabel = getAgentStatusLabel(agent.status);
const timeAgo = formatTimeAgo(agent.lastActivityAt);
const providerLabel = getAgentProviderDefinition(agent.provider).label;
const statusColor = getAgentStatusColor(agent.status);
const statusLabel = getAgentStatusLabel(agent.status);
const timeAgo = formatTimeAgo(agent.lastActivityAt);
const providerLabel = getAgentProviderDefinition(agent.provider).label;
return (
<Pressable
style={({ pressed }) => [
styles.agentItem,
pressed && styles.agentItemPressed,
]}
onPress={() => handleAgentPress(agent.serverId, agent.id)}
onLongPress={() => handleAgentLongPress(agent)}
>
<View style={styles.agentContent}>
<View style={styles.titleRow}>
return (
<Pressable
style={({ pressed }) => [
styles.agentItem,
pressed && styles.agentItemPressed,
]}
onPress={() => handleAgentPress(agent.serverId, agent.id)}
onLongPress={() => handleAgentLongPress(agent)}
>
<View style={styles.agentContent}>
<View style={styles.titleRow}>
<Text
style={styles.agentTitle}
numberOfLines={1}
>
{agent.title || "New Agent"}
</Text>
<View style={[styles.hostBadge, { backgroundColor: theme.colors.muted }]}>
<Text
style={styles.agentTitle}
style={[styles.hostText, { color: theme.colors.mutedForeground }]}
numberOfLines={1}
>
{agent.title || "New Agent"}
{agent.serverLabel}
</Text>
<View style={[styles.hostBadge, { backgroundColor: theme.colors.muted }]}>
</View>
</View>
<Text style={styles.agentDirectory} numberOfLines={1}>
{agent.cwd}
</Text>
<View style={styles.statusRow}>
<View style={styles.statusGroup}>
<View
style={[styles.providerBadge, { backgroundColor: theme.colors.muted }]}
>
<Text
style={[styles.hostText, { color: theme.colors.mutedForeground }]}
style={[styles.providerText, { color: theme.colors.mutedForeground }]}
numberOfLines={1}
>
{agent.serverLabel}
{providerLabel}
</Text>
</View>
<View style={styles.statusBadge}>
<View
style={[styles.statusDot, { backgroundColor: statusColor }]}
/>
<Text style={[styles.statusText, { color: statusColor }]}>
{statusLabel}
</Text>
</View>
</View>
<Text style={styles.agentDirectory} numberOfLines={1}>
{agent.cwd}
<Text style={styles.timeAgo}>
{timeAgo}
</Text>
<View style={styles.statusRow}>
<View style={styles.statusGroup}>
<View
style={[styles.providerBadge, { backgroundColor: theme.colors.muted }]}
>
<Text
style={[styles.providerText, { color: theme.colors.mutedForeground }]}
numberOfLines={1}
>
{providerLabel}
</Text>
</View>
<View style={styles.statusBadge}>
<View
style={[styles.statusDot, { backgroundColor: statusColor }]}
/>
<Text style={[styles.statusText, { color: statusColor }]}>
{statusLabel}
</Text>
</View>
</View>
<Text style={styles.timeAgo}>
{timeAgo}
</Text>
</View>
</View>
</Pressable>
);
},
</View>
</Pressable>
);
},
[handleAgentLongPress, handleAgentPress, theme.colors.muted, theme.colors.mutedForeground]
);
@@ -143,16 +179,27 @@ export function AgentList({ agents, isRefreshing = false, onRefresh }: AgentList
[]
);
const renderSectionHeader = useCallback(
({ section }: { section: AgentSection }) => (
<View style={styles.sectionHeader}>
<Text style={styles.sectionTitle}>{section.title}</Text>
</View>
),
[]
);
return (
<>
<FlatList
data={agents}
<SectionList
sections={sections}
style={styles.list}
contentContainerStyle={styles.listContent}
keyExtractor={keyExtractor}
renderItem={renderAgentItem}
renderSectionHeader={renderSectionHeader}
showsVerticalScrollIndicator={false}
keyboardShouldPersistTaps="handled"
stickySectionHeadersEnabled={false}
refreshControl={
onRefresh ? (
<RefreshControl
@@ -219,6 +266,17 @@ const styles = StyleSheet.create((theme) => ({
paddingTop: theme.spacing[4],
paddingBottom: theme.spacing[4],
},
sectionHeader: {
paddingTop: theme.spacing[2],
paddingBottom: theme.spacing[2],
paddingHorizontal: theme.spacing[2],
},
sectionTitle: {
fontSize: theme.fontSize.sm,
fontWeight: theme.fontWeight.semibold,
color: theme.colors.mutedForeground,
textTransform: "uppercase",
},
agentItem: {
paddingVertical: theme.spacing[4],
paddingHorizontal: theme.spacing[4],
packages/app/src/components/agent-stream-view.tsx
+1
View File
@@ -94,6 +94,7 @@ export function AgentStreamView({
on: () => () => {},
sendPing: () => {},
sendUserMessage: () => {},
clearAgentAttention: () => {},
}),
[]
);
packages/app/src/components/create-agent-modal.tsx
+1
View File
@@ -334,6 +334,7 @@ function AgentFlowModal({
on: () => () => {},
sendPing: () => {},
sendUserMessage: () => {},
clearAgentAttention: () => {},
subscribeConnectionStatus: () => () => {},
getConnectionState: () => ({ isConnected: false, isConnecting: false }),
}),
packages/app/src/contexts/session-context.tsx
+4
View File
@@ -114,6 +114,7 @@ function normalizeAgentSnapshot(snapshot: AgentSnapshotPayload, serverId: string
const createdAt = new Date(snapshot.createdAt);
const updatedAt = new Date(snapshot.updatedAt);
const lastUserMessageAt = snapshot.lastUserMessageAt ? new Date(snapshot.lastUserMessageAt) : null;
const attentionTimestamp = snapshot.attentionTimestamp ? new Date(snapshot.attentionTimestamp) : null;
return {
serverId,
id: snapshot.id,
@@ -134,6 +135,9 @@ function normalizeAgentSnapshot(snapshot: AgentSnapshotPayload, serverId: string
title: snapshot.title ?? null,
cwd: snapshot.cwd,
model: snapshot.model ?? null,
requiresAttention: snapshot.requiresAttention ?? false,
attentionReason: snapshot.attentionReason ?? null,
attentionTimestamp,
};
}
packages/app/src/hooks/use-aggregated-agents.ts
+3
View File
@@ -71,6 +71,9 @@ export function useAggregatedAgents(): AggregatedAgentsResult {
lastActivityAt: agent.lastActivityAt,
cwd: agent.cwd,
provider: agent.provider,
requiresAttention: agent.requiresAttention,
attentionReason: agent.attentionReason,
attentionTimestamp: agent.attentionTimestamp,
});
}
}
packages/app/src/hooks/use-websocket.ts
+16
View File
@@ -23,6 +23,7 @@ export interface UseWebSocketReturn {
) => () => void;
sendPing: () => void;
sendUserMessage: (message: string) => void;
clearAgentAttention: (agentId: string) => void;
subscribeConnectionStatus?: (listener: (status: ConnectionStatusSnapshot) => void) => () => void;
getConnectionState?: () => ConnectionStatusSnapshot;
}
@@ -289,6 +290,19 @@ export function useWebSocket(url: string, conversationId?: string | null): UseWe
[send]
);
const clearAgentAttention = useCallback(
(agentId: string) => {
send({
type: "session",
message: {
type: "clear_agent_attention",
agentId,
},
});
},
[send]
);
const subscribeConnectionStatus = useCallback(
(listener: (status: ConnectionStatusSnapshot) => void) => {
connectionListenersRef.current.add(listener);
@@ -318,6 +332,7 @@ export function useWebSocket(url: string, conversationId?: string | null): UseWe
on,
sendPing,
sendUserMessage,
clearAgentAttention,
subscribeConnectionStatus,
getConnectionState,
}),
@@ -330,6 +345,7 @@ export function useWebSocket(url: string, conversationId?: string | null): UseWe
on,
sendPing,
sendUserMessage,
clearAgentAttention,
subscribeConnectionStatus,
getConnectionState,
]
packages/app/src/stores/session-store.ts
+6
View File
@@ -94,6 +94,9 @@ export interface Agent {
title: string | null;
cwd: string;
model: string | null;
requiresAttention?: boolean;
attentionReason?: "finished" | "error" | "permission" | null;
attentionTimestamp?: Date | null;
}
export interface Command {
@@ -816,6 +819,9 @@ export const useSessionStore = create<SessionStore>()(
lastActivityAt,
cwd: agent.cwd,
provider: agent.provider,
requiresAttention: agent.requiresAttention ?? false,
attentionReason: agent.attentionReason ?? null,
attentionTimestamp: agent.attentionTimestamp ?? null,
});
}
return entries;
packages/app/src/types/agent-directory.ts
+3
View File
@@ -9,4 +9,7 @@ export interface AgentDirectoryEntry {
lastActivityAt: Date;
cwd: string;
provider: AgentProvider;
requiresAttention?: boolean;
attentionReason?: "finished" | "error" | "permission" | null;
attentionTimestamp?: Date | null;
}
packages/app/src/types/stream.ts
+1
View File
@@ -819,6 +819,7 @@ export function reduceStreamUpdate(
case "turn_failed":
case "permission_requested":
case "permission_resolved":
case "attention_required":
return finalizeActiveThoughts(state);
default:
return state;