orcheo-canvas 0.0.1

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

@@ -0,0 +1,126 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+import type { ReactElement } from "react";
+
+import { useState, useEffect } 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";
+
+export const DetailsViewInputOutputTab = ({
+  data,
+}: DetailsViewInputOutputTabProps): ReactElement => {
+  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 {
+      parsedInput = JSON.parse(data.input);
+    } catch {
+      parsedInput = null;
+    }
+  }
+
+  if (typeof data.output === "string") {
+    try {
+      parsedOutput = JSON.parse(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,30 @@
+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;
+}
+
+export const DetailsViewJsonOutput: FC<JsonViewerProps> = ({
+  content,
+  id,
+  className = "",
+}) => {
+  return (
+    <JSONPretty
+      booleanStyle={`color: ${colors.blue[800]};`}
+      className={`overflow-x-hidden 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)); font-size: 12px; white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;`}
+      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,31 @@
+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 rounded-md border bg-transparent">
+    <div className="relative">
+      <div className="pointer-events-none sticky top-0 z-10 flex justify-end p-1.5">
+        <div className="pointer-events-auto">
+          <CopyButton label="Raw" content={data.raw} />
+        </div>
+      </div>
+
+      <div className="-mt-12">
+        <DetailsViewJsonOutput
+          content={data.raw}
+          id={data.id || "span-details"}
+        />
+      </div>
+    </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}
+    />
+  );
+};

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

@@ -0,0 +1,52 @@
+import type { TraceSpanCategory } from "@evilmartians/agent-prism-types";
+
+import cn from "classnames";
+
+import { Badge, type BadgeProps } from "./Badge";
+import { getSpanCategoryIcon, getSpanCategoryLabel } from "./shared";
+
+export interface SpanBadgeProps
+  extends Omit<BadgeProps, "label" | "iconStart" | "iconEnd"> {
+  category: TraceSpanCategory;
+}
+
+const badgeClasses: Record<TraceSpanCategory, string> = {
+  llm_call: "bg-agentprism-badge-llm text-agentprism-badge-llm-foreground",
+  tool_execution:
+    "bg-agentprism-badge-tool text-agentprism-badge-tool-foreground",
+  chain_operation:
+    "bg-agentprism-badge-chain text-agentprism-badge-chain-foreground",
+  retrieval:
+    "bg-agentprism-badge-retrieval text-agentprism-badge-retrieval-foreground",
+  embedding:
+    "bg-agentprism-badge-embedding text-agentprism-badge-embedding-foreground",
+  guardrail:
+    "bg-agentprism-badge-guardrail text-agentprism-badge-guardrail-foreground",
+  agent_invocation:
+    "bg-agentprism-badge-agent text-agentprism-badge-agent-foreground",
+  create_agent:
+    "bg-agentprism-badge-create-agent text-agentprism-badge-create-agent-foreground",
+  span: "bg-agentprism-badge-span text-agentprism-badge-span-foreground",
+  event: "bg-agentprism-badge-event text-agentprism-badge-event-foreground",
+  unknown:
+    "bg-agentprism-badge-unknown text-agentprism-badge-unknown-foreground",
+};
+
+export const SpanBadge = ({
+  category,
+  className,
+  ...props
+}: SpanBadgeProps) => {
+  const Icon = getSpanCategoryIcon(category);
+  const label = getSpanCategoryLabel(category);
+
+  return (
+    <Badge
+      className={cn(badgeClasses[category], className)}
+      iconStart={<Icon className="size-2.5" />}
+      {...props}
+      label={label}
+      unstyled
+    />
+  );
+};