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

package/src/components/agent-prism/TextInput.tsx

@@ -1,14 +1,14 @@
-import { cn } from "@/lib/utils";
-import { X } from "lucide-react";
+import { cn } from '@/lib/utils';
+import { X } from 'lucide-react';
 import {
   useRef,
   type ChangeEvent,
   type ComponentPropsWithRef,
   type ReactNode,
   type RefObject,
-} from "react";
+} from 'react';
 
-export type TextInputProps = ComponentPropsWithRef<"input"> & {
+export type TextInputProps = ComponentPropsWithRef<'input'> & {
   /**
    * Callback fired when the input value changes
    */
@@ -53,7 +53,7 @@ export type TextInputProps = ComponentPropsWithRef<"input"> & {
 };
 
 const iconBaseClassName =
-  "absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-foreground";
+  'absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-foreground';
 
 export const TextInput = ({
   className,
@@ -87,22 +87,19 @@ export const TextInput = ({
   };
 
   return (
-    <div className={cn("w-full", className)}>
+    <div className={cn('w-full', className)}>
       {label && (
         <label
           htmlFor={id}
-          className={cn(
-            "block text-sm font-medium text-foreground ",
-            hideLabel && "sr-only",
-          )}
+          className={cn('block text-sm font-medium text-foreground ', hideLabel && 'sr-only')}
         >
           {label}
         </label>
       )}
       <div
         className={cn(
-          "relative flex w-full items-center justify-center",
-          label && !hideLabel && "mt-1",
+          'relative flex w-full items-center justify-center',
+          label && !hideLabel && 'mt-1'
         )}
       >
         <input
@@ -111,24 +108,24 @@ export const TextInput = ({
           onChange={handleChange}
           className={cn(
             inputClassName,
-            "flex h-7 items-center truncate",
-            "w-full px-2",
-            !!startIcon && "pl-8",
-            !!onClear && "pr-8",
-            "rounded border border-border bg-transparent ",
-            "text-foreground placeholder:text-muted-foreground ",
-            "hover:border-border dark:hover:border-gray-700",
+            'flex h-7 items-center truncate',
+            'w-full px-2',
+            !!startIcon && 'pl-8',
+            !!onClear && 'pr-8',
+            'rounded border border-border bg-transparent ',
+            'text-foreground placeholder:text-muted-foreground ',
+            'hover:border-border dark:hover:border-gray-700'
           )}
           {...rest}
         />
         {startIcon && (
-          <div className={cn(iconBaseClassName, "left-2")} aria-hidden>
+          <div className={cn(iconBaseClassName, 'left-2')} aria-hidden>
             {startIcon}
           </div>
         )}
         {onClear && rest.value && (
           <button
-            className={cn(iconBaseClassName, "right-2")}
+            className={cn(iconBaseClassName, 'right-2')}
             aria-label="Clear input value"
             onClick={handleClear}
             type="button"

package/src/components/agent-prism/TimestampBadge.tsx

@@ -1,17 +1,13 @@
-import type { ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithRef } from 'react';
 
-import { Badge, type BadgeProps } from "./Badge";
+import { Badge, type BadgeProps } from './Badge';
 
-export type TimestampBadgeProps = ComponentPropsWithRef<"span"> & {
+export type TimestampBadgeProps = ComponentPropsWithRef<'span'> & {
   timestamp: number;
-  size?: BadgeProps["size"];
+  size?: BadgeProps['size'];
 };
 
-export const TimestampBadge = ({
-  timestamp,
-  size,
-  ...rest
-}: TimestampBadgeProps) => {
+export const TimestampBadge = ({ timestamp, size, ...rest }: TimestampBadgeProps) => {
   return (
     <Badge
       variant="outline"

package/src/components/agent-prism/TokensBadge.tsx

@@ -1,19 +1,15 @@
-import type { ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithRef } from 'react';
 
-import { Coins } from "lucide-react";
+import { Coins } from 'lucide-react';
 
-import { Badge, type BadgeProps } from "./Badge";
+import { Badge, type BadgeProps } from './Badge';
 
-export type TokensBadgeProps = ComponentPropsWithRef<"span"> & {
+export type TokensBadgeProps = ComponentPropsWithRef<'span'> & {
   tokensCount: number;
-  size?: BadgeProps["size"];
+  size?: BadgeProps['size'];
 };
 
-export const TokensBadge = ({
-  tokensCount,
-  size,
-  ...rest
-}: TokensBadgeProps) => {
+export const TokensBadge = ({ tokensCount, size, ...rest }: TokensBadgeProps) => {
   return (
     <Badge
       iconStart={<Coins className="size-2.5" />}

package/src/components/agent-prism/TraceList/TraceList.tsx

@@ -1,11 +1,11 @@
-import type { TraceRecord } from "@evilmartians/agent-prism-types";
+import type { TraceRecord } from '@evilmartians/agent-prism-types';
 
-import { cn } from "@/lib/utils";
-import { ArrowLeft } from "lucide-react";
+import { cn } from '@/lib/utils';
+import { ArrowLeft } from 'lucide-react';
 
-import { Badge, type BadgeProps } from "../Badge.tsx";
-import { IconButton } from "../IconButton.tsx";
-import { TraceListItem } from "./TraceListItem.tsx";
+import { Badge, type BadgeProps } from '../Badge.tsx';
+import { IconButton } from '../IconButton.tsx';
+import { TraceListItem } from './TraceListItem.tsx';
 
 type TraceRecordWithBadges = TraceRecord & {
   badges?: Array<BadgeProps>;
@@ -31,20 +31,15 @@ export const TraceList = ({
   return (
     <div
       className={cn(
-        "w-full min-w-0",
-        "flex flex-col gap-3",
-        expanded ? "w-full" : "w-fit",
-        className,
+        'w-full min-w-0',
+        'flex flex-col gap-3',
+        expanded ? 'w-full' : 'w-fit',
+        className
       )}
     >
       <header className="flex min-h-6 items-center justify-between gap-2">
         <div className="flex items-center gap-2">
-          <h2
-            className={cn(
-              "font-semibold text-lg text-foreground",
-              !expanded && "hidden",
-            )}
-          >
+          <h2 className={cn('font-semibold text-lg text-foreground', !expanded && 'hidden')}>
             Traces
           </h2>
 
@@ -55,7 +50,6 @@ export const TraceList = ({
             label={traces.length}
           />
         </div>
-
       </header>
 
       {expanded && (

package/src/components/agent-prism/TraceList/TraceListItem.tsx

@@ -1,14 +1,14 @@
-import type { TraceRecord } from "@evilmartians/agent-prism-types";
+import type { TraceRecord } from '@evilmartians/agent-prism-types';
 
-import { cn } from "@/lib/utils";
-import { useCallback, type KeyboardEvent } from "react";
+import { cn } from '@/lib/utils';
+import { useCallback, type KeyboardEvent } from 'react';
 
-import { type AvatarProps } from "../Avatar.tsx";
-import { Badge, type BadgeProps } from "../Badge.tsx";
-import { PriceBadge } from "../PriceBadge.tsx";
-import { TimestampBadge } from "../TimestampBadge.tsx";
-import { TokensBadge } from "../TokensBadge.tsx";
-import { TraceListItemHeader } from "./TraceListItemHeader.tsx";
+import { type AvatarProps } from '../Avatar.tsx';
+import { Badge, type BadgeProps } from '../Badge.tsx';
+import { PriceBadge } from '../PriceBadge.tsx';
+import { TimestampBadge } from '../TimestampBadge.tsx';
+import { TokensBadge } from '../TokensBadge.tsx';
+import { TraceListItemHeader } from './TraceListItemHeader.tsx';
 
 interface TraceListItemProps {
   trace: TraceRecord;
@@ -27,12 +27,12 @@ export const TraceListItem = ({
 }: TraceListItemProps) => {
   const handleKeyDown = useCallback(
     (e: KeyboardEvent): void => {
-      if (e.key === "Enter" || e.key === " ") {
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         onClick?.();
       }
     },
-    [onClick],
+    [onClick]
   );
 
   const { name, agentDescription, totalCost, totalTokens, startTime } = trace;
@@ -40,12 +40,10 @@ export const TraceListItem = ({
   return (
     <div
       className={cn(
-        "group w-full",
-        "flex flex-col gap-2.5 p-4",
-        "cursor-pointer",
-        isSelected
-          ? "bg-muted"
-          : "bg-card",
+        'group w-full',
+        'flex flex-col gap-2.5 p-4',
+        'cursor-pointer',
+        isSelected ? 'bg-muted' : 'bg-card'
       )}
       role="button"
       tabIndex={0}
@@ -60,19 +58,15 @@ export const TraceListItem = ({
           {agentDescription}
         </span>
 
-        {typeof totalCost === "number" && <PriceBadge cost={totalCost} />}
+        {typeof totalCost === 'number' && <PriceBadge cost={totalCost} />}
 
-        {typeof totalTokens === "number" && (
-          <TokensBadge tokensCount={totalTokens} />
-        )}
+        {typeof totalTokens === 'number' && <TokensBadge tokensCount={totalTokens} />}
 
         {badges?.map((badge, index) => (
           <Badge key={index} theme={badge.theme} size="4" label={badge.label} />
         ))}
 
-        {typeof startTime === "number" && (
-          <TimestampBadge timestamp={startTime} />
-        )}
+        {typeof startTime === 'number' && <TimestampBadge timestamp={startTime} />}
       </div>
     </div>
   );

package/src/components/agent-prism/TraceList/TraceListItemHeader.tsx

@@ -1,27 +1,22 @@
-import type { TraceRecord } from "@evilmartians/agent-prism-types";
+import type { TraceRecord } from '@evilmartians/agent-prism-types';
 
-import { formatDuration } from "@evilmartians/agent-prism-data";
+import { formatDuration } from '@evilmartians/agent-prism-data';
 
-import { Avatar, type AvatarProps } from "../Avatar.tsx";
-import { Badge } from "../Badge.tsx";
+import { Avatar, type AvatarProps } from '../Avatar.tsx';
+import { Badge } from '../Badge.tsx';
 
 interface TraceListItemHeaderProps {
   trace: TraceRecord;
   avatar?: AvatarProps;
 }
 
-export const TraceListItemHeader = ({
-  trace,
-  avatar,
-}: TraceListItemHeaderProps) => {
+export const TraceListItemHeader = ({ trace, avatar }: TraceListItemHeaderProps) => {
   return (
     <header className="flex min-w-0 flex-wrap items-center justify-between gap-2">
       <div className="flex min-w-0 items-center gap-1.5 overflow-hidden">
         {avatar && <Avatar size="4" {...avatar} />}
 
-        <h3 className="font-medium max-w-full truncate text-sm text-foreground">
-          {trace.name}
-        </h3>
+        <h3 className="font-medium max-w-full truncate text-sm text-foreground">{trace.name}</h3>
       </div>
 
       <div className="flex items-center gap-2">
@@ -29,17 +24,10 @@ export const TraceListItemHeader = ({
           size="5"
           theme="gray"
           variant="outline"
-          label={
-            trace.spansCount === 1 ? "1 span" : `${trace.spansCount} spans`
-          }
+          label={trace.spansCount === 1 ? '1 span' : `${trace.spansCount} spans`}
         />
 
-        <Badge
-          size="5"
-          theme="gray"
-          variant="outline"
-          label={formatDuration(trace.durationMs)}
-        />
+        <Badge size="5" theme="gray" variant="outline" label={formatDuration(trace.durationMs)} />
       </div>
     </header>
   );

package/src/components/agent-prism/TraceViewer.tsx

@@ -1,40 +1,31 @@
-import {
-  flattenSpans,
-  formatDuration,
-} from "@evilmartians/agent-prism-data";
-import {
-  type TraceRecord,
-  type TraceSpan,
-} from "@evilmartians/agent-prism-types";
-import { filterSpansRecursively } from "@/lib/agent-prism-utils";
-import { cn } from "@/lib/utils";
-import { ArrowLeft } from "lucide-react";
-import { useCallback, useEffect, useMemo, useState } from "react";
-
-import type { BadgeProps } from "./Badge";
-import type { SpanCardViewOptions } from "./SpanCard/SpanCard";
-
-import { Button } from "./Button";
-import {
-  CollapseAllButton,
-  ExpandAllButton,
-} from "./CollapseAndExpandControls";
-import { DetailsView } from "./DetailsView/DetailsView";
-import { SearchInput } from "./SearchInput";
-import { TraceList } from "./TraceList/TraceList";
-import { TraceListItemHeader } from "./TraceList/TraceListItemHeader";
-import { TreeView } from "./TreeView";
+import { flattenSpans, formatDuration } from '@evilmartians/agent-prism-data';
+import { type TraceRecord, type TraceSpan } from '@evilmartians/agent-prism-types';
+import { filterSpansRecursively } from '@/lib/agent-prism-utils';
+import { cn } from '@/lib/utils';
+import { ArrowLeft } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import type { BadgeProps } from './Badge';
+import type { SpanCardViewOptions } from './SpanCard/SpanCard';
+
+import { Button } from './Button';
+import { CollapseAllButton, ExpandAllButton } from './CollapseAndExpandControls';
+import { DetailsView } from './DetailsView/DetailsView';
+import { SearchInput } from './SearchInput';
+import { TraceList } from './TraceList/TraceList';
+import { TraceListItemHeader } from './TraceList/TraceListItemHeader';
+import { TreeView } from './TreeView';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@/components/ui/select";
-import { Badge } from "./Badge";
-import { PriceBadge } from "./PriceBadge";
-import { TimestampBadge } from "./TimestampBadge";
-import { TokensBadge } from "./TokensBadge";
+} from '@/components/ui/select';
+import { Badge } from './Badge';
+import { PriceBadge } from './PriceBadge';
+import { TimestampBadge } from './TimestampBadge';
+import { TokensBadge } from './TokensBadge';
 
 export interface TraceViewerData {
   traceRecord: TraceRecord;
@@ -49,16 +40,14 @@ export interface TraceViewerProps {
 }
 
 export const TraceViewer = ({ data }: TraceViewerProps) => {
-  const [selectedTrace, setSelectedTrace] = useState<
-    TraceRecordWithDisplayData | undefined
-  >(data[0]?.traceRecord);
-  const [selectedTraceSpans, setSelectedTraceSpans] = useState<TraceSpan[]>(
-    data[0]?.spans ?? [],
+  const [selectedTrace, setSelectedTrace] = useState<TraceRecordWithDisplayData | undefined>(
+    data[0]?.traceRecord
   );
+  const [selectedTraceSpans, setSelectedTraceSpans] = useState<TraceSpan[]>(data[0]?.spans ?? []);
   const [selectedSpan, setSelectedSpan] = useState<TraceSpan | undefined>(
-    data[0]?.spans?.[0]?.children?.[0],
+    data[0]?.spans?.[0]?.children?.[0]
   );
-  const [searchValue, setSearchValue] = useState("");
+  const [searchValue, setSearchValue] = useState('');
 
   const [traceListExpanded, setTraceListExpanded] = useState(true);
 
@@ -103,11 +92,9 @@ export const TraceViewer = ({ data }: TraceViewerProps) => {
   const handleTraceSelect = useCallback(
     (trace: TraceRecord) => {
       setSelectedTrace(trace);
-      setSelectedTraceSpans(
-        data.find((item) => item.traceRecord.id === trace.id)?.spans ?? [],
-      );
+      setSelectedTraceSpans(data.find((item) => item.traceRecord.id === trace.id)?.spans ?? []);
     },
-    [data],
+    [data]
   );
 
   const props: LayoutProps = {
@@ -201,7 +188,7 @@ const DesktopLayout = ({
                 <div className="flex items-center gap-4 w-full">
                   <span className="font-semibold text-base">{selectedTrace.name}</span>
                   <div className="flex items-center gap-2 ml-auto">
-                    {typeof selectedTrace.startTime === "number" && (
+                    {typeof selectedTrace.startTime === 'number' && (
                       <span className="text-xs text-muted-foreground font-mono">
                         {new Date(selectedTrace.startTime).toLocaleTimeString()}
                       </span>
@@ -235,7 +222,7 @@ const DesktopLayout = ({
                       )}
                     </div>
                     <div className="flex items-center gap-2 flex-shrink-0">
-                      {typeof trace.startTime === "number" && (
+                      {typeof trace.startTime === 'number' && (
                         <span className="text-xs text-muted-foreground font-mono">
                           {new Date(trace.startTime).toLocaleTimeString()}
                         </span>
@@ -264,7 +251,7 @@ const DesktopLayout = ({
               <SearchInput
                 id="span-search-desktop"
                 name="search"
-                onClear={() => setSearchValue("")}
+                onClear={() => setSearchValue('')}
                 value={searchValue}
                 onValueChange={setSearchValue}
                 className="max-w-60 grow"
@@ -279,9 +266,7 @@ const DesktopLayout = ({
             </div>
 
             {filteredSpans.length === 0 ? (
-              <div className="p-3 text-center text-muted-foreground">
-                No spans found
-              </div>
+              <div className="p-3 text-center text-muted-foreground">No spans found</div>
             ) : (
               <TreeView
                 spans={filteredSpans}
@@ -325,7 +310,7 @@ const DesktopLayout = ({
                       )}
                     </div>
                     <div className="flex items-center gap-2 flex-shrink-0">
-                      {typeof trace.startTime === "number" && (
+                      {typeof trace.startTime === 'number' && (
                         <span className="text-xs text-muted-foreground font-mono">
                           {new Date(trace.startTime).toLocaleTimeString()}
                         </span>
@@ -408,7 +393,7 @@ const MobileLayout = ({
             <SearchInput
               id="span-search-mobile"
               name="search"
-              onClear={() => setSearchValue("")}
+              onClear={() => setSearchValue('')}
               value={searchValue}
               onValueChange={setSearchValue}
               className="max-w-60 grow"
@@ -423,9 +408,7 @@ const MobileLayout = ({
           </div>
 
           {filteredSpans.length === 0 ? (
-            <div className="p-3 text-center text-muted-foreground">
-              No spans found
-            </div>
+            <div className="p-3 text-center text-muted-foreground">No spans found</div>
           ) : (
             <TreeView
               spans={filteredSpans}

package/src/components/agent-prism/TreeView.tsx

@@ -1,10 +1,10 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import { findTimeRange, flattenSpans } from "@evilmartians/agent-prism-data";
-import { cn } from "@/lib/utils";
-import { type FC } from "react";
+import { findTimeRange, flattenSpans } from '@evilmartians/agent-prism-data';
+import { cn } from '@/lib/utils';
+import { type FC } from 'react';
 
-import { SpanCard, type SpanCardViewOptions } from "./SpanCard/SpanCard";
+import { SpanCard, type SpanCardViewOptions } from './SpanCard/SpanCard';
 
 interface TreeViewProps {
   spans: TraceSpan[];
@@ -19,7 +19,7 @@ interface TreeViewProps {
 export const TreeView: FC<TreeViewProps> = ({
   spans,
   onSpanSelect,
-  className = "",
+  className = '',
   selectedSpan,
   expandedSpansIds,
   onExpandSpansIdsChange,
@@ -32,7 +32,7 @@ export const TreeView: FC<TreeViewProps> = ({
   return (
     <div className="w-full min-w-0 p-4">
       <ul
-        className={cn(className, "overflow-x-auto space-y-1")}
+        className={cn(className, 'overflow-x-auto space-y-1')}
         role="tree"
         aria-label="Hierarchical card list"
       >