369 lines
12 KiB
TypeScript
369 lines
12 KiB
TypeScript
import type { Letta } from "@letta-ai/letta-client";
|
|
import type { AgentState } from "@letta-ai/letta-client/resources/agents/agents";
|
|
import { Box, Text, useInput } from "ink";
|
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
import { getClient } from "../../agent/client";
|
|
import { useTerminalWidth } from "../hooks/useTerminalWidth";
|
|
import { colors } from "./colors";
|
|
|
|
interface ResumeSelectorProps {
|
|
currentAgentId: string;
|
|
onSelect: (agentId: string) => void;
|
|
onCancel: () => void;
|
|
}
|
|
|
|
const DISPLAY_PAGE_SIZE = 5; // How many agents to show per page
|
|
const FETCH_PAGE_SIZE = 20; // How many agents to fetch from server at once
|
|
|
|
/**
|
|
* Format a relative time string from a date
|
|
*/
|
|
function formatRelativeTime(dateStr: string | null | undefined): string {
|
|
if (!dateStr) return "Never";
|
|
|
|
const date = new Date(dateStr);
|
|
const now = new Date();
|
|
const diffMs = now.getTime() - date.getTime();
|
|
const diffMins = Math.floor(diffMs / 60000);
|
|
const diffHours = Math.floor(diffMs / 3600000);
|
|
const diffDays = Math.floor(diffMs / 86400000);
|
|
const diffWeeks = Math.floor(diffDays / 7);
|
|
|
|
if (diffMins < 1) return "Just now";
|
|
if (diffMins < 60)
|
|
return `${diffMins} minute${diffMins === 1 ? "" : "s"} ago`;
|
|
if (diffHours < 24)
|
|
return `${diffHours} hour${diffHours === 1 ? "" : "s"} ago`;
|
|
if (diffDays < 7) return `${diffDays} day${diffDays === 1 ? "" : "s"} ago`;
|
|
return `${diffWeeks} week${diffWeeks === 1 ? "" : "s"} ago`;
|
|
}
|
|
|
|
/**
|
|
* Truncate agent ID with middle ellipsis if it exceeds available width
|
|
* e.g., "agent-6b383e6f-f2df-43ed-ad88-8c832f1129d0" -> "agent-6b3...9d0"
|
|
*/
|
|
function truncateAgentId(id: string, availableWidth: number): string {
|
|
if (id.length <= availableWidth) return id;
|
|
if (availableWidth < 15) return id.slice(0, availableWidth); // Too narrow for ellipsis
|
|
const prefixLen = Math.floor((availableWidth - 3) / 2); // -3 for "..."
|
|
const suffixLen = availableWidth - 3 - prefixLen;
|
|
return `${id.slice(0, prefixLen)}...${id.slice(-suffixLen)}`;
|
|
}
|
|
|
|
/**
|
|
* Format model string to show provider/model-name
|
|
*/
|
|
function formatModel(agent: AgentState): string {
|
|
// Prefer the new model field
|
|
if (agent.model) {
|
|
return agent.model;
|
|
}
|
|
// Fall back to llm_config
|
|
if (agent.llm_config?.model) {
|
|
const provider = agent.llm_config.model_endpoint_type || "unknown";
|
|
return `${provider}/${agent.llm_config.model}`;
|
|
}
|
|
return "unknown";
|
|
}
|
|
|
|
export function ResumeSelector({
|
|
currentAgentId,
|
|
onSelect,
|
|
onCancel,
|
|
}: ResumeSelectorProps) {
|
|
const terminalWidth = useTerminalWidth();
|
|
const [allAgents, setAllAgents] = useState<AgentState[]>([]); // All fetched agents
|
|
const [nextCursor, setNextCursor] = useState<string | null>(null);
|
|
const [currentPage, setCurrentPage] = useState(0);
|
|
const [loading, setLoading] = useState(true);
|
|
const [loadingMore, setLoadingMore] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [selectedIndex, setSelectedIndex] = useState(0);
|
|
const [searchInput, setSearchInput] = useState(""); // What user is typing
|
|
const [activeQuery, setActiveQuery] = useState(""); // Submitted search query
|
|
const [hasMore, setHasMore] = useState(true);
|
|
const clientRef = useRef<Letta | null>(null);
|
|
|
|
// Fetch agents from the server
|
|
const fetchAgents = useCallback(
|
|
async (afterCursor?: string | null, query?: string) => {
|
|
const client = clientRef.current || (await getClient());
|
|
clientRef.current = client;
|
|
|
|
const agentList = await client.agents.list({
|
|
limit: FETCH_PAGE_SIZE,
|
|
tags: ["origin:letta-code"],
|
|
include: ["agent.blocks"],
|
|
order: "desc",
|
|
order_by: "last_run_completion",
|
|
...(afterCursor && { after: afterCursor }),
|
|
...(query && { query_text: query }),
|
|
});
|
|
|
|
// Get cursor for next fetch (last item's ID if there are more)
|
|
const cursor =
|
|
agentList.items.length === FETCH_PAGE_SIZE
|
|
? (agentList.items[agentList.items.length - 1]?.id ?? null)
|
|
: null;
|
|
|
|
return {
|
|
agents: agentList.items,
|
|
nextCursor: cursor,
|
|
};
|
|
},
|
|
[],
|
|
);
|
|
|
|
// Fetch agents when activeQuery changes (initial load or search submitted)
|
|
useEffect(() => {
|
|
const doFetch = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const result = await fetchAgents(null, activeQuery || undefined);
|
|
setAllAgents(result.agents);
|
|
setNextCursor(result.nextCursor);
|
|
setHasMore(result.nextCursor !== null);
|
|
setCurrentPage(0);
|
|
setSelectedIndex(0);
|
|
} catch (err) {
|
|
setError(err instanceof Error ? err.message : String(err));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
doFetch();
|
|
}, [fetchAgents, activeQuery]);
|
|
|
|
// Submit search (called when Enter is pressed while typing search)
|
|
const submitSearch = useCallback(() => {
|
|
if (searchInput !== activeQuery) {
|
|
setActiveQuery(searchInput);
|
|
}
|
|
}, [searchInput, activeQuery]);
|
|
|
|
// Clear search
|
|
const clearSearch = useCallback(() => {
|
|
setSearchInput("");
|
|
if (activeQuery) {
|
|
setActiveQuery("");
|
|
}
|
|
}, [activeQuery]);
|
|
|
|
// Fetch more agents when needed
|
|
const fetchMoreAgents = useCallback(async () => {
|
|
if (loadingMore || !hasMore || !nextCursor) return;
|
|
|
|
setLoadingMore(true);
|
|
try {
|
|
const result = await fetchAgents(nextCursor, activeQuery || undefined);
|
|
setAllAgents((prev) => [...prev, ...result.agents]);
|
|
setNextCursor(result.nextCursor);
|
|
setHasMore(result.nextCursor !== null);
|
|
} catch (_err) {
|
|
// Silently fail on pagination errors
|
|
} finally {
|
|
setLoadingMore(false);
|
|
}
|
|
}, [loadingMore, hasMore, nextCursor, fetchAgents, activeQuery]);
|
|
|
|
// Calculate display pages from all fetched agents
|
|
const totalDisplayPages = Math.ceil(allAgents.length / DISPLAY_PAGE_SIZE);
|
|
const startIndex = currentPage * DISPLAY_PAGE_SIZE;
|
|
const pageAgents = allAgents.slice(
|
|
startIndex,
|
|
startIndex + DISPLAY_PAGE_SIZE,
|
|
);
|
|
const canGoNext = currentPage < totalDisplayPages - 1 || hasMore;
|
|
|
|
useInput((input, key) => {
|
|
if (loading || error) return;
|
|
|
|
if (key.upArrow) {
|
|
setSelectedIndex((prev) => Math.max(0, prev - 1));
|
|
} else if (key.downArrow) {
|
|
setSelectedIndex((prev) => Math.min(pageAgents.length - 1, prev + 1));
|
|
} else if (key.return) {
|
|
// If typing a search query, submit it; otherwise select agent
|
|
if (searchInput && searchInput !== activeQuery) {
|
|
submitSearch();
|
|
} else {
|
|
const selectedAgent = pageAgents[selectedIndex];
|
|
if (selectedAgent?.id) {
|
|
onSelect(selectedAgent.id);
|
|
}
|
|
}
|
|
} else if (key.escape) {
|
|
// If typing search, clear it first; otherwise cancel
|
|
if (searchInput) {
|
|
clearSearch();
|
|
} else {
|
|
onCancel();
|
|
}
|
|
} else if (key.backspace || key.delete) {
|
|
setSearchInput((prev) => prev.slice(0, -1));
|
|
} else if (input === "j" || input === "J") {
|
|
// Previous page (j = up/back)
|
|
if (currentPage > 0) {
|
|
setCurrentPage((prev) => prev - 1);
|
|
setSelectedIndex(0);
|
|
}
|
|
} else if (input === "k" || input === "K") {
|
|
// Next page (k = down/forward)
|
|
if (canGoNext) {
|
|
const nextPageIndex = currentPage + 1;
|
|
const nextStartIndex = nextPageIndex * DISPLAY_PAGE_SIZE;
|
|
|
|
// Fetch more if we need data for the next page
|
|
if (nextStartIndex >= allAgents.length && hasMore) {
|
|
fetchMoreAgents();
|
|
}
|
|
|
|
// Navigate if we have the data
|
|
if (nextStartIndex < allAgents.length) {
|
|
setCurrentPage(nextPageIndex);
|
|
setSelectedIndex(0);
|
|
}
|
|
}
|
|
} else if (input === "/") {
|
|
// Ignore "/" - just starts typing search
|
|
} else if (input && !key.ctrl && !key.meta) {
|
|
// Add regular characters to search input
|
|
setSearchInput((prev) => prev + input);
|
|
}
|
|
});
|
|
|
|
// Always show the header, with contextual content below
|
|
return (
|
|
<Box flexDirection="column" gap={1}>
|
|
<Box>
|
|
<Text bold color={colors.selector.title}>
|
|
Browsing Agents (sorting by last run)
|
|
</Text>
|
|
</Box>
|
|
|
|
{/* Search input - show when typing or when there's an active search */}
|
|
{(searchInput || activeQuery) && (
|
|
<Box>
|
|
<Text dimColor>Search: </Text>
|
|
<Text>{searchInput}</Text>
|
|
{searchInput && searchInput !== activeQuery && (
|
|
<Text dimColor> (press Enter to search)</Text>
|
|
)}
|
|
{activeQuery && searchInput === activeQuery && (
|
|
<Text dimColor> (Esc to clear)</Text>
|
|
)}
|
|
</Box>
|
|
)}
|
|
|
|
{/* Error state */}
|
|
{error && (
|
|
<Box flexDirection="column">
|
|
<Text color="red">Error: {error}</Text>
|
|
<Text dimColor>Press ESC to cancel</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Loading state */}
|
|
{loading && !error && (
|
|
<Box>
|
|
<Text dimColor>Loading agents...</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Empty state */}
|
|
{!loading && !error && allAgents.length === 0 && (
|
|
<Box flexDirection="column">
|
|
<Text dimColor>
|
|
{activeQuery ? "No matching agents found" : "No agents found"}
|
|
</Text>
|
|
<Text dimColor>Press ESC to cancel</Text>
|
|
</Box>
|
|
)}
|
|
|
|
{/* Agent list - only show when loaded and have agents */}
|
|
{!loading && !error && allAgents.length > 0 && (
|
|
<Box flexDirection="column">
|
|
{pageAgents.map((agent, index) => {
|
|
const isSelected = index === selectedIndex;
|
|
const isCurrent = agent.id === currentAgentId;
|
|
|
|
const relativeTime = formatRelativeTime(agent.last_run_completion);
|
|
const blockCount = agent.blocks?.length ?? 0;
|
|
const modelStr = formatModel(agent);
|
|
|
|
// Calculate available width for agent ID
|
|
// Row format: "> Name · agent-id (current)"
|
|
const nameLen = (agent.name || "Unnamed").length;
|
|
const fixedChars = 2 + 3 + (isCurrent ? 10 : 0); // "> " + " · " + " (current)"
|
|
const availableForId = Math.max(
|
|
15,
|
|
terminalWidth - nameLen - fixedChars,
|
|
);
|
|
const displayId = truncateAgentId(agent.id, availableForId);
|
|
|
|
return (
|
|
<Box key={agent.id} flexDirection="column" marginBottom={1}>
|
|
{/* Row 1: Selection indicator, agent name, and ID */}
|
|
<Box flexDirection="row">
|
|
<Text
|
|
color={
|
|
isSelected ? colors.selector.itemHighlighted : undefined
|
|
}
|
|
>
|
|
{isSelected ? ">" : " "}
|
|
</Text>
|
|
<Text> </Text>
|
|
<Text
|
|
bold={isSelected}
|
|
color={
|
|
isSelected ? colors.selector.itemHighlighted : undefined
|
|
}
|
|
>
|
|
{agent.name || "Unnamed"}
|
|
</Text>
|
|
<Text dimColor> · {displayId}</Text>
|
|
{isCurrent && (
|
|
<Text color={colors.selector.itemCurrent}> (current)</Text>
|
|
)}
|
|
</Box>
|
|
{/* Row 2: Description */}
|
|
<Box flexDirection="row" marginLeft={2}>
|
|
<Text dimColor italic>
|
|
{agent.description || "No description"}
|
|
</Text>
|
|
</Box>
|
|
{/* Row 3: Metadata (dimmed) */}
|
|
<Box flexDirection="row" marginLeft={2}>
|
|
<Text dimColor>
|
|
{relativeTime} · {blockCount} memory block
|
|
{blockCount === 1 ? "" : "s"} · {modelStr}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
})}
|
|
</Box>
|
|
)}
|
|
|
|
{/* Footer with pagination and controls - only show when loaded with agents */}
|
|
{!loading && !error && allAgents.length > 0 && (
|
|
<Box flexDirection="column" marginTop={1}>
|
|
<Box>
|
|
<Text dimColor>
|
|
Page {currentPage + 1}
|
|
{hasMore ? "+" : `/${totalDisplayPages || 1}`}
|
|
{loadingMore && " (loading...)"}
|
|
</Text>
|
|
</Box>
|
|
<Box>
|
|
<Text dimColor>
|
|
↑↓ navigate · Enter to switch agents · J/K page · Type + Enter to
|
|
search
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|