@elizaos/client 1.6.1-alpha.5 → 1.6.1-alpha.7

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

@@ -1,7 +1,7 @@
-import * as Collapsible from "@radix-ui/react-collapsible";
-import { cn } from "@/lib/utils";
-import { ChevronDown } from "lucide-react";
-import * as React from "react";
+import * as Collapsible from '@radix-ui/react-collapsible';
+import { cn } from '@/lib/utils';
+import { ChevronDown } from 'lucide-react';
+import * as React from 'react';
 
 export interface CollapsibleSectionProps {
   /**
@@ -51,9 +51,9 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
   rightContent,
   children,
   defaultOpen = false,
-  className = "",
-  triggerClassName = "",
-  contentClassName = "",
+  className = '',
+  triggerClassName = '',
+  contentClassName = '',
   onOpenChange,
 }) => {
   const [open, setOpen] = React.useState(defaultOpen);
@@ -63,42 +63,42 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
       setOpen(open);
       onOpenChange?.(open);
     },
-    [onOpenChange],
+    [onOpenChange]
   );
 
   const handleKeyDown = React.useCallback(
     (e: React.KeyboardEvent<HTMLDivElement>): void => {
-      if (e.key === "Enter" || e.key === " ") {
+      if (e.key === 'Enter' || e.key === ' ') {
         e.preventDefault();
         handleOpenChange(!open);
       }
     },
-    [handleOpenChange, open],
+    [handleOpenChange, open]
   );
 
   return (
     <Collapsible.Root
       open={open}
       onOpenChange={handleOpenChange}
-      className={cn("rounded-lg", className)}
+      className={cn('rounded-lg', className)}
     >
       <Collapsible.Trigger asChild>
         <div
           tabIndex={0}
           role="button"
           className={cn(
-            "mb-1 flex w-full items-center justify-between gap-2 rounded-lg px-1 py-3 text-left text-sm font-medium text-foreground",
-            triggerClassName,
+            'mb-1 flex w-full items-center justify-between gap-2 rounded-lg px-1 py-3 text-left text-sm font-medium text-foreground',
+            triggerClassName
           )}
           onKeyDown={handleKeyDown}
           aria-expanded={open}
-          aria-label={`${open ? "Collapse" : "Expand"} content of "${title}" section`}
+          aria-label={`${open ? 'Collapse' : 'Expand'} content of "${title}" section`}
         >
           <div className="flex w-full items-center gap-2">
             <ChevronDown
               className={cn(
-                "h-3 w-3 text-muted-foreground transition-transform duration-200",
-                open && "rotate-180",
+                'h-3 w-3 text-muted-foreground transition-transform duration-200',
+                open && 'rotate-180'
               )}
             />
             <span className="truncate">{title}</span>
@@ -110,8 +110,8 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
 
       <Collapsible.Content
         className={cn(
-          "data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown",
-          contentClassName,
+          'data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown',
+          contentClassName
         )}
       >
         {children}

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

@@ -1,19 +1,19 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import { cn } from "@/lib/utils";
-import { SquareTerminal, Tags, ArrowRightLeft } from "lucide-react";
-import { useState, type ReactElement, type ReactNode } from "react";
+import { cn } from '@/lib/utils';
+import { SquareTerminal, Tags, ArrowRightLeft } from 'lucide-react';
+import { useState, type ReactElement, type ReactNode } from 'react';
 
-import type { AvatarProps } from "../Avatar";
+import type { AvatarProps } from '../Avatar';
 
-import { Tabs, type TabItem } from "../Tabs";
-import { DetailsViewAttributesTab } from "./DetailsViewAttributesTab";
-import { DetailsViewHeader } from "./DetailsViewHeader";
-import { DetailsViewInputOutputTab } from "./DetailsViewInputOutputTab";
-import { DetailsViewMetrics } from "./DetailsViewMetrics";
-import { DetailsViewRawDataTab } from "./DetailsViewRawDataTab";
+import { Tabs, type TabItem } from '../Tabs';
+import { DetailsViewAttributesTab } from './DetailsViewAttributesTab';
+import { DetailsViewHeader } from './DetailsViewHeader';
+import { DetailsViewInputOutputTab } from './DetailsViewInputOutputTab';
+import { DetailsViewMetrics } from './DetailsViewMetrics';
+import { DetailsViewRawDataTab } from './DetailsViewRawDataTab';
 
-type DetailsViewTab = "input-output" | "attributes" | "raw";
+type DetailsViewTab = 'input-output' | 'attributes' | 'raw';
 
 export interface DetailsViewProps {
   /**
@@ -71,22 +71,22 @@ export const DetailsView = ({
   customHeader,
   onTabChange,
 }: DetailsViewProps): ReactElement => {
-  const [tab, setTab] = useState<DetailsViewTab>(defaultTab || "input-output");
+  const [tab, setTab] = useState<DetailsViewTab>(defaultTab || 'input-output');
 
   const tabItems: TabItem<DetailsViewTab>[] = [
     {
-      value: "input-output",
-      label: "In/Out",
+      value: 'input-output',
+      label: 'In/Out',
       icon: <ArrowRightLeft className="size-4" />,
     },
     {
-      value: "attributes",
-      label: "Attributes",
+      value: 'attributes',
+      label: 'Attributes',
       icon: <Tags className="size-4" />,
     },
     {
-      value: "raw",
-      label: "RAW",
+      value: 'raw',
+      label: 'RAW',
       icon: <SquareTerminal className="size-4" />,
     },
   ];
@@ -97,10 +97,10 @@ export const DetailsView = ({
   }
 
   const resolvedHeaderActions =
-    typeof headerActions === "function" ? headerActions(data) : headerActions;
+    typeof headerActions === 'function' ? headerActions(data) : headerActions;
 
   const headerContent = customHeader ? (
-    typeof customHeader === "function" ? (
+    typeof customHeader === 'function' ? (
       customHeader({ data })
     ) : (
       customHeader
@@ -115,12 +115,7 @@ export const DetailsView = ({
   );
 
   return (
-    <div
-      className={cn(
-        "min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm",
-        className,
-      )}
-    >
+    <div className={cn('min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm', className)}>
       {headerContent}
 
       <DetailsViewMetrics data={data} />
@@ -133,9 +128,9 @@ export const DetailsView = ({
         defaultValue={defaultTab}
       />
 
-      {tab === "input-output" && <DetailsViewInputOutputTab data={data} />}
-      {tab === "attributes" && <DetailsViewAttributesTab data={data} />}
-      {tab === "raw" && <DetailsViewRawDataTab data={data} />}
+      {tab === 'input-output' && <DetailsViewInputOutputTab data={data} />}
+      {tab === 'attributes' && <DetailsViewAttributesTab data={data} />}
+      {tab === 'raw' && <DetailsViewRawDataTab data={data} />}
     </div>
   );
 };

package/src/components/agent-prism/DetailsView/DetailsViewAttributesTab.tsx

@@ -1,7 +1,7 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import { CollapsibleSection } from "../CollapsibleSection";
-import { TextInput } from "../TextInput";
+import { CollapsibleSection } from '../CollapsibleSection';
+import { TextInput } from '../TextInput';
 
 interface AttributesTabProps {
   data: TraceSpan;
@@ -11,9 +11,7 @@ export const DetailsViewAttributesTab = ({ data }: AttributesTabProps) => (
   <div className="space-y-6">
     {(!data.attributes || data.attributes.length === 0) && (
       <div className="p-6 text-center">
-        <p className="text-muted-foreground ">
-          No attributes available for this span.
-        </p>
+        <p className="text-muted-foreground ">No attributes available for this span.</p>
       </div>
     )}
 
@@ -22,14 +20,10 @@ export const DetailsViewAttributesTab = ({ data }: AttributesTabProps) => (
         attribute.value.stringValue ||
         attribute.value.intValue ||
         attribute.value.boolValue?.toString() ||
-        "N/A";
+        'N/A';
 
       return (
-        <CollapsibleSection
-          key={`${attribute.key}-${index}`}
-          title={attribute.key}
-          defaultOpen
-        >
+        <CollapsibleSection key={`${attribute.key}-${index}`} title={attribute.key} defaultOpen>
           <TextInput
             id={`${data.id}-attribute-${index}`}
             value={value}

package/src/components/agent-prism/DetailsView/DetailsViewHeader.tsx

@@ -1,11 +1,11 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import { Check, Copy } from "lucide-react";
-import { useState, type ReactNode } from "react";
+import { Check, Copy } from 'lucide-react';
+import { useState, type ReactNode } from 'react';
 
-import { Avatar, type AvatarProps } from "../Avatar";
-import { IconButton } from "../IconButton";
-import { SpanStatus } from "../SpanStatus.tsx";
+import { Avatar, type AvatarProps } from '../Avatar';
+import { IconButton } from '../IconButton';
+import { SpanStatus } from '../SpanStatus.tsx';
 
 export interface DetailsViewHeaderProps {
   data: TraceSpan;
@@ -29,7 +29,7 @@ export const DetailsViewHeader = ({
   avatar,
   copyButton,
   actions,
-  className = "mb-4 flex flex-wrap items-center gap-4",
+  className = 'mb-4 flex flex-wrap items-center gap-4',
 }: DetailsViewHeaderProps) => {
   const [hasCopied, setHasCopied] = useState(false);
 
@@ -46,9 +46,7 @@ export const DetailsViewHeader = ({
       <div className="flex items-center gap-1.5">
         {avatar && <Avatar size="4" {...avatar} />}
 
-        <span className="text-base tracking-wide text-foreground ">
-          {data.title}
-        </span>
+        <span className="text-base tracking-wide text-foreground ">{data.title}</span>
 
         <div className="flex size-5 items-center justify-center">
           <SpanStatus status={data.status} />
@@ -56,9 +54,7 @@ export const DetailsViewHeader = ({
 
         {copyButton && (
           <IconButton
-            aria-label={
-              copyButton.isEnabled ? "Copy span details" : "Copy disabled"
-            }
+            aria-label={copyButton.isEnabled ? 'Copy span details' : 'Copy disabled'}
             variant="ghost"
             onClick={handleCopy}
           >

package/src/components/agent-prism/DetailsView/DetailsViewHeaderActions.tsx

@@ -1,4 +1,4 @@
-import type { ReactNode } from "react";
+import type { ReactNode } from 'react';
 
 export interface DetailsViewHeaderActionsProps {
   /**
@@ -13,7 +13,7 @@ export interface DetailsViewHeaderActionsProps {
 
 export const DetailsViewHeaderActions = ({
   children,
-  className = "flex flex-wrap items-center gap-2",
+  className = 'flex flex-wrap items-center gap-2',
 }: DetailsViewHeaderActionsProps) => {
   if (!children) return null;
 

package/src/components/agent-prism/DetailsView/DetailsViewInputOutputTab.tsx

@@ -1,21 +1,21 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import { Check, Copy } from "lucide-react";
-import { useState, type ReactElement } from "react";
-import JSONPretty from "react-json-pretty";
-import colors from "tailwindcss/colors";
+import { Check, Copy } from 'lucide-react';
+import { useState, type ReactElement } from 'react';
+import JSONPretty from 'react-json-pretty';
+import colors from 'tailwindcss/colors';
 
-import { CollapsibleSection } from "../CollapsibleSection";
-import { IconButton } from "../IconButton";
-import { Tabs, type TabItem } from "../Tabs";
+import { CollapsibleSection } from '../CollapsibleSection';
+import { IconButton } from '../IconButton';
+import { Tabs, type TabItem } from '../Tabs';
 
 interface DetailsViewInputOutputTabProps {
   data: TraceSpan;
 }
 
-type IOTab = "json" | "plain";
+type IOTab = 'json' | 'plain';
 
-type IOSection = "Input" | "Output";
+type IOSection = 'Input' | 'Output';
 
 export const DetailsViewInputOutputTab = ({
   data,
@@ -26,9 +26,7 @@ export const DetailsViewInputOutputTab = ({
   if (!hasInput && !hasOutput) {
     return (
       <div className="p-6 text-center">
-        <p className="text-muted-foreground ">
-          No input or output data available for this span.
-        </p>
+        <p className="text-muted-foreground ">No input or output data available for this span.</p>
       </div>
     );
   }
@@ -36,7 +34,7 @@ export const DetailsViewInputOutputTab = ({
   let parsedInput: string | null = null;
   let parsedOutput: string | null = null;
 
-  if (typeof data.input === "string") {
+  if (typeof data.input === 'string') {
     try {
       parsedInput = JSON.parse(data.input);
     } catch {
@@ -44,7 +42,7 @@ export const DetailsViewInputOutputTab = ({
     }
   }
 
-  if (typeof data.output === "string") {
+  if (typeof data.output === 'string') {
     try {
       parsedOutput = JSON.parse(data.output);
     } catch {
@@ -54,20 +52,12 @@ export const DetailsViewInputOutputTab = ({
 
   return (
     <div className="space-y-3">
-      {typeof data.input === "string" && (
-        <IOSection
-          section="Input"
-          content={data.input}
-          parsedContent={parsedInput}
-        />
+      {typeof data.input === 'string' && (
+        <IOSection section="Input" content={data.input} parsedContent={parsedInput} />
       )}
 
-      {typeof data.output === "string" && (
-        <IOSection
-          section="Output"
-          content={data.output}
-          parsedContent={parsedOutput}
-        />
+      {typeof data.output === 'string' && (
+        <IOSection section="Output" content={data.output} parsedContent={parsedOutput} />
       )}
     </div>
   );
@@ -79,23 +69,19 @@ interface IOSectionProps {
   parsedContent: string | null;
 }
 
-const IOSection = ({
-  section,
-  content,
-  parsedContent,
-}: IOSectionProps): ReactElement => {
-  const [tab, setTab] = useState<IOTab>("plain");
+const IOSection = ({ section, content, parsedContent }: IOSectionProps): ReactElement => {
+  const [tab, setTab] = useState<IOTab>('plain');
   const [open, setOpen] = useState(true);
 
   const tabItems: TabItem<IOTab>[] = [
     {
-      value: "json",
-      label: "JSON",
+      value: 'json',
+      label: 'JSON',
       disabled: !parsedContent,
     },
     {
-      value: "plain",
-      label: "Plain",
+      value: 'plain',
+      label: 'Plain',
     },
   ];
 
@@ -118,40 +104,26 @@ const IOSection = ({
       }
       triggerClassName="min-h-16"
     >
-      <IOContent
-        content={content}
-        section={section}
-        tab={tab}
-        parsedContent={parsedContent}
-      />
+      <IOContent content={content} section={section} tab={tab} parsedContent={parsedContent} />
     </CollapsibleSection>
   );
 };
 
-interface IOContentProps extends Omit<IOSectionProps, "title"> {
+interface IOContentProps extends Omit<IOSectionProps, 'title'> {
   tab: IOTab;
   parsedContent: string | null;
 }
 
-const IOContent = ({
-  tab,
-  content,
-  section,
-  parsedContent,
-}: IOContentProps): ReactElement => {
+const IOContent = ({ tab, content, section, parsedContent }: IOContentProps): ReactElement => {
   if (!content) {
-    return (
-      <p className="p-3 text-sm italic text-muted-foreground ">
-        No data available
-      </p>
-    );
+    return <p className="p-3 text-sm italic text-muted-foreground ">No data available</p>;
   }
 
   return (
     <div className="relative rounded-lg border border-border ">
       <CopyButton section={section} content={content} />
 
-      {tab === "json" && (
+      {tab === 'json' && (
         <>
           {parsedContent ? (
             <JSONPretty
@@ -165,14 +137,12 @@ const IOContent = ({
               valueStyle="color: hsl(var(--chart-1));"
             />
           ) : (
-            <div className="p-4 text-sm text-muted-foreground">
-              Invalid JSON format
-            </div>
+            <div className="p-4 text-sm text-muted-foreground">Invalid JSON format</div>
           )}
         </>
       )}
 
-      {tab === "plain" && (
+      {tab === 'plain' && (
         <div className="rounded-lg bg-muted/50 p-4">
           <pre className="overflow-x-auto whitespace-pre-wrap text-left font-mono text-xs text-foreground">
             {content}

package/src/components/agent-prism/DetailsView/DetailsViewMetrics.tsx

@@ -1,15 +1,11 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import { getDurationMs, formatDuration } from "@evilmartians/agent-prism-data";
-import { Coins } from "lucide-react";
+import { getDurationMs, formatDuration } from '@evilmartians/agent-prism-data';
+import { Coins } from 'lucide-react';
 
-import { Badge } from "../Badge";
-import {
-  getSpanCategoryIcon,
-  getSpanCategoryLabel,
-  getSpanCategoryTheme,
-} from "../shared.ts";
-import { TimestampBadge } from "../TimestampBadge.tsx";
+import { Badge } from '../Badge';
+import { getSpanCategoryIcon, getSpanCategoryLabel, getSpanCategoryTheme } from '../shared.ts';
+import { TimestampBadge } from '../TimestampBadge.tsx';
 
 interface DetailsViewMetricsProps {
   data: TraceSpan;
@@ -28,7 +24,7 @@ export const DetailsViewMetrics = ({ data }: DetailsViewMetricsProps) => {
         label={getSpanCategoryLabel(data.type)}
       />
 
-      {typeof data.tokensCount === "number" && (
+      {typeof data.tokensCount === 'number' && (
         <Badge
           iconStart={<Coins className="size-2.5" />}
           theme="gray"
@@ -37,17 +33,13 @@ export const DetailsViewMetrics = ({ data }: DetailsViewMetricsProps) => {
         />
       )}
 
-      {typeof data.cost === "number" && (
+      {typeof data.cost === 'number' && (
         <Badge theme="gray" size="4" label={`$ ${data.cost.toFixed(4)}`} />
       )}
 
-      <span className="text-xs text-muted-foreground">
-        LATENCY: {formatDuration(durationMs)}
-      </span>
+      <span className="text-xs text-muted-foreground">LATENCY: {formatDuration(durationMs)}</span>
 
-      {typeof data.startTime === "number" && (
-        <TimestampBadge timestamp={data.startTime} />
-      )}
+      {typeof data.startTime === 'number' && <TimestampBadge timestamp={data.startTime} />}
     </div>
   );
 };

package/src/components/agent-prism/DetailsView/DetailsViewRawDataTab.tsx

@@ -1,6 +1,6 @@
-import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { TraceSpan } from '@evilmartians/agent-prism-types';
 
-import JSONPretty from "react-json-pretty";
+import JSONPretty from 'react-json-pretty';
 
 interface RawDataTabProps {
   data: TraceSpan;
@@ -13,7 +13,7 @@ export const DetailsViewRawDataTab = ({ data }: RawDataTabProps) => (
         booleanStyle="color: hsl(var(--primary));"
         className="overflow-x-auto rounded-xl p-4 text-left"
         data={data.raw}
-        id={`json-pretty-${data.id || "span-details"}`}
+        id={`json-pretty-${data.id || 'span-details'}`}
         keyStyle="color: hsl(var(--primary));"
         mainStyle="color: hsl(var(--muted-foreground)); font-size: 12px;"
         stringStyle="color: hsl(var(--chart-2));"

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

@@ -1,16 +1,13 @@
-import type { ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithRef } from 'react';
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils';
 
-import type { ComponentSize } from "./shared";
+import type { ComponentSize } from './shared';
 
-type IconButtonSize = Extract<
-  ComponentSize,
-  "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16"
->;
-type IconButtonVariant = "default" | "ghost";
+type IconButtonSize = Extract<ComponentSize, '6' | '7' | '8' | '9' | '10' | '11' | '12' | '16'>;
+type IconButtonVariant = 'default' | 'ghost';
 
-export type IconButtonProps = ComponentPropsWithRef<"button"> & {
+export type IconButtonProps = ComponentPropsWithRef<'button'> & {
   /**
    * The size of the icon button
    */
@@ -25,33 +22,33 @@ export type IconButtonProps = ComponentPropsWithRef<"button"> & {
    * Accessible label for screen readers
    * Required for accessibility compliance
    */
-  "aria-label": string;
+  'aria-label': string;
 };
 
 const sizeClasses: Record<IconButtonSize, string> = {
-  "6": "h-6 min-h-6",
-  "7": "h-7 min-h-7",
-  "8": "h-8 min-h-8",
-  "9": "h-9 min-h-9",
-  "10": "h-10 min-h-10",
-  "11": "h-11 min-h-11",
-  "12": "h-12 min-h-12",
-  "16": "h-16 min-h-16",
+  '6': 'h-6 min-h-6',
+  '7': 'h-7 min-h-7',
+  '8': 'h-8 min-h-8',
+  '9': 'h-9 min-h-9',
+  '10': 'h-10 min-h-10',
+  '11': 'h-11 min-h-11',
+  '12': 'h-12 min-h-12',
+  '16': 'h-16 min-h-16',
 };
 
 const variantClasses: Record<IconButtonVariant, string> = {
-  default: "border border-border bg-transparent ",
-  ghost: "bg-transparent",
+  default: 'border border-border bg-transparent ',
+  ghost: 'bg-transparent',
 };
 
 // TODO: Remake to call Icon component directly instead of passing children
 export const IconButton = ({
   children,
   className,
-  size = "6",
-  variant = "default",
-  type = "button",
-  "aria-label": ariaLabel,
+  size = '6',
+  variant = 'default',
+  type = 'button',
+  'aria-label': ariaLabel,
   ...rest
 }: IconButtonProps) => {
   return (
@@ -61,11 +58,11 @@ export const IconButton = ({
       className={cn(
         className,
         sizeClasses[size],
-        "inline-flex aspect-square shrink-0 items-center justify-center",
-        "rounded-md",
+        'inline-flex aspect-square shrink-0 items-center justify-center',
+        'rounded-md',
         variantClasses[variant],
-        "text-muted-foreground ",
-        "hover:bg-gray-200 dark:hover:bg-gray-800",
+        'text-muted-foreground ',
+        'hover:bg-gray-200 dark:hover:bg-gray-800'
       )}
       {...rest}
     >

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

@@ -1,10 +1,10 @@
-import type { ComponentPropsWithRef } from "react";
+import type { ComponentPropsWithRef } from 'react';
 
-import { Badge, type BadgeProps } from "./Badge";
+import { Badge, type BadgeProps } from './Badge';
 
-export type PriceBadgeProps = ComponentPropsWithRef<"span"> & {
+export type PriceBadgeProps = ComponentPropsWithRef<'span'> & {
   cost: number;
-  size?: BadgeProps["size"];
+  size?: BadgeProps['size'];
 };
 
 export const PriceBadge = ({ cost, size, ...rest }: PriceBadgeProps) => {