orcheo-studio 0.21.1

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

@@ -0,0 +1,124 @@
+import type { ComponentPropsWithRef, ReactElement } from "react";
+
+import cn from "classnames";
+
+import type { ComponentSize } from "./shared";
+
+import { ROUNDED_CLASSES } from "./shared";
+
+type ButtonSize = Extract<
+  ComponentSize,
+  "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16"
+>;
+
+type ButtonVariant =
+  | "brand"
+  | "primary"
+  | "outlined"
+  | "secondary"
+  | "ghost"
+  | "destructive"
+  | "success";
+
+const BASE_CLASSES =
+  "inline-flex items-center justify-center font-medium transition-all duration-200";
+
+const sizeClasses = {
+  "6": "h-6 px-2 gap-1 text-xs",
+  "7": "h-7 px-2 gap-1 text-xs",
+  "8": "h-8 px-2 gap-1 text-xs",
+  "9": "h-9 px-2.5 gap-2 text-sm",
+  "10": "h-10 px-4 gap-2 text-sm",
+  "11": "h-11 px-5 gap-3 text-base",
+  "12": "h-12 px-5 gap-2.5 text-base",
+  "16": "h-16 px-7 gap-3 text-lg",
+};
+
+const variantClasses: Record<ButtonVariant, string> = {
+  brand: "text-agentprism-brand-foreground bg-agentprism-brand",
+  primary: "text-agentprism-primary-foreground bg-agentprism-primary",
+  outlined:
+    "border border bg-transparent text-agentprism-foreground border-agentprism-foreground",
+  secondary: "bg-agentprism-secondary text-agentprism-secondary-foreground",
+  ghost: "bg-transparent text-agentprism-foreground",
+  destructive: "bg-agentprism-error text-agentprism-primary-foreground",
+  success: "bg-agentprism-success text-agentprism-primary-foreground",
+};
+
+export type ButtonProps = ComponentPropsWithRef<"button"> & {
+  /**
+   * The size of the button
+   * @default "6"
+   */
+  size?: ButtonSize;
+
+  /**
+   * The border radius of the button
+   * @default "md"
+   */
+  rounded?: "none" | "sm" | "md" | "lg" | "full";
+
+  /**
+   * The visual variant of the button
+   * @default "primary"
+   */
+  variant?: ButtonVariant;
+
+  /**
+   * Makes the button full width
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Optional icon to display at the start of the button
+   */
+  iconStart?: ReactElement;
+
+  /**
+   * Optional icon to display at the end of the button
+   */
+  iconEnd?: ReactElement;
+};
+
+export const Button = ({
+  children,
+  size = "6",
+  rounded = "md",
+  variant = "primary",
+  fullWidth = false,
+  disabled = false,
+  iconStart,
+  iconEnd,
+  type = "button",
+  onClick,
+  className = "",
+  ...rest
+}: ButtonProps) => {
+  const widthClass = fullWidth ? "w-full" : "";
+  const stateClasses = disabled
+    ? "cursor-not-allowed opacity-50"
+    : "hover:opacity-70";
+
+  return (
+    <button
+      type={type}
+      onClick={onClick}
+      disabled={disabled}
+      className={cn(
+        BASE_CLASSES,
+        sizeClasses[size],
+        ROUNDED_CLASSES[rounded],
+        variantClasses[variant],
+        widthClass,
+        stateClasses,
+        className,
+      )}
+      {...rest}
+    >
+      {iconStart && <span className="mr-1">{iconStart}</span>}
+      {children}
+      {iconEnd && <span className="ml-1">{iconEnd}</span>}
+    </button>
+  );
+};

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

@@ -0,0 +1,45 @@
+import type { ComponentPropsWithRef } from "react";
+
+import { ChevronsUpDown, ChevronsDownUp } from "lucide-react";
+
+import { IconButton } from "./IconButton";
+
+export type SpanCardExpandAllButtonProps = ComponentPropsWithRef<"button"> & {
+  onExpandAll: () => void;
+};
+
+export type SpanCardCollapseAllButtonProps = ComponentPropsWithRef<"button"> & {
+  onCollapseAll: () => void;
+};
+
+export const ExpandAllButton = ({
+  onExpandAll,
+  ...rest
+}: SpanCardExpandAllButtonProps) => {
+  return (
+    <IconButton
+      size="6"
+      onClick={onExpandAll}
+      aria-label="Expand all"
+      {...rest}
+    >
+      <ChevronsUpDown className="size-3.5" />
+    </IconButton>
+  );
+};
+
+export const CollapseAllButton = ({
+  onCollapseAll,
+  ...rest
+}: SpanCardCollapseAllButtonProps) => {
+  return (
+    <IconButton
+      size="6"
+      onClick={onCollapseAll}
+      aria-label="Collapse all"
+      {...rest}
+    >
+      <ChevronsDownUp className="size-3.5" />
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,124 @@
+import * as Collapsible from "@radix-ui/react-collapsible";
+import cn from "classnames";
+import { ChevronDown } from "lucide-react";
+import * as React from "react";
+
+export interface CollapsibleSectionProps {
+  /**
+   * The title text displayed in the trigger button
+   */
+  title: string;
+
+  /**
+   * The content to display on the right side of the title
+   */
+  rightContent?: React.ReactNode;
+
+  /**
+   * The content to display when the section is expanded
+   */
+  children: React.ReactNode;
+
+  /**
+   * Whether the section starts in an open state
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Optional className for the root container
+   */
+  className?: string;
+
+  /**
+   * Optional className for the trigger button
+   */
+  triggerClassName?: string;
+
+  /**
+   * Optional className for the content area
+   */
+  contentClassName?: string;
+
+  /**
+   * Optional callback fired when the section is expanded or collapsed
+   */
+  onOpenChange?: (open: boolean) => void;
+}
+
+export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
+  title,
+  rightContent,
+  children,
+  defaultOpen = false,
+  className = "",
+  triggerClassName = "",
+  contentClassName = "",
+  onOpenChange,
+}) => {
+  const [open, setOpen] = React.useState(defaultOpen);
+
+  const handleOpenChange = React.useCallback(
+    (open: boolean): void => {
+      setOpen(open);
+      onOpenChange?.(open);
+    },
+    [onOpenChange],
+  );
+
+  const handleKeyDown = React.useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>): void => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        handleOpenChange(!open);
+      }
+    },
+    [handleOpenChange, open],
+  );
+
+  return (
+    <Collapsible.Root
+      open={open}
+      onOpenChange={handleOpenChange}
+      className={cn("rounded-lg", className)}
+    >
+      <Collapsible.Trigger asChild>
+        <div
+          tabIndex={0}
+          role="button"
+          className={cn(
+            "text-agentprism-muted-foreground mb-2.5 flex w-full items-center justify-between gap-2 rounded-lg px-1 text-left text-sm font-medium",
+            triggerClassName,
+          )}
+          onKeyDown={handleKeyDown}
+          aria-expanded={open}
+          aria-label={`${open ? "Collapse" : "Expand"} content of "${title}" section`}
+        >
+          <div className="text-agentprism-muted-foreground flex min-w-0 flex-1 items-center gap-2">
+            <ChevronDown
+              className={cn("h-3 w-3 shrink-0 -rotate-90", open && "rotate-0")}
+            />
+            <span
+              className="min-w-0 truncate text-sm font-medium"
+              title={title}
+            >
+              {title}
+            </span>
+          </div>
+
+          <div className="shrink-0">{rightContent}</div>
+        </div>
+      </Collapsible.Trigger>
+
+      <Collapsible.Content
+        className={cn(
+          "data-[state=closed]:animate-slideUp data-[state=open]:animate-slideDown",
+          "text-agentprism-muted-foreground",
+          contentClassName,
+        )}
+      >
+        {children}
+      </Collapsible.Content>
+    </Collapsible.Root>
+  );
+};

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

@@ -0,0 +1,63 @@
+import { Check, Copy, X } from "lucide-react";
+import { useState } from "react";
+
+import { IconButton } from "./IconButton";
+
+type CopyButtonProps = {
+  label: string;
+  content: string;
+};
+
+type CopyState = "idle" | "success" | "error";
+
+export const CopyButton = ({ label, content }: CopyButtonProps) => {
+  const [copyState, setCopyState] = useState<CopyState>("idle");
+
+  const onClick = async () => {
+    try {
+      if (!navigator.clipboard) {
+        throw new Error("Clipboard API not supported");
+      }
+
+      await navigator.clipboard.writeText(content);
+      setCopyState("success");
+      setTimeout(() => setCopyState("idle"), 2000);
+    } catch {
+      setCopyState("error");
+      setTimeout(() => setCopyState("idle"), 2000);
+    }
+  };
+
+  const getIcon = () => {
+    switch (copyState) {
+      case "success":
+        return <Check className="size-3" />;
+      case "error":
+        return <X className="size-3" />;
+      default:
+        return <Copy className="size-3" />;
+    }
+  };
+
+  const getAriaLabel = () => {
+    switch (copyState) {
+      case "success":
+        return `${label} Copied`;
+      case "error":
+        return `Failed to copy ${label}`;
+      default:
+        return `Copy ${label}`;
+    }
+  };
+
+  return (
+    <IconButton
+      onClick={onClick}
+      aria-label={getAriaLabel()}
+      variant="ghost"
+      disabled={copyState !== "idle"}
+    >
+      {getIcon()}
+    </IconButton>
+  );
+};

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

@@ -0,0 +1,146 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { ReactElement, ReactNode } from "react";
+
+import cn from "classnames";
+import { SquareTerminal, Tags, ArrowRightLeft } from "lucide-react";
+import { useState } from "react";
+
+import type { AvatarProps } from "../Avatar";
+import type { TabItem } from "../Tabs";
+
+import { TabSelector } from "../TabSelector";
+import { DetailsViewAttributesTab } from "./DetailsViewAttributesTab";
+import { DetailsViewHeader } from "./DetailsViewHeader";
+import { DetailsViewInputOutputTab } from "./DetailsViewInputOutputTab";
+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;
+}
+
+const TAB_ITEMS: 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" />,
+  },
+];
+
+export const DetailsView = ({
+  data,
+  avatar,
+  defaultTab = "input-output",
+  className,
+  copyButton,
+  headerActions,
+  customHeader,
+  onTabChange,
+}: DetailsViewProps): ReactElement => {
+  const [tab, setTab] = useState<DetailsViewTab>(defaultTab);
+
+  const 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(
+        "border-agentprism-border bg-agentprism-background flex h-full min-h-0 min-w-0 flex-col rounded-md border p-4",
+        className,
+      )}
+    >
+      <div className="mb-4 shrink-0">{headerContent}</div>
+      <div className="shrink-0">
+        <TabSelector
+          items={TAB_ITEMS}
+          value={tab}
+          onValueChange={handleTabChange}
+          theme="underline"
+          defaultValue={defaultTab}
+        />
+      </div>
+
+      <div
+        key={tab}
+        className="min-h-0 min-w-0 flex-1 overflow-x-auto overflow-y-auto py-4"
+      >
+        {tab === "input-output" && <DetailsViewInputOutputTab data={data} />}
+        {tab === "attributes" && <DetailsViewAttributesTab data={data} />}
+        {tab === "raw" && <DetailsViewRawDataTab data={data} />}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,125 @@
+import { type TraceSpan } from "@evilmartians/agent-prism-types";
+import { type ReactElement, useState } from "react";
+
+import type { TabItem } from "../Tabs";
+
+import { CollapsibleSection } from "../CollapsibleSection";
+import { TabSelector } from "../TabSelector";
+import {
+  DetailsViewContentViewer,
+  type DetailsViewContentViewMode,
+} from "./DetailsViewContentViewer";
+
+interface AttributesTabProps {
+  data: TraceSpan;
+}
+
+const TAB_ITEMS: TabItem<DetailsViewContentViewMode>[] = [
+  { value: "json", label: "JSON" },
+  { value: "plain", label: "Plain" },
+];
+
+export const DetailsViewAttributesTab = ({
+  data,
+}: AttributesTabProps): ReactElement => {
+  if (!data.attributes || data.attributes.length === 0) {
+    return (
+      <div className="p-6 text-center">
+        <p className="text-agentprism-muted-foreground">
+          No attributes available for this span.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-4">
+      {data.attributes.map((attribute, index) => {
+        const stringValue = attribute.value.stringValue;
+        const simpleValue =
+          stringValue ||
+          attribute.value.intValue?.toString() ||
+          attribute.value.boolValue?.toString() ||
+          "N/A";
+
+        let parsedJson: string | null = null;
+        if (typeof stringValue === "string") {
+          try {
+            parsedJson = JSON.parse(stringValue);
+          } catch {
+            parsedJson = null;
+          }
+        }
+
+        const isComplex = parsedJson !== null;
+
+        if (isComplex && parsedJson && stringValue) {
+          return (
+            <AttributeSection
+              key={`${attribute.key}-${index}`}
+              attributeKey={attribute.key}
+              content={stringValue}
+              parsedContent={parsedJson}
+              id={`${data.id}-${attribute.key}-${index}`}
+            />
+          );
+        }
+
+        return (
+          <div
+            key={`${attribute.key}-${index}`}
+            className="border-agentprism-border rounded-md border p-4"
+          >
+            <dt className="text-agentprism-muted-foreground mb-1 text-sm">
+              {attribute.key}
+            </dt>
+            <dd className="text-agentprism-foreground break-words text-sm">
+              {simpleValue}
+            </dd>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+interface AttributeSectionProps {
+  attributeKey: string;
+  content: string;
+  parsedContent: string;
+  id: string;
+}
+
+const AttributeSection = ({
+  attributeKey,
+  content,
+  parsedContent,
+  id,
+}: AttributeSectionProps): ReactElement => {
+  const [tab, setTab] = useState<DetailsViewContentViewMode>("json");
+
+  return (
+    <CollapsibleSection
+      title={attributeKey}
+      defaultOpen
+      rightContent={
+        <TabSelector<DetailsViewContentViewMode>
+          items={TAB_ITEMS}
+          defaultValue="json"
+          value={tab}
+          onValueChange={setTab}
+          theme="pill"
+          onClick={(event) => event.stopPropagation()}
+        />
+      }
+    >
+      <DetailsViewContentViewer
+        content={content}
+        parsedContent={parsedContent}
+        mode={tab}
+        label={attributeKey}
+        id={id}
+      />
+    </CollapsibleSection>
+  );
+};

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

@@ -0,0 +1,51 @@
+import { type ReactElement } from "react";
+
+import { CopyButton } from "../CopyButton";
+import { DetailsViewJsonOutput } from "./DetailsViewJsonOutput";
+
+export type DetailsViewContentViewMode = "json" | "plain";
+
+export interface DetailsViewContentViewerProps {
+  content: string;
+  parsedContent: string | null;
+  mode: DetailsViewContentViewMode;
+  label: string;
+  id: string;
+  className?: string;
+}
+
+export const DetailsViewContentViewer = ({
+  content,
+  parsedContent,
+  mode,
+  label,
+  id,
+  className = "",
+}: DetailsViewContentViewerProps): ReactElement => {
+  if (!content) {
+    return (
+      <p className="text-agentprism-muted-foreground p-3 text-sm italic">
+        No data available
+      </p>
+    );
+  }
+
+  return (
+    <div
+      className={`border-agentprism-border relative min-w-0 rounded-lg border ${className}`}
+    >
+      <div className="absolute right-1.5 top-1.5 z-10">
+        <CopyButton label={label} content={content} />
+      </div>
+      {mode === "json" && parsedContent ? (
+        <DetailsViewJsonOutput content={parsedContent} id={id} />
+      ) : (
+        <div className="bg-agentprism-background rounded-lg p-4">
+          <pre className="text-agentprism-foreground overflow-x-auto whitespace-pre-wrap text-left font-mono text-sm">
+            {content}
+          </pre>
+        </div>
+      )}
+    </div>
+  );
+};