orcheo-canvas 0.0.1

package/src/features/workflow/components/trace/agent-prism/TraceViewer/useTraceSelection.ts

@@ -0,0 +1,186 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import type {
+  TraceRecordWithDisplayData,
+  TraceViewerData,
+} from "./TraceViewer";
+
+interface UseTraceSelectionOptions {
+  data: TraceViewerData[];
+  initialTraceData?: TraceViewerData;
+}
+
+interface SelectTraceOptions {
+  source?: "user" | "external";
+}
+
+export interface TraceSelectionState {
+  selectedTrace: TraceRecordWithDisplayData | undefined;
+  selectedTraceId?: string;
+  selectedTraceSpans: TraceSpan[];
+  hasUserSelection: boolean;
+  traceChangeToken: number;
+  selectTrace: (
+    traceId: string | undefined,
+    options?: SelectTraceOptions,
+  ) => void;
+  clearSelection: () => void;
+}
+
+export const useTraceSelection = ({
+  data,
+  initialTraceData,
+}: UseTraceSelectionOptions): TraceSelectionState => {
+  const [selectedTrace, setSelectedTrace] = useState<
+    TraceRecordWithDisplayData | undefined
+  >(
+    initialTraceData
+      ? {
+          ...initialTraceData.traceRecord,
+          badges: initialTraceData.badges,
+          spanCardViewOptions: initialTraceData.spanCardViewOptions,
+        }
+      : undefined,
+  );
+  const [selectedTraceId, setSelectedTraceId] = useState<string | undefined>(
+    initialTraceData?.traceRecord.id,
+  );
+  const [selectedTraceSpans, setSelectedTraceSpans] = useState<TraceSpan[]>(
+    initialTraceData?.spans ?? [],
+  );
+  const [hasUserSelection, setHasUserSelection] = useState(false);
+  const [traceChangeToken, setTraceChangeToken] = useState(0);
+  const previousTraceIdRef = useRef<string | undefined>(
+    initialTraceData?.traceRecord.id,
+  );
+
+  const registerTraceChange = useCallback(() => {
+    setTraceChangeToken((current) => current + 1);
+  }, []);
+
+  const clearSelection = useCallback(() => {
+    previousTraceIdRef.current = undefined;
+    setHasUserSelection(true);
+    setSelectedTrace(undefined);
+    setSelectedTraceSpans([]);
+    setSelectedTraceId(undefined);
+    registerTraceChange();
+  }, [registerTraceChange]);
+
+  const selectTrace = useCallback(
+    (traceId: string | undefined, options?: SelectTraceOptions) => {
+      const source = options?.source ?? "user";
+      setHasUserSelection(source === "user");
+      setSelectedTraceId(traceId);
+    },
+    [],
+  );
+
+  useEffect(() => {
+    if (data.length === 0) {
+      setSelectedTrace(undefined);
+      setSelectedTraceSpans([]);
+      setSelectedTraceId(undefined);
+      if (hasUserSelection) {
+        setHasUserSelection(false);
+      }
+      if (previousTraceIdRef.current) {
+        previousTraceIdRef.current = undefined;
+        registerTraceChange();
+      }
+      return;
+    }
+
+    if (!selectedTraceId) {
+      if (!hasUserSelection) {
+        const firstTrace = data[0];
+        if (firstTrace) {
+          setSelectedTraceId(firstTrace.traceRecord.id);
+        }
+        return;
+      }
+      setSelectedTrace(undefined);
+      setSelectedTraceSpans([]);
+      if (previousTraceIdRef.current) {
+        previousTraceIdRef.current = undefined;
+        registerTraceChange();
+      }
+      return;
+    }
+
+    const traceData = data.find(
+      (item) => item.traceRecord.id === selectedTraceId,
+    );
+
+    if (!traceData) {
+      const fallback = data[0];
+      if (fallback && fallback.traceRecord.id !== selectedTraceId) {
+        setSelectedTraceId(fallback.traceRecord.id);
+        setHasUserSelection(false);
+      } else {
+        setSelectedTrace(undefined);
+        setSelectedTraceSpans([]);
+        if (hasUserSelection) {
+          setHasUserSelection(false);
+        }
+        if (previousTraceIdRef.current) {
+          previousTraceIdRef.current = undefined;
+          registerTraceChange();
+        }
+      }
+      return;
+    }
+
+    const nextTrace: TraceRecordWithDisplayData = {
+      ...traceData.traceRecord,
+      badges: traceData.badges,
+      spanCardViewOptions: traceData.spanCardViewOptions,
+    };
+
+    setSelectedTrace((previous) => {
+      if (
+        previous &&
+        previous.id === nextTrace.id &&
+        previous.badges === nextTrace.badges &&
+        previous.spanCardViewOptions === nextTrace.spanCardViewOptions
+      ) {
+        return previous;
+      }
+      return nextTrace;
+    });
+
+    setSelectedTraceSpans((previous) =>
+      previous === traceData.spans ? previous : traceData.spans,
+    );
+
+    if (previousTraceIdRef.current !== traceData.traceRecord.id) {
+      previousTraceIdRef.current = traceData.traceRecord.id;
+      registerTraceChange();
+    }
+  }, [data, hasUserSelection, registerTraceChange, selectedTraceId]);
+
+  const state = useMemo<TraceSelectionState>(
+    () => ({
+      selectedTrace,
+      selectedTraceId,
+      selectedTraceSpans,
+      hasUserSelection,
+      traceChangeToken,
+      selectTrace,
+      clearSelection,
+    }),
+    [
+      clearSelection,
+      hasUserSelection,
+      selectTrace,
+      selectedTrace,
+      selectedTraceId,
+      selectedTraceSpans,
+      traceChangeToken,
+    ],
+  );
+
+  return state;
+};

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

@@ -0,0 +1,73 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { flattenSpans, findTimeRange } from "@evilmartians/agent-prism-data";
+import cn from "classnames";
+import { type FC } from "react";
+
+import type { SpanCardViewOptions } from "./SpanCard/SpanCard";
+
+import { BrandLogo } from "./BrandLogo";
+import { SpanCard } from "./SpanCard/SpanCard";
+
+interface TreeViewProps {
+  spans: TraceSpan[];
+  className?: string;
+  selectedSpan?: TraceSpan;
+  onSpanSelect?: (span: TraceSpan) => void;
+  expandedSpansIds: string[];
+  onExpandSpansIdsChange: (ids: string[]) => void;
+  spanCardViewOptions?: SpanCardViewOptions;
+}
+
+export const TreeView: FC<TreeViewProps> = ({
+  spans,
+  onSpanSelect,
+  className = "",
+  selectedSpan,
+  expandedSpansIds,
+  onExpandSpansIdsChange,
+  spanCardViewOptions,
+}) => {
+  const allCards = flattenSpans(spans);
+  const { minStart, maxEnd } = findTimeRange(allCards);
+
+  return (
+    <div className="w-full min-w-0 px-4">
+      <ul
+        className={cn(className, "overflow-x-auto pt-2")}
+        role="tree"
+        aria-label="Hierarchical card list"
+      >
+        {spans.map((span, idx) => {
+          const brand = span.metadata?.brand as { type: string } | undefined;
+
+          return (
+            <SpanCard
+              key={span.id}
+              data={span}
+              level={0}
+              selectedSpan={selectedSpan}
+              onSpanSelect={onSpanSelect}
+              minStart={minStart}
+              maxEnd={maxEnd}
+              isLastChild={idx === spans.length - 1}
+              expandedSpansIds={expandedSpansIds}
+              onExpandSpansIdsChange={onExpandSpansIdsChange}
+              viewOptions={spanCardViewOptions}
+              avatar={
+                brand
+                  ? {
+                      children: <BrandLogo brand={brand.type} />,
+                      size: "4",
+                      rounded: "sm",
+                      category: span.type,
+                    }
+                  : undefined
+              }
+            />
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

package/src/features/workflow/components/trace/agent-prism/index.ts

@@ -0,0 +1,7 @@
+export { TraceViewer } from "./TraceViewer/TraceViewer";
+export type { TraceViewerData } from "./TraceViewer/TraceViewer";
+export type { TraceRecordWithDisplayData } from "./TraceViewer/TraceViewer";
+export type { TraceViewerProps } from "./TraceViewer/TraceViewer";
+export type { TraceViewerLayoutProps } from "./TraceViewer/TraceViewer";
+export { agentPrismTailwindColors, agentPrismPrefix } from "./theme";
+export type { AgentPrismColors, AgentPrismToken } from "./theme";

package/src/features/workflow/components/trace/agent-prism/shared.ts

@@ -0,0 +1,170 @@
+import type { TraceSpanCategory } from "@evilmartians/agent-prism-types";
+import type { LucideIcon } from "lucide-react";
+
+import {
+  Zap,
+  Wrench,
+  Bot,
+  Link,
+  Search,
+  BarChart2,
+  Plus,
+  HelpCircle,
+  MoveHorizontal,
+  CircleDot,
+  ShieldCheck,
+} from "lucide-react";
+import { useEffect, useState } from "react";
+
+// TYPES
+
+export type ColorVariant =
+  | "purple"
+  | "indigo"
+  | "orange"
+  | "teal"
+  | "cyan"
+  | "sky"
+  | "yellow"
+  | "emerald"
+  | "red"
+  | "gray";
+
+export type ComponentSize =
+  | "4"
+  | "5"
+  | "6"
+  | "7"
+  | "8"
+  | "9"
+  | "10"
+  | "11"
+  | "12"
+  | "16";
+
+// CONSTANTS
+
+export const ROUNDED_CLASSES = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  full: "rounded-full",
+};
+
+/**
+ * Shared configuration for span categories containing label, theme, and icon
+ */
+export const SPAN_CATEGORY_CONFIG: Record<
+  TraceSpanCategory,
+  {
+    label: string;
+    theme: ColorVariant;
+    icon: LucideIcon;
+  }
+> = {
+  llm_call: {
+    label: "LLM",
+    theme: "purple",
+    icon: Zap,
+  },
+  tool_execution: {
+    label: "TOOL",
+    theme: "orange",
+    icon: Wrench,
+  },
+  agent_invocation: {
+    label: "AGENT INVOCATION",
+    theme: "indigo",
+    icon: Bot,
+  },
+  chain_operation: {
+    label: "CHAIN",
+    theme: "teal",
+    icon: Link,
+  },
+  retrieval: {
+    label: "RETRIEVAL",
+    theme: "cyan",
+    icon: Search,
+  },
+  embedding: {
+    label: "EMBEDDING",
+    theme: "emerald",
+    icon: BarChart2,
+  },
+  create_agent: {
+    label: "CREATE AGENT",
+    theme: "sky",
+    icon: Plus,
+  },
+  span: {
+    label: "SPAN",
+    theme: "cyan",
+    icon: MoveHorizontal,
+  },
+  event: {
+    label: "EVENT",
+    theme: "emerald",
+    icon: CircleDot,
+  },
+  guardrail: {
+    label: "GUARDRAIL",
+    theme: "red",
+    icon: ShieldCheck,
+  },
+  unknown: {
+    label: "UNKNOWN",
+    theme: "gray",
+    icon: HelpCircle,
+  },
+};
+
+// UTILS
+
+export function getSpanCategoryTheme(
+  category: TraceSpanCategory,
+): ColorVariant {
+  return SPAN_CATEGORY_CONFIG[category].theme;
+}
+
+export function getSpanCategoryLabel(category: TraceSpanCategory): string {
+  return SPAN_CATEGORY_CONFIG[category].label;
+}
+
+export function getSpanCategoryIcon(category: TraceSpanCategory): LucideIcon {
+  return SPAN_CATEGORY_CONFIG[category].icon;
+}
+
+export const useIsMobile = () => {
+  const [isMobile, setIsMobile] = useState(false);
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+
+    // Bail out in SSR/Node-style environments where window isn't available.
+    if (
+      typeof window === "undefined" ||
+      typeof window.matchMedia !== "function"
+    ) {
+      setIsMobile(false);
+      return;
+    }
+
+    // TODO: replace with something more beautiful and correct (tailwind screens?)
+    const mediaQuery = window.matchMedia("(max-width: 1023px)");
+
+    const handleChange = (e: MediaQueryListEvent | MediaQueryList) => {
+      setIsMobile(e.matches);
+    };
+
+    handleChange(mediaQuery);
+
+    mediaQuery.addEventListener("change", handleChange);
+
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  return mounted ? isMobile : false;
+};

package/src/features/workflow/components/trace/agent-prism/theme/index.js

@@ -0,0 +1,97 @@
+export const agentPrismPrefix = "agentprism";
+
+export const AGENT_PRISM_TOKENS = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "brand",
+  "brand-foreground",
+  "brand-secondary",
+  "brand-secondary-foreground",
+  "border",
+  "border-subtle",
+  "border-strong",
+  "border-inverse",
+  "success",
+  "success-muted",
+  "success-muted-foreground",
+  "error",
+  "error-muted",
+  "error-muted-foreground",
+  "warning",
+  "warning-muted",
+  "warning-muted-foreground",
+  "pending",
+  "pending-muted",
+  "pending-muted-foreground",
+  "code-string",
+  "code-number",
+  "code-key",
+  "code-base",
+  "badge-default",
+  "badge-default-foreground",
+  "avatar-llm",
+  "badge-llm",
+  "badge-llm-foreground",
+  "timeline-llm",
+  "avatar-agent",
+  "badge-agent",
+  "badge-agent-foreground",
+  "timeline-agent",
+  "avatar-tool",
+  "badge-tool",
+  "badge-tool-foreground",
+  "timeline-tool",
+  "avatar-chain",
+  "badge-chain",
+  "badge-chain-foreground",
+  "timeline-chain",
+  "avatar-retrieval",
+  "badge-retrieval",
+  "badge-retrieval-foreground",
+  "timeline-retrieval",
+  "avatar-embedding",
+  "badge-embedding",
+  "badge-embedding-foreground",
+  "timeline-embedding",
+  "avatar-guardrail",
+  "badge-guardrail",
+  "badge-guardrail-foreground",
+  "timeline-guardrail",
+  "avatar-create-agent",
+  "badge-create-agent",
+  "badge-create-agent-foreground",
+  "timeline-create-agent",
+  "avatar-span",
+  "badge-span",
+  "badge-span-foreground",
+  "timeline-span",
+  "avatar-event",
+  "badge-event",
+  "badge-event-foreground",
+  "timeline-event",
+  "avatar-unknown",
+  "badge-unknown",
+  "badge-unknown-foreground",
+  "timeline-unknown",
+];
+
+export const agentPrismTailwindColors = Object.fromEntries(
+  AGENT_PRISM_TOKENS.map((tokenName) => [
+    `agentprism-${tokenName}`,
+    token(tokenName),
+  ]),
+);
+
+function token(name) {
+  return `oklch(var(--${agentPrismPrefix}-${name}) / <alpha-value>)`;
+}

package/src/features/workflow/components/trace/agent-prism/theme/index.ts

@@ -0,0 +1,101 @@
+export const agentPrismPrefix = "agentprism";
+
+export const AGENT_PRISM_TOKENS = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "brand",
+  "brand-foreground",
+  "brand-secondary",
+  "brand-secondary-foreground",
+  "border",
+  "border-subtle",
+  "border-strong",
+  "border-inverse",
+  "success",
+  "success-muted",
+  "success-muted-foreground",
+  "error",
+  "error-muted",
+  "error-muted-foreground",
+  "warning",
+  "warning-muted",
+  "warning-muted-foreground",
+  "pending",
+  "pending-muted",
+  "pending-muted-foreground",
+  "code-string",
+  "code-number",
+  "code-key",
+  "code-base",
+  "badge-default",
+  "badge-default-foreground",
+  "avatar-llm",
+  "badge-llm",
+  "badge-llm-foreground",
+  "timeline-llm",
+  "avatar-agent",
+  "badge-agent",
+  "badge-agent-foreground",
+  "timeline-agent",
+  "avatar-tool",
+  "badge-tool",
+  "badge-tool-foreground",
+  "timeline-tool",
+  "avatar-chain",
+  "badge-chain",
+  "badge-chain-foreground",
+  "timeline-chain",
+  "avatar-retrieval",
+  "badge-retrieval",
+  "badge-retrieval-foreground",
+  "timeline-retrieval",
+  "avatar-embedding",
+  "badge-embedding",
+  "badge-embedding-foreground",
+  "timeline-embedding",
+  "avatar-guardrail",
+  "badge-guardrail",
+  "badge-guardrail-foreground",
+  "timeline-guardrail",
+  "avatar-create-agent",
+  "badge-create-agent",
+  "badge-create-agent-foreground",
+  "timeline-create-agent",
+  "avatar-span",
+  "badge-span",
+  "badge-span-foreground",
+  "timeline-span",
+  "avatar-event",
+  "badge-event",
+  "badge-event-foreground",
+  "timeline-event",
+  "avatar-unknown",
+  "badge-unknown",
+  "badge-unknown-foreground",
+  "timeline-unknown",
+] as const;
+
+export type AgentPrismToken = (typeof AGENT_PRISM_TOKENS)[number];
+
+export type AgentPrismColors = Record<AgentPrismToken, string>;
+
+export const agentPrismTailwindColors = Object.fromEntries(
+  AGENT_PRISM_TOKENS.map((tokenName) => [
+    `agentprism-${tokenName}`,
+    token(tokenName),
+  ]),
+) as AgentPrismColors;
+
+function token(name: string) {
+  return `oklch(var(--${agentPrismPrefix}-${name}) / <alpha-value>)`;
+}