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

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

@@ -0,0 +1,141 @@
+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 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";
+
+type DetailsViewTab = "input-output" | "attributes" | "raw";
+
+export interface DetailsViewProps {
+  /**
+   * The span data to display in the details view
+   */
+  data: TraceSpan;
+
+  /**
+   * Optional avatar configuration for the header
+   */
+  avatar?: AvatarProps;
+
+  /**
+   * The initially selected tab
+   */
+  defaultTab?: DetailsViewTab;
+
+  /**
+   * Optional className for the root container
+   */
+  className?: string;
+
+  /**
+   * Configuration for the copy button functionality
+   */
+  copyButton?: {
+    isEnabled?: boolean;
+    onCopy?: (data: TraceSpan) => void;
+  };
+
+  /**
+   * Custom header actions to render
+   * Can be a ReactNode or a render function that receives the data
+   */
+  headerActions?: ReactNode | ((data: TraceSpan) => ReactNode);
+
+  /**
+   * Optional custom header component to replace the default
+   */
+  customHeader?: ReactNode | ((props: { data: TraceSpan }) => ReactNode);
+
+  /**
+   * Callback fired when the active tab changes
+   */
+  onTabChange?: (tabValue: DetailsViewTab) => void;
+}
+
+export const DetailsView = ({
+  data,
+  avatar,
+  defaultTab,
+  className,
+  copyButton,
+  headerActions,
+  customHeader,
+  onTabChange,
+}: DetailsViewProps): ReactElement => {
+  const [tab, setTab] = useState<DetailsViewTab>(defaultTab || "input-output");
+
+  const tabItems: TabItem<DetailsViewTab>[] = [
+    {
+      value: "input-output",
+      label: "In/Out",
+      icon: <ArrowRightLeft className="size-4" />,
+    },
+    {
+      value: "attributes",
+      label: "Attributes",
+      icon: <Tags className="size-4" />,
+    },
+    {
+      value: "raw",
+      label: "RAW",
+      icon: <SquareTerminal className="size-4" />,
+    },
+  ];
+
+  function handleTabChange(tabValue: DetailsViewTab) {
+    setTab(tabValue);
+    onTabChange?.(tabValue);
+  }
+
+  const resolvedHeaderActions =
+    typeof headerActions === "function" ? headerActions(data) : headerActions;
+
+  const headerContent = customHeader ? (
+    typeof customHeader === "function" ? (
+      customHeader({ data })
+    ) : (
+      customHeader
+    )
+  ) : (
+    <DetailsViewHeader
+      data={data}
+      avatar={avatar}
+      copyButton={copyButton}
+      actions={resolvedHeaderActions}
+    />
+  );
+
+  return (
+    <div
+      className={cn(
+        "min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm",
+        className,
+      )}
+    >
+      {headerContent}
+
+      <DetailsViewMetrics data={data} />
+
+      <Tabs
+        items={tabItems}
+        value={tab}
+        onValueChange={handleTabChange}
+        theme="underline"
+        defaultValue={defaultTab}
+      />
+
+      {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

@@ -0,0 +1,45 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { CollapsibleSection } from "../CollapsibleSection";
+import { TextInput } from "../TextInput";
+
+interface AttributesTabProps {
+  data: TraceSpan;
+}
+
+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>
+      </div>
+    )}
+
+    {(data.attributes || []).map((attribute, index) => {
+      const value =
+        attribute.value.stringValue ||
+        attribute.value.intValue ||
+        attribute.value.boolValue?.toString() ||
+        "N/A";
+
+      return (
+        <CollapsibleSection
+          key={`${attribute.key}-${index}`}
+          title={attribute.key}
+          defaultOpen
+        >
+          <TextInput
+            id={`${data.id}-attribute-${index}`}
+            value={value}
+            disabled
+            readOnly
+            inputClassName="font-mono text-xs"
+            className="w-full"
+          />
+        </CollapsibleSection>
+      );
+    })}
+  </div>
+);

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

@@ -0,0 +1,77 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+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";
+
+export interface DetailsViewHeaderProps {
+  data: TraceSpan;
+  avatar?: AvatarProps;
+  copyButton?: {
+    isEnabled?: boolean;
+    onCopy?: (data: TraceSpan) => void;
+  };
+  /**
+   * Custom actions to render in the header
+   */
+  actions?: ReactNode;
+  /**
+   * Optional className for the header container
+   */
+  className?: string;
+}
+
+export const DetailsViewHeader = ({
+  data,
+  avatar,
+  copyButton,
+  actions,
+  className = "mb-4 flex flex-wrap items-center gap-4",
+}: DetailsViewHeaderProps) => {
+  const [hasCopied, setHasCopied] = useState(false);
+
+  const handleCopy = () => {
+    if (copyButton?.onCopy) {
+      copyButton.onCopy(data);
+      setHasCopied(true);
+      setTimeout(() => setHasCopied(false), 2000);
+    }
+  };
+
+  return (
+    <div className={className}>
+      <div className="flex items-center gap-1.5">
+        {avatar && <Avatar size="4" {...avatar} />}
+
+        <span className="text-base tracking-wide text-foreground ">
+          {data.title}
+        </span>
+
+        <div className="flex size-5 items-center justify-center">
+          <SpanStatus status={data.status} />
+        </div>
+
+        {copyButton && (
+          <IconButton
+            aria-label={
+              copyButton.isEnabled ? "Copy span details" : "Copy disabled"
+            }
+            variant="ghost"
+            onClick={handleCopy}
+          >
+            {hasCopied ? (
+              <Check className="size-3 text-muted-foreground" />
+            ) : (
+              <Copy className="size-3 text-muted-foreground" />
+            )}
+          </IconButton>
+        )}
+      </div>
+
+      {actions}
+    </div>
+  );
+};

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

@@ -0,0 +1,21 @@
+import type { ReactNode } from "react";
+
+export interface DetailsViewHeaderActionsProps {
+  /**
+   * Custom actions to render in the header
+   */
+  children?: ReactNode;
+  /**
+   * Optional className for the actions container
+   */
+  className?: string;
+}
+
+export const DetailsViewHeaderActions = ({
+  children,
+  className = "flex flex-wrap items-center gap-2",
+}: DetailsViewHeaderActionsProps) => {
+  if (!children) return null;
+
+  return <div className={className}>{children}</div>;
+};

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

@@ -0,0 +1,210 @@
+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 { CollapsibleSection } from "../CollapsibleSection";
+import { IconButton } from "../IconButton";
+import { Tabs, type TabItem } from "../Tabs";
+
+interface DetailsViewInputOutputTabProps {
+  data: TraceSpan;
+}
+
+type IOTab = "json" | "plain";
+
+type IOSection = "Input" | "Output";
+
+export const DetailsViewInputOutputTab = ({
+  data,
+}: DetailsViewInputOutputTabProps): ReactElement => {
+  const hasInput = Boolean(data.input);
+  const hasOutput = Boolean(data.output);
+
+  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>
+      </div>
+    );
+  }
+
+  let parsedInput: string | null = null;
+  let parsedOutput: string | null = null;
+
+  if (typeof data.input === "string") {
+    try {
+      parsedInput = JSON.parse(data.input);
+    } catch {
+      parsedInput = null;
+    }
+  }
+
+  if (typeof data.output === "string") {
+    try {
+      parsedOutput = JSON.parse(data.output);
+    } catch {
+      parsedOutput = null;
+    }
+  }
+
+  return (
+    <div className="space-y-3">
+      {typeof data.input === "string" && (
+        <IOSection
+          section="Input"
+          content={data.input}
+          parsedContent={parsedInput}
+        />
+      )}
+
+      {typeof data.output === "string" && (
+        <IOSection
+          section="Output"
+          content={data.output}
+          parsedContent={parsedOutput}
+        />
+      )}
+    </div>
+  );
+};
+
+interface IOSectionProps {
+  section: IOSection;
+  content: string;
+  parsedContent: string | null;
+}
+
+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",
+      disabled: !parsedContent,
+    },
+    {
+      value: "plain",
+      label: "Plain",
+    },
+  ];
+
+  return (
+    <CollapsibleSection
+      title={section}
+      defaultOpen
+      onOpenChange={setOpen}
+      rightContent={
+        open ? (
+          <Tabs<IOTab>
+            items={tabItems}
+            defaultValue="plain"
+            value={tab}
+            onValueChange={setTab}
+            theme="pill"
+            onClick={(event) => event.stopPropagation()}
+          />
+        ) : null
+      }
+      triggerClassName="min-h-16"
+    >
+      <IOContent
+        content={content}
+        section={section}
+        tab={tab}
+        parsedContent={parsedContent}
+      />
+    </CollapsibleSection>
+  );
+};
+
+interface IOContentProps extends Omit<IOSectionProps, "title"> {
+  tab: IOTab;
+  parsedContent: string | null;
+}
+
+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 (
+    <div className="relative rounded-lg border border-border ">
+      <CopyButton section={section} content={content} />
+
+      {tab === "json" && (
+        <>
+          {parsedContent ? (
+            <JSONPretty
+              booleanStyle="color: hsl(var(--primary));"
+              className="overflow-x-auto rounded-xl p-4 text-left"
+              data={parsedContent}
+              id={`json-pretty-${section}`}
+              keyStyle="color: hsl(var(--primary));"
+              mainStyle="color: hsl(var(--muted-foreground)); font-size: 12px;"
+              stringStyle="color: hsl(var(--chart-2));"
+              valueStyle="color: hsl(var(--chart-1));"
+            />
+          ) : (
+            <div className="p-4 text-sm text-muted-foreground">
+              Invalid JSON format
+            </div>
+          )}
+        </>
+      )}
+
+      {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}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};
+
+type CopyButtonProps = {
+  section: IOSection;
+  content: string;
+};
+
+const CopyButton = ({ section, content }: CopyButtonProps) => {
+  const [isCopied, setIsCopied] = useState(false);
+
+  const onClick = () => {
+    navigator.clipboard.writeText(content);
+    setIsCopied(true);
+    setTimeout(() => setIsCopied(false), 2000);
+  };
+
+  return (
+    <IconButton
+      onClick={onClick}
+      aria-label={isCopied ? `${section} Data Copied` : `Copy ${section} Data`}
+      variant="ghost"
+      className="absolute right-1.5 top-1.5"
+    >
+      {isCopied ? <Check className="size-3" /> : <Copy className="size-3" />}
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,53 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+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";
+
+interface DetailsViewMetricsProps {
+  data: TraceSpan;
+}
+
+export const DetailsViewMetrics = ({ data }: DetailsViewMetricsProps) => {
+  const Icon = getSpanCategoryIcon(data.type);
+  const durationMs = getDurationMs(data);
+
+  return (
+    <div className="mb-4 flex flex-wrap items-center justify-start gap-1">
+      <Badge
+        iconStart={<Icon className="size-2.5" />}
+        theme={getSpanCategoryTheme(data.type)}
+        size="4"
+        label={getSpanCategoryLabel(data.type)}
+      />
+
+      {typeof data.tokensCount === "number" && (
+        <Badge
+          iconStart={<Coins className="size-2.5" />}
+          theme="gray"
+          size="4"
+          label={data.tokensCount}
+        />
+      )}
+
+      {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>
+
+      {typeof data.startTime === "number" && (
+        <TimestampBadge timestamp={data.startTime} />
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,24 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import JSONPretty from "react-json-pretty";
+
+interface RawDataTabProps {
+  data: TraceSpan;
+}
+
+export const DetailsViewRawDataTab = ({ data }: RawDataTabProps) => (
+  <div className="pt-4">
+    <div className="rounded border border-border bg-transparent ">
+      <JSONPretty
+        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"}`}
+        keyStyle="color: hsl(var(--primary));"
+        mainStyle="color: hsl(var(--muted-foreground)); font-size: 12px;"
+        stringStyle="color: hsl(var(--chart-2));"
+        valueStyle="color: hsl(var(--chart-1));"
+      />
+    </div>
+  </div>
+);

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

@@ -0,0 +1,75 @@
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+
+import type { ComponentSize } from "./shared";
+
+type IconButtonSize = Extract<
+  ComponentSize,
+  "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16"
+>;
+type IconButtonVariant = "default" | "ghost";
+
+export type IconButtonProps = ComponentPropsWithRef<"button"> & {
+  /**
+   * The size of the icon button
+   */
+  size?: IconButtonSize;
+
+  /**
+   * The visual variant of the icon button
+   */
+  variant?: IconButtonVariant;
+
+  /**
+   * Accessible label for screen readers
+   * Required for accessibility compliance
+   */
+  "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",
+};
+
+const variantClasses: Record<IconButtonVariant, string> = {
+  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,
+  ...rest
+}: IconButtonProps) => {
+  return (
+    <button
+      type={type}
+      aria-label={ariaLabel}
+      className={cn(
+        className,
+        sizeClasses[size],
+        "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",
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,12 @@
+import type { ComponentPropsWithRef } from "react";
+
+import { Badge, type BadgeProps } from "./Badge";
+
+export type PriceBadgeProps = ComponentPropsWithRef<"span"> & {
+  cost: number;
+  size?: BadgeProps["size"];
+};
+
+export const PriceBadge = ({ cost, size, ...rest }: PriceBadgeProps) => {
+  return <Badge theme="gray" size={size} {...rest} label={`$ ${cost}`} />;
+};

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

@@ -0,0 +1,17 @@
+import { Search } from "lucide-react";
+
+import { TextInput, type TextInputProps } from "./TextInput";
+
+/**
+ * A simple wrapper around the TextInput component.
+ * It adds a search icon and a placeholder.
+ */
+export const SearchInput = ({ ...props }: TextInputProps) => {
+  return (
+    <TextInput
+      startIcon={<Search className="size-4" />}
+      placeholder="Filter..."
+      {...props}
+    />
+  );
+};