orcheo-canvas 0.0.1

package/src/hooks/use-toast.ts

@@ -0,0 +1,182 @@
+"use client";
+
+// Inspired by react-hot-toast library
+import * as React from "react";
+
+import type { ToastActionElement, ToastProps } from "@/design-system/ui/toast";
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = ToastProps & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: ToastActionElement;
+};
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type Action =
+  | {
+      type: "ADD_TOAST";
+      toast: ToasterToast;
+    }
+  | {
+      type: "UPDATE_TOAST";
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: "DISMISS_TOAST";
+      toastId?: ToasterToast["id"];
+    }
+  | {
+      type: "REMOVE_TOAST";
+      toastId?: ToasterToast["id"];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: "REMOVE_TOAST",
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case "ADD_TOAST":
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case "UPDATE_TOAST":
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === action.toast.id ? { ...t, ...action.toast } : t,
+        ),
+      };
+
+    case "DISMISS_TOAST": {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case "REMOVE_TOAST":
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, "id">;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: "UPDATE_TOAST",
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
+
+  dispatch({
+    type: "ADD_TOAST",
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
+  };
+}
+
+export { useToast, toast };

package/src/index.css

@@ -0,0 +1,95 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+@layer components {
+  .react-flow__controls {
+    @apply flex flex-col overflow-hidden rounded-xl border border-slate-200/80 bg-white/95 text-slate-700 shadow-lg backdrop-blur-sm;
+  }
+
+  .react-flow__controls-button {
+    @apply flex h-10 w-10 items-center justify-center border-b border-slate-200/70 text-slate-700 transition-colors duration-200 hover:bg-slate-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-500/40 focus-visible:ring-offset-2 focus-visible:ring-offset-white;
+  }
+
+  .react-flow__controls-button:last-child {
+    @apply border-b-0;
+  }
+
+  .react-flow__controls-button svg {
+    @apply text-current;
+  }
+
+  .dark .react-flow__controls {
+    @apply border-slate-800/80 bg-slate-900/90 text-slate-200 shadow-[0_18px_40px_rgba(0,0,0,0.65)];
+  }
+
+  .dark .react-flow__controls-button {
+    @apply border-slate-800/70 text-slate-400 hover:bg-slate-800 focus-visible:ring-slate-300/40 focus-visible:ring-offset-slate-900;
+  }
+}

package/src/lib/api.test.ts

@@ -0,0 +1,135 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { executeNode } from "./api";
+
+describe("executeNode", () => {
+  beforeEach(() => {
+    global.fetch = vi.fn();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  it("should successfully execute a node", async () => {
+    const mockResponse = {
+      status: "success",
+      result: { foo: "bar", count: 42 },
+      error: null,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockResponse,
+    });
+
+    const result = await executeNode({
+      node_config: {
+        type: "SetVariableNode",
+        name: "test_node",
+        variables: { foo: "bar", count: 42 },
+      },
+      inputs: {},
+    });
+
+    expect(result).toEqual(mockResponse);
+    expect(global.fetch).toHaveBeenCalledWith(
+      expect.stringContaining("/api/nodes/execute"),
+      expect.objectContaining({
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: expect.stringContaining("SetVariableNode"),
+      }),
+    );
+  });
+
+  it("should handle error responses", async () => {
+    const mockErrorResponse = {
+      status: "error",
+      result: null,
+      error: "Node execution failed",
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockErrorResponse,
+    });
+
+    const result = await executeNode({
+      node_config: {
+        type: "InvalidNode",
+        name: "test",
+      },
+      inputs: {},
+    });
+
+    expect(result.status).toBe("error");
+    expect(result.error).toBe("Node execution failed");
+  });
+
+  it("should throw error on HTTP failure", async () => {
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: false,
+      status: 400,
+      json: async () => ({ detail: "Bad Request" }),
+    });
+
+    await expect(
+      executeNode({
+        node_config: { type: "Test", name: "test" },
+        inputs: {},
+      }),
+    ).rejects.toThrow("Bad Request");
+  });
+
+  it("should include workflow_id when provided", async () => {
+    const mockResponse = {
+      status: "success",
+      result: {},
+      error: null,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockResponse,
+    });
+
+    const workflowId = "550e8400-e29b-41d4-a716-446655440000";
+    await executeNode({
+      node_config: { type: "Test", name: "test" },
+      inputs: {},
+      workflow_id: workflowId,
+    });
+
+    const callArgs = (global.fetch as ReturnType<typeof vi.fn>).mock.calls[0];
+    const body = JSON.parse(callArgs[1].body);
+    expect(body.workflow_id).toBe(workflowId);
+  });
+
+  it("should use custom base URL when provided", async () => {
+    const mockResponse = {
+      status: "success",
+      result: {},
+      error: null,
+    };
+
+    (global.fetch as ReturnType<typeof vi.fn>).mockResolvedValueOnce({
+      ok: true,
+      json: async () => mockResponse,
+    });
+
+    await executeNode(
+      {
+        node_config: { type: "Test", name: "test" },
+        inputs: {},
+      },
+      "http://custom-backend:9000",
+    );
+
+    expect(global.fetch).toHaveBeenCalledWith(
+      expect.stringContaining("http://custom-backend:9000"),
+      expect.any(Object),
+    );
+  });
+});

package/src/lib/api.ts

@@ -0,0 +1,45 @@
+import { buildBackendHttpUrl } from "./config";
+
+export interface NodeExecutionRequest {
+  node_config: Record<string, unknown>;
+  inputs?: Record<string, unknown>;
+  workflow_id?: string;
+}
+
+export interface NodeExecutionResponse {
+  status: "success" | "error";
+  result?: unknown;
+  error?: string;
+}
+
+/**
+ * Execute a single node in isolation for testing/preview purposes.
+ *
+ * @param request - Node execution request containing node_config, inputs, and optional workflow_id
+ * @param baseUrl - Optional backend base URL (defaults to configured backend URL)
+ * @returns Promise resolving to the node execution response
+ * @throws Error if the request fails
+ */
+export async function executeNode(
+  request: NodeExecutionRequest,
+  baseUrl?: string,
+): Promise<NodeExecutionResponse> {
+  const url = buildBackendHttpUrl("/api/nodes/execute", baseUrl);
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(request),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      detail: "Failed to execute node",
+    }));
+    throw new Error(errorData.detail || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}

package/src/lib/config.ts

@@ -0,0 +1,84 @@
+const DEFAULT_BACKEND_URL = "http://localhost:8000";
+
+const trimTrailingSlash = (value: string) => value.replace(/\/+$/, "");
+
+const isPermittedProtocol = (protocol: string): boolean =>
+  ["http:", "https:", "ws:", "wss:"].includes(protocol);
+
+const isValidUrl = (value: string): boolean => {
+  if (!value.trim()) {
+    return false;
+  }
+  try {
+    const parsed = new URL(value);
+    return isPermittedProtocol(parsed.protocol);
+  } catch {
+    return false;
+  }
+};
+
+const normaliseBaseUrl = (value: string): string => {
+  if (!value) {
+    return DEFAULT_BACKEND_URL;
+  }
+  const trimmed = value.trim();
+  if (trimmed.startsWith("http://") || trimmed.startsWith("https://")) {
+    return trimTrailingSlash(trimmed);
+  }
+  if (trimmed.startsWith("ws://") || trimmed.startsWith("wss://")) {
+    return trimTrailingSlash(trimmed);
+  }
+  return trimTrailingSlash(`http://${trimmed}`);
+};
+
+export const getBackendBaseUrl = (): string => {
+  const fromEnv = (import.meta.env?.VITE_ORCHEO_BACKEND_URL ?? "") as string;
+  const candidate = fromEnv || DEFAULT_BACKEND_URL;
+  const normalised = normaliseBaseUrl(candidate);
+
+  if (fromEnv && !isValidUrl(normalised)) {
+    console.warn(
+      "Invalid VITE_ORCHEO_BACKEND_URL provided, falling back to default backend URL.",
+    );
+    return normaliseBaseUrl(DEFAULT_BACKEND_URL);
+  }
+
+  return normalised;
+};
+
+const ensureHttpProtocol = (baseUrl: string): string => {
+  if (baseUrl.startsWith("http://") || baseUrl.startsWith("https://")) {
+    return baseUrl;
+  }
+  if (baseUrl.startsWith("ws://")) {
+    return `http://${baseUrl.slice(5)}`;
+  }
+  if (baseUrl.startsWith("wss://")) {
+    return `https://${baseUrl.slice(6)}`;
+  }
+  return `http://${baseUrl}`;
+};
+
+export const buildBackendHttpUrl = (path: string, baseUrl?: string): string => {
+  const resolved = ensureHttpProtocol(baseUrl ?? getBackendBaseUrl());
+  const normalised = trimTrailingSlash(resolved);
+  const suffix = path.startsWith("/") ? path : `/${path}`;
+  return `${normalised}${suffix}`;
+};
+
+export const buildWorkflowWebSocketUrl = (
+  workflowId: string,
+  baseUrl?: string,
+): string => {
+  const resolvedId = workflowId.trim();
+  if (!resolvedId) {
+    throw new Error("workflowId is required to create a WebSocket URL");
+  }
+  const resolved = normaliseBaseUrl(baseUrl ?? getBackendBaseUrl());
+  if (resolved.startsWith("ws://") || resolved.startsWith("wss://")) {
+    return `${trimTrailingSlash(resolved)}/ws/workflow/${resolvedId}`;
+  }
+  const protocol = resolved.startsWith("https://") ? "wss://" : "ws://";
+  const host = resolved.replace(/^https?:\/\//, "").replace(/^ws?:\/\//, "");
+  return `${protocol}${trimTrailingSlash(host)}/ws/workflow/${resolvedId}`;
+};

package/src/lib/theme.ts

@@ -0,0 +1,71 @@
+/**
+ * Theme initialization utility
+ *
+ * This module provides functions to initialize and manage theme settings
+ * across the application. It ensures theme preferences persist across
+ * page refreshes by reading from localStorage and applying the appropriate
+ * CSS classes before the React app renders.
+ */
+
+export type Theme = "light" | "dark" | "system";
+
+/**
+ * Initialize the theme on app load
+ * This should be called before React renders to prevent theme flashing
+ */
+export function initializeTheme(): void {
+  // Get saved theme preference from localStorage
+  const savedTheme = localStorage.getItem("theme") as Theme | null;
+  const theme = savedTheme || "system";
+
+  // Apply the theme
+  applyTheme(theme);
+
+  // Apply other preferences
+  const reducedMotion = localStorage.getItem("reducedMotion") === "true";
+  const highContrast = localStorage.getItem("highContrast") === "true";
+  const accentColor = localStorage.getItem("accentColor") || "blue";
+
+  document.documentElement.classList.toggle("reduce-motion", reducedMotion);
+  document.documentElement.classList.toggle("high-contrast", highContrast);
+  document.documentElement.setAttribute("data-accent", accentColor);
+}
+
+/**
+ * Apply a theme to the document
+ * @param theme - The theme to apply ("light", "dark", or "system")
+ */
+export function applyTheme(theme: Theme): void {
+  if (theme === "system") {
+    // Use system preference
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
+      .matches
+      ? "dark"
+      : "light";
+    document.documentElement.classList.toggle("dark", systemTheme === "dark");
+  } else {
+    // Use explicit theme
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }
+}
+
+/**
+ * Listen for system theme changes when using "system" theme
+ * @param callback - Function to call when system theme changes
+ * @returns Cleanup function to remove the listener
+ */
+export function listenToSystemTheme(
+  callback: (isDark: boolean) => void,
+): () => void {
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+  const handler = (e: MediaQueryListEvent) => {
+    callback(e.matches);
+  };
+
+  mediaQuery.addEventListener("change", handler);
+
+  return () => {
+    mediaQuery.removeEventListener("change", handler);
+  };
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import { initializeTheme } from "./lib/theme";
+
+// Initialize theme before React renders to prevent flash of wrong theme
+initializeTheme();
+
+// Make React and ReactDOM globally available immediately (not in useEffect)
+window.React = React;
+window.ReactDOM = ReactDOM;
+
+const root = createRoot(document.getElementById("root") as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals

package/src/setupTests.ts

@@ -0,0 +1,5 @@
+import "@testing-library/jest-dom/vitest";
+import "@/testing/mocks/chatkit";
+import { setupMockBackendFetch } from "@/testing/mocks/backend";
+
+setupMockBackendFetch();

package/src/test-utils/chatkit-stub.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+export const ChatKit = () => null;
+
+export const ChatKitProvider = ({ children }: { children?: ReactNode }) =>
+  children ?? null;
+
+export const useChatKit = () => ({
+  status: "disconnected" as const,
+  connect: async () => undefined,
+  disconnect: async () => undefined,
+  sendMessage: async () => undefined,
+  conversations: [],
+  messages: [],
+});