orcheo-canvas 0.0.1

package/src/features/workflow/components/trace/agent-prism/SpanCard/SpanCard.tsx

@@ -0,0 +1,480 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { FC, KeyboardEvent, MouseEvent } from "react";
+
+import {
+  formatDuration,
+  getTimelineData,
+} from "@evilmartians/agent-prism-data";
+import * as Collapsible from "@radix-ui/react-collapsible";
+import cn from "classnames";
+import { useCallback } from "react";
+
+import type { AvatarProps } from "../Avatar";
+import type { SpanCardConnectorType } from "./SpanCardConnector";
+
+import { Avatar } from "../Avatar";
+import { BrandLogo } from "../BrandLogo";
+import { SpanStatus } from "../SpanStatus";
+import { SpanCardBadges } from "./SpanCardBadges";
+import { SpanCardConnector } from "./SpanCardConnector";
+import { SpanCardTimeline } from "./SpanCardTimeline";
+import { SpanCardToggle } from "./SpanCardToggle";
+
+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) => {
+            const brand = child.metadata?.brand as { type: string } | undefined;
+
+            return (
+              <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}
+                avatar={
+                  brand
+                    ? {
+                        children: <BrandLogo brand={brand.type} />,
+                        size: "4",
+                        rounded: "sm",
+                        category: child.type,
+                      }
+                    : undefined
+                }
+              />
+            );
+          })}
+        </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]);
+      }
+    },
+    [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-selected={state.isSelected ? true : selectedSpan ? false : undefined}
+      aria-expanded={state.hasChildren ? state.isExpanded : undefined}
+      className="list-none"
+    >
+      <Collapsible.Root
+        open={state.isExpanded}
+        onOpenChange={handleToggleClick}
+      >
+        <div
+          className={cn(
+            "relative grid w-full",
+            state.isSelected &&
+              "before:bg-agentprism-muted/75 before:absolute before:-top-2 before:h-2 before:w-full",
+            state.isSelected &&
+              "from-agentprism-muted/75 to-agentprism-muted/75 bg-gradient-to-b",
+          )}
+          style={{
+            gridTemplateColumns,
+            backgroundSize: "auto calc(100% - 8px)",
+            backgroundPosition: "top",
+            backgroundRepeat: "no-repeat",
+          }}
+          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-wrap items-start gap-x-2 gap-y-1",
+              "mb-3 min-h-5 w-full cursor-pointer",
+              level !== 0 && !hasExpandButtonAsFirstChild && "pl-2",
+              level !== 0 && hasExpandButtonAsFirstChild && "pl-1",
+            )}
+          >
+            <div
+              className="relative flex min-h-4 shrink-0 flex-wrap items-center gap-1.5"
+              style={{
+                width: `min(${contentWidth}px, 100%)`,
+                minWidth: 140,
+              }}
+            >
+              {avatar && <Avatar size="4" {...avatar} />}
+
+              <h3
+                className="text-agentprism-foreground max-w-32 truncate text-sm leading-[14px]"
+                title={data.title}
+              >
+                {data.title}
+              </h3>
+
+              <SpanCardBadges data={data} />
+            </div>
+
+            <div className="flex grow flex-wrap items-center justify-end gap-1">
+              {expandButton === "outside" && withStatus && (
+                <div>
+                  <SpanStatus status={data.status} />
+                </div>
+              )}
+
+              <SpanCardTimeline
+                minStart={minStart}
+                maxEnd={maxEnd}
+                spanCard={data}
+              />
+
+              <div className="flex items-center gap-2">
+                <span className="text-agentprism-foreground inline-block w-14 flex-1 shrink-0 whitespace-nowrap px-1 text-right text-xs">
+                  {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/features/workflow/components/trace/agent-prism/SpanCard/SpanCardBadges.tsx

@@ -0,0 +1,23 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { PriceBadge } from "../PriceBadge";
+import { SpanBadge } from "../SpanBadge";
+import { TokensBadge } from "../TokensBadge";
+
+interface SpanCardBagdesProps {
+  data: TraceSpan;
+}
+
+export const SpanCardBadges = ({ data }: SpanCardBagdesProps) => {
+  return (
+    <div className="flex flex-wrap items-center justify-start gap-1">
+      <SpanBadge category={data.type} />
+
+      {typeof data.tokensCount === "number" && (
+        <TokensBadge tokensCount={data.tokensCount} />
+      )}
+
+      {typeof data.cost === "number" && <PriceBadge cost={data.cost} />}
+    </div>
+  );
+};

package/src/features/workflow/components/trace/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="bg-agentprism-secondary absolute inset-y-0 left-1/2 z-10 w-0.5 -translate-x-1/2" />
+      )}
+
+      {type === "t-right" && (
+        <div className="bg-agentprism-secondary absolute left-2.5 top-2.5 h-0.5 w-2.5 translate-y-[-3px]" />
+      )}
+
+      {type === "corner-top-right" && (
+        <>
+          <div className="bg-agentprism-secondary absolute left-1/2 top-2 size-0.5 -translate-x-1/2 -translate-y-px" />
+
+          <div className="bg-agentprism-secondary absolute left-1/2 top-2.5 h-0.5 w-2.5 translate-y-[-3px]" />
+
+          <div className="bg-agentprism-secondary absolute left-1/2 top-0 h-[7px] w-0.5 -translate-x-px" />
+        </>
+      )}
+    </div>
+  );
+};

package/src/features/workflow/components/trace/agent-prism/SpanCard/SpanCardTimeline.tsx

@@ -0,0 +1,60 @@
+import type {
+  TraceSpan,
+  TraceSpanCategory,
+} from "@evilmartians/agent-prism-types";
+
+import { getTimelineData } from "@evilmartians/agent-prism-data";
+import cn from "classnames";
+
+interface SpanCardTimelineProps {
+  spanCard: TraceSpan;
+  minStart: number;
+  maxEnd: number;
+  className?: string;
+}
+
+const timelineBgColors: Record<TraceSpanCategory, string> = {
+  llm_call: "bg-agentprism-timeline-llm",
+  agent_invocation: "bg-agentprism-timeline-agent",
+  tool_execution: "bg-agentprism-timeline-tool",
+  chain_operation: "bg-agentprism-timeline-chain",
+  retrieval: "bg-agentprism-timeline-retrieval",
+  embedding: "bg-agentprism-timeline-embedding",
+  guardrail: "bg-agentprism-timeline-guardrail",
+  create_agent: "bg-agentprism-timeline-create-agent",
+  span: "bg-agentprism-timeline-span",
+  event: "bg-agentprism-timeline-event",
+  unknown: "bg-agentprism-timeline-unknown",
+};
+
+export const SpanCardTimeline = ({
+  spanCard,
+  minStart,
+  maxEnd,
+  className,
+}: SpanCardTimelineProps) => {
+  const { startPercent, widthPercent } = getTimelineData({
+    spanCard,
+    minStart,
+    maxEnd,
+  });
+
+  return (
+    <span
+      className={cn(
+        "bg-agentprism-secondary relative flex h-4 min-w-20 flex-1 rounded-md",
+        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[spanCard.type]}`}
+          style={{
+            left: `${startPercent}%`,
+            width: `${widthPercent}%`,
+          }}
+        />
+      </span>
+    </span>
+  );
+};

package/src/features/workflow/components/trace/agent-prism/SpanCard/SpanCardToggle.tsx

@@ -0,0 +1,39 @@
+import type { KeyboardEvent, MouseEvent } from "react";
+
+import * as Collapsible from "@radix-ui/react-collapsible";
+import { ChevronDown, ChevronRight } from "lucide-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="text-agentprism-muted-foreground size-3"
+        />
+      ) : (
+        <ChevronRight
+          aria-hidden="true"
+          className="text-agentprism-muted-foreground size-3"
+        />
+      )}
+    </button>
+  </Collapsible.Trigger>
+);