orcheo-studio 0.21.1

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

@@ -0,0 +1,208 @@
+import type { TraceRecord, TraceSpan } from "@evilmartians/agent-prism-types";
+
+import {
+  filterSpansRecursively,
+  flattenSpans,
+} from "@evilmartians/agent-prism-data";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import type { DetailsViewProps } from "../DetailsView/DetailsView";
+import { type BadgeProps } from "../Badge";
+import { useIsMobile } from "../shared";
+import { type SpanCardViewOptions } from "../SpanCard/SpanCard";
+import { TraceViewerDesktopLayout } from "./TraceViewerDesktopLayout";
+import { TraceViewerMobileLayout } from "./TraceViewerMobileLayout";
+import { useTraceSelection } from "./useTraceSelection";
+
+export interface TraceViewerData {
+  traceRecord: TraceRecord;
+  badges?: Array<BadgeProps>;
+  spans: TraceSpan[];
+  spanCardViewOptions?: SpanCardViewOptions;
+  threadId?: string;
+}
+
+export interface TraceViewerProps {
+  data: Array<TraceViewerData>;
+  spanCardViewOptions?: SpanCardViewOptions;
+  detailsViewProps?: Partial<DetailsViewProps>;
+  activeTraceId?: string;
+  onTraceSelect?: (trace: TraceRecord) => void;
+}
+
+export const TraceViewer = ({
+  data,
+  spanCardViewOptions,
+  detailsViewProps,
+  activeTraceId,
+  onTraceSelect,
+}: TraceViewerProps) => {
+  const isMobile = useIsMobile();
+
+  const initialTraceData = useMemo(() => {
+    if (activeTraceId) {
+      const activeTrace = data.find(
+        (item) => item.traceRecord.id === activeTraceId,
+      );
+      if (activeTrace) {
+        return activeTrace;
+      }
+    }
+    return data[0];
+  }, [activeTraceId, data]);
+
+  const [selectedSpan, setSelectedSpan] = useState<TraceSpan | undefined>();
+  const [searchValue, setSearchValue] = useState("");
+  const [traceListExpanded, setTraceListExpanded] = useState(true);
+
+  const {
+    selectedTrace,
+    selectedTraceId,
+    selectedTraceSpans,
+    traceChangeToken,
+    selectTrace,
+    clearSelection,
+  } = useTraceSelection({
+    data,
+    initialTraceData,
+  });
+
+  const traceRecords: TraceRecordWithDisplayData[] = useMemo(() => {
+    return data.map((item) => ({
+      ...item.traceRecord,
+      badges: item.badges,
+      spanCardViewOptions: item.spanCardViewOptions,
+    }));
+  }, [data]);
+
+  const normalizedSearchValue = useMemo(
+    () => searchValue.trim(),
+    [searchValue],
+  );
+
+  const filteredSpans = useMemo(() => {
+    if (!normalizedSearchValue) {
+      return selectedTraceSpans;
+    }
+    return filterSpansRecursively(selectedTraceSpans, normalizedSearchValue);
+  }, [normalizedSearchValue, selectedTraceSpans]);
+
+  const allIds = useMemo(() => {
+    return flattenSpans(selectedTraceSpans).map((span) => span.id);
+  }, [selectedTraceSpans]);
+
+  const [expandedSpansIds, setExpandedSpansIds] = useState<string[]>(allIds);
+
+  useEffect(() => {
+    setExpandedSpansIds(allIds);
+  }, [allIds]);
+
+  useEffect(() => {
+    if (!activeTraceId) {
+      return;
+    }
+
+    const hasActiveTrace = data.some(
+      (item) => item.traceRecord.id === activeTraceId,
+    );
+
+    if (hasActiveTrace && activeTraceId !== selectedTraceId) {
+      selectTrace(activeTraceId, { source: "external" });
+    }
+  }, [activeTraceId, data, selectTrace, selectedTraceId]);
+
+  useEffect(() => {
+    if (traceChangeToken === 0) {
+      return;
+    }
+    setSelectedSpan(undefined);
+    setExpandedSpansIds([]);
+  }, [traceChangeToken]);
+
+  useEffect(() => {
+    if (!isMobile && selectedTraceSpans.length > 0 && !selectedSpan) {
+      setSelectedSpan(selectedTraceSpans[0]);
+    }
+  }, [selectedTraceSpans, isMobile, selectedSpan]);
+
+  const handleExpandAll = useCallback(() => {
+    setExpandedSpansIds(allIds);
+  }, [allIds]);
+
+  const handleCollapseAll = useCallback(() => {
+    setExpandedSpansIds([]);
+  }, []);
+
+  const handleTraceSelect = useCallback(
+    (trace: TraceRecord) => {
+      selectTrace(trace.id, { source: "user" });
+      onTraceSelect?.(trace);
+    },
+    [onTraceSelect, selectTrace],
+  );
+
+  const handleClearTraceSelection = useCallback(() => {
+    clearSelection();
+    setSelectedSpan(undefined);
+    setExpandedSpansIds([]);
+  }, [clearSelection]);
+
+  const props: TraceViewerLayoutProps = {
+    traceRecords,
+    traceListExpanded,
+    setTraceListExpanded,
+    selectedTrace,
+    selectedTraceId: selectedTraceId,
+    selectedSpan,
+    setSelectedSpan,
+    searchValue,
+    setSearchValue,
+    filteredSpans,
+    expandedSpansIds,
+    setExpandedSpansIds,
+    handleExpandAll,
+    handleCollapseAll,
+    handleTraceSelect,
+    spanCardViewOptions:
+      spanCardViewOptions || selectedTrace?.spanCardViewOptions,
+    onClearTraceSelection: handleClearTraceSelection,
+    detailsViewProps,
+  };
+
+  return (
+    <div className="flex h-full min-h-0 w-full min-w-0 flex-col">
+      <div className="hidden min-h-0 w-full min-w-0 flex-1 lg:block">
+        <TraceViewerDesktopLayout {...props} />
+      </div>
+      <div className="min-h-0 w-full min-w-0 flex-1 lg:hidden">
+        <TraceViewerMobileLayout {...props} />
+      </div>
+    </div>
+  );
+};
+
+export interface TraceRecordWithDisplayData extends TraceRecord {
+  spanCardViewOptions?: SpanCardViewOptions;
+  badges?: BadgeProps[];
+}
+
+export interface TraceViewerLayoutProps {
+  traceRecords: TraceRecordWithDisplayData[];
+  traceListExpanded: boolean;
+  setTraceListExpanded: (expanded: boolean) => void;
+  selectedTrace: TraceRecordWithDisplayData | undefined;
+  selectedTraceId?: string;
+  selectedSpan: TraceSpan | undefined;
+  setSelectedSpan: (span: TraceSpan | undefined) => void;
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  filteredSpans: TraceSpan[];
+  expandedSpansIds: string[];
+  setExpandedSpansIds: (ids: string[]) => void;
+  handleExpandAll: () => void;
+  handleCollapseAll: () => void;
+  handleTraceSelect: (trace: TraceRecord) => void;
+  spanCardViewOptions?: SpanCardViewOptions;
+  onClearTraceSelection: () => void;
+  detailsViewProps?: Partial<DetailsViewProps>;
+}

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

@@ -0,0 +1,99 @@
+import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
+
+import { DetailsView } from "../DetailsView/DetailsView";
+import { TraceList } from "../TraceList/TraceList";
+import { type TraceViewerLayoutProps } from "./TraceViewer";
+import { TraceViewerPlaceholder } from "./TraceViewerPlaceholder";
+import { TraceViewerTreeViewContainer } from "./TraceViewerTreeViewContainer";
+
+export const TraceViewerDesktopLayout = ({
+  traceRecords,
+  traceListExpanded,
+  setTraceListExpanded,
+  selectedTrace,
+  selectedTraceId,
+  selectedSpan,
+  setSelectedSpan,
+  searchValue,
+  setSearchValue,
+  filteredSpans,
+  expandedSpansIds,
+  setExpandedSpansIds,
+  handleExpandAll,
+  handleCollapseAll,
+  handleTraceSelect,
+  spanCardViewOptions,
+  detailsViewProps,
+}: TraceViewerLayoutProps) => {
+  const actualSelectedTrace =
+    traceRecords.find((t) => t.id === selectedTraceId) || selectedTrace;
+
+  return (
+    <PanelGroup direction="horizontal" className="h-full w-full min-w-0">
+      <Panel
+        id="trace-list"
+        defaultSize={traceListExpanded ? 20 : 2}
+        minSize={traceListExpanded ? 15 : 2}
+        maxSize={traceListExpanded ? 40 : 2}
+        collapsible={false}
+        className="flex h-full min-h-0 min-w-0 flex-col overflow-hidden"
+      >
+        <TraceList
+          traces={traceRecords}
+          expanded={traceListExpanded}
+          onExpandStateChange={setTraceListExpanded}
+          onTraceSelect={handleTraceSelect}
+          selectedTrace={actualSelectedTrace}
+        />
+      </Panel>
+
+      <PanelResizeHandle />
+
+      {selectedTrace ? (
+        <Panel
+          id="tree-view"
+          minSize={30}
+          className="flex h-full min-w-0 flex-col gap-y-2 overflow-hidden"
+        >
+          <TraceViewerTreeViewContainer
+            searchValue={searchValue}
+            setSearchValue={setSearchValue}
+            handleExpandAll={handleExpandAll}
+            handleCollapseAll={handleCollapseAll}
+            filteredSpans={filteredSpans}
+            selectedSpan={selectedSpan}
+            setSelectedSpan={setSelectedSpan}
+            expandedSpansIds={expandedSpansIds}
+            setExpandedSpansIds={setExpandedSpansIds}
+            spanCardViewOptions={spanCardViewOptions}
+            selectedTrace={selectedTrace}
+          />
+        </Panel>
+      ) : (
+        <Panel
+          id="tree-view"
+          minSize={30}
+          className="flex h-full min-w-0 items-center justify-center"
+        >
+          <TraceViewerPlaceholder title="Select a trace to see the details" />
+        </Panel>
+      )}
+
+      <PanelResizeHandle />
+
+      <Panel
+        id="details-view"
+        defaultSize={30}
+        minSize={20}
+        maxSize={50}
+        className="h-full min-w-0 overflow-hidden"
+      >
+        {selectedSpan ? (
+          <DetailsView data={selectedSpan} {...detailsViewProps} />
+        ) : (
+          <TraceViewerPlaceholder title="Select a span to see the details" />
+        )}
+      </Panel>
+    </PanelGroup>
+  );
+};

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

@@ -0,0 +1,103 @@
+import { ArrowLeft } from "lucide-react";
+
+import { Button } from "../Button";
+import { DetailsView } from "../DetailsView/DetailsView";
+import { TraceList } from "../TraceList/TraceList";
+import { type TraceViewerLayoutProps } from "../TraceViewer/TraceViewer";
+import { TraceViewerTreeViewContainer } from "./TraceViewerTreeViewContainer";
+
+export const TraceViewerMobileLayout = ({
+  traceRecords,
+  traceListExpanded,
+  setTraceListExpanded,
+  selectedTrace,
+  selectedTraceId,
+  selectedSpan,
+  setSelectedSpan,
+  searchValue,
+  setSearchValue,
+  filteredSpans,
+  expandedSpansIds,
+  setExpandedSpansIds,
+  handleExpandAll,
+  handleCollapseAll,
+  handleTraceSelect,
+  spanCardViewOptions,
+  onClearTraceSelection,
+  detailsViewProps,
+}: TraceViewerLayoutProps) => {
+  if (
+    selectedTrace &&
+    selectedTraceId &&
+    filteredSpans.length > 0 &&
+    selectedSpan
+  ) {
+    return (
+      <div className="flex h-full flex-col gap-4 overflow-y-auto">
+        <Button
+          onClick={() => {
+            setSelectedSpan(undefined);
+          }}
+          iconStart={<ArrowLeft className="size-3" />}
+          variant="ghost"
+          className="self-start"
+        >
+          Tree View
+        </Button>
+        <DetailsView data={selectedSpan} {...detailsViewProps} />
+      </div>
+    );
+  }
+
+  if (
+    selectedTrace &&
+    selectedTraceId &&
+    filteredSpans.length > 0 &&
+    !selectedSpan
+  ) {
+    return (
+      <div className="flex h-full flex-col gap-4">
+        <div className="shrink-0">
+          <Button
+            onClick={() => {
+              if (onClearTraceSelection) {
+                onClearTraceSelection();
+              }
+            }}
+            iconStart={<ArrowLeft className="size-3" />}
+            variant="ghost"
+            className="self-start"
+          >
+            Traces list
+          </Button>
+        </div>
+
+        <TraceViewerTreeViewContainer
+          searchValue={searchValue}
+          setSearchValue={setSearchValue}
+          handleExpandAll={handleExpandAll}
+          handleCollapseAll={handleCollapseAll}
+          filteredSpans={filteredSpans}
+          selectedSpan={selectedSpan}
+          setSelectedSpan={setSelectedSpan}
+          expandedSpansIds={expandedSpansIds}
+          setExpandedSpansIds={setExpandedSpansIds}
+          spanCardViewOptions={spanCardViewOptions}
+          selectedTrace={selectedTrace}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-full overflow-y-auto">
+      <TraceList
+        traces={traceRecords}
+        expanded={traceListExpanded}
+        onExpandStateChange={setTraceListExpanded}
+        onTraceSelect={handleTraceSelect}
+        selectedTrace={traceRecords.find((t) => t.id === selectedTraceId)}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,5 @@
+export const TraceViewerPlaceholder = ({ title }: { title: string }) => (
+  <p className="text-agentprism-muted-foreground bg-agentprism-background flex h-full items-center justify-center rounded-lg p-4 text-center">
+    {title}
+  </p>
+);

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

@@ -0,0 +1,30 @@
+import {
+  CollapseAllButton,
+  ExpandAllButton,
+} from "../CollapseAndExpandControls";
+import { SearchInput } from "../SearchInput.tsx";
+
+export const TraceViewerSearchAndControls = ({
+  searchValue,
+  setSearchValue,
+  handleExpandAll,
+  handleCollapseAll,
+}: {
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  handleExpandAll: () => void;
+  handleCollapseAll: () => void;
+}) => (
+  <div className="flex shrink-0 items-center justify-between gap-3 px-4 pb-2 pt-1">
+    <SearchInput
+      id="trace-span-search"
+      value={searchValue}
+      onChange={(e) => setSearchValue(e.target.value)}
+      placeholder="Search spans"
+    />
+    <div className="flex items-center gap-2">
+      <ExpandAllButton onExpandAll={handleExpandAll} />
+      <CollapseAllButton onCollapseAll={handleCollapseAll} />
+    </div>
+  </div>
+);

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

@@ -0,0 +1,76 @@
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import type { SpanCardViewOptions } from "../SpanCard/SpanCard";
+
+import { Badge } from "../Badge";
+import { TraceListItemHeader } from "../TraceList/TraceListItemHeader";
+import { TreeView } from "../TreeView";
+import { type TraceRecordWithDisplayData } from "./TraceViewer";
+import { TraceViewerSearchAndControls } from "./TraceViewerSearchAndControls";
+
+export const TraceViewerTreeViewContainer = ({
+  searchValue,
+  setSearchValue,
+  handleExpandAll,
+  handleCollapseAll,
+  filteredSpans,
+  selectedSpan,
+  setSelectedSpan,
+  expandedSpansIds,
+  setExpandedSpansIds,
+  spanCardViewOptions,
+  selectedTrace,
+  showHeader = true,
+}: {
+  searchValue: string;
+  setSearchValue: (value: string) => void;
+  handleExpandAll: () => void;
+  handleCollapseAll: () => void;
+  filteredSpans: TraceSpan[];
+  selectedSpan: TraceSpan | undefined;
+  setSelectedSpan: (span: TraceSpan | undefined) => void;
+  expandedSpansIds: string[];
+  setExpandedSpansIds: (ids: string[]) => void;
+  spanCardViewOptions?: SpanCardViewOptions;
+  selectedTrace?: TraceRecordWithDisplayData;
+  showHeader?: boolean;
+}) => (
+  <>
+    {showHeader && selectedTrace && (
+      <div className="flex shrink-0 gap-2 px-4">
+        <TraceListItemHeader trace={selectedTrace} />
+
+        <div className="flex flex-wrap items-center gap-2">
+          {selectedTrace.badges?.map((badge, index) => (
+            <Badge key={index} size="4" label={badge.label} />
+          ))}
+        </div>
+      </div>
+    )}
+
+    <div className="bg-agentprism-background flex min-h-0 flex-1 flex-col overflow-hidden rounded-md">
+      <TraceViewerSearchAndControls
+        searchValue={searchValue}
+        setSearchValue={setSearchValue}
+        handleExpandAll={handleExpandAll}
+        handleCollapseAll={handleCollapseAll}
+      />
+      <div className="min-h-0 flex-1 overflow-y-auto">
+        {filteredSpans.length === 0 ? (
+          <div className="text-agentprism-muted-foreground p-3 text-center">
+            No spans found
+          </div>
+        ) : (
+          <TreeView
+            spans={filteredSpans}
+            onSpanSelect={setSelectedSpan}
+            selectedSpan={selectedSpan}
+            expandedSpansIds={expandedSpansIds}
+            onExpandSpansIdsChange={setExpandedSpansIds}
+            spanCardViewOptions={spanCardViewOptions}
+          />
+        )}
+      </div>
+    </div>
+  </>
+);

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;
+};