orcheo-canvas 0.0.1

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

@@ -0,0 +1,80 @@
+import type { TraceSpanStatus } from "@evilmartians/agent-prism-types";
+import type { ComponentPropsWithRef } from "react";
+
+import cn from "classnames";
+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-agentprism-success",
+  error: "bg-agentprism-error",
+  pending: "bg-agentprism-pending",
+  warning: "bg-agentprism-warning",
+};
+
+const STATUS_COLORS_BADGE: Record<TraceSpanStatus, string> = {
+  success:
+    "bg-agentprism-success-muted text-agentprism-success-muted-foreground",
+  error: "bg-agentprism-error-muted text-agentprism-error-muted-foreground",
+  pending:
+    "bg-agentprism-pending-muted text-agentprism-pending-muted-foreground",
+  warning:
+    "bg-agentprism-warning-muted text-agentprism-warning-muted-foreground",
+};
+
+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>
+  );
+};

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

@@ -0,0 +1,35 @@
+import { type ReactElement } from "react";
+
+import { type TabItem, Tabs } from "./Tabs";
+
+export interface TabSelectorProps<T extends string> {
+  items: TabItem<T>[];
+  value: T;
+  onValueChange: (value: T) => void;
+  defaultValue?: T;
+  theme?: "underline" | "pill";
+  className?: string;
+  onClick?: (event: React.MouseEvent) => void;
+}
+
+export const TabSelector = <T extends string>({
+  items,
+  value,
+  onValueChange,
+  defaultValue,
+  theme = "underline",
+  className,
+  onClick,
+}: TabSelectorProps<T>): ReactElement => {
+  return (
+    <Tabs<T>
+      items={items}
+      value={value}
+      onValueChange={onValueChange}
+      defaultValue={defaultValue}
+      theme={theme}
+      className={className}
+      onClick={onClick}
+    />
+  );
+};

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

@@ -0,0 +1,140 @@
+import type { ComponentPropsWithRef } from "react";
+
+import * as RadixTabs from "@radix-ui/react-tabs";
+import cn from "classnames";
+import * as React from "react";
+
+export interface TabItem<T extends string = string> {
+  value: T;
+  label: string;
+  icon?: React.ReactNode;
+  disabled?: boolean;
+}
+
+export type TabTheme = "underline" | "pill";
+
+const BASE_TRIGGER =
+  "text-sm font-medium transition-colors duration-200 disabled:opacity-50 disabled:cursor-not-allowed";
+
+const THEMES = {
+  underline: {
+    list: "h-9 flex border-b border-agentprism-border",
+    trigger: `w-full justify-center px-3 ${BASE_TRIGGER} 
+      text-agentprism-secondary-foreground data-[state=active]:text-agentprism-foreground
+      border-b-2 border-transparent data-[state=active]:border-agentprism-border-inverse
+      -mb-[2px]
+      data-[state=inactive]:[&:not(:disabled)]:hover:border-agentprism-border-inverse/20
+      data-[state=inactive]:[&:not(:disabled)]:hover:text-agentprism-muted-foreground`,
+  },
+  pill: {
+    list: "h-9 inline-flex gap-1 p-1 bg-agentprism-secondary rounded-lg",
+    trigger: `px-3 ${BASE_TRIGGER} rounded-md
+      text-agentprism-muted-foreground data-[state=active]:text-agentprism-foreground
+      data-[state=inactive]:[&:not(:disabled)]:hover:bg-agentprism-background/50 data-[state=active]:bg-agentprism-background data-[state=active]:shadow-sm
+      dark:data-[state=active]:shadow-none`,
+  },
+} as const;
+
+export type TabsProps<T extends string = string> = Omit<
+  ComponentPropsWithRef<"div">,
+  "dir"
+> & {
+  /**
+   * Array of tab items to display
+   */
+  items: TabItem<T>[];
+
+  /**
+   * The initially selected tab value (uncontrolled)
+   */
+  defaultValue?: T;
+
+  /**
+   * The currently selected tab value (controlled)
+   */
+  value?: T;
+
+  /**
+   * Callback fired when the selected tab changes
+   */
+  onValueChange?: (value: T) => void;
+
+  /**
+   * Visual theme variant for the tabs
+   * @default "underline"
+   */
+  theme?: TabTheme;
+
+  /**
+   * Optional className for the root container
+   */
+  className?: string;
+
+  /**
+   * Optional className for the tabs list container
+   */
+  tabsListClassName?: string;
+
+  /**
+   * Optional className for individual tab triggers
+   */
+  triggerClassName?: string;
+
+  /**
+   * The direction of the content of the tabs
+   */
+  dir?: "ltr" | "rtl";
+};
+
+export const Tabs = <T extends string = string>({
+  items,
+  defaultValue,
+  value,
+  onValueChange,
+  theme = "underline",
+  className = "",
+  tabsListClassName = "",
+  triggerClassName = "",
+  dir,
+  ...rest
+}: TabsProps<T>) => {
+  const defaultTab = defaultValue || items[0]?.value;
+
+  const currentTheme = THEMES[theme];
+
+  return (
+    <RadixTabs.Root
+      className={className}
+      defaultValue={!value ? defaultTab : undefined}
+      value={value}
+      onValueChange={onValueChange as (value: string) => void}
+      dir={dir}
+      {...rest}
+    >
+      <RadixTabs.List
+        className={cn(currentTheme.list, tabsListClassName)}
+        aria-label="Navigation tabs"
+      >
+        {items.map((item: TabItem) => (
+          <RadixTabs.Trigger
+            key={item.value}
+            value={item.value}
+            disabled={item.disabled}
+            className={cn(
+              "group flex items-center overflow-hidden",
+              currentTheme.trigger,
+              triggerClassName,
+            )}
+          >
+            {item.icon && (
+              <span className="text-agentprism-secondary-foreground mr-2 group-data-[state=active]:text-current">
+                {item.icon}
+              </span>
+            )}
+            <span className="truncate text-sm font-medium">{item.label}</span>
+          </RadixTabs.Trigger>
+        ))}
+      </RadixTabs.List>
+    </RadixTabs.Root>
+  );
+};

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

@@ -0,0 +1,143 @@
+import cn from "classnames";
+import { X } from "lucide-react";
+import {
+  useRef,
+  type ChangeEvent,
+  type ComponentPropsWithRef,
+  type ReactNode,
+  type RefObject,
+} from "react";
+
+export type TextInputProps = ComponentPropsWithRef<"input"> & {
+  /**
+   * Callback fired when the input value changes
+   */
+  onValueChange?: (value: string) => void;
+
+  /**
+   * Icon to display at the start of the input
+   */
+  startIcon?: ReactNode;
+
+  /**
+   * Callback fired when the clear button is clicked. If this callback is provided,
+   * the clear button will be shown.
+   */
+  onClear?: () => void;
+
+  /**
+   * Ref to the input element
+   */
+  ref?: RefObject<HTMLInputElement | null>;
+
+  /**
+   * Optional className for the input element
+   */
+  inputClassName?: string;
+
+  /**
+   * Unique identifier for the input (required)
+   */
+  id: string;
+
+  /**
+   * Label text for the input
+   */
+  label?: string;
+
+  /**
+   * Whether to visually hide the label while keeping it for screen readers
+   * @default false
+   */
+  hideLabel?: boolean;
+};
+
+const iconBaseClassName =
+  "absolute top-1/2 -translate-y-1/2 flex items-center justify-center text-agentprism-muted-foreground";
+
+export const TextInput = ({
+  className,
+  onChange,
+  onValueChange,
+  startIcon,
+  onClear,
+  ref,
+  inputClassName,
+  label,
+  hideLabel = false,
+  id,
+  ...rest
+}: TextInputProps) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    onChange?.(e);
+    onValueChange?.(e.target.value);
+  };
+
+  const handleClear = () => {
+    onClear?.();
+
+    if (ref) {
+      ref.current?.focus();
+      return;
+    }
+
+    inputRef.current?.focus();
+  };
+
+  return (
+    <div className={cn("w-full", className)}>
+      {label && (
+        <label
+          htmlFor={id}
+          className={cn(
+            "text-agentprism-foreground block text-sm font-medium",
+            hideLabel && "sr-only",
+          )}
+        >
+          {label}
+        </label>
+      )}
+      <div
+        className={cn(
+          "relative flex w-full items-center justify-center",
+          label && !hideLabel && "mt-1",
+        )}
+      >
+        <input
+          id={id}
+          ref={ref || inputRef}
+          onChange={handleChange}
+          className={cn(
+            inputClassName,
+            "flex h-7 items-center truncate",
+            "w-full px-2",
+            !!startIcon && "pl-8",
+            !!onClear && "pr-8",
+            "border-agentprism-border rounded border bg-transparent",
+            "text-agentprism-foreground placeholder:text-agentprism-foreground/50",
+            "hover:border-agentprism-border-strong",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+          )}
+          {...rest}
+        />
+        {startIcon && (
+          <div className={cn(iconBaseClassName, "left-2")} aria-hidden>
+            {startIcon}
+          </div>
+        )}
+        {onClear && rest.value && (
+          <button
+            className={cn(iconBaseClassName, "right-2")}
+            aria-label="Clear input value"
+            onClick={handleClear}
+            type="button"
+          >
+            <X className="size-4" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,22 @@
+import type { ComponentPropsWithRef } from "react";
+
+import type { BadgeProps } from "./Badge";
+
+import { Badge } from "./Badge";
+
+export type TimestampBadgeProps = ComponentPropsWithRef<"span"> & {
+  timestamp: number;
+  size?: BadgeProps["size"];
+};
+
+export const TimestampBadge = ({
+  timestamp,
+  size,
+  ...rest
+}: TimestampBadgeProps) => {
+  return <Badge size={size} {...rest} label={formatTimestamp(timestamp)} />;
+};
+
+function formatTimestamp(timestamp: number): string {
+  return new Date(timestamp).toLocaleString();
+}

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

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

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

@@ -0,0 +1,87 @@
+import type { TraceRecord } from "@evilmartians/agent-prism-types";
+
+import cn from "classnames";
+import { ArrowLeft } from "lucide-react";
+
+import type { BadgeProps } from "../Badge";
+
+import { Badge } from "../Badge";
+import { IconButton } from "../IconButton";
+import { TraceListItem } from "./TraceListItem";
+
+type TraceRecordWithBadges = TraceRecord & {
+  badges?: Array<BadgeProps>;
+};
+
+type TraceListProps = {
+  traces: TraceRecordWithBadges[];
+  expanded: boolean;
+  onExpandStateChange: (expanded: boolean) => void;
+  className?: string;
+  onTraceSelect?: (trace: TraceRecord) => void;
+  selectedTrace?: TraceRecord;
+};
+
+export const TraceList = ({
+  traces,
+  expanded,
+  onExpandStateChange,
+  className,
+  onTraceSelect,
+  selectedTrace,
+}: TraceListProps) => {
+  return (
+    <div
+      className={cn(
+        "flex min-w-0 flex-col",
+        expanded ? "h-full w-full gap-3" : "h-auto w-fit gap-1",
+        className,
+      )}
+    >
+      <header className="flex min-h-6 shrink-0 items-center justify-between gap-2">
+        <div
+          className={cn(
+            "flex items-center gap-2",
+            expanded ? "opacity-100" : "hidden opacity-0",
+          )}
+        >
+          <h2 className="text-agentprism-muted-foreground">Traces</h2>
+
+          <Badge
+            size="5"
+            aria-label={`Total number of traces: ${traces.length}`}
+            label={traces.length}
+          />
+        </div>
+
+        <IconButton
+          aria-label={expanded ? "Collapse Trace List" : "Expand Trace List"}
+          onClick={() => onExpandStateChange(!expanded)}
+        >
+          <ArrowLeft className={cn("size-3", expanded ? "" : "rotate-180")} />
+        </IconButton>
+      </header>
+
+      {expanded && (
+        <ul className="border-agentprism-border flex min-h-0 flex-1 flex-col overflow-hidden rounded-md border">
+          <div className="flex-1 overflow-y-auto">
+            {traces.map((trace) => (
+              <li
+                className="border-agentprism-border w-full list-none border-b [&:not(:last-child)]:border-b"
+                key={trace.id}
+              >
+                <TraceListItem
+                  showDescription={false}
+                  trace={trace}
+                  onClick={() => onTraceSelect?.(trace)}
+                  isSelected={selectedTrace?.id === trace.id}
+                  badges={trace.badges}
+                />
+              </li>
+            ))}
+          </div>
+        </ul>
+      )}
+    </div>
+  );
+};

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

@@ -0,0 +1,86 @@
+import type { TraceRecord } from "@evilmartians/agent-prism-types";
+import type { KeyboardEvent } from "react";
+
+import cn from "classnames";
+import { useCallback } from "react";
+
+import type { AvatarProps } from "../Avatar";
+import type { BadgeProps } from "../Badge";
+
+import { Badge } from "../Badge";
+import { PriceBadge } from "../PriceBadge";
+import { TimestampBadge } from "../TimestampBadge";
+import { TokensBadge } from "../TokensBadge";
+import { TraceListItemHeader } from "./TraceListItemHeader";
+
+interface TraceListItemProps {
+  trace: TraceRecord;
+  badges?: Array<BadgeProps>;
+  avatar?: AvatarProps;
+  onClick?: () => void;
+  isSelected?: boolean;
+  showDescription?: boolean;
+}
+
+export const TraceListItem = ({
+  trace,
+  avatar,
+  onClick,
+  badges,
+  isSelected,
+  showDescription = true,
+}: TraceListItemProps) => {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent): void => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onClick?.();
+      }
+    },
+    [onClick],
+  );
+
+  const { name, agentDescription, totalCost, totalTokens, startTime } = trace;
+
+  return (
+    <div
+      className={cn(
+        "group w-full",
+        "flex flex-col gap-2 p-4",
+        "cursor-pointer",
+        isSelected
+          ? "bg-agentprism-secondary/75 dark:bg-agentprism-muted/80"
+          : "bg-agentprism-background hover:bg-agentprism-secondary/45 dark:hover:bg-agentprism-muted/70",
+      )}
+      role="button"
+      tabIndex={0}
+      onClick={onClick}
+      onKeyDown={handleKeyDown}
+      aria-label={`Select trace ${name}`}
+    >
+      <TraceListItemHeader trace={trace} avatar={avatar} />
+
+      <div className="flex flex-wrap items-center gap-2">
+        {showDescription && (
+          <span className="text-agentprism-muted-foreground mr-4 max-w-full truncate text-sm">
+            {agentDescription}
+          </span>
+        )}
+
+        {typeof totalCost === "number" && <PriceBadge cost={totalCost} />}
+
+        {typeof totalTokens === "number" && (
+          <TokensBadge tokensCount={totalTokens} />
+        )}
+
+        {badges?.map((badge, index) => (
+          <Badge key={index} size="4" label={badge.label} />
+        ))}
+
+        {typeof startTime === "number" && (
+          <TimestampBadge timestamp={startTime} />
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,37 @@
+import type { TraceRecord } from "@evilmartians/agent-prism-types";
+
+import type { AvatarProps } from "../Avatar";
+
+import { Avatar } from "../Avatar";
+import { Badge } from "../Badge";
+
+interface TraceListItemHeaderProps {
+  trace: TraceRecord;
+  avatar?: AvatarProps;
+}
+
+export const TraceListItemHeader = ({
+  trace,
+  avatar,
+}: TraceListItemHeaderProps) => {
+  return (
+    <header className="flex w-full 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="text-agentprism-muted-foreground max-w-full truncate text-sm">
+          {trace.name}
+        </h3>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <Badge
+          size="4"
+          label={
+            trace.spansCount === 1 ? "1 span" : `${trace.spansCount} spans`
+          }
+        />
+      </div>
+    </header>
+  );
+};