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

refactor: add dynamic input height, agent sorting, and last activity tracking

Browse Source
This commit is contained in:
Mohamed Boudra
2025-10-25 21:56:44 +02:00
parent 1d6de732b6
commit 8d591da671
10 changed files with 186 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/app/src/components/agent-input-area.tsx
+38 -6
View File
@@ -1,4 +1,10 @@
import { View, TextInput, Pressable } from "react-native";
import {
View,
TextInput,
Pressable,
NativeSyntheticEvent,
TextInputContentSizeChangeEventData,
} from "react-native";
import { useState } from "react";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { Mic, ArrowUp, AudioLines, Square } from "lucide-react-native";
@@ -10,6 +16,9 @@ interface AgentInputAreaProps {
agentId: string;
}
const MIN_INPUT_HEIGHT = 40;
const MAX_INPUT_HEIGHT = 160;
export function AgentInputArea({ agentId }: AgentInputAreaProps) {
const { theme } = useUnistyles();
const { ws, sendAgentMessage, sendAgentAudio } = useSession();
@@ -17,6 +26,7 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
const audioRecorder = useAudioRecorder();
const [userInput, setUserInput] = useState("");
const [inputHeight, setInputHeight] = useState(MIN_INPUT_HEIGHT);
const [isRecording, setIsRecording] = useState(false);
const [isProcessing, setIsProcessing] = useState(false);
@@ -25,6 +35,7 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
const message = userInput.trim();
setUserInput("");
setInputHeight(MIN_INPUT_HEIGHT);
setIsProcessing(true);
try {
@@ -73,6 +84,24 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
}
}
function handleContentSizeChange(
event: NativeSyntheticEvent<TextInputContentSizeChangeEventData>,
) {
const contentHeight = event.nativeEvent.contentSize.height;
const boundedHeight = Math.min(
MAX_INPUT_HEIGHT,
Math.max(MIN_INPUT_HEIGHT, contentHeight),
);
setInputHeight((currentHeight) => {
if (Math.abs(currentHeight - boundedHeight) < 1) {
return currentHeight;
}
return boundedHeight;
});
}
const hasText = userInput.trim().length > 0;
return (
@@ -83,8 +112,13 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
onChangeText={setUserInput}
placeholder="Message agent..."
placeholderTextColor={theme.colors.mutedForeground}
style={styles.textInput}
style={[
styles.textInput,
{ height: inputHeight, minHeight: MIN_INPUT_HEIGHT, maxHeight: MAX_INPUT_HEIGHT },
]}
multiline
scrollEnabled={inputHeight >= MAX_INPUT_HEIGHT}
onContentSizeChange={handleContentSizeChange}
editable={!isRecording && ws.isConnected}
/>
@@ -143,16 +177,14 @@ export function AgentInputArea({ agentId }: AgentInputAreaProps) {
const styles = StyleSheet.create((theme) => ({
container: {
flexDirection: "row",
alignItems: "center",
alignItems: "flex-end",
paddingHorizontal: theme.spacing[4],
paddingVertical: theme.spacing[4],
gap: theme.spacing[3],
height: 88,
minHeight: 88,
},
textInput: {
flex: 1,
minHeight: 40,
maxHeight: 80,
paddingHorizontal: theme.spacing[4],
paddingVertical: theme.spacing[2],
backgroundColor: theme.colors.muted,
packages/app/src/components/agent-list.tsx
+29 -14
View File
@@ -3,6 +3,7 @@ import { router } from "expo-router";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import type { Agent } from "@/contexts/session-context";
import type { AgentStatus } from "@server/server/acp/types";
import { formatTimeAgo } from "@/utils/time";
interface AgentListProps {
agents: Map<string, Agent>;
@@ -48,7 +49,11 @@ function getStatusLabel(status: AgentStatus): string {
export function AgentList({ agents }: AgentListProps) {
const { theme } = useUnistyles();
const agentArray = Array.from(agents.values());
// Sort agents by lastActivityAt (most recent first)
const agentArray = Array.from(agents.values()).sort((a, b) => {
return b.lastActivityAt.getTime() - a.lastActivityAt.getTime();
});
function handleAgentPress(agentId: string) {
router.push(`/agent/${agentId}`);
@@ -59,6 +64,7 @@ export function AgentList({ agents }: AgentListProps) {
{agentArray.map((agent) => {
const statusColor = getStatusColor(agent.status);
const statusLabel = getStatusLabel(agent.status);
const timeAgo = formatTimeAgo(agent.lastActivityAt);
return (
<Pressable
@@ -77,14 +83,14 @@ export function AgentList({ agents }: AgentListProps) {
{agent.title || "New Agent"}
</Text>
<View style={styles.directoryRow}>
<Text
style={styles.agentDirectory}
numberOfLines={1}
>
{agent.cwd}
</Text>
<Text
style={styles.agentDirectory}
numberOfLines={1}
>
{agent.cwd}
</Text>
<View style={styles.statusRow}>
<View style={styles.statusBadge}>
<View
style={[styles.statusDot, { backgroundColor: statusColor }]}
@@ -93,6 +99,10 @@ export function AgentList({ agents }: AgentListProps) {
{statusLabel}
</Text>
</View>
<Text style={styles.timeAgo}>
{timeAgo}
</Text>
</View>
</View>
</Pressable>
@@ -128,15 +138,16 @@ const styles = StyleSheet.create((theme) => ({
color: theme.colors.foreground,
marginBottom: theme.spacing[1],
},
directoryRow: {
flexDirection: "row",
alignItems: "center",
gap: theme.spacing[2],
},
agentDirectory: {
flex: 1,
fontSize: theme.fontSize.sm,
color: theme.colors.mutedForeground,
marginBottom: theme.spacing[1],
},
statusRow: {
flexDirection: "row",
alignItems: "center",
justifyContent: "space-between",
gap: theme.spacing[2],
},
statusBadge: {
flexDirection: "row",
@@ -152,4 +163,8 @@ const styles = StyleSheet.create((theme) => ({
fontSize: theme.fontSize.xs,
fontWeight: theme.fontWeight.semibold,
},
timeAgo: {
fontSize: theme.fontSize.xs,
color: theme.colors.mutedForeground,
},
}));
packages/app/src/components/global-footer.tsx
+35 -8
View File
@@ -1,13 +1,14 @@
import { useEffect } from "react";
import { View, Pressable, StyleSheet as RNStyleSheet } from "react-native";
import { usePathname } from "expo-router";
import { useEffect, useState } from "react";
import { View, Pressable, Text } from "react-native";
import { usePathname, useRouter } from "expo-router";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { StyleSheet, useUnistyles } from "react-native-unistyles";
import { AudioLines } from "lucide-react-native";
import { AudioLines, Users, Plus } from "lucide-react-native";
import { useRealtime } from "@/contexts/realtime-context";
import { useSession } from "@/contexts/session-context";
import { useFooterControls, FOOTER_HEIGHT } from "@/contexts/footer-controls-context";
import { RealtimeControls } from "./realtime-controls";
import { CreateAgentModal } from "./create-agent-modal";
import Animated, {
FadeIn,
FadeOut,
@@ -21,13 +22,17 @@ export function GlobalFooter() {
const { theme } = useUnistyles();
const insets = useSafeAreaInsets();
const pathname = usePathname();
const router = useRouter();
const { isRealtimeMode, startRealtime } = useRealtime();
const { ws } = useSession();
const { controls } = useFooterControls();
const [showCreateModal, setShowCreateModal] = useState(false);
// Determine current screen type
const isAgentScreen = pathname?.startsWith("/agent/");
const agentControlsHeight = useSharedValue(FOOTER_HEIGHT);
const hasRegisteredControls = !!controls;
const showAgentControls = isAgentScreen && hasRegisteredControls;
@@ -53,6 +58,19 @@ export function GlobalFooter() {
[bottomInset],
);
const containerAnimatedStyle = useAnimatedStyle(
() => {
"worklet";
const agentHeight = Math.max(agentControlsHeight.value, FOOTER_HEIGHT);
const expandedHeight = agentHeight - (agentHeight - FOOTER_HEIGHT) * transition.value;
return {
height: expandedHeight + bottomInset,
};
},
[bottomInset],
);
const realtimeAnimatedStyle = useAnimatedStyle(() => {
return {
opacity: transition.value,
@@ -74,19 +92,22 @@ export function GlobalFooter() {
styles.container,
{
paddingBottom: insets.bottom,
height: FOOTER_HEIGHT + insets.bottom,
},
containerAnimatedStyle,
keyboardAnimatedStyle,
]}
>
<View style={styles.content}>
<Animated.View
style={[RNStyleSheet.absoluteFillObject, agentControlsAnimatedStyle]}
onLayout={(event) => {
agentControlsHeight.value = Math.max(event.nativeEvent.layout.height, FOOTER_HEIGHT);
}}
style={[styles.absoluteBottomFill, agentControlsAnimatedStyle]}
>
{controls}
</Animated.View>
<Animated.View
style={[RNStyleSheet.absoluteFillObject, realtimeAnimatedStyle]}
style={[styles.absoluteBottomFill, realtimeAnimatedStyle]}
>
<RealtimeControls />
</Animated.View>
@@ -157,7 +178,13 @@ const styles = StyleSheet.create((theme) => ({
},
content: {
flex: 1,
height: FOOTER_HEIGHT,
minHeight: FOOTER_HEIGHT,
},
absoluteBottomFill: {
position: "absolute",
left: 0,
right: 0,
bottom: 0,
},
centeredButtonContainer: {
padding: theme.spacing[6],
packages/app/src/contexts/session-context.tsx
+17 -1
View File
@@ -56,6 +56,7 @@ export interface Agent {
id: string;
status: AgentStatus;
createdAt: Date;
lastActivityAt: Date;
type: "claude";
sessionId: string | null;
error: string | null;
@@ -170,6 +171,9 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
new Map(
agentsList.map((agentInfo) => {
const createdAt = new Date(agentInfo.createdAt);
const lastActivityAt = agentInfo.lastActivityAt
? new Date(agentInfo.lastActivityAt)
: createdAt;
return [
agentInfo.id,
{
@@ -177,6 +181,7 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
status: agentInfo.status as AgentStatus,
type: agentInfo.type,
createdAt,
lastActivityAt,
title: agentInfo.title ?? null,
cwd: agentInfo.cwd,
sessionId: agentInfo.sessionId ?? null,
@@ -201,11 +206,13 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
console.log("[Session] Agent created:", agentId);
const now = new Date();
const agent: Agent = {
id: agentId,
status: status as AgentStatus,
type,
createdAt: new Date(),
createdAt: now,
lastActivityAt: now,
title: title ?? null,
cwd,
sessionId: null,
@@ -233,6 +240,9 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
setAgents((prev) => {
const next = new Map(prev);
const createdAt = new Date(info.createdAt);
const lastActivityAt = info.lastActivityAt
? new Date(info.lastActivityAt)
: createdAt;
const existing = next.get(agentId);
const normalizedAgent: Agent = {
@@ -240,6 +250,7 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
status: info.status as AgentStatus,
type: info.type,
createdAt,
lastActivityAt,
title: info.title ?? null,
cwd: info.cwd,
sessionId: info.sessionId ?? null,
@@ -288,6 +299,10 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
const existingAgent = prev.get(agentId);
if (!existingAgent) return prev;
const lastActivityAt = info.lastActivityAt
? new Date(info.lastActivityAt)
: existingAgent.lastActivityAt;
const updatedAgent: Agent = {
...existingAgent,
status: info.status as AgentStatus,
@@ -297,6 +312,7 @@ export function SessionProvider({ children, serverUrl }: SessionProviderProps) {
availableModes: info.availableModes ?? null,
title: info.title ?? null,
cwd: info.cwd,
lastActivityAt,
};
return new Map(prev).set(agentId, updatedAgent);
packages/app/src/utils/time.ts
+37
View File
@@ -0,0 +1,37 @@
/**
* Format a date as a human-friendly relative time string
* Examples: "just now", "5m ago", "2h ago", "3d ago", "Jan 15"
*/
export function formatTimeAgo(date: Date): string {
const now = new Date();
const diffMs = now.getTime() - date.getTime();
const diffSec = Math.floor(diffMs / 1000);
const diffMin = Math.floor(diffSec / 60);
const diffHour = Math.floor(diffMin / 60);
const diffDay = Math.floor(diffHour / 24);
if (diffSec < 10) {
return "just now";
}
if (diffMin < 1) {
return `${diffSec}s ago`;
}
if (diffHour < 1) {
return `${diffMin}m ago`;
}
if (diffDay < 1) {
return `${diffHour}h ago`;
}
if (diffDay < 7) {
return `${diffDay}d ago`;
}
// For older dates, show abbreviated month and day
const month = date.toLocaleDateString("en-US", { month: "short" });
const day = date.getDate();
return `${month} ${day}`;
}
packages/server/agents.json
+6 -71
View File
@@ -1,79 +1,14 @@
[
{
"id": "b203dc68-03e0-4971-a3d7-a4822c940b50",
"title": "Agent b203dc68",
"sessionId": "07f421be-98c1-4f23-9604-8f00274956c7",
"id": "5d28d04a-1b29-43fd-b27e-bcaa32ee453d",
"title": "Add Three Global Footer Buttons",
"sessionId": "147f5a79-e310-4bfd-86fa-0c6a011cb7c7",
"options": {
"type": "claude",
"sessionId": "07f421be-98c1-4f23-9604-8f00274956c7"
"sessionId": "147f5a79-e310-4bfd-86fa-0c6a011cb7c7"
},
"createdAt": "2025-10-24T15:53:55.340Z",
"createdAt": "2025-10-25T19:50:58.711Z",
"lastActivityAt": "2025-10-25T19:50:58.711Z",
"cwd": "/Users/moboudra/dev/voice-dev"
},
{
"id": "d0633729-2f74-426a-a3a8-05e8c7206703",
"title": "Assist with Voice Development",
"sessionId": "79c9a8e0-8a24-4851-baad-62747b815442",
"options": {
"type": "claude",
"sessionId": "79c9a8e0-8a24-4851-baad-62747b815442"
},
"createdAt": "2025-10-24T15:57:04.442Z",
"cwd": "/Users/moboudra/dev/voice-dev"
},
{
"id": "50128b81-017c-4ab5-8901-3d3f6b65898c",
"title": "Agent 50128b81",
"sessionId": "019a1c46-f0ea-76f4-8c1d-6c5d568f7b05",
"options": {
"type": "claude",
"sessionId": null
},
"createdAt": "2025-10-25T10:48:01.416Z",
"cwd": "/Users/moboudra/dev/faro/main"
},
{
"id": "cf327185-2307-4744-b2d0-c50f8bfa8f55",
"title": "Agent cf327185",
"sessionId": "019a1b66-dbf2-76b0-b578-60abfbd65d22",
"options": {
"type": "claude",
"sessionId": null
},
"createdAt": "2025-10-25T12:37:28.278Z",
"cwd": "/Users/moboudra/dev/faro/main"
},
{
"id": "9af00580-418b-4053-a942-a8d168ab5703",
"title": "Initial User Greeting",
"sessionId": "7adb8247-5ffe-44a0-ae8b-177a5611fe6c",
"options": {
"type": "claude",
"sessionId": "7adb8247-5ffe-44a0-ae8b-177a5611fe6c"
},
"createdAt": "2025-10-25T12:44:52.183Z",
"cwd": "/Users/moboudra/dev/faro/main"
},
{
"id": "415c2eb6-6649-4f3f-aee5-acc3d6b2cfd4",
"title": "Agent 415c2eb6",
"sessionId": "019a1c5a-0929-76de-ad58-1b80fa056209",
"options": {
"type": "claude",
"sessionId": null
},
"createdAt": "2025-10-25T17:10:52.912Z",
"cwd": "/Users/moboudra/dev/faro/main"
},
{
"id": "cac8f9e6-3b3b-4916-8e04-2b2ea8053f22",
"title": "Review Open Pull Requests",
"sessionId": "5f3938aa-bd06-47f2-b09e-b6bae76f7ffc",
"options": {
"type": "claude",
"sessionId": "5f3938aa-bd06-47f2-b09e-b6bae76f7ffc"
},
"createdAt": "2025-10-25T17:43:48.309Z",
"cwd": "/Users/moboudra/dev/faro/main"
}
]
packages/server/src/server/acp/agent-manager.ts
+16 -12
View File
@@ -42,6 +42,7 @@ interface ManagedAgent {
id: string;
cwd: string;
createdAt: Date;
lastActivityAt: Date;
title: string;
options: AgentOptions;
subscribers: Set<AgentUpdateCallback>;
@@ -166,10 +167,15 @@ export class AgentManager {
console.log(
`[AgentManager] Loading agent ${persistedAgent.id} as uninitialized`
);
const createdAt = new Date(persistedAgent.createdAt);
const lastActivityAt = persistedAgent.lastActivityAt
? new Date(persistedAgent.lastActivityAt)
: createdAt;
const agent: ManagedAgent = {
id: persistedAgent.id,
cwd: expandTilde(persistedAgent.cwd),
createdAt: new Date(persistedAgent.createdAt),
createdAt,
lastActivityAt,
title: persistedAgent.title,
options: persistedAgent.options,
subscribers: new Set(),
@@ -225,6 +231,7 @@ export class AgentManager {
id: agentId,
cwd,
createdAt,
lastActivityAt: createdAt,
title: "",
options: agentOptions,
subscribers: new Set(),
@@ -250,6 +257,7 @@ export class AgentManager {
sessionId: null,
options: agent.options,
createdAt: createdAt.toISOString(),
lastActivityAt: agent.lastActivityAt.toISOString(),
cwd: agent.cwd,
});
@@ -553,6 +561,7 @@ export class AgentManager {
id: agent.id,
status,
createdAt: agent.createdAt,
lastActivityAt: agent.lastActivityAt,
type: "claude" as const,
sessionId,
error: error ?? null,
@@ -617,6 +626,7 @@ export class AgentManager {
id: agent.id,
status,
createdAt: agent.createdAt,
lastActivityAt: agent.lastActivityAt,
type: "claude",
sessionId: runtime?.sessionId ?? null,
error: error ?? null,
@@ -1000,6 +1010,7 @@ export class AgentManager {
sessionId: runtime.sessionId,
options: agent.options,
createdAt: agent.createdAt.toISOString(),
lastActivityAt: agent.lastActivityAt.toISOString(),
cwd: agent.cwd,
});
@@ -1056,6 +1067,9 @@ export class AgentManager {
const agent = this.agents.get(agentId);
if (!agent) return;
// Update last activity timestamp
agent.lastActivityAt = new Date();
// Augment update with stable message IDs for deduplication
let enrichedUpdate: EnrichedSessionNotification;
@@ -1286,17 +1300,6 @@ export class AgentManager {
console.log(
`[Agent ${agentId}] Permission request emitted: ${requestId}`
);
// Set a timeout to auto-reject after 5 minutes if no response
setTimeout(() => {
if (agent.pendingPermissions.has(requestId)) {
console.warn(
`[Agent ${agentId}] Permission request ${requestId} timed out`
);
agent.pendingPermissions.delete(requestId);
reject(new Error("Permission request timed out"));
}
}, 5 * 60 * 1000); // 5 minutes
});
}
@@ -1459,6 +1462,7 @@ export class AgentManager {
sessionId: runtime.sessionId,
options: agent.options,
createdAt: agent.createdAt.toISOString(),
lastActivityAt: agent.lastActivityAt.toISOString(),
cwd: agent.cwd,
});
console.log(`[Agent ${agent.id}] State persisted`);
packages/server/src/server/acp/agent-persistence.ts
+6
View File
@@ -25,6 +25,7 @@ export const PersistedAgentSchema = z.object({
sessionId: z.string().nullable(), // ACP protocol session ID (null for uninitialized agents)
options: AgentOptionsSchema, // Required field with discriminated union
createdAt: z.string(),
lastActivityAt: z.string().optional(), // Migration: optional for backward compatibility
cwd: z.string(),
});
@@ -52,6 +53,11 @@ export class AgentPersistence {
try {
const validated = PersistedAgentSchema.parse(agent);
// Migration: if lastActivityAt is missing, default to createdAt
if (!validated.lastActivityAt) {
validated.lastActivityAt = validated.createdAt;
}
if (
validated.options.type === "claude" &&
validated.options.sessionId !== null
packages/server/src/server/acp/types.ts
+1
View File
@@ -116,6 +116,7 @@ export interface AgentInfo {
id: string;
status: AgentStatus;
createdAt: Date;
lastActivityAt: Date;
type: "claude";
sessionId: string | null;
error: string | null;
packages/server/src/server/messages.ts
+1
View File
@@ -10,6 +10,7 @@ const AgentInfoSchema = z.object({
id: z.string(),
status: z.string(),
createdAt: z.date(),
lastActivityAt: z.date(),
type: z.literal("claude"),
sessionId: z.string().nullable(),
error: z.string().nullable(),