@elizaos/client 1.6.1-alpha.6 → 1.6.1-beta.0

package/src/components/agent-prism/shared.ts

@@ -1,4 +1,4 @@
-import type { TraceSpanCategory } from "@evilmartians/agent-prism-types";
+import type { TraceSpanCategory } from '@evilmartians/agent-prism-types';
 
 import {
   Zap,
@@ -13,42 +13,32 @@ import {
   type LucideIcon,
   CircleDot,
   ShieldCheck,
-} from "lucide-react";
+} from 'lucide-react';
 
 // TYPES
 
 export type ColorVariant =
-  | "purple"
-  | "indigo"
-  | "orange"
-  | "teal"
-  | "cyan"
-  | "sky"
-  | "yellow"
-  | "emerald"
-  | "red"
-  | "gray";
+  | 'purple'
+  | 'indigo'
+  | 'orange'
+  | 'teal'
+  | 'cyan'
+  | 'sky'
+  | 'yellow'
+  | 'emerald'
+  | 'red'
+  | 'gray';
 
-export type ComponentSize =
-  | "4"
-  | "5"
-  | "6"
-  | "7"
-  | "8"
-  | "9"
-  | "10"
-  | "11"
-  | "12"
-  | "16";
+export type ComponentSize = '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | '16';
 
 // CONSTANTS
 
 export const ROUNDED_CLASSES = {
-  none: "rounded-none",
-  sm: "rounded-sm",
-  md: "rounded-md",
-  lg: "rounded-lg",
-  full: "rounded-full",
+  none: 'rounded-none',
+  sm: 'rounded-sm',
+  md: 'rounded-md',
+  lg: 'rounded-lg',
+  full: 'rounded-full',
 };
 
 /**
@@ -64,64 +54,64 @@ export const COLOR_THEME_CLASSES: Record<
   }
 > = {
   purple: {
-    bg: "bg-purple-100",
-    darkBg: "dark:bg-purple-950/60",
-    text: "text-purple-500",
-    darkText: "dark:text-purple-300",
+    bg: 'bg-purple-100',
+    darkBg: 'dark:bg-purple-950/60',
+    text: 'text-purple-500',
+    darkText: 'dark:text-purple-300',
   },
   indigo: {
-    bg: "bg-indigo-100",
-    darkBg: "dark:bg-indigo-950/60",
-    text: "text-indigo-500",
-    darkText: "dark:text-indigo-300",
+    bg: 'bg-indigo-100',
+    darkBg: 'dark:bg-indigo-950/60',
+    text: 'text-indigo-500',
+    darkText: 'dark:text-indigo-300',
   },
   orange: {
-    bg: "bg-orange-100",
-    darkBg: "dark:bg-orange-950/60",
-    text: "text-orange-600",
-    darkText: "dark:text-orange-300",
+    bg: 'bg-orange-100',
+    darkBg: 'dark:bg-orange-950/60',
+    text: 'text-orange-600',
+    darkText: 'dark:text-orange-300',
   },
   teal: {
-    bg: "bg-teal-100",
-    darkBg: "dark:bg-teal-950/60",
-    text: "text-teal-600",
-    darkText: "dark:text-teal-300",
+    bg: 'bg-teal-100',
+    darkBg: 'dark:bg-teal-950/60',
+    text: 'text-teal-600',
+    darkText: 'dark:text-teal-300',
   },
   cyan: {
-    bg: "bg-cyan-100",
-    darkBg: "dark:bg-cyan-950/60",
-    text: "text-cyan-600",
-    darkText: "dark:text-cyan-300",
+    bg: 'bg-cyan-100',
+    darkBg: 'dark:bg-cyan-950/60',
+    text: 'text-cyan-600',
+    darkText: 'dark:text-cyan-300',
   },
   sky: {
-    bg: "bg-sky-100",
-    darkBg: "dark:bg-sky-950/60",
-    text: "text-sky-600",
-    darkText: "dark:text-sky-300",
+    bg: 'bg-sky-100',
+    darkBg: 'dark:bg-sky-950/60',
+    text: 'text-sky-600',
+    darkText: 'dark:text-sky-300',
   },
   yellow: {
-    bg: "bg-yellow-100",
-    darkBg: "dark:bg-yellow-950/60",
-    text: "text-yellow-700",
-    darkText: "dark:text-yellow-300",
+    bg: 'bg-yellow-100',
+    darkBg: 'dark:bg-yellow-950/60',
+    text: 'text-yellow-700',
+    darkText: 'dark:text-yellow-300',
   },
   emerald: {
-    bg: "bg-emerald-100",
-    darkBg: "dark:bg-emerald-950/60",
-    text: "text-emerald-600",
-    darkText: "dark:text-emerald-300",
+    bg: 'bg-emerald-100',
+    darkBg: 'dark:bg-emerald-950/60',
+    text: 'text-emerald-600',
+    darkText: 'dark:text-emerald-300',
   },
   red: {
-    bg: "bg-red-100",
-    darkBg: "dark:bg-red-950/60",
-    text: "text-red-600",
-    darkText: "dark:text-red-300",
+    bg: 'bg-red-100',
+    darkBg: 'dark:bg-red-950/60',
+    text: 'text-red-600',
+    darkText: 'dark:text-red-300',
   },
   gray: {
-    bg: "bg-gray-100",
-    darkBg: "dark:bg-gray-900",
-    text: "text-gray-600",
-    darkText: "dark:text-gray-300",
+    bg: 'bg-gray-100',
+    darkBg: 'dark:bg-gray-900',
+    text: 'text-gray-600',
+    darkText: 'dark:text-gray-300',
   },
 };
 
@@ -137,67 +127,65 @@ export const SPAN_CATEGORY_CONFIG: Record<
   }
 > = {
   llm_call: {
-    label: "LLM",
-    theme: "purple",
+    label: 'LLM',
+    theme: 'purple',
     icon: Zap,
   },
   tool_execution: {
-    label: "TOOL",
-    theme: "orange",
+    label: 'TOOL',
+    theme: 'orange',
     icon: Wrench,
   },
   agent_invocation: {
-    label: "AGENT INVOCATION",
-    theme: "indigo",
+    label: 'AGENT INVOCATION',
+    theme: 'indigo',
     icon: Bot,
   },
   chain_operation: {
-    label: "CHAIN",
-    theme: "teal",
+    label: 'CHAIN',
+    theme: 'teal',
     icon: Link,
   },
   retrieval: {
-    label: "RETRIEVAL",
-    theme: "cyan",
+    label: 'RETRIEVAL',
+    theme: 'cyan',
     icon: Search,
   },
   embedding: {
-    label: "EMBEDDING",
-    theme: "emerald",
+    label: 'EMBEDDING',
+    theme: 'emerald',
     icon: BarChart2,
   },
   create_agent: {
-    label: "CREATE AGENT",
-    theme: "sky",
+    label: 'CREATE AGENT',
+    theme: 'sky',
     icon: Plus,
   },
   span: {
-    label: "SPAN",
-    theme: "cyan",
+    label: 'SPAN',
+    theme: 'cyan',
     icon: MoveHorizontal,
   },
   event: {
-    label: "EVENT",
-    theme: "emerald",
+    label: 'EVENT',
+    theme: 'emerald',
     icon: CircleDot,
   },
   guardrail: {
-    label: "GUARDRAIL",
-    theme: "red",
+    label: 'GUARDRAIL',
+    theme: 'red',
     icon: ShieldCheck,
   },
   unknown: {
-    label: "UNKNOWN",
-    theme: "gray",
+    label: 'UNKNOWN',
+    theme: 'gray',
     icon: HelpCircle,
   },
 };
 
 // UTILS
 
-export function getSpanCategoryTheme(
-  category: TraceSpanCategory,
-): ColorVariant {
+export function getSpanCategoryTheme(category: TraceSpanCategory): ColorVariant {
   return SPAN_CATEGORY_CONFIG[category].theme;
 }
 

package/src/components/agent-runs/AgentRunTimeline.tsx

@@ -41,7 +41,7 @@ export const AgentRunTimeline: React.FC<AgentRunTimelineProps> = ({ agentId }) =
         };
       })
       .filter((item): item is TraceViewerData => item !== null);
-  }, [runs, ...runDetailQueries.map(q => q.data)]);
+  }, [runs, ...runDetailQueries.map((q) => q.data)]);
 
   const isLoading = runsQuery.isLoading;
   const errorMessage = runsQuery.error ? (runsQuery.error as Error).message : undefined;
@@ -58,9 +58,7 @@ export const AgentRunTimeline: React.FC<AgentRunTimelineProps> = ({ agentId }) =
 
   if (errorMessage) {
     return (
-      <div className="px-4 py-3 text-sm text-destructive">
-        Failed to load runs: {errorMessage}
-      </div>
+      <div className="px-4 py-3 text-sm text-destructive">Failed to load runs: {errorMessage}</div>
     );
   }
 
@@ -88,4 +86,4 @@ export const AgentRunTimeline: React.FC<AgentRunTimelineProps> = ({ agentId }) =
   );
 };
 
-export default AgentRunTimeline;
+export default AgentRunTimeline;

package/src/components/chat.tsx

@@ -372,10 +372,10 @@ export default function Chat({
   // Convert AgentWithStatus to Agent, ensuring required fields have defaults
   const targetAgentData: Agent | undefined = agentDataResponse?.data
     ? ({
-      ...agentDataResponse.data,
-      createdAt: agentDataResponse.data.createdAt || Date.now(),
-      updatedAt: agentDataResponse.data.updatedAt || Date.now(),
-    } as Agent)
+        ...agentDataResponse.data,
+        createdAt: agentDataResponse.data.createdAt || Date.now(),
+        updatedAt: agentDataResponse.data.updatedAt || Date.now(),
+      } as Agent)
     : undefined;
 
   const { handleDelete: handleDeleteAgent, isDeleting: isDeletingAgent } = useDeleteAgent(
@@ -1360,11 +1360,11 @@ export default function Chat({
                                 <span className="text-xs text-muted-foreground">
                                   {moment(
                                     (typeof channel.metadata?.createdAt === 'string' ||
-                                      typeof channel.metadata?.createdAt === 'number'
+                                    typeof channel.metadata?.createdAt === 'number'
                                       ? channel.metadata.createdAt
                                       : null) ||
-                                    channel.updatedAt ||
-                                    channel.createdAt
+                                      channel.updatedAt ||
+                                      channel.createdAt
                                   ).fromNow()}
                                 </span>
                               </div>

package/src/lib/agent-prism-utils.ts

@@ -4,43 +4,40 @@ import type { TraceSpan } from '@evilmartians/agent-prism-types';
  * Recursively filter spans based on a search query
  * Matches against span title, type, and attributes
  */
-export function filterSpansRecursively(
-    spans: TraceSpan[],
-    searchQuery: string
-): TraceSpan[] {
-    const query = searchQuery.toLowerCase().trim();
-    if (!query) {
-        return spans;
-    }
+export function filterSpansRecursively(spans: TraceSpan[], searchQuery: string): TraceSpan[] {
+  const query = searchQuery.toLowerCase().trim();
+  if (!query) {
+    return spans;
+  }
 
-    const filtered: TraceSpan[] = [];
+  const filtered: TraceSpan[] = [];
 
-    for (const span of spans) {
-        // Check if current span matches
-        const titleMatch = span.title.toLowerCase().includes(query);
-        const typeMatch = span.type.toLowerCase().includes(query);
-        const attributeMatch = span.attributes?.some(
-            (attr) =>
-                attr.key.toLowerCase().includes(query) ||
-                attr.value.stringValue?.toLowerCase().includes(query) ||
-                attr.value.intValue?.toLowerCase().includes(query)
-        );
+  for (const span of spans) {
+    // Check if current span matches
+    const titleMatch = span.title.toLowerCase().includes(query);
+    const typeMatch = span.type.toLowerCase().includes(query);
+    const attributeMatch = span.attributes?.some(
+      (attr) =>
+        attr.key.toLowerCase().includes(query) ||
+        attr.value.stringValue?.toLowerCase().includes(query) ||
+        attr.value.intValue?.toLowerCase().includes(query)
+    );
 
-        const matchesQuery = titleMatch || typeMatch || attributeMatch;
+    const matchesQuery = titleMatch || typeMatch || attributeMatch;
 
-        // Recursively filter children
-        const filteredChildren = span.children
-            ? filterSpansRecursively(span.children, searchQuery)
-            : [];
+    // Recursively filter children
+    const filteredChildren = span.children
+      ? filterSpansRecursively(span.children, searchQuery)
+      : [];
 
-        // Include span if it matches or if any of its children match
-        if (matchesQuery || filteredChildren.length > 0) {
-            filtered.push({
-                ...span,
-                children: filteredChildren.length > 0 ? filteredChildren : span.children,
-            });
-        }
+    // Include span if it matches or if any of its children match
+    if (matchesQuery || filteredChildren.length > 0) {
+      filtered.push({
+        ...span,
+        children: filteredChildren.length > 0 ? filteredChildren : span.children,
+      });
     }
+  }
 
-    return filtered;
+  return filtered;
 }