Add agent name to sidebar, update queries (#12)

## Changes
- Show all tasks in sidebar if no agent is selected
- Show the agent name in the sidebar
- If there is more than one agent for a task just show the first and the
# of agents more
- Update get single task, task list, and infinite task list to use the
proper sdk types and pass the relationships query param\

Author: declan-scale

agentex-ui/components/agentex/task-sidebar.tsx

@@ -22,16 +22,39 @@ import { Skeleton } from '@/components/ui/skeleton';
 import { useInfiniteTasks } from '@/hooks/use-tasks';
 import { cn } from '@/lib/utils';
 
-import type { Task } from 'agentex/resources';
+import type { TaskListResponse } from 'agentex/resources';
 
 type TaskButtonProps = {
-  task: Task;
-  selectedTaskID: Task['id'] | null;
-  selectTask: (taskID: Task['id'] | null) => void;
+  task: TaskListResponse.TaskListResponseItem;
+  selectedTaskID: TaskListResponse.TaskListResponseItem['id'] | null;
+  selectTask: (
+    taskID: TaskListResponse.TaskListResponseItem['id'] | null
+  ) => void;
 };
 
 function TaskButton({ task, selectedTaskID, selectTask }: TaskButtonProps) {
   const taskName = createTaskName(task);
+  const createdAtString = useMemo(
+    () =>
+      task.created_at
+        ? formatDistanceToNow(new Date(task.created_at), {
+            addSuffix: true,
+          })
+        : 'No date',
+    [task.created_at]
+  );
+  const agentsString = useMemo(() => {
+    if (!task.agents || task.agents.length === 0) return 'No agents';
+
+    const firstAgent = task.agents[0];
+    if (!firstAgent) return 'No agents';
+
+    if (task.agents.length === 1) {
+      return firstAgent.name;
+    }
+
+    return `${firstAgent.name} + ${task.agents.length - 1} more`;
+  }, [task.agents]);
 
   return (
     <motion.div
@@ -69,27 +92,29 @@ function TaskButton({ task, selectedTaskID, selectTask }: TaskButtonProps) {
         }}
       >
         <span className="w-full truncate text-sm">{taskName}</span>
-        <span
+        <div
           className={cn(
-            'text-muted-foreground text-xs',
-            task.created_at ? 'block' : 'invisible'
+            'text-muted-foreground w-full truncate text-xs',
+            (task.agents && task.agents.length > 0) || task.created_at
+              ? 'block'
+              : 'invisible'
           )}
         >
-          {task.created_at
-            ? formatDistanceToNow(new Date(task.created_at), {
-                addSuffix: true,
-              })
-            : 'No date'}
-        </span>
+          {createdAtString}
+          {task.agents && task.agents.length > 0 && task.created_at && ' • '}
+          {agentsString}
+        </div>
       </Button>
     </motion.div>
   );
 }
 
 export type TaskSidebarProps = {
-  selectedTaskID: Task['id'] | null;
+  selectedTaskID: TaskListResponse.TaskListResponseItem['id'] | null;
   selectedAgentName?: string;
-  onSelectTask: (taskID: Task['id'] | null) => void;
+  onSelectTask: (
+    taskID: TaskListResponse.TaskListResponseItem['id'] | null
+  ) => void;
 };
 
 export function TaskSidebar({
@@ -138,7 +163,7 @@ export function TaskSidebar({
   }, [hasNextPage, isFetchingNextPage, fetchNextPage]);
 
   const handleTaskSelect = useCallback(
-    (taskID: Task['id'] | null) => {
+    (taskID: TaskListResponse.TaskListResponseItem['id'] | null) => {
       onSelectTask(taskID);
     },
     [onSelectTask]
@@ -265,7 +290,7 @@ function SidebarHeader({
   );
 }
 
-function createTaskName(task: Task): string {
+function createTaskName(task: TaskListResponse.TaskListResponseItem): string {
   if (
     task?.params?.description &&
     typeof task.params.description === 'string'

agentex-ui/hooks/use-tasks.ts

@@ -1,7 +1,11 @@
 import { useInfiniteQuery, useQuery } from '@tanstack/react-query';
 
 import type AgentexSDK from 'agentex';
-import type { Task, TaskListParams } from 'agentex/resources';
+import type {
+  TaskListResponse,
+  TaskListParams,
+  TaskRetrieveResponse,
+} from 'agentex/resources';
 
 /**
  * Query key factory for tasks
@@ -26,8 +30,11 @@ export function useTasks(
 
   return useQuery({
     queryKey: tasksKeys.byAgentName(agentName),
-    queryFn: async (): Promise<Task[]> => {
-      const params = agentName ? { agent_name: agentName } : undefined;
+    queryFn: async (): Promise<TaskListResponse> => {
+      const params: TaskListParams = {
+        relationships: ['agents'],
+        ...(agentName ? { agent_name: agentName } : {}),
+      };
       return agentexClient.tasks.list(params);
     },
     staleTime: 30 * 1000, // 30 seconds
@@ -47,8 +54,10 @@ export function useTask({
 }) {
   return useQuery({
     queryKey: tasksKeys.byId(taskId),
-    queryFn: async (): Promise<Task> => {
-      return agentexClient.tasks.retrieve(taskId);
+    queryFn: async (): Promise<TaskRetrieveResponse> => {
+      return agentexClient.tasks.retrieve(taskId, {
+        relationships: ['agents'],
+      });
     },
     enabled: !!taskId,
     staleTime: 30 * 1000,
@@ -66,14 +75,13 @@ export function useInfiniteTasks(
 
   return useInfiniteQuery({
     queryKey: tasksKeys.byAgentName(agentName),
-    queryFn: async ({ pageParam = 1 }): Promise<Task[]> => {
-      const params: TaskListParams | undefined = agentName
-        ? {
-            agent_name: agentName,
-            limit,
-            page_number: pageParam as number,
-          }
-        : undefined;
+    queryFn: async ({ pageParam = 1 }): Promise<TaskListResponse> => {
+      const params: TaskListParams = {
+        limit,
+        page_number: pageParam as number,
+        relationships: ['agents'],
+        ...(agentName ? { agent_name: agentName } : {}),
+      };
       return agentexClient.tasks.list(params);
     },
     getNextPageParam: (lastPage, allPages) => {

agentex-ui/package-lock.json

@@ -35,7 +35,7 @@
     "@tailwindcss/postcss": "^4",
     "@tanstack/react-query": "^5.90.3",
     "@uiw/react-codemirror": "^4.25.2",
-    "agentex": "^0.1.0-alpha.7",
+    "agentex": "^0.1.0-alpha.8",
     "ai": "^5.0.72",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",