orcheo-canvas 0.0.1

package/src/features/workflow/pages/workflow-canvas/components/trace-tab-content.test.tsx

@@ -0,0 +1,204 @@
+import { describe, expect, it, vi, beforeEach, afterEach } from "vitest";
+import { cleanup, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import type { TraceViewerData } from "@features/workflow/components/trace/agent-prism";
+
+import { TraceTabContent } from "./trace-tab-content";
+
+vi.mock(
+  "@features/workflow/components/trace/agent-prism/theme/theme.css",
+  () => ({}),
+  { virtual: true },
+);
+
+const traceViewerMock = vi.hoisted(() => vi.fn());
+
+vi.mock("@features/workflow/components/trace/agent-prism", () => ({
+  TraceViewer: traceViewerMock,
+}));
+
+const sampleViewerData: TraceViewerData = {
+  traceRecord: {
+    id: "exec-1",
+    name: "Trace 1",
+    spansCount: 3,
+    durationMs: 1200,
+    agentDescription: "success",
+    totalTokens: 42,
+    startTime: Date.now(),
+  },
+  spans: [],
+};
+
+describe("TraceTabContent", () => {
+  beforeEach(() => {
+    traceViewerMock.mockImplementation(
+      ({
+        data,
+        activeTraceId,
+      }: {
+        data: TraceViewerData[];
+        activeTraceId?: string;
+      }) => (
+        <div data-testid="trace-viewer">
+          <span data-testid="trace-viewer-count">
+            {Array.isArray(data) ? data.length : 0}
+          </span>
+          <span data-testid="trace-viewer-active-id">
+            {activeTraceId ?? "none"}
+          </span>
+        </div>
+      ),
+    );
+    vi.spyOn(window, "open").mockImplementation(() => null);
+  });
+
+  afterEach(() => {
+    cleanup();
+    vi.restoreAllMocks();
+    traceViewerMock.mockReset();
+  });
+
+  it("shows loading skeleton when trace is loading", () => {
+    const { container } = render(
+      <TraceTabContent
+        status="loading"
+        error={undefined}
+        viewerData={[]}
+        activeViewer={undefined}
+        onRefresh={vi.fn()}
+        onSelectTrace={vi.fn()}
+        summary={undefined}
+        lastUpdatedAt={undefined}
+        isLive={false}
+      />,
+    );
+
+    expect(container.querySelectorAll(".animate-pulse").length).toBeGreaterThan(
+      0,
+    );
+    expect(screen.queryByTestId("trace-viewer")).not.toBeInTheDocument();
+  });
+
+  it("renders error alert when trace fails to load", () => {
+    render(
+      <TraceTabContent
+        status="error"
+        error="Server unavailable"
+        viewerData={[]}
+        activeViewer={undefined}
+        onRefresh={vi.fn()}
+        onSelectTrace={vi.fn()}
+        summary={undefined}
+        lastUpdatedAt={undefined}
+        isLive={false}
+      />,
+    );
+
+    expect(screen.getByText(/unable to load trace/i)).toBeInTheDocument();
+    expect(screen.getByText(/server unavailable/i)).toBeInTheDocument();
+  });
+
+  it("renders viewer and summary when data is available", () => {
+    render(
+      <TraceTabContent
+        status="ready"
+        error={undefined}
+        viewerData={[sampleViewerData]}
+        activeViewer={sampleViewerData}
+        onRefresh={vi.fn()}
+        onSelectTrace={vi.fn()}
+        summary={{ spanCount: 5, totalTokens: 84 }}
+        lastUpdatedAt="2024-01-01T12:00:00Z"
+        isLive={false}
+      />,
+    );
+
+    expect(screen.getByTestId("trace-viewer")).toBeInTheDocument();
+    expect(screen.getByTestId("trace-viewer-count")).toHaveTextContent("1");
+    expect(screen.getByText("5")).toBeInTheDocument();
+    expect(screen.getByText("84")).toBeInTheDocument();
+  });
+
+  it("passes the active trace id to the viewer", () => {
+    render(
+      <TraceTabContent
+        status="ready"
+        error={undefined}
+        viewerData={[sampleViewerData]}
+        activeViewer={sampleViewerData}
+        onRefresh={vi.fn()}
+        onSelectTrace={vi.fn()}
+        summary={{ spanCount: 2, totalTokens: 10 }}
+        lastUpdatedAt={undefined}
+        isLive={false}
+      />,
+    );
+
+    expect(screen.getByTestId("trace-viewer-active-id")).toHaveTextContent(
+      sampleViewerData.traceRecord.id,
+    );
+  });
+
+  it("calls refresh handler when refresh button is clicked", async () => {
+    const user = userEvent.setup();
+    const onRefresh = vi.fn();
+    render(
+      <TraceTabContent
+        status="ready"
+        error={undefined}
+        viewerData={[sampleViewerData]}
+        activeViewer={sampleViewerData}
+        onRefresh={onRefresh}
+        onSelectTrace={vi.fn()}
+        summary={{ spanCount: 1, totalTokens: 10 }}
+        lastUpdatedAt={undefined}
+        isLive
+      />,
+    );
+
+    const [refreshButton] = screen.getAllByRole("button", { name: /refresh/i });
+    await user.click(refreshButton);
+    expect(onRefresh).toHaveBeenCalledTimes(1);
+  });
+
+  it("invokes onSelectTrace when the viewer requests a trace change", () => {
+    const onSelectTrace = vi.fn();
+    traceViewerMock.mockImplementation(
+      ({
+        onTraceSelect,
+      }: {
+        onTraceSelect?: (trace: TraceViewerData["traceRecord"]) => void;
+      }) => (
+        <div data-testid="trace-viewer">
+          <button
+            type="button"
+            onClick={() => {
+              onTraceSelect?.(sampleViewerData.traceRecord);
+            }}
+          >
+            select-trace
+          </button>
+        </div>
+      ),
+    );
+
+    const { getByRole } = render(
+      <TraceTabContent
+        status="ready"
+        error={undefined}
+        viewerData={[sampleViewerData]}
+        activeViewer={sampleViewerData}
+        onRefresh={vi.fn()}
+        onSelectTrace={onSelectTrace}
+        summary={{ spanCount: 1, totalTokens: 10 }}
+        lastUpdatedAt={undefined}
+        isLive={false}
+      />,
+    );
+
+    getByRole("button", { name: /select-trace/i }).click();
+
+    expect(onSelectTrace).toHaveBeenCalledWith(sampleViewerData.traceRecord.id);
+  });
+});

package/src/features/workflow/pages/workflow-canvas/components/trace-tab-content.tsx

@@ -0,0 +1,202 @@
+import "@features/workflow/components/trace/agent-prism/theme/theme.css";
+
+import { formatDistanceToNow } from "date-fns";
+import { RefreshCw } from "lucide-react";
+import type { TraceSpan } from "@evilmartians/agent-prism-types";
+
+import { Alert, AlertDescription, AlertTitle } from "@/design-system/ui/alert";
+import { Button } from "@/design-system/ui/button";
+import { Card, CardDescription, CardTitle } from "@/design-system/ui/card";
+import { Skeleton } from "@/design-system/ui/skeleton";
+import type { TraceViewerData } from "@features/workflow/components/trace/agent-prism";
+import { TraceViewer } from "@features/workflow/components/trace/agent-prism";
+import type { TraceEntryStatus } from "@features/workflow/pages/workflow-canvas/helpers/trace";
+import type { TraceSpanMetadata } from "@features/workflow/pages/workflow-canvas/helpers/trace";
+
+interface TraceSummary {
+  spanCount: number;
+  totalTokens: number;
+}
+
+const SUMMARY_CARD_CLASS = "px-3 py-2";
+const SUMMARY_CARD_BODY_CLASS =
+  "flex w-full items-center justify-between gap-3 text-sm";
+
+export interface TraceTabContentProps {
+  status: TraceEntryStatus;
+  error?: string;
+  viewerData: TraceViewerData[];
+  activeViewer?: TraceViewerData;
+  onRefresh: () => void;
+  onSelectTrace?: (traceId: string) => void;
+  summary?: TraceSummary;
+  lastUpdatedAt?: string;
+  isLive: boolean;
+}
+
+const formatTimestamp = (timestamp?: string): string => {
+  if (!timestamp) {
+    return "Never";
+  }
+  try {
+    return formatDistanceToNow(new Date(timestamp), { addSuffix: true });
+  } catch {
+    return timestamp;
+  }
+};
+
+const renderArtifactActions = (span: TraceSpan) => {
+  const metadata = span.metadata as
+    | (TraceSpanMetadata & {
+        artifacts?: Array<{ id: string; downloadUrl?: string }>;
+      })
+    | undefined;
+  const artifacts = metadata?.artifacts ?? [];
+  if (artifacts.length === 0) {
+    return null;
+  }
+  return (
+    <div className="flex flex-wrap items-center gap-2">
+      {artifacts.map((artifact) => (
+        <Button
+          key={artifact.id}
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            if (artifact.downloadUrl) {
+              window.open(
+                artifact.downloadUrl,
+                "_blank",
+                "noopener,noreferrer",
+              );
+            }
+          }}
+        >
+          Download {artifact.id}
+        </Button>
+      ))}
+    </div>
+  );
+};
+
+export function TraceTabContent({
+  status,
+  error,
+  viewerData,
+  activeViewer,
+  onRefresh,
+  onSelectTrace,
+  summary,
+  lastUpdatedAt,
+  isLive,
+}: TraceTabContentProps) {
+  const isLoading = status === "loading" && !activeViewer;
+  const hasData = viewerData.length > 0;
+
+  return (
+    <div className="flex h-full flex-col gap-4">
+      <div className="flex flex-wrap items-center justify-between gap-3">
+        <div>
+          <h2 className="text-lg font-semibold">Execution trace</h2>
+          <p className="text-sm text-muted-foreground">
+            Inspect span hierarchy, metrics, and artifacts for the selected run.
+          </p>
+        </div>
+        <Button
+          size="sm"
+          variant="outline"
+          onClick={() => {
+            void onRefresh();
+          }}
+        >
+          <RefreshCw className="mr-2 size-4" /> Refresh
+        </Button>
+      </div>
+
+      {summary && (
+        <div className="grid gap-3 md:grid-cols-3">
+          <Card className={SUMMARY_CARD_CLASS}>
+            <div className={SUMMARY_CARD_BODY_CLASS}>
+              <div className="space-y-0.5">
+                <CardTitle className="text-xs font-semibold uppercase text-muted-foreground">
+                  Spans
+                </CardTitle>
+                <CardDescription className="text-xs text-muted-foreground">
+                  Recorded nodes and events
+                </CardDescription>
+              </div>
+              <span className="text-sm font-semibold text-foreground">
+                {summary.spanCount}
+              </span>
+            </div>
+          </Card>
+          <Card className={SUMMARY_CARD_CLASS}>
+            <div className={SUMMARY_CARD_BODY_CLASS}>
+              <div className="space-y-0.5">
+                <CardTitle className="text-xs font-semibold uppercase text-muted-foreground">
+                  Total tokens
+                </CardTitle>
+                <CardDescription className="text-xs text-muted-foreground">
+                  Input + output consumption
+                </CardDescription>
+              </div>
+              <span className="text-sm font-semibold text-foreground">
+                {summary.totalTokens}
+              </span>
+            </div>
+          </Card>
+          <Card className={SUMMARY_CARD_CLASS}>
+            <div className={SUMMARY_CARD_BODY_CLASS}>
+              <div className="space-y-0.5">
+                <CardTitle className="text-xs font-semibold uppercase text-muted-foreground">
+                  Last update
+                </CardTitle>
+                <CardDescription className="text-xs text-muted-foreground">
+                  {isLive ? "Live" : "Completed"}
+                </CardDescription>
+              </div>
+              <span className="text-xs font-semibold text-foreground">
+                {formatTimestamp(lastUpdatedAt)}
+              </span>
+            </div>
+          </Card>
+        </div>
+      )}
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Unable to load trace</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+
+      {isLoading && (
+        <div className="space-y-4">
+          <Skeleton className="h-12 w-full" />
+          <Skeleton className="h-72 w-full" />
+        </div>
+      )}
+
+      {!isLoading && !hasData && !error && (
+        <div className="flex flex-1 items-center justify-center rounded-md border border-dashed border-border text-sm text-muted-foreground">
+          Trace data will appear here once spans are recorded.
+        </div>
+      )}
+
+      {hasData && (
+        <div className="min-h-0 flex-1 overflow-hidden rounded-lg border border-border bg-background">
+          <TraceViewer
+            data={viewerData}
+            activeTraceId={activeViewer?.traceRecord.id}
+            onTraceSelect={(trace) => {
+              onSelectTrace?.(trace.id);
+            }}
+            detailsViewProps={{
+              headerActions: renderArtifactActions,
+            }}
+          />
+        </div>
+      )}
+    </div>
+  );
+}

package/src/features/workflow/pages/workflow-canvas/components/workflow-canvas-layout.tsx

@@ -0,0 +1,179 @@
+import React from "react";
+import { Tabs, TabsContent } from "@/design-system/ui/tabs";
+
+import TopNavigation from "@features/shared/components/top-navigation";
+import NodeInspector from "@features/workflow/components/panels/node-inspector";
+import WorkflowTabs from "@features/workflow/components/panels/workflow-tabs";
+import { CanvasChatBubble } from "@features/chatkit/components/canvas-chat-bubble";
+
+import type {
+  CanvasEdge,
+  CanvasNode,
+  NodeData,
+  NodeRuntimeCacheEntry,
+} from "@features/workflow/pages/workflow-canvas/helpers/types";
+import type { CanvasTabContentProps } from "@features/workflow/pages/workflow-canvas/components/canvas-tab-content";
+import type { ExecutionTabContentProps } from "@features/workflow/pages/workflow-canvas/components/execution-tab-content";
+import type { ReadinessTabContentProps } from "@features/workflow/pages/workflow-canvas/components/readiness-tab-content";
+import type { SettingsTabContentProps } from "@features/workflow/pages/workflow-canvas/components/settings-tab-content";
+
+import { CanvasTabContent } from "@features/workflow/pages/workflow-canvas/components/canvas-tab-content";
+import { ExecutionTabContent } from "@features/workflow/pages/workflow-canvas/components/execution-tab-content";
+import { TraceTabContent } from "@features/workflow/pages/workflow-canvas/components/trace-tab-content";
+import { ReadinessTabContent } from "@features/workflow/pages/workflow-canvas/components/readiness-tab-content";
+import { SettingsTabContent } from "@features/workflow/pages/workflow-canvas/components/settings-tab-content";
+
+interface NodeInspectorState {
+  selectedNode: CanvasNode | null;
+  nodes: CanvasNode[];
+  edges: CanvasEdge[];
+  onClose: () => void;
+  onSave: (nodeId: string, data: Partial<NodeData>) => void;
+  runtimeCache: Record<string, NodeRuntimeCacheEntry>;
+  onCacheRuntime: (nodeId: string, runtime: NodeRuntimeCacheEntry) => void;
+}
+
+interface ChatState {
+  isChatOpen: boolean;
+  chatTitle: string;
+  user: {
+    id: string;
+    name: string;
+    avatar: string;
+  };
+  ai: {
+    id: string;
+    name: string;
+    avatar: string;
+  };
+  activeChatNodeId: string | null;
+  workflowId: string | null;
+  backendBaseUrl: string | null;
+  handleChatResponseStart: () => void;
+  handleChatResponseEnd: () => void;
+  handleChatClientTool: (tool: unknown) => void;
+  getClientSecret: (currentSecret: string | null) => Promise<string>;
+  refreshSession: () => Promise<string>;
+  sessionStatus: "idle" | "loading" | "ready" | "error";
+  sessionError: string | null;
+  handleCloseChat: () => void;
+}
+
+interface WorkflowCanvasLayoutProps {
+  topNavigationProps: React.ComponentProps<typeof TopNavigation>;
+  tabsProps: {
+    activeTab: string;
+    onTabChange: (value: string) => void;
+    readinessAlertCount: number;
+  };
+  canvasProps: CanvasTabContentProps;
+  executionProps: ExecutionTabContentProps;
+  traceProps: React.ComponentProps<typeof TraceTabContent>;
+  readinessProps: ReadinessTabContentProps;
+  settingsProps: SettingsTabContentProps;
+  nodeInspector: NodeInspectorState | null;
+  chat: ChatState | null;
+}
+
+export function WorkflowCanvasLayout({
+  topNavigationProps,
+  tabsProps,
+  canvasProps,
+  executionProps,
+  traceProps,
+  readinessProps,
+  settingsProps,
+  nodeInspector,
+  chat,
+}: WorkflowCanvasLayoutProps) {
+  return (
+    <div className="flex flex-col h-screen overflow-hidden">
+      <TopNavigation {...topNavigationProps} />
+
+      <WorkflowTabs
+        activeTab={tabsProps.activeTab}
+        onTabChange={tabsProps.onTabChange}
+        readinessAlertCount={tabsProps.readinessAlertCount}
+      />
+
+      <div className="flex-1 flex flex-col min-h-0">
+        <Tabs
+          value={tabsProps.activeTab}
+          onValueChange={tabsProps.onTabChange}
+          className="w-full flex flex-col flex-1 min-h-0"
+        >
+          <TabsContent
+            value="canvas"
+            className="flex-1 m-0 p-0 overflow-hidden min-h-0"
+          >
+            <CanvasTabContent {...canvasProps} />
+          </TabsContent>
+
+          <TabsContent
+            value="execution"
+            className="flex-1 m-0 p-0 overflow-hidden min-h-0"
+          >
+            <ExecutionTabContent {...executionProps} />
+          </TabsContent>
+
+          <TabsContent
+            value="trace"
+            className="flex-1 m-0 p-4 overflow-hidden min-h-0"
+          >
+            <TraceTabContent {...traceProps} />
+          </TabsContent>
+
+          <TabsContent value="readiness" className="m-0 p-4 overflow-auto">
+            <ReadinessTabContent {...readinessProps} />
+          </TabsContent>
+
+          <TabsContent value="settings" className="m-0 p-4 overflow-auto">
+            <SettingsTabContent {...settingsProps} />
+          </TabsContent>
+        </Tabs>
+      </div>
+
+      {nodeInspector?.selectedNode && (
+        <NodeInspector
+          node={{
+            id: nodeInspector.selectedNode.id,
+            type: nodeInspector.selectedNode.type || "default",
+            data: nodeInspector.selectedNode.data,
+          }}
+          nodes={nodeInspector.nodes}
+          edges={nodeInspector.edges}
+          onClose={nodeInspector.onClose}
+          onSave={nodeInspector.onSave}
+          runtimeCache={nodeInspector.runtimeCache}
+          onCacheRuntime={nodeInspector.onCacheRuntime}
+          className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-50"
+        />
+      )}
+
+      {chat && (
+        <CanvasChatBubble
+          title={chat.chatTitle}
+          user={chat.user}
+          ai={chat.ai}
+          workflowId={chat.workflowId}
+          sessionPayload={{
+            workflowId: chat.workflowId,
+            workflowLabel: chat.chatTitle,
+            chatNodeId: chat.activeChatNodeId,
+          }}
+          backendBaseUrl={chat.backendBaseUrl}
+          getClientSecret={chat.getClientSecret}
+          sessionStatus={chat.sessionStatus}
+          sessionError={chat.sessionError}
+          onRetry={chat.refreshSession}
+          onResponseStart={chat.handleChatResponseStart}
+          onResponseEnd={chat.handleChatResponseEnd}
+          onClientTool={chat.handleChatClientTool}
+          onDismiss={chat.handleCloseChat}
+          onOpen={() => chat.setIsChatOpen(true)}
+          isExternallyOpen={chat.isChatOpen}
+        />
+      )}
+    </div>
+  );
+}