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

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

@@ -0,0 +1,467 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import {
+  formatDuration,
+  getTimelineData,
+} from "@evilmartians/agent-prism-data";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { cn } from "@/lib/utils";
+import {
+  type FC,
+  useCallback,
+  type KeyboardEvent,
+  type MouseEvent,
+} from "react";
+
+import { Avatar, type AvatarProps } from "../Avatar.tsx";
+import { getSpanCategoryTheme } from "../shared.ts";
+import { SpanStatus } from "../SpanStatus.tsx";
+import { SpanCardBadges } from "./SpanCardBadges.tsx";
+import {
+  type SpanCardConnectorType,
+  SpanCardConnector,
+} from "./SpanCardConnector.tsx";
+import { SpanCardTimeline } from "./SpanCardTimeline.tsx";
+import { SpanCardToggle } from "./SpanCardToggle.tsx";
+
+const LAYOUT_CONSTANTS = {
+  CONNECTOR_WIDTH: 20,
+  CONTENT_BASE_WIDTH: 320,
+} as const;
+
+type ExpandButtonPlacement = "inside" | "outside";
+
+export type SpanCardViewOptions = {
+  withStatus?: boolean;
+  expandButton?: ExpandButtonPlacement;
+};
+
+const DEFAULT_VIEW_OPTIONS: Required<SpanCardViewOptions> = {
+  withStatus: true,
+  expandButton: "inside",
+};
+
+interface SpanCardProps {
+  data: TraceSpan;
+  level?: number;
+  selectedSpan?: TraceSpan;
+  avatar?: AvatarProps;
+  onSpanSelect?: (span: TraceSpan) => void;
+  minStart: number;
+  maxEnd: number;
+  isLastChild: boolean;
+  prevLevelConnectors?: SpanCardConnectorType[];
+  expandedSpansIds: string[];
+  onExpandSpansIdsChange: (ids: string[]) => void;
+  viewOptions?: SpanCardViewOptions;
+}
+
+interface SpanCardState {
+  isExpanded: boolean;
+  hasChildren: boolean;
+  isSelected: boolean;
+}
+
+const getContentWidth = ({
+  level,
+  hasExpandButton,
+  contentPadding,
+  expandButton,
+}: {
+  level: number;
+  hasExpandButton: boolean;
+  contentPadding: number;
+  expandButton: ExpandButtonPlacement;
+}) => {
+  let width =
+    LAYOUT_CONSTANTS.CONTENT_BASE_WIDTH -
+    level * LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
+
+  if (hasExpandButton && expandButton === "inside") {
+    width -= LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
+  }
+
+  if (expandButton === "outside" && level === 0) {
+    width -= LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
+  }
+
+  return width - contentPadding;
+};
+
+const getGridTemplateColumns = ({
+  connectorsColumnWidth,
+  expandButton,
+}: {
+  connectorsColumnWidth: number;
+  expandButton: ExpandButtonPlacement;
+}) => {
+  if (expandButton === "inside") {
+    return `${connectorsColumnWidth}px 1fr`;
+  }
+
+  return `${connectorsColumnWidth}px 1fr ${LAYOUT_CONSTANTS.CONNECTOR_WIDTH}px`;
+};
+
+const getContentPadding = ({
+  level,
+  hasExpandButton,
+}: {
+  level: number;
+  hasExpandButton: boolean;
+}) => {
+  if (level === 0) return 0;
+
+  if (hasExpandButton) return 4;
+
+  return 8;
+};
+
+const getConnectorsLayout = ({
+  level,
+  hasExpandButton,
+  isLastChild,
+  prevConnectors,
+  expandButton,
+}: {
+  hasExpandButton: boolean;
+  isLastChild: boolean;
+  level: number;
+  prevConnectors: SpanCardConnectorType[];
+  expandButton: ExpandButtonPlacement;
+}): {
+  connectors: SpanCardConnectorType[];
+  connectorsColumnWidth: number;
+} => {
+  const connectors: SpanCardConnectorType[] = [];
+
+  if (level === 0) {
+    return {
+      connectors: expandButton === "inside" ? [] : ["vertical"],
+      connectorsColumnWidth: 20,
+    };
+  }
+
+  for (let i = 0; i < level - 1; i++) {
+    connectors.push("vertical");
+  }
+
+  if (!isLastChild) {
+    connectors.push("t-right");
+  }
+
+  if (isLastChild) {
+    connectors.push("corner-top-right");
+  }
+
+  let connectorsColumnWidth =
+    connectors.length * LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
+
+  if (hasExpandButton) {
+    connectorsColumnWidth += LAYOUT_CONSTANTS.CONNECTOR_WIDTH;
+  }
+
+  for (let i = 0; i < prevConnectors.length; i++) {
+    if (
+      prevConnectors[i] === "empty" ||
+      prevConnectors[i] === "corner-top-right"
+    ) {
+      connectors[i] = "empty";
+    }
+  }
+
+  return {
+    connectors,
+    connectorsColumnWidth,
+  };
+};
+
+const useSpanCardEventHandlers = (
+  data: TraceSpan,
+  onSpanSelect?: (span: TraceSpan) => void,
+) => {
+  const handleCardClick = useCallback((): void => {
+    onSpanSelect?.(data);
+  }, [data, onSpanSelect]);
+
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent): void => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleCardClick();
+      }
+    },
+    [handleCardClick],
+  );
+
+  const handleToggleClick = useCallback(
+    (e: MouseEvent | KeyboardEvent): void => {
+      e.stopPropagation();
+    },
+    [],
+  );
+
+  return {
+    handleCardClick,
+    handleKeyDown,
+    handleToggleClick,
+  };
+};
+
+const SpanCardChildren: FC<{
+  data: TraceSpan;
+  level: number;
+  selectedSpan?: TraceSpan;
+  onSpanSelect?: (span: TraceSpan) => void;
+  minStart: number;
+  maxEnd: number;
+  prevLevelConnectors: SpanCardConnectorType[];
+  expandedSpansIds: string[];
+  onExpandSpansIdsChange: (ids: string[]) => void;
+  viewOptions?: SpanCardViewOptions;
+}> = ({
+  data,
+  level,
+  selectedSpan,
+  onSpanSelect,
+  minStart,
+  maxEnd,
+  prevLevelConnectors,
+  expandedSpansIds,
+  onExpandSpansIdsChange,
+  viewOptions = DEFAULT_VIEW_OPTIONS,
+}) => {
+    if (!data.children?.length) return null;
+
+    return (
+      <div className="relative">
+        <Collapsible.Content>
+          <ul role="group">
+            {data.children.map((child, idx) => (
+              <SpanCard
+                viewOptions={viewOptions}
+                key={child.id}
+                data={child}
+                minStart={minStart}
+                maxEnd={maxEnd}
+                level={level + 1}
+                selectedSpan={selectedSpan}
+                onSpanSelect={onSpanSelect}
+                isLastChild={idx === (data.children || []).length - 1}
+                prevLevelConnectors={prevLevelConnectors}
+                expandedSpansIds={expandedSpansIds}
+                onExpandSpansIdsChange={onExpandSpansIdsChange}
+              />
+            ))}
+          </ul>
+        </Collapsible.Content>
+      </div>
+    );
+  };
+
+export const SpanCard: FC<SpanCardProps> = ({
+  data,
+  level = 0,
+  selectedSpan,
+  onSpanSelect,
+  viewOptions = DEFAULT_VIEW_OPTIONS,
+  avatar,
+  minStart,
+  maxEnd,
+  isLastChild,
+  prevLevelConnectors = [],
+  expandedSpansIds,
+  onExpandSpansIdsChange,
+}) => {
+  const isExpanded = expandedSpansIds.includes(data.id);
+
+  const withStatus = viewOptions.withStatus ?? DEFAULT_VIEW_OPTIONS.withStatus;
+  const expandButton =
+    viewOptions.expandButton || DEFAULT_VIEW_OPTIONS.expandButton;
+
+  const handleToggleClick = useCallback(
+    (expanded: boolean) => {
+      const alreadyExpanded = expandedSpansIds.includes(data.id);
+
+      if (alreadyExpanded && !expanded) {
+        onExpandSpansIdsChange(expandedSpansIds.filter((id) => id !== data.id));
+      }
+
+      if (!alreadyExpanded && expanded) {
+        onExpandSpansIdsChange([...expandedSpansIds, data.id]);
+      }
+    },
+    [isExpanded, expandedSpansIds, data.id, onExpandSpansIdsChange],
+  );
+
+  const state: SpanCardState = {
+    isExpanded,
+    hasChildren: Boolean(data.children?.length),
+    isSelected: selectedSpan?.id === data.id,
+  };
+
+  const eventHandlers = useSpanCardEventHandlers(data, onSpanSelect);
+
+  const { durationMs } = getTimelineData({
+    spanCard: data,
+    minStart,
+    maxEnd,
+  });
+
+  const hasExpandButtonAsFirstChild =
+    expandButton === "inside" && state.hasChildren;
+
+  const contentPadding = getContentPadding({
+    level,
+    hasExpandButton: hasExpandButtonAsFirstChild,
+  });
+
+  const contentWidth = getContentWidth({
+    level,
+    hasExpandButton: hasExpandButtonAsFirstChild,
+    contentPadding,
+    expandButton,
+  });
+
+  const { connectors, connectorsColumnWidth } = getConnectorsLayout({
+    level,
+    hasExpandButton: hasExpandButtonAsFirstChild,
+    isLastChild,
+    prevConnectors: prevLevelConnectors,
+    expandButton,
+  });
+
+  const gridTemplateColumns = getGridTemplateColumns({
+    connectorsColumnWidth,
+    expandButton,
+  });
+
+  return (
+    <li
+      role="treeitem"
+      aria-expanded={state.hasChildren ? state.isExpanded : undefined}
+      className="list-none"
+    >
+      <Collapsible.Root
+        open={state.isExpanded}
+        onOpenChange={handleToggleClick}
+      >
+        <div
+          className={cn(
+            "relative grid w-full rounded-md transition-colors",
+            state.isSelected
+              ? "bg-accent/50 border border-accent"
+              : "hover:bg-muted/30",
+          )}
+          style={{
+            gridTemplateColumns,
+          }}
+          onClick={eventHandlers.handleCardClick}
+          onKeyDown={eventHandlers.handleKeyDown}
+          tabIndex={0}
+          role="button"
+          aria-pressed={state.isSelected}
+          aria-describedby={`span-card-desc-${data.id}`}
+          aria-expanded={state.hasChildren ? state.isExpanded : undefined}
+          aria-label={`${state.isSelected ? "Selected" : "Not selected"} span card for ${data.title} at level ${level}`}
+        >
+          <div className="flex flex-nowrap">
+            {connectors.map((connector, idx) => (
+              <SpanCardConnector key={`${connector}-${idx}`} type={connector} />
+            ))}
+
+            {hasExpandButtonAsFirstChild && (
+              <div className="flex w-5 flex-col items-center">
+                <SpanCardToggle
+                  isExpanded={state.isExpanded}
+                  title={data.title}
+                  onToggleClick={eventHandlers.handleToggleClick}
+                />
+
+                {state.isExpanded && <SpanCardConnector type="vertical" />}
+              </div>
+            )}
+          </div>
+          <div
+            className={cn(
+              "flex flex-nowrap items-center align-middle gap-x-3 gap py-3 px-2",
+              "min-h-5 w-full cursor-pointer",
+              level !== 0 && !hasExpandButtonAsFirstChild && "pl-2",
+              level !== 0 && hasExpandButtonAsFirstChild && "pl-1",
+            )}
+          >
+            <div
+              className="relative flex min-h-4 flex-shrink-0 flex-grow-0 flex-wrap items-start gap-1"
+              style={{
+                width: `min(${contentWidth}px, 100%)`,
+                minWidth: 140,
+              }}
+            >
+              {avatar && <Avatar size="4" {...avatar} />}
+
+              <h3
+                className="mr-1 h-4 max-w-32 truncate text-sm leading-[14px] text-foreground "
+                title={data.title}
+              >
+                {data.title}
+              </h3>
+
+              <SpanCardBadges data={data} />
+            </div>
+
+            <div className="flex flex-shrink flex-grow flex-nowrap items-center justify-end gap-1 min-w-0">
+              {expandButton === "outside" && withStatus && (
+                <div className="flex-shrink-0">
+                  <SpanStatus status={data.status} />
+                </div>
+              )}
+
+              <SpanCardTimeline
+                theme={getSpanCategoryTheme(data.type)}
+                minStart={minStart}
+                maxEnd={maxEnd}
+                spanCard={data}
+                className="max-w-48 flex-shrink"
+              />
+
+              <div className="flex items-center gap-2 flex-shrink-0">
+                <span className="inline-block w-14 whitespace-nowrap px-1 text-right text-xs text-foreground">
+                  {formatDuration(durationMs)}
+                </span>
+
+                {expandButton === "inside" && withStatus && (
+                  <div>
+                    <SpanStatus status={data.status} />
+                  </div>
+                )}
+              </div>
+            </div>
+          </div>
+
+          {expandButton === "outside" &&
+            (state.hasChildren ? (
+              <SpanCardToggle
+                isExpanded={state.isExpanded}
+                title={data.title}
+                onToggleClick={eventHandlers.handleToggleClick}
+              />
+            ) : (
+              <div />
+            ))}
+        </div>
+
+        <SpanCardChildren
+          minStart={minStart}
+          maxEnd={maxEnd}
+          viewOptions={viewOptions}
+          data={data}
+          level={level}
+          selectedSpan={selectedSpan}
+          onSpanSelect={onSpanSelect}
+          prevLevelConnectors={connectors}
+          expandedSpansIds={expandedSpansIds}
+          onExpandSpansIdsChange={onExpandSpansIdsChange}
+        />
+      </Collapsible.Root>
+    </li>
+  );
+};

package/src/components/agent-prism/SpanCard/SpanCardBadges.tsx

@@ -0,0 +1,35 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { Badge } from "../Badge.tsx";
+import { PriceBadge } from "../PriceBadge.tsx";
+import {
+  getSpanCategoryIcon,
+  getSpanCategoryLabel,
+  getSpanCategoryTheme,
+} from "../shared.ts";
+import { TokensBadge } from "../TokensBadge.tsx";
+
+interface SpanCardBagdesProps {
+  data: TraceSpan;
+}
+
+export const SpanCardBadges = ({ data }: SpanCardBagdesProps) => {
+  const Icon = getSpanCategoryIcon(data.type);
+
+  return (
+    <div className="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" && (
+        <TokensBadge tokensCount={data.tokensCount} />
+      )}
+
+      {typeof data.cost === "number" && <PriceBadge cost={data.cost} />}
+    </div>
+  );
+};

package/src/components/agent-prism/SpanCard/SpanCardConnector.tsx

@@ -0,0 +1,36 @@
+export type SpanCardConnectorType =
+  | "horizontal"
+  | "vertical"
+  | "t-right"
+  | "corner-top-right"
+  | "empty";
+
+interface SpanCardConnectorProps {
+  type: SpanCardConnectorType;
+}
+
+export const SpanCardConnector = ({ type }: SpanCardConnectorProps) => {
+  if (type === "empty") return <div className="w-5 shrink-0 grow" />;
+
+  return (
+    <div className="relative w-5 shrink-0 grow">
+      {(type === "vertical" || type === "t-right") && (
+        <div className="absolute bottom-0 left-1/2 top-0 w-0.5 -translate-x-1/2 bg-muted" />
+      )}
+
+      {type === "t-right" && (
+        <div className="absolute left-2.5 top-2.5 h-0.5 w-2.5 -translate-y-[3px] bg-muted" />
+      )}
+
+      {type === "corner-top-right" && (
+        <>
+          <div className="absolute left-1/2 top-2 size-0.5 -translate-x-1/2 -translate-y-px bg-muted" />
+
+          <div className="absolute left-1/2 top-2.5 h-0.5 w-2.5 -translate-y-[3px] bg-muted" />
+
+          <div className="absolute left-1/2 top-0 h-[7px] w-0.5 -translate-x-px bg-muted" />
+        </>
+      )}
+    </div>
+  );
+};

package/src/components/agent-prism/SpanCard/SpanCardTimeline.tsx

@@ -0,0 +1,60 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { getTimelineData } from "@evilmartians/agent-prism-data";
+import { cn } from "@/lib/utils";
+
+import type { ColorVariant } from "../shared.ts";
+
+interface SpanCardTimelineProps {
+  spanCard: TraceSpan;
+  theme: ColorVariant;
+  minStart: number;
+  maxEnd: number;
+  className?: string;
+}
+
+const timelineBgColors: Record<ColorVariant, string> = {
+  purple: "bg-primary",
+  indigo: "bg-primary",
+  orange: "bg-chart-1",
+  teal: "bg-chart-2",
+  cyan: "bg-chart-3",
+  sky: "bg-chart-4",
+  yellow: "bg-chart-5",
+  emerald: "bg-accent",
+  red: "bg-destructive",
+  gray: "bg-muted-foreground",
+};
+
+export const SpanCardTimeline = ({
+  spanCard,
+  theme,
+  minStart,
+  maxEnd,
+  className,
+}: SpanCardTimelineProps) => {
+  const { startPercent, widthPercent } = getTimelineData({
+    spanCard,
+    minStart,
+    maxEnd,
+  });
+
+  return (
+    <span
+      className={cn(
+        "relative flex h-4 min-w-20 flex-1 rounded bg-muted",
+        className,
+      )}
+    >
+      <span className="pointer-events-none absolute inset-x-1 top-1/2 h-1.5 -translate-y-1/2">
+        <span
+          className={`absolute h-full rounded-sm ${timelineBgColors[theme]}`}
+          style={{
+            left: `${startPercent}%`,
+            width: `${widthPercent}%`,
+          }}
+        />
+      </span>
+    </span>
+  );
+};

package/src/components/agent-prism/SpanCard/SpanCardToggle.tsx

@@ -0,0 +1,32 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ChevronDown, ChevronRight } from "lucide-react";
+import { type KeyboardEvent, type MouseEvent } from "react";
+
+interface SpanCardToggleProps {
+  isExpanded: boolean;
+  title: string;
+  onToggleClick: (e: MouseEvent | KeyboardEvent) => void;
+}
+
+export const SpanCardToggle = ({
+  isExpanded,
+  title,
+  onToggleClick,
+}: SpanCardToggleProps) => (
+  <Collapsible.Trigger asChild>
+    <button
+      className="flex h-4 w-5 shrink-0 items-center justify-center"
+      onClick={onToggleClick}
+      onKeyDown={onToggleClick}
+      aria-label={`${isExpanded ? "Collapse" : "Expand"} ${title} children`}
+      aria-expanded={isExpanded}
+      type="button"
+    >
+      {isExpanded ? (
+        <ChevronDown aria-hidden="true" className="size-3 text-muted-foreground" />
+      ) : (
+        <ChevronRight aria-hidden="true" className="size-3 text-muted-foreground" />
+      )}
+    </button>
+  </Collapsible.Trigger>
+);

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

@@ -0,0 +1,79 @@
+import type { TraceSpanStatus } from "@evilmartians/agent-prism-types";
+import type { ComponentPropsWithRef } from "react";
+
+import { cn } from "@/lib/utils";
+import { Check, Ellipsis, Info, TriangleAlert } from "lucide-react";
+
+type StatusVariant = "dot" | "badge";
+
+export type StatusProps = ComponentPropsWithRef<"div"> & {
+  status: TraceSpanStatus;
+  variant?: StatusVariant;
+};
+
+const STATUS_COLORS_DOT: Record<TraceSpanStatus, string> = {
+  success: "bg-green-500 dark:bg-green-500",
+  error: "bg-red-500 dark:bg-red-500",
+  pending: "bg-violet-500 dark:bg-violet-500",
+  warning: "bg-yellow-500 dark:bg-yellow-500",
+};
+
+const STATUS_COLORS_BADGE: Record<TraceSpanStatus, string> = {
+  success: "bg-green-100 dark:bg-green-950 text-green-600 dark:text-green-400",
+  error: "bg-red-100 dark:bg-red-950 text-red-600 dark:text-red-400",
+  pending:
+    "bg-violet-100 dark:bg-violet-950 text-violet-600 dark:text-violet-400",
+  warning:
+    "bg-yellow-100 dark:bg-yellow-950 text-yellow-600 dark:text-yellow-400",
+};
+
+export const SpanStatus = ({
+  status,
+  variant = "dot",
+  ...rest
+}: StatusProps) => {
+  const title = `Status: ${status}`;
+
+  return (
+    <div className="flex size-4 items-center justify-center" {...rest}>
+      {variant === "dot" ? (
+        <SpanStatusDot status={status} title={title} />
+      ) : (
+        <SpanStatusBadge status={status} title={title} />
+      )}
+    </div>
+  );
+};
+
+interface StatusWithTitleProps extends StatusProps {
+  title: string;
+}
+
+const SpanStatusDot = ({ status, title }: StatusWithTitleProps) => {
+  return (
+    <span
+      className={cn("block size-1.5 rounded-full", STATUS_COLORS_DOT[status])}
+      aria-label={title}
+      title={title}
+    />
+  );
+};
+
+const SpanStatusBadge = ({ status, title }: StatusWithTitleProps) => {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center justify-center",
+        "h-3.5 w-4 rounded",
+        STATUS_COLORS_BADGE[status],
+      )}
+      aria-label={title}
+      title={title}
+    >
+      {status === "success" && <Check className="size-2.5" aria-hidden />}
+      {status === "error" && <TriangleAlert className="size-2.5" aria-hidden />}
+      {status === "warning" && <Info className="size-2.5" aria-hidden />}
+      {status === "pending" && <Ellipsis className="size-2.5" aria-hidden />}
+    </span>
+  );
+};