orcheo-studio 0.21.1

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/DetailsViewInputOutputTab.tsx

@@ -0,0 +1,401 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { ReactElement } from "react";
+import type { TraceSpanMetadata } from "@features/workflow/pages/workflow/helpers/trace";
+
+import { useEffect, useMemo, useState } from "react";
+
+import type { TabItem } from "../Tabs";
+
+import { CollapsibleSection } from "../CollapsibleSection";
+import { TabSelector } from "../TabSelector";
+import {
+  DetailsViewContentViewer,
+  type DetailsViewContentViewMode,
+} from "./DetailsViewContentViewer";
+
+interface DetailsViewInputOutputTabProps {
+  data: TraceSpan;
+}
+
+type IOSection = "Input" | "Output";
+type StateDiffType = "added" | "removed" | "updated";
+
+interface StateDiffEntry {
+  path: string;
+  type: StateDiffType;
+  before?: unknown;
+  after?: unknown;
+}
+
+const MAX_VISIBLE_DIFF_ENTRIES = 120;
+
+const isObjectRecord = (value: unknown): value is Record<string, unknown> =>
+  Boolean(value) && typeof value === "object" && !Array.isArray(value);
+
+const valuesEqual = (left: unknown, right: unknown): boolean => {
+  if (Object.is(left, right)) {
+    return true;
+  }
+  try {
+    return JSON.stringify(left) === JSON.stringify(right);
+  } catch {
+    return false;
+  }
+};
+
+const buildStateDiff = (
+  before: unknown,
+  after: unknown,
+  path = "",
+): StateDiffEntry[] => {
+  if (isObjectRecord(before) && isObjectRecord(after)) {
+    const keys = new Set([...Object.keys(before), ...Object.keys(after)]);
+    const entries: StateDiffEntry[] = [];
+    for (const key of Array.from(keys).sort((a, b) => a.localeCompare(b))) {
+      const nextPath = path ? `${path}.${key}` : key;
+      const hasBefore = Object.prototype.hasOwnProperty.call(before, key);
+      const hasAfter = Object.prototype.hasOwnProperty.call(after, key);
+      if (!hasBefore && hasAfter) {
+        entries.push({
+          path: nextPath,
+          type: "added",
+          after: (after as Record<string, unknown>)[key],
+        });
+        continue;
+      }
+      if (hasBefore && !hasAfter) {
+        entries.push({
+          path: nextPath,
+          type: "removed",
+          before: (before as Record<string, unknown>)[key],
+        });
+        continue;
+      }
+      entries.push(
+        ...buildStateDiff(
+          (before as Record<string, unknown>)[key],
+          (after as Record<string, unknown>)[key],
+          nextPath,
+        ),
+      );
+    }
+    return entries;
+  }
+
+  if (Array.isArray(before) && Array.isArray(after)) {
+    const entries: StateDiffEntry[] = [];
+    const length = Math.max(before.length, after.length);
+    for (let index = 0; index < length; index += 1) {
+      const nextPath = `${path}[${index}]`;
+      if (index >= before.length) {
+        entries.push({
+          path: nextPath,
+          type: "added",
+          after: after[index],
+        });
+        continue;
+      }
+      if (index >= after.length) {
+        entries.push({
+          path: nextPath,
+          type: "removed",
+          before: before[index],
+        });
+        continue;
+      }
+      entries.push(...buildStateDiff(before[index], after[index], nextPath));
+    }
+    return entries;
+  }
+
+  if (valuesEqual(before, after)) {
+    return [];
+  }
+  return [
+    {
+      path: path || "$",
+      type: "updated",
+      before,
+      after,
+    },
+  ];
+};
+
+const formatPlainContent = (value: unknown): string => {
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch {
+    return String(value);
+  }
+};
+
+const formatInlineValue = (value: unknown): string => {
+  if (typeof value === "string") {
+    return value;
+  }
+  if (
+    typeof value === "number" ||
+    typeof value === "boolean" ||
+    value == null
+  ) {
+    return String(value);
+  }
+  return formatPlainContent(value);
+};
+
+export const DetailsViewInputOutputTab = ({
+  data,
+}: DetailsViewInputOutputTabProps): ReactElement => {
+  const metadata = data.metadata as TraceSpanMetadata | undefined;
+  const workflowStateBefore = metadata?.workflowStateBefore;
+  const workflowStateAfter = metadata?.workflowStateAfter;
+  const hasWorkflowState = Boolean(workflowStateBefore || workflowStateAfter);
+
+  const stateDiff = useMemo(
+    () => buildStateDiff(workflowStateBefore ?? {}, workflowStateAfter ?? {}),
+    [workflowStateBefore, workflowStateAfter],
+  );
+  const diffSummary = useMemo(
+    () =>
+      stateDiff.reduce(
+        (summary, entry) => {
+          if (entry.type === "added") {
+            summary.added += 1;
+          } else if (entry.type === "removed") {
+            summary.removed += 1;
+          } else {
+            summary.updated += 1;
+          }
+          return summary;
+        },
+        { added: 0, removed: 0, updated: 0 },
+      ),
+    [stateDiff],
+  );
+  const [showSnapshots, setShowSnapshots] = useState(false);
+
+  useEffect(() => {
+    setShowSnapshots(false);
+  }, [data.id]);
+
+  if (hasWorkflowState) {
+    const visibleDiff = stateDiff.slice(0, MAX_VISIBLE_DIFF_ENTRIES);
+    const hiddenCount = Math.max(stateDiff.length - visibleDiff.length, 0);
+    const stateInContent = formatPlainContent(workflowStateBefore ?? {});
+    const stateOutContent = formatPlainContent(workflowStateAfter ?? {});
+
+    return (
+      <div className="space-y-4">
+        {(metadata?.workflowStateRedacted ||
+          metadata?.workflowStateTruncated) && (
+          <div className="border-agentprism-border rounded-md border p-3 text-xs">
+            {metadata.workflowStateRedacted && (
+              <p className="text-agentprism-muted-foreground">
+                Sensitive fields were redacted in this snapshot.
+              </p>
+            )}
+            {metadata.workflowStateTruncated && (
+              <p className="text-agentprism-muted-foreground">
+                Large values were truncated in this snapshot.
+              </p>
+            )}
+          </div>
+        )}
+
+        <CollapsibleSection
+          title="State diff"
+          defaultOpen
+          rightContent={
+            <div className="text-agentprism-muted-foreground flex items-center gap-2 text-xs">
+              <span className="rounded border border-green-300 px-1.5 py-0.5 text-green-700">
+                + {diffSummary.added}
+              </span>
+              <span className="rounded border border-amber-300 px-1.5 py-0.5 text-amber-700">
+                ~ {diffSummary.updated}
+              </span>
+              <span className="rounded border border-red-300 px-1.5 py-0.5 text-red-700">
+                - {diffSummary.removed}
+              </span>
+            </div>
+          }
+        >
+          {stateDiff.length === 0 ? (
+            <p className="text-agentprism-muted-foreground p-3 text-sm">
+              No workflow state changes recorded for this span.
+            </p>
+          ) : (
+            <div className="space-y-2">
+              {visibleDiff.map((entry) => (
+                <div
+                  key={`${entry.type}:${entry.path}`}
+                  className="border-agentprism-border rounded-md border p-2"
+                >
+                  <div className="mb-1 flex items-center gap-2 text-xs">
+                    <span
+                      className={
+                        entry.type === "added"
+                          ? "rounded border border-green-300 px-1 text-green-700"
+                          : entry.type === "removed"
+                            ? "rounded border border-red-300 px-1 text-red-700"
+                            : "rounded border border-amber-300 px-1 text-amber-700"
+                      }
+                    >
+                      {entry.type}
+                    </span>
+                    <code className="text-agentprism-foreground break-all">
+                      {entry.path}
+                    </code>
+                  </div>
+                  {entry.type !== "added" && (
+                    <p className="text-agentprism-muted-foreground break-all text-xs">
+                      Before: {formatInlineValue(entry.before)}
+                    </p>
+                  )}
+                  {entry.type !== "removed" && (
+                    <p className="text-agentprism-muted-foreground break-all text-xs">
+                      After: {formatInlineValue(entry.after)}
+                    </p>
+                  )}
+                </div>
+              ))}
+              {hiddenCount > 0 && (
+                <p className="text-agentprism-muted-foreground px-1 text-xs">
+                  Showing first {MAX_VISIBLE_DIFF_ENTRIES} changes (
+                  {hiddenCount} more hidden).
+                </p>
+              )}
+            </div>
+          )}
+        </CollapsibleSection>
+
+        <button
+          type="button"
+          className="text-agentprism-muted-foreground text-xs underline underline-offset-2"
+          onClick={() => setShowSnapshots((current) => !current)}
+        >
+          {showSnapshots ? "Hide full snapshots" : "Show full snapshots"}
+        </button>
+
+        {showSnapshots && (
+          <div className="space-y-4">
+            <IOSection
+              section="Input"
+              content={stateInContent}
+              parsedContent={stateInContent}
+            />
+            <IOSection
+              section="Output"
+              content={stateOutContent}
+              parsedContent={stateOutContent}
+            />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  const hasInput = Boolean(data.input);
+  const hasOutput = Boolean(data.output);
+
+  if (!hasInput && !hasOutput) {
+    return (
+      <div className="border-agentprism-border rounded-md border p-4">
+        <p className="text-agentprism-muted-foreground text-sm">
+          No input or output data available for this span
+        </p>
+      </div>
+    );
+  }
+
+  let parsedInput: string | null = null;
+  let parsedOutput: string | null = null;
+
+  if (typeof data.input === "string") {
+    try {
+      JSON.parse(data.input);
+      parsedInput = data.input;
+    } catch {
+      parsedInput = null;
+    }
+  }
+
+  if (typeof data.output === "string") {
+    try {
+      JSON.parse(data.output);
+      parsedOutput = data.output;
+    } catch {
+      parsedOutput = null;
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {typeof data.input === "string" && (
+        <IOSection
+          section="Input"
+          content={data.input}
+          parsedContent={parsedInput}
+        />
+      )}
+      {typeof data.output === "string" && (
+        <IOSection
+          section="Output"
+          content={data.output}
+          parsedContent={parsedOutput}
+        />
+      )}
+    </div>
+  );
+};
+
+interface IOSectionProps {
+  section: IOSection;
+  content: string;
+  parsedContent: string | null;
+}
+
+const IOSection = ({
+  section,
+  content,
+  parsedContent,
+}: IOSectionProps): ReactElement => {
+  const [tab, setTab] = useState<DetailsViewContentViewMode>(
+    parsedContent ? "json" : "plain",
+  );
+
+  useEffect(() => {
+    if (tab === "json" && !parsedContent) {
+      setTab("plain");
+    }
+  }, [tab, parsedContent]);
+
+  const tabItems: TabItem<DetailsViewContentViewMode>[] = [
+    { value: "json", label: "JSON", disabled: !parsedContent },
+    { value: "plain", label: "Plain" },
+  ];
+
+  return (
+    <CollapsibleSection
+      title={section}
+      defaultOpen
+      rightContent={
+        <TabSelector<DetailsViewContentViewMode>
+          items={tabItems}
+          defaultValue={parsedContent ? "json" : "plain"}
+          value={tab}
+          onValueChange={setTab}
+          theme="pill"
+          onClick={(event) => event.stopPropagation()}
+        />
+      }
+    >
+      <DetailsViewContentViewer
+        content={content}
+        parsedContent={parsedContent}
+        mode={tab}
+        label={section}
+        id={section}
+      />
+    </CollapsibleSection>
+  );
+};

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

@@ -0,0 +1,33 @@
+import { type FC } from "react";
+import JSONPretty from "react-json-pretty";
+import colors from "tailwindcss/colors";
+
+import { agentPrismPrefix } from "../theme";
+
+export interface JsonViewerProps {
+  content: string;
+  id: string;
+  className?: string;
+}
+
+const wrapStyle = `font-size: 12px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;`;
+
+export const DetailsViewJsonOutput: FC<JsonViewerProps> = ({
+  content,
+  id,
+  className = "",
+}) => {
+  return (
+    <JSONPretty
+      booleanStyle={`color: ${colors.blue[800]};`}
+      className={`min-w-0 overflow-x-auto rounded-xl p-4 text-left ${className}`}
+      data={content}
+      id={`json-pretty-${id}`}
+      keyStyle={`color: oklch(var(--${agentPrismPrefix}-code-key));`}
+      mainStyle={`color: oklch(var(--${agentPrismPrefix}-code-base)); ${wrapStyle}`}
+      errorStyle={`color: oklch(var(--${agentPrismPrefix}-code-base)); ${wrapStyle}`}
+      stringStyle={`color: oklch(var(--${agentPrismPrefix}-code-string));`}
+      valueStyle={`color: oklch(var(--${agentPrismPrefix}-code-number));`}
+    />
+  );
+};

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

@@ -0,0 +1,27 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { type ReactElement } from "react";
+
+import { CopyButton } from "../CopyButton";
+import { DetailsViewJsonOutput } from "./DetailsViewJsonOutput";
+
+interface RawDataTabProps {
+  data: TraceSpan;
+}
+
+export const DetailsViewRawDataTab = ({
+  data,
+}: RawDataTabProps): ReactElement => (
+  <div className="border-agentprism-border min-w-0 w-full rounded-md border bg-transparent">
+    <div className="flex justify-end p-1.5">
+      <CopyButton label="Raw" content={data.raw} />
+    </div>
+
+    <div className="pb-4">
+      <DetailsViewJsonOutput
+        content={data.raw}
+        id={data.id || "span-details"}
+      />
+    </div>
+  </div>
+);

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

@@ -0,0 +1,75 @@
+import type { ComponentPropsWithRef } from "react";
+
+import cn from "classnames";
+
+import type { ComponentSize } from "./shared";
+
+type IconButtonSize = Extract<
+  ComponentSize,
+  "6" | "7" | "8" | "9" | "10" | "11" | "12" | "16"
+>;
+type IconButtonVariant = "default" | "ghost";
+
+export type IconButtonProps = ComponentPropsWithRef<"button"> & {
+  /**
+   * The size of the icon button
+   */
+  size?: IconButtonSize;
+
+  /**
+   * The visual variant of the icon button
+   */
+  variant?: IconButtonVariant;
+
+  /**
+   * Accessible label for screen readers
+   * Required for accessibility compliance
+   */
+  "aria-label": string;
+};
+
+const sizeClasses: Record<IconButtonSize, string> = {
+  "6": "h-6 min-h-6",
+  "7": "h-7 min-h-7",
+  "8": "h-8 min-h-8",
+  "9": "h-9 min-h-9",
+  "10": "h-10 min-h-10",
+  "11": "h-11 min-h-11",
+  "12": "h-12 min-h-12",
+  "16": "h-16 min-h-16",
+};
+
+const variantClasses: Record<IconButtonVariant, string> = {
+  default: "border border-agentprism-border bg-transparent",
+  ghost: "bg-transparent",
+};
+
+// TODO: Remake to call Icon component directly instead of passing children
+export const IconButton = ({
+  children,
+  className,
+  size = "6",
+  variant = "default",
+  type = "button",
+  "aria-label": ariaLabel,
+  ...rest
+}: IconButtonProps) => {
+  return (
+    <button
+      type={type}
+      aria-label={ariaLabel}
+      className={cn(
+        className,
+        sizeClasses[size],
+        "inline-flex aspect-square shrink-0 items-center justify-center",
+        "rounded-md",
+        variantClasses[variant],
+        "text-agentprism-secondary-foreground",
+        "hover:bg-agentprism-secondary",
+      )}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};

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

@@ -0,0 +1,14 @@
+import type { ComponentPropsWithRef } from "react";
+
+import type { BadgeProps } from "./Badge";
+
+import { Badge } from "./Badge";
+
+export type PriceBadgeProps = ComponentPropsWithRef<"span"> & {
+  cost: number;
+  size?: BadgeProps["size"];
+};
+
+export const PriceBadge = ({ cost, size, ...rest }: PriceBadgeProps) => {
+  return <Badge size={size} {...rest} label={`$ ${cost}`} />;
+};

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

@@ -0,0 +1,17 @@
+import { Search } from "lucide-react";
+
+import { TextInput, type TextInputProps } from "./TextInput";
+
+/**
+ * A simple wrapper around the TextInput component.
+ * It adds a search icon and a placeholder.
+ */
+export const SearchInput = ({ ...props }: TextInputProps) => {
+  return (
+    <TextInput
+      startIcon={<Search className="size-4" />}
+      placeholder="Filter..."
+      {...props}
+    />
+  );
+};