orcheo-studio 0.21.1

package/src/lib/theme.ts

@@ -0,0 +1,109 @@
+/**
+ * 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";
+
+  applyReducedMotion(reducedMotion);
+  applyHighContrast(highContrast);
+  applyAccentColor(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");
+  }
+}
+
+/**
+ * Apply the reduced motion preference to the document root.
+ */
+export function applyReducedMotion(enabled: boolean): void {
+  document.documentElement.classList.toggle("reduce-motion", enabled);
+}
+
+/**
+ * Apply the high contrast preference to the document root.
+ */
+export function applyHighContrast(enabled: boolean): void {
+  document.documentElement.classList.toggle("high-contrast", enabled);
+}
+
+/**
+ * Apply the accent color preference to the document root.
+ */
+export function applyAccentColor(color: string): void {
+  document.documentElement.setAttribute("data-accent", color);
+}
+
+/**
+ * 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);
+  };
+}
+
+/**
+ * Keep the applied theme in sync with the OS color scheme while the stored
+ * preference is "system". Without this, switching the OS between light and
+ * dark only takes effect after a full page reload.
+ * @returns Cleanup function to remove the listener
+ */
+export function watchSystemTheme(): () => void {
+  return listenToSystemTheme(() => {
+    const savedTheme =
+      (localStorage.getItem("theme") as Theme | null) ?? "system";
+
+    if (savedTheme === "system") {
+      applyTheme("system");
+    }
+  });
+}

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/lib/workspace-routing.ts

@@ -0,0 +1,67 @@
+const RESERVED_PATH_SEGMENTS = new Set([
+  "auth",
+  "chat",
+  "login",
+  "profile",
+  "settings",
+  "workspace",
+]);
+
+const trimPathSegment = (value: string | null | undefined): string | null => {
+  const trimmed = value?.trim();
+  return trimmed ? trimmed : null;
+};
+
+export const getWorkspaceGalleryPath = (
+  workspaceSlug: string | null | undefined,
+): string => {
+  const slug = trimPathSegment(workspaceSlug);
+  return slug ? `/${slug}` : "/";
+};
+
+export const getWorkspacePathWithSlug = (
+  pathname: string,
+  workspaceSlug: string,
+): string => {
+  const slug = trimPathSegment(workspaceSlug);
+  if (!slug) {
+    return getWorkspaceGalleryPath(slug);
+  }
+
+  const pathSegments = pathname.split("/").filter(Boolean);
+  if (pathSegments.length === 0) {
+    return getWorkspaceGalleryPath(slug);
+  }
+
+  const [firstSegment, ...rest] = pathSegments;
+  if (RESERVED_PATH_SEGMENTS.has(firstSegment.toLowerCase())) {
+    return getWorkspaceGalleryPath(slug);
+  }
+
+  return `/${[slug, ...rest].join("/")}`;
+};
+
+export const getWorkspaceWorkflowPath = (
+  workspaceSlug: string | null | undefined,
+  workflowRef: string,
+): string => {
+  const slug = trimPathSegment(workspaceSlug);
+  const ref = workflowRef.trim();
+  if (!ref) {
+    return getWorkspaceGalleryPath(slug);
+  }
+  return slug ? `/${slug}/${ref}` : `/${ref}`;
+};
+
+export const getWorkspaceSlugFromPathname = (
+  pathname: string,
+): string | null => {
+  const firstSegment = pathname.split("/").filter(Boolean)[0] ?? null;
+  if (!firstSegment) {
+    return null;
+  }
+  if (RESERVED_PATH_SEGMENTS.has(firstSegment.toLowerCase())) {
+    return null;
+  }
+  return firstSegment;
+};

package/src/lib/workspace-session.ts

@@ -0,0 +1,66 @@
+const WORKSPACE_SLUG_KEY = "orcheo_studio_workspace_slug";
+const WORKSPACE_HEADER = "X-Orcheo-Workspace";
+
+const safeLocalStorageGet = (key: string): string | null => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    return window.localStorage.getItem(key);
+  } catch {
+    return null;
+  }
+};
+
+const safeLocalStorageSet = (key: string, value: string | null): void => {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  try {
+    if (value === null) {
+      window.localStorage.removeItem(key);
+      return;
+    }
+    window.localStorage.setItem(key, value);
+  } catch {
+    return;
+  }
+};
+
+const normalizeSlug = (value: string): string => value.trim();
+
+export const getWorkspaceHeaderName = (): string => WORKSPACE_HEADER;
+
+export const getSelectedWorkspaceSlug = (): string | null => {
+  const slug = safeLocalStorageGet(WORKSPACE_SLUG_KEY);
+  if (!slug) {
+    return null;
+  }
+  const normalized = normalizeSlug(slug);
+  return normalized || null;
+};
+
+export const setSelectedWorkspaceSlug = (slug: string | null): void => {
+  if (slug === null) {
+    safeLocalStorageSet(WORKSPACE_SLUG_KEY, null);
+  } else {
+    safeLocalStorageSet(WORKSPACE_SLUG_KEY, normalizeSlug(slug));
+  }
+};
+
+export const clearSelectedWorkspaceSlug = (): void => {
+  setSelectedWorkspaceSlug(null);
+};
+
+export const getWorkspaceSelectionHeaders = (): Record<string, string> => {
+  const slug = getSelectedWorkspaceSlug();
+  if (!slug) {
+    return {};
+  }
+
+  return {
+    [getWorkspaceHeaderName()]: slug,
+  };
+};

package/src/lib/workspace-slug.ts

@@ -0,0 +1,10 @@
+const WORKSPACE_SLUG_PATTERN = /[^a-z0-9_-]+/g;
+
+export function slugifyWorkspace(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(WORKSPACE_SLUG_PATTERN, "-")
+    .replace(/-+/g, "-")
+    .replace(/^-|-$/g, "");
+}

package/src/main.tsx

@@ -0,0 +1,28 @@
+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, watchSystemTheme } from "./lib/theme";
+
+// Initialize theme before React renders to prevent flash of wrong theme
+initializeTheme();
+
+// Keep the theme in sync with the OS color scheme when "system" is selected,
+// so light/dark switches apply live without requiring a page refresh.
+watchSystemTheme();
+
+// 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/vite-env.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_ORCHEO_BACKEND_URL?: string;
+  readonly VITE_ORCHEO_CHATKIT_DOMAIN_KEY?: string;
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv;
+}
+
+declare const __ORCHEO_STUDIO_VERSION__: string;
+
+declare module "*.py?raw" {
+  const content: string;
+  export default content;
+}

package/tailwind.config.js

@@ -0,0 +1,153 @@
+import tailwindcssAnimate from "tailwindcss-animate";
+
+const agentPrismPrefix = "agentprism";
+const agentPrismTokens = [
+  "background",
+  "foreground",
+  "primary",
+  "primary-foreground",
+  "primary",
+  "primary-foreground",
+  "secondary",
+  "secondary-foreground",
+  "muted",
+  "muted-foreground",
+  "accent",
+  "accent-foreground",
+  "brand",
+  "brand-foreground",
+  "brand-secondary",
+  "brand-secondary-foreground",
+  "border",
+  "border-subtle",
+  "border-strong",
+  "border-inverse",
+  "success",
+  "success-muted",
+  "success-muted-foreground",
+  "error",
+  "error-muted",
+  "error-muted-foreground",
+  "warning",
+  "warning-muted",
+  "warning-muted-foreground",
+  "pending",
+  "pending-muted",
+  "pending-muted-foreground",
+  "code-string",
+  "code-number",
+  "code-key",
+  "code-base",
+  "badge-default",
+  "badge-default-foreground",
+  "avatar-llm",
+  "badge-llm",
+  "badge-llm-foreground",
+  "timeline-llm",
+  "avatar-agent",
+  "badge-agent",
+  "badge-agent-foreground",
+  "timeline-agent",
+  "avatar-tool",
+  "badge-tool",
+  "badge-tool-foreground",
+  "timeline-tool",
+  "avatar-chain",
+  "badge-chain",
+  "badge-chain-foreground",
+  "timeline-chain",
+  "avatar-retrieval",
+  "badge-retrieval",
+  "badge-retrieval-foreground",
+  "timeline-retrieval",
+  "avatar-embedding",
+  "badge-embedding",
+  "badge-embedding-foreground",
+  "timeline-embedding",
+  "avatar-guardrail",
+  "badge-guardrail",
+  "badge-guardrail-foreground",
+  "timeline-guardrail",
+  "avatar-create-agent",
+  "badge-create-agent",
+  "badge-create-agent-foreground",
+  "timeline-create-agent",
+  "avatar-span",
+  "badge-span",
+  "badge-span-foreground",
+  "timeline-span",
+  "avatar-event",
+  "badge-event",
+  "badge-event-foreground",
+  "timeline-event",
+  "avatar-unknown",
+  "badge-unknown",
+  "badge-unknown-foreground",
+  "timeline-unknown",
+];
+
+const agentPrismTailwindColors = Object.fromEntries(
+  agentPrismTokens.map((tokenName) => [
+    `agentprism-${tokenName}`,
+    `oklch(var(--${agentPrismPrefix}-${tokenName}) / <alpha-value>)`,
+  ]),
+);
+
+/** @type {import('tailwindcss').Config} */
+export default {
+  darkMode: ["class"],
+  content: ["./main.tsx", "./src/**/*.{js,ts,jsx,tsx}"],
+  theme: {
+    extend: {
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          1: "hsl(var(--chart-1))",
+          2: "hsl(var(--chart-2))",
+          3: "hsl(var(--chart-3))",
+          4: "hsl(var(--chart-4))",
+          5: "hsl(var(--chart-5))",
+        },
+        ...agentPrismTailwindColors,
+      },
+    },
+  },
+  plugins: [tailwindcssAnimate],
+};

package/tsconfig.app.json

@@ -0,0 +1,30 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@lib/*": ["src/lib/*"],
+      "@design-system/*": ["src/design-system/*"],
+      "@features/*": ["src/features/*"]
+    },
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "types": ["@openai/chatkit"]
+  },
+  "include": ["src"]
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "files": [],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+      "@lib/*": ["src/lib/*"],
+      "@design-system/*": ["src/design-system/*"],
+      "@features/*": ["src/features/*"]
+    }
+  },
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

package/tsconfig.node.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "types": ["node"]
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,122 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import path from 'path'
+import { fileURLToPath } from 'url'
+import { readFileSync } from 'fs'
+
+// ES Module equivalent of __dirname
+const __dirname = path.dirname(fileURLToPath(import.meta.url))
+const packageJsonPath = path.resolve(__dirname, './package.json')
+const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8')) as {
+  version?: string
+}
+const studioVersion = packageJson.version ?? '0.0.0'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  define: {
+    __ORCHEO_STUDIO_VERSION__: JSON.stringify(studioVersion),
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+      '@lib': path.resolve(__dirname, './src/lib'),
+      '@design-system': path.resolve(__dirname, './src/design-system'),
+      '@features': path.resolve(__dirname, './src/features'),
+    }
+  },
+  // Fix for CJS/ESM compatibility issues with React 19
+  // 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: [
+      // 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',
+      'use-sync-external-store/shim/with-selector.js',
+      // prop-types (used by many React libs)
+      'prop-types',
+      'react-is',
+      // @rjsf dependencies
+      'ajv',
+      'ajv-formats',
+      'jsonpointer',
+      'json-schema-merge-allof',
+      // lodash submodules used by @rjsf
+      'lodash/get',
+      'lodash/set',
+      'lodash/has',
+      'lodash/omit',
+      'lodash/pick',
+      'lodash/merge',
+      'lodash/cloneDeep',
+      'lodash/isEmpty',
+      'lodash/isObject',
+      'lodash/isString',
+      'lodash/isNumber',
+      'lodash/isNil',
+      'lodash/isPlainObject',
+      'lodash/forEach',
+      'lodash/toPath',
+      'lodash/uniqueId',
+      'lodash/keys',
+      'lodash/union',
+      'lodash/uniq',
+      'lodash/times',
+      'lodash/reduce',
+      'lodash/transform',
+      'lodash/difference',
+      'lodash/flattenDeep',
+      'lodash/isEqualWith',
+      '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',
+      // @braintree/sanitize-url (CJS transitive dep of mermaid)
+      '@braintree/sanitize-url',
+    ]
+  },
+  build: {
+    commonjsOptions: {
+      include: [/node_modules/],
+      transformMixedEsModules: true,
+    }
+  },
+  server: {
+    port: 2026,
+    hmr: process.env.VITE_DISABLE_HMR === 'true' ? false : undefined,
+    allowedHosts: [
+      'localhost',
+      ...((process.env.VITE_ORCHEO_ALLOWED_HOSTS || '')
+        .split(',')
+        .map((h: string) => h.trim())
+        .filter(Boolean))
+    ]
+  }
+})