orcheo-canvas 0.0.1

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,143 @@
+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 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 flex-1 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 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>
+  );
+};

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

@@ -0,0 +1,100 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { ReactNode } from "react";
+
+import { getDurationMs, formatDuration } from "@evilmartians/agent-prism-data";
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+
+import type { AvatarProps } from "../Avatar";
+
+import { Avatar } from "../Avatar";
+import { IconButton } from "../IconButton";
+import { PriceBadge } from "../PriceBadge";
+import { SpanBadge } from "../SpanBadge";
+import { SpanStatus } from "../SpanStatus";
+import { TimestampBadge } from "../TimestampBadge";
+import { TokensBadge } from "../TokensBadge";
+
+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,
+}: DetailsViewHeaderProps) => {
+  const [hasCopied, setHasCopied] = useState(false);
+  const durationMs = getDurationMs(data);
+
+  const handleCopy = () => {
+    if (copyButton?.onCopy) {
+      copyButton.onCopy(data);
+      setHasCopied(true);
+      setTimeout(() => setHasCopied(false), 2000);
+    }
+  };
+
+  return (
+    <div className={className || "flex flex-wrap items-center gap-2"}>
+      {avatar && <Avatar size="4" {...avatar} />}
+
+      <span className="text-agentprism-foreground tracking-wide">
+        {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="text-agentprism-muted-foreground size-3" />
+          ) : (
+            <Copy className="text-agentprism-muted-foreground size-3" />
+          )}
+        </IconButton>
+      )}
+
+      <SpanBadge category={data.type} />
+
+      {typeof data.tokensCount === "number" && (
+        <TokensBadge tokensCount={data.tokensCount} />
+      )}
+
+      {typeof data.cost === "number" && <PriceBadge cost={data.cost} />}
+
+      <span className="text-agentprism-muted-foreground text-xs">
+        LATENCY: {formatDuration(durationMs)}
+      </span>
+
+      {typeof data.startTime === "number" && (
+        <TimestampBadge timestamp={data.startTime} />
+      )}
+
+      {actions}
+    </div>
+  );
+};

package/src/features/workflow/components/trace/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>;
+};