@elizaos/client 1.6.0-beta.1 → 1.6.1-alpha.2

package/src/components/agent-sidebar.tsx

@@ -1,7 +1,7 @@
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { useAgentPanels, useAgent, type AgentPanel } from '@/hooks/use-query-hooks';
 import type { UUID, Agent } from '@elizaos/core';
-import { Columns3, Database, Eye, Code, InfoIcon, Loader2 } from 'lucide-react';
+import { Columns3, Database, Eye, Code, InfoIcon, Loader2, Activity } from 'lucide-react';
 import { JSX, useMemo } from 'react';
 import { AgentActionViewer } from './agent-action-viewer';
 import { AgentLogViewer } from './agent-log-viewer';
@@ -9,6 +9,7 @@ import { AgentMemoryViewer } from './agent-memory-viewer';
 import { Skeleton } from './ui/skeleton';
 import AgentSettings from '@/components/agent-settings';
 import { useAgentTabState } from '@/hooks/use-agent-tab-state';
+import AgentRunTimeline from '@/components/agent-runs/AgentRunTimeline';
 
 type AgentSidebarProps = {
   agentId: UUID | undefined;
@@ -16,7 +17,7 @@ type AgentSidebarProps = {
   channelId?: UUID;
 };
 
-type FixedTabValue = 'details' | 'actions' | 'logs' | 'memories';
+type FixedTabValue = 'details' | 'timeline' | 'actions' | 'logs' | 'memories';
 type TabValue = FixedTabValue | string;
 
 export function AgentSidebar({ agentId, agentName, channelId }: AgentSidebarProps) {
@@ -40,6 +41,7 @@ export function AgentSidebar({ agentId, agentName, channelId }: AgentSidebarProp
   const allTabs: { value: TabValue; label: string; icon: JSX.Element }[] = useMemo(() => {
     const fixedTabs: { value: FixedTabValue; label: string; icon: JSX.Element }[] = [
       { value: 'details', label: 'Details', icon: <InfoIcon className="h-4 w-4" /> },
+      { value: 'timeline', label: 'Timeline', icon: <Activity className="h-4 w-4" /> },
       { value: 'actions', label: 'Model Calls', icon: <Eye className="h-4 w-4" /> },
       { value: 'memories', label: 'Memories', icon: <Database className="h-4 w-4" /> },
       { value: 'logs', label: 'Logs', icon: <Code className="h-4 w-4" /> },
@@ -119,6 +121,20 @@ export function AgentSidebar({ agentId, agentName, channelId }: AgentSidebarProp
         )}
       </TabsContent>
 
+      <TabsContent
+        value="timeline"
+        className="overflow-y-auto overflow-x-hidden flex-1 w-full max-w-full min-h-0"
+      >
+        {detailsTab === 'timeline' && agentId && (
+          <div className="w-full max-w-full p-4">
+            <AgentRunTimeline agentId={agentId} />
+          </div>
+        )}
+        {detailsTab === 'timeline' && !agentId && (
+          <div className="p-4 text-muted-foreground">Select an agent to see run activity.</div>
+        )}
+      </TabsContent>
+
       <TabsContent
         value="actions"
         className="overflow-y-auto overflow-x-hidden flex-1 w-full max-w-full min-h-0"

package/src/hooks/use-query-hooks.ts

@@ -43,6 +43,7 @@ import {
   apiDateToTimestamp,
   type AgentLog,
 } from '@/lib/api-type-mappers';
+import type { ListRunsParams, RunDetail, RunSummary } from '@elizaos/api-client';
 
 // Create ElizaClient instance for direct API calls
 const elizaClient = createElizaClient();
@@ -182,6 +183,63 @@ export function useAgent(agentId: UUID | undefined | null, options = {}) {
   });
 }
 
+type RunsListResponse = { runs: RunSummary[]; total: number; hasMore: boolean };
+
+export function useAgentRuns(
+  agentId: UUID | undefined | null,
+  params?: ListRunsParams,
+  options: Partial<UseQueryOptions<RunsListResponse, Error, RunsListResponse>> = {}
+) {
+  const network = useNetworkStatus();
+  const sanitizedParams = params
+    ? Object.fromEntries(Object.entries(params).filter(([_, value]) => value !== undefined))
+    : undefined;
+  const serializedParams = sanitizedParams ? JSON.stringify(sanitizedParams) : 'default';
+
+  return useQuery<RunsListResponse>({
+    queryKey: ['agent', agentId, 'runs', serializedParams],
+    queryFn: async () => {
+      if (!agentId) throw new Error('Agent ID is required');
+      return elizaClient.runs.listRuns(agentId, sanitizedParams as ListRunsParams | undefined);
+    },
+    enabled: Boolean(agentId),
+    staleTime: STALE_TIMES.FREQUENT,
+    refetchInterval: !network.isOffline && Boolean(agentId) ? STALE_TIMES.FREQUENT : false,
+    refetchIntervalInBackground: false,
+    ...(!network.isOffline &&
+      network.effectiveType === 'slow-2g' && {
+        refetchInterval: STALE_TIMES.STANDARD,
+      }),
+    ...options,
+  });
+}
+
+export function useAgentRunDetail(
+  agentId: UUID | undefined | null,
+  runId: UUID | undefined | null,
+  roomId?: UUID | null,
+  options: Partial<UseQueryOptions<RunDetail, Error, RunDetail>> = {}
+) {
+  const network = useNetworkStatus();
+
+  return useQuery<RunDetail>({
+    queryKey: ['agent', agentId, 'runs', 'detail', runId, roomId ?? null],
+    queryFn: async () => {
+      if (!agentId || !runId) throw new Error('Agent ID and Run ID are required');
+      return elizaClient.runs.getRun(agentId, runId, roomId ?? undefined);
+    },
+    enabled: Boolean(agentId && runId),
+    staleTime: STALE_TIMES.FREQUENT,
+    refetchInterval: !network.isOffline && Boolean(agentId && runId) ? STALE_TIMES.FREQUENT : false,
+    refetchIntervalInBackground: false,
+    ...(!network.isOffline &&
+      network.effectiveType === 'slow-2g' && {
+        refetchInterval: STALE_TIMES.STANDARD,
+      }),
+    ...options,
+  });
+}
+
 // Hook for starting an agent with optimistic updates
 /**
  * Custom hook to start an agent by calling the API with the provided agent ID.

package/src/index.css

@@ -132,6 +132,30 @@
   background-color: rgb(107, 114, 128);
 }
 
+.vis-item.timeline-item-success {
+  background-color: rgba(34, 197, 94, 0.2);
+  border-color: rgb(34, 197, 94);
+  color: rgb(22, 101, 52);
+}
+
+.vis-item.timeline-item-error {
+  background-color: rgba(248, 113, 113, 0.2);
+  border-color: rgb(220, 38, 38);
+  color: rgb(185, 28, 28);
+}
+
+.vis-item.timeline-item-warning {
+  background-color: rgba(251, 191, 36, 0.2);
+  border-color: rgb(217, 119, 6);
+  color: rgb(146, 64, 14);
+}
+
+.vis-item.timeline-item-neutral {
+  background-color: rgba(148, 163, 184, 0.2);
+  border-color: rgb(148, 163, 184);
+  color: rgb(30, 41, 59);
+}
+
 @utility container {
   margin-inline: auto;
 }

package/src/routes/agent-detail.tsx

@@ -15,12 +15,12 @@ const AgentDetail: React.FC = () => {
 
   return (
     <div className="p-4">
-      <h1 className="text-2xl font-bold mb-4">{agent.name}</h1>
+      <h1 className="mb-4 text-2xl font-bold">{agent.name}</h1>
       <div className="grid gap-4">
-        <div className="border rounded-lg p-4 shadow-sm">
+        <div className="rounded-lg border p-4 shadow-sm">
           <h2 className="text-xl font-semibold">Agent Details</h2>
           <p className="text-sm text-gray-500">ID: {agent.id}</p>
-          {/* Add more agent details here */}
+          {/* Additional agent details can be added here */}
         </div>
       </div>
     </div>