orcheo-canvas 0.2.7 → 0.2.9

package/.bumpversion.cfg

@@ -1,5 +1,5 @@
 [bumpversion]
-current_version = 0.2.7
+current_version = 0.2.9
 commit = true
 tag = true
 tag_name = canvas-v{new_version}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "orcheo-canvas",
   "private": false,
-  "version": "0.2.7",
+  "version": "0.2.9",
   "type": "module",
   "description": "Canvas UI for Orcheo workflow orchestration platform",
   "keywords": [

package/vite.config.ts

@@ -18,26 +18,34 @@ export default defineConfig({
     }
   },
   // Fix for CJS/ESM compatibility issues with React 19
-  // These packages are CommonJS but imported by ESM modules, causing issues in dev server
+  // Force pre-bundling of all dependencies to handle CJS->ESM conversion
   optimizeDeps: {
+    // Force re-optimization to ensure all deps are bundled
+    force: true,
+    // Only exclude test-related packages that shouldn't be in production
+    exclude: ['vitest', '@testing-library/react', '@testing-library/jest-dom', '@testing-library/user-event'],
+    // Explicitly include all known problematic CJS packages and their subpaths
     include: [
-      // Used by zustand, swr, @radix-ui
+      // React ecosystem
+      'react',
+      'react-dom',
+      'react-dom/client',
+      'react/jsx-runtime',
+      'react/jsx-dev-runtime',
+      // use-sync-external-store (used by zustand, swr, @radix-ui)
+      'use-sync-external-store',
       'use-sync-external-store/shim',
       'use-sync-external-store/shim/with-selector',
-      // Used by react-split, react-big-calendar, etc.
+      'use-sync-external-store/shim/with-selector.js',
+      // prop-types (used by many React libs)
       'prop-types',
-      'react-split',
-      // Used by @rjsf/utils and @rjsf/validator-ajv8
-      'jsonpointer',
-      'json-schema-merge-allof',
       'react-is',
+      // @rjsf dependencies
       'ajv',
       'ajv-formats',
-      // Used by react-big-calendar, antd, etc.
-      'dayjs',
-      'invariant',
-      'dom-helpers',
-      // Lodash submodules used by @rjsf
+      'jsonpointer',
+      'json-schema-merge-allof',
+      // lodash submodules used by @rjsf
       'lodash/get',
       'lodash/set',
       'lodash/has',
@@ -66,11 +74,27 @@ export default defineConfig({
       'lodash/setWith',
       'lodash/pickBy',
       'lodash/unset',
+      'lodash/defaultsDeep',
+      'lodash/flatten',
+      // Other CJS packages
+      'react-split',
+      'dom-helpers',
+      'dayjs',
+      'invariant',
+      'copy-to-clipboard',
+      'moment',
+      'moment-timezone',
+      'papaparse',
+      // zustand and related
+      'zustand',
+      'zustand/traditional',
+      'zustand/middleware',
     ]
   },
   build: {
     commonjsOptions: {
-      include: [/use-sync-external-store/, /node_modules/]
+      include: [/node_modules/],
+      transformMixedEsModules: true,
     }
   },
   server: {

package/src/App.test.tsx

@@ -1,10 +0,0 @@
-import { describe, expect, it } from "vitest";
-import { render, screen } from "@testing-library/react";
-import App from "./App";
-
-describe("App", () => {
-  it("renders the Orcheo Canvas navigation", () => {
-    render(<App />);
-    expect(screen.getByText(/Orcheo Canvas/i)).toBeInTheDocument();
-  });
-});

package/src/features/chatkit/lib/chatkit-client.test.ts

@@ -1,117 +0,0 @@
-import { afterEach, describe, expect, it, vi } from "vitest";
-import { buildPublicChatFetch } from "./chatkit-client";
-
-const originalFetch = window.fetch;
-
-afterEach(() => {
-  window.fetch = originalFetch;
-  vi.restoreAllMocks();
-});
-
-const createResponse = (status: number, body: unknown) =>
-  new Response(JSON.stringify(body), {
-    status,
-    headers: { "Content-Type": "application/json" },
-  });
-
-describe("buildPublicChatFetch", () => {
-  it("injects workflow id into JSON bodies", async () => {
-    const fetchMock = vi.fn(async () => createResponse(200, { ok: true }));
-    window.fetch = fetchMock as unknown as typeof window.fetch;
-
-    const handler = buildPublicChatFetch({
-      workflowId: "wf-123",
-      backendBaseUrl: "http://localhost:8000",
-      metadata: { workflow_name: "LangGraph" },
-    });
-
-    await handler("http://localhost:8000/api/chatkit", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ foo: "bar" }),
-    });
-
-    expect(fetchMock).toHaveBeenCalledTimes(1);
-    const [, options] = fetchMock.mock.calls[0]!;
-    expect(options?.credentials).toBe("include");
-
-    const payload = JSON.parse((options?.body as string) ?? "{}");
-    expect(payload.workflow_id).toBe("wf-123");
-    expect(payload.foo).toBe("bar");
-    expect(payload.metadata.workflow_id).toBe("wf-123");
-    expect(payload.metadata.workflow_name).toBe("LangGraph");
-  });
-
-  it("emits structured errors when the backend rejects a request", async () => {
-    const fetchMock = vi.fn(async () =>
-      createResponse(401, {
-        code: "chatkit.auth.oauth_required",
-        message: "login first",
-      }),
-    );
-    window.fetch = fetchMock as unknown as typeof window.fetch;
-
-    const onHttpError = vi.fn();
-    const handler = buildPublicChatFetch({
-      workflowId: "wf-123",
-      onHttpError,
-    });
-
-    await handler("http://localhost:8000/api/chatkit", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({}),
-    });
-
-    expect(onHttpError).toHaveBeenCalledWith({
-      status: 401,
-      message: "login first",
-      code: "chatkit.auth.oauth_required",
-    });
-  });
-
-  it("merges existing metadata without overwriting it", async () => {
-    const fetchMock = vi.fn(async () => createResponse(200, { ok: true }));
-    window.fetch = fetchMock as unknown as typeof window.fetch;
-
-    const handler = buildPublicChatFetch({
-      workflowId: "wf-789",
-      metadata: { injected: "value" },
-    });
-
-    await handler("http://localhost:8000/api/chatkit", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        metadata: { existing: "field" },
-      }),
-    });
-
-    const [, options] = fetchMock.mock.calls[0]!;
-    const payload = JSON.parse((options?.body as string) ?? "{}");
-    expect(payload.metadata).toMatchObject({
-      existing: "field",
-      injected: "value",
-      workflow_id: "wf-789",
-    });
-  });
-
-  it("does not inject Authorization headers by default", async () => {
-    const fetchMock = vi.fn(async () => createResponse(200, { ok: true }));
-    window.fetch = fetchMock as unknown as typeof window.fetch;
-
-    const handler = buildPublicChatFetch({
-      workflowId: "wf-222",
-    });
-
-    await handler("http://localhost:8000/api/chatkit", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({}),
-    });
-
-    const [, options] = fetchMock.mock.calls[0]!;
-    const headers = new Headers(options?.headers ?? {});
-    expect(headers.has("Authorization")).toBe(false);
-  });
-});

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

@@ -1,183 +0,0 @@
-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/lib/graph-config.integration.logic.test.ts

@@ -1,168 +0,0 @@
-import type { Edge, Node } from "@xyflow/react";
-import { describe, expect, it } from "vitest";
-
-import { buildGraphConfigFromCanvas } from "./graph-config";
-
-describe("buildGraphConfigFromCanvas integration - logic and utility nodes", () => {
-  it("serializes logic and utility nodes for backend consumption", async () => {
-    const nodes: Node[] = [
-      {
-        id: "prep-1",
-        type: "utility",
-        position: { x: -1, y: 0 },
-        data: {
-          label: "Prepare score",
-          backendType: "SetVariableNode",
-          variables: [
-            { name: "state.user.score", valueType: "number", value: "8" },
-          ],
-        },
-      } as Node,
-      {
-        id: "if-1",
-        type: "logic",
-        position: { x: 0, y: 0 },
-        data: {
-          label: "Decision",
-          backendType: "IfElseNode",
-          conditions: [
-            {
-              id: "cond-1",
-              left: "{{ state.user.score }}",
-              operator: "greater_than",
-              right: 5,
-              caseSensitive: false,
-            },
-            {
-              id: "cond-2",
-              left: true,
-              operator: "is_truthy",
-              right: null,
-              caseSensitive: true,
-            },
-          ],
-          conditionLogic: "and",
-        },
-      } as Node,
-      {
-        id: "set-1",
-        type: "utility",
-        position: { x: 1, y: 0 },
-        data: {
-          label: "Assign",
-          backendType: "SetVariableNode",
-          variables: [
-            { name: "profile.name", valueType: "string", value: "Ada" },
-            { name: "profile.score", valueType: "number", value: "42" },
-            {
-              name: "preferences",
-              valueType: "object",
-              value: { theme: "dark" },
-            },
-            {
-              name: "flags",
-              valueType: "array",
-              value: ["beta", "ops"],
-            },
-            { name: "isActive", valueType: "boolean", value: "true" },
-          ],
-        },
-      } as Node,
-      {
-        id: "delay-1",
-        type: "utility",
-        position: { x: 2, y: 0 },
-        data: {
-          label: "Delay",
-          backendType: "DelayNode",
-          durationSeconds: "2.5",
-        },
-      } as Node,
-    ];
-
-    const edges: Edge[] = [
-      { id: "prep-to-if", source: "prep-1", target: "if-1" } as Edge,
-      {
-        id: "if-to-set",
-        source: "if-1",
-        target: "set-1",
-        sourceHandle: "true",
-      } as Edge,
-      {
-        id: "if-to-delay",
-        source: "if-1",
-        target: "delay-1",
-        sourceHandle: "false",
-      } as Edge,
-      { id: "set-to-delay", source: "set-1", target: "delay-1" } as Edge,
-    ];
-
-    const { config, canvasToGraph, graphToCanvas, warnings } =
-      await buildGraphConfigFromCanvas(nodes, edges);
-
-    expect(warnings).toHaveLength(0);
-
-    const prepName = canvasToGraph["prep-1"];
-    const ifElseName = canvasToGraph["if-1"];
-    const setVariableName = canvasToGraph["set-1"];
-    const delayName = canvasToGraph["delay-1"];
-
-    expect(prepName).toBeDefined();
-    expect(ifElseName).toBeDefined();
-    expect(graphToCanvas[ifElseName]).toBe("if-1");
-
-    expect(config.nodes.some((node) => node.name === ifElseName)).toBe(false);
-    expect(config.edge_nodes).toBeDefined();
-
-    const ifElseNode = config.edge_nodes?.find(
-      (node) => node.name === ifElseName,
-    );
-    expect(ifElseNode).toBeDefined();
-    expect(ifElseNode).toMatchObject({
-      type: "IfElseNode",
-      condition_logic: "and",
-    });
-    expect(ifElseNode?.conditions).toEqual([
-      expect.objectContaining({
-        left: "{{ state.user.score }}",
-        operator: "greater_than",
-        right: 5,
-        case_sensitive: false,
-      }),
-      expect.objectContaining({
-        left: true,
-        operator: "is_truthy",
-        case_sensitive: true,
-      }),
-    ]);
-
-    const setVariableNode = config.nodes.find(
-      (node) => node.name === setVariableName,
-    );
-    expect(setVariableNode).toBeDefined();
-    expect(setVariableNode?.variables).toEqual({
-      "profile.name": "Ada",
-      "profile.score": 42,
-      preferences: { theme: "dark" },
-      flags: ["beta", "ops"],
-      isActive: true,
-    });
-
-    const delayNode = config.nodes.find((node) => node.name === delayName);
-    expect(delayNode).toMatchObject({
-      type: "DelayNode",
-      duration_seconds: 2.5,
-    });
-
-    expect(config.conditional_edges).toContainEqual({
-      source: prepName,
-      path: ifElseName,
-      mapping: { true: setVariableName, false: delayName },
-    });
-
-    expect(config.edges).toContainEqual({
-      source: setVariableName,
-      target: delayName,
-    });
-  });
-});

package/src/features/workflow/lib/graph-config.integration.start-end.test.ts

@@ -1,68 +0,0 @@
-import type { Edge, Node } from "@xyflow/react";
-import { describe, expect, it } from "vitest";
-
-import { buildGraphConfigFromCanvas } from "./graph-config";
-
-describe("buildGraphConfigFromCanvas integration - start/end filtering", () => {
-  it("filters out canvas start and end nodes from serialization", async () => {
-    const nodes: Node[] = [
-      {
-        id: "start-node",
-        type: "start",
-        position: { x: 0, y: 0 },
-        data: { label: "Workflow Start", type: "start" },
-      } as Node,
-      {
-        id: "set-var",
-        type: "function",
-        position: { x: 100, y: 0 },
-        data: {
-          label: "Set Variable",
-          backendType: "SetVariableNode",
-          variables: [
-            { name: "my_variable", valueType: "string", value: "sample" },
-            { name: "num", valueType: "number", value: 2 },
-          ],
-        },
-      } as Node,
-      {
-        id: "end-node",
-        type: "end",
-        position: { x: 200, y: 0 },
-        data: { label: "Workflow End", type: "end" },
-      } as Node,
-    ];
-
-    const edges: Edge[] = [
-      { id: "start-to-set", source: "start-node", target: "set-var" } as Edge,
-      { id: "set-to-end", source: "set-var", target: "end-node" } as Edge,
-    ];
-
-    const { config, canvasToGraph, warnings } =
-      await buildGraphConfigFromCanvas(nodes, edges);
-
-    expect(warnings).toHaveLength(0);
-    expect(canvasToGraph["start-node"]).toBeUndefined();
-    expect(canvasToGraph["end-node"]).toBeUndefined();
-
-    expect(canvasToGraph["set-var"]).toBeDefined();
-    const setVarName = canvasToGraph["set-var"];
-
-    expect(config.nodes).toHaveLength(3);
-    expect(config.nodes[0]).toMatchObject({ name: "START", type: "START" });
-    expect(config.nodes[1]).toMatchObject({
-      name: setVarName,
-      type: "SetVariableNode",
-    });
-    expect(config.nodes[2]).toMatchObject({ name: "END", type: "END" });
-
-    expect(config.edges).toContainEqual({
-      source: "START",
-      target: setVarName,
-    });
-    expect(config.edges).toContainEqual({
-      source: setVarName,
-      target: "END",
-    });
-  });
-});