orcheo-canvas 0.0.1

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

@@ -0,0 +1,183 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { TraceRecord, TraceSpan } from "@evilmartians/agent-prism-types";
+
+type LayoutMockProps = {
+  selectedTraceId?: string;
+  filteredSpans: TraceSpan[];
+  handleTraceSelect: (trace: TraceRecord) => void;
+  traceRecords: TraceRecord[];
+};
+
+const desktopLayoutMock = vi.fn((props: unknown) => {
+  const { selectedTraceId, filteredSpans, handleTraceSelect, traceRecords } =
+    props as LayoutMockProps;
+
+  return (
+    <div data-testid="desktop-layout">
+      <span data-testid="selected-trace-id">{selectedTraceId ?? "none"}</span>
+      <span data-testid="span-count">{filteredSpans.length}</span>
+      <button
+        type="button"
+        onClick={() => handleTraceSelect(traceRecords.at(-1)!)}
+      >
+        select-last-trace
+      </button>
+    </div>
+  );
+});
+
+vi.mock("../shared", () => ({
+  useIsMobile: () => false,
+}));
+
+vi.mock("./TraceViewerDesktopLayout", () => ({
+  TraceViewerDesktopLayout: (props: unknown) => desktopLayoutMock(props),
+}));
+
+vi.mock("./TraceViewerMobileLayout", () => ({
+  TraceViewerMobileLayout: () => null,
+}));
+
+import { TraceViewer, type TraceViewerData } from "./TraceViewer";
+
+const createSpan = (id: string): TraceSpan => ({
+  id,
+  title: `Span ${id}`,
+  startTime: new Date("2024-01-01T00:00:00Z"),
+  endTime: new Date("2024-01-01T00:00:01Z"),
+  duration: 1000,
+  type: "llm_call",
+  raw: "{}",
+  status: "success",
+});
+
+const createViewerData = (id: string, spanCount: number): TraceViewerData => {
+  const spans = Array.from({ length: spanCount }, (_, index) =>
+    createSpan(`${id}-span-${index}`),
+  );
+
+  return {
+    traceRecord: {
+      id,
+      name: `Trace ${id}`,
+      spansCount: spanCount,
+      durationMs: spanCount * 100,
+      agentDescription: "agent",
+      totalTokens: spanCount * 10,
+      startTime: Date.now(),
+    },
+    spans,
+  };
+};
+
+describe("TraceViewer", () => {
+  afterEach(() => {
+    cleanup();
+    desktopLayoutMock.mockClear();
+  });
+
+  it("focuses the active trace id and refreshes spans when data updates", () => {
+    const initialData = [
+      createViewerData("trace-1", 1),
+      createViewerData("trace-2", 1),
+    ];
+
+    const { rerender } = render(
+      <TraceViewer data={initialData} activeTraceId="trace-2" />,
+    );
+
+    const selectedTraceIds = () =>
+      screen
+        .getAllByTestId("selected-trace-id")
+        .map((element) => element.textContent);
+    const spanCounts = () =>
+      screen.getAllByTestId("span-count").map((element) => element.textContent);
+
+    expect(selectedTraceIds()).toContain("trace-2");
+    expect(spanCounts()).toContain("1");
+
+    const updatedTrace = {
+      ...initialData[1],
+      traceRecord: {
+        ...initialData[1].traceRecord,
+        spansCount: initialData[1].traceRecord.spansCount + 1,
+      },
+      spans: [...initialData[1].spans, createSpan("trace-2-span-1")],
+    } satisfies TraceViewerData;
+
+    rerender(
+      <TraceViewer
+        data={[initialData[0], updatedTrace]}
+        activeTraceId="trace-2"
+      />,
+    );
+
+    expect(selectedTraceIds()).toContain("trace-2");
+    expect(spanCounts()).toContain("2");
+  });
+
+  it("preserves manual selections across data refreshes", async () => {
+    const user = userEvent.setup();
+    const initialData = [
+      createViewerData("trace-1", 1),
+      createViewerData("trace-2", 1),
+    ];
+
+    const { rerender } = render(<TraceViewer data={initialData} />);
+
+    const [selectLastTraceButton] = screen.getAllByRole("button", {
+      name: /select-last-trace/i,
+    });
+
+    await user.click(selectLastTraceButton);
+
+    expect(
+      screen
+        .getAllByTestId("selected-trace-id")
+        .map((element) => element.textContent),
+    ).toContain("trace-2");
+
+    const refreshedTrace = {
+      ...initialData[1],
+      traceRecord: {
+        ...initialData[1].traceRecord,
+        spansCount: initialData[1].traceRecord.spansCount + 1,
+      },
+      spans: [...initialData[1].spans, createSpan("trace-2-span-1")],
+    } satisfies TraceViewerData;
+
+    rerender(<TraceViewer data={[initialData[0], refreshedTrace]} />);
+
+    expect(
+      screen
+        .getAllByTestId("selected-trace-id")
+        .map((element) => element.textContent),
+    ).toContain("trace-2");
+    expect(
+      screen.getAllByTestId("span-count").map((element) => element.textContent),
+    ).toContain("2");
+  });
+
+  it("invokes onTraceSelect when a user picks a trace", () => {
+    const initialData = [
+      createViewerData("trace-1", 1),
+      createViewerData("trace-2", 1),
+    ];
+    const handleTraceSelect = vi.fn();
+
+    render(
+      <TraceViewer data={initialData} onTraceSelect={handleTraceSelect} />,
+    );
+
+    const lastCall = desktopLayoutMock.mock.calls.at(
+      -1,
+    )?.[0] as LayoutMockProps;
+    lastCall.handleTraceSelect(lastCall.traceRecords.at(-1)!);
+
+    expect(handleTraceSelect).toHaveBeenCalledWith(
+      expect.objectContaining({ id: "trace-2" }),
+    );
+  });
+});

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

@@ -0,0 +1,207 @@
+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;
+}
+
+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="h-[calc(100vh-50px)]">
+      <div className="hidden h-full lg:block">
+        <TraceViewerDesktopLayout {...props} />
+      </div>
+      <div className="h-full 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">
+      <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 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 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 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 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>
+  </>
+);