orcheo-studio 0.21.1

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.ts

@@ -0,0 +1,445 @@
+import { authFetch } from "./auth-fetch";
+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;
+}
+
+export interface PackageVersionStatus {
+  package: string;
+  current_version: string | null;
+  latest_version: string | null;
+  minimum_recommended_version: string | null;
+  release_notes_url: string | null;
+  update_available: boolean;
+}
+
+export interface SystemInfoResponse {
+  backend: PackageVersionStatus;
+  cli: PackageVersionStatus;
+  studio: PackageVersionStatus;
+  checked_at: string;
+  uploads_allowed: boolean;
+}
+
+export interface ActiveWorkspaceResponse {
+  workspace_id?: string;
+  slug: string;
+  name: string;
+  role: "owner" | "admin" | "editor" | "viewer";
+}
+
+export interface WorkspaceMembershipSummary {
+  workspace_id: string;
+  slug: string;
+  name: string;
+  role: "owner" | "admin" | "editor" | "viewer";
+  status: "active" | "suspended" | "deleted";
+}
+
+export interface WorkspaceMembershipsResponse {
+  memberships: WorkspaceMembershipSummary[];
+}
+
+export interface WorkspaceCreateRequest {
+  slug: string;
+  name: string;
+  owner_user_id?: string;
+}
+
+export interface WorkspaceResponse {
+  id: string;
+  slug: string;
+  name: string;
+  status: "active" | "suspended" | "deleted";
+}
+
+export interface DevLoginRequest {
+  provider?: string;
+  email?: string;
+  name?: string;
+}
+
+export interface DevLoginResponse {
+  provider: string;
+  subject: string;
+  display_name: 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 authFetch(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();
+}
+
+export async function getSystemInfo(
+  baseUrl?: string,
+): Promise<SystemInfoResponse> {
+  const url = buildBackendHttpUrl("/api/system/info", baseUrl);
+  const response = await authFetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      detail: "Failed to fetch system info",
+    }));
+    throw new Error(errorData.detail || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export async function getActiveWorkspace(
+  baseUrl?: string,
+): Promise<ActiveWorkspaceResponse> {
+  const url = buildBackendHttpUrl("/api/workspaces/active", baseUrl);
+  const response = await authFetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      detail: "Failed to fetch active workspace",
+    }));
+    throw new Error(errorData.detail || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export async function getMyWorkspaces(
+  baseUrl?: string,
+): Promise<WorkspaceMembershipsResponse> {
+  const url = buildBackendHttpUrl("/api/workspaces/me", baseUrl);
+  const response = await authFetch(url, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      detail: "Failed to fetch workspaces",
+    }));
+    throw new Error(errorData.detail || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export async function startDevLogin(
+  request: DevLoginRequest,
+  baseUrl?: string,
+): Promise<DevLoginResponse> {
+  const url = buildBackendHttpUrl("/api/auth/dev/login", baseUrl);
+  const response = await authFetch(url, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(request),
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      detail: "Failed to start developer login",
+    }));
+    throw new Error(errorData.detail || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export async function endDevLogin(baseUrl?: string): Promise<void> {
+  const url = buildBackendHttpUrl("/api/auth/dev/logout", baseUrl);
+  const response = await authFetch(url, {
+    method: "POST",
+  });
+
+  if (!response.ok && response.status !== 204) {
+    const errorData = await response.json().catch(() => ({
+      detail: "Failed to end developer login",
+    }));
+    throw new Error(errorData.detail || `HTTP ${response.status}`);
+  }
+}
+
+export async function createWorkspace(
+  request: WorkspaceCreateRequest,
+  baseUrl?: string,
+): Promise<WorkspaceResponse> {
+  return requestSystemJson<WorkspaceResponse>(
+    "/api/workspaces",
+    {
+      method: "POST",
+      body: JSON.stringify(request),
+    },
+    baseUrl,
+    { includeWorkspaceHeaders: false },
+  );
+}
+
+async function requestSystemJson<T>(
+  path: string,
+  init: RequestInit,
+  baseUrl?: string,
+  options: { includeWorkspaceHeaders?: boolean } = {},
+): Promise<T> {
+  const url = buildBackendHttpUrl(path, baseUrl);
+  const response = await authFetch(
+    url,
+    {
+      ...init,
+      headers: {
+        "Content-Type": "application/json",
+        ...(init.headers ?? {}),
+      },
+    },
+    options,
+  );
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      detail: "Failed to complete request",
+    }));
+    throw new Error(errorData.detail || `HTTP ${response.status}`);
+  }
+
+  return response.json();
+}
+
+export interface WorkspaceMember {
+  id: string;
+  workspace_id: string;
+  user_id: string;
+  user_name?: string;
+  role: "owner" | "admin" | "editor" | "viewer";
+  created_at: string;
+}
+
+export async function listWorkspaceMembers(
+  slug: string,
+  baseUrl?: string,
+): Promise<WorkspaceMember[]> {
+  return requestSystemJson<WorkspaceMember[]>(
+    `/api/workspaces/${slug}/members`,
+    { method: "GET" },
+    baseUrl,
+  );
+}
+
+export async function addWorkspaceMember(
+  slug: string,
+  request: { user_id: string; role: "owner" | "admin" | "editor" | "viewer" },
+  baseUrl?: string,
+): Promise<WorkspaceMember> {
+  return requestSystemJson<WorkspaceMember>(
+    `/api/workspaces/${slug}/members`,
+    { method: "POST", body: JSON.stringify(request) },
+    baseUrl,
+  );
+}
+
+export async function updateWorkspaceMemberRole(
+  slug: string,
+  userId: string,
+  role: "owner" | "admin" | "editor" | "viewer",
+  baseUrl?: string,
+): Promise<WorkspaceMember> {
+  return requestSystemJson<WorkspaceMember>(
+    `/api/workspaces/${slug}/members/${userId}`,
+    { method: "PATCH", body: JSON.stringify({ role }) },
+    baseUrl,
+  );
+}
+
+export async function removeWorkspaceMember(
+  slug: string,
+  userId: string,
+  baseUrl?: string,
+): Promise<void> {
+  const url = buildBackendHttpUrl(
+    `/api/workspaces/${slug}/members/${userId}`,
+    baseUrl,
+  );
+  const response = await authFetch(url, { method: "DELETE" });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => ({
+      detail: "Failed to remove workspace member",
+    }));
+    throw new Error(errorData.detail || `HTTP ${response.status}`);
+  }
+}
+
+export interface ServiceToken {
+  identifier: string;
+  secret?: string | null;
+  secret_preview?: string | null;
+  scopes: string[];
+  workspace_ids: string[];
+  issued_at: string | null;
+  expires_at: string | null;
+  last_used_at?: string | null;
+  use_count?: number | null;
+  revoked_at?: string | null;
+  revocation_reason?: string | null;
+  rotated_to?: string | null;
+  message?: string | null;
+}
+
+export interface ServiceTokenListResponse {
+  tokens: ServiceToken[];
+  total: number;
+}
+
+export interface CreateServiceTokenRequest {
+  identifier?: string;
+  scopes?: string[];
+  expires_in_seconds?: number | null;
+}
+
+const extractErrorMessage = (data: unknown, fallback: string): string => {
+  if (!data || typeof data !== "object" || !("detail" in data)) {
+    return fallback;
+  }
+  const detail = (data as { detail: unknown }).detail;
+  if (typeof detail === "string") {
+    return detail;
+  }
+  if (detail && typeof detail === "object") {
+    const record = detail as Record<string, unknown>;
+    if (typeof record.message === "string") {
+      return record.message;
+    }
+    const nested = record.error;
+    if (
+      nested &&
+      typeof nested === "object" &&
+      typeof (nested as Record<string, unknown>).message === "string"
+    ) {
+      return (nested as Record<string, string>).message;
+    }
+  }
+  return fallback;
+};
+
+async function serviceTokenRequest<T>(
+  path: string,
+  init: RequestInit,
+  fallbackError: string,
+  baseUrl?: string,
+): Promise<T> {
+  const url = buildBackendHttpUrl(path, baseUrl);
+  const response = await authFetch(url, {
+    ...init,
+    headers: {
+      "Content-Type": "application/json",
+      ...(init.headers ?? {}),
+    },
+  });
+
+  if (!response.ok) {
+    const errorData = await response.json().catch(() => null);
+    throw new Error(extractErrorMessage(errorData, fallbackError));
+  }
+
+  if (response.status === 204) {
+    return undefined as T;
+  }
+  return response.json();
+}
+
+export async function listServiceTokens(
+  baseUrl?: string,
+): Promise<ServiceTokenListResponse> {
+  return serviceTokenRequest<ServiceTokenListResponse>(
+    "/api/admin/service-tokens",
+    { method: "GET" },
+    "Failed to load service tokens",
+    baseUrl,
+  );
+}
+
+export async function createServiceToken(
+  request: CreateServiceTokenRequest,
+  baseUrl?: string,
+): Promise<ServiceToken> {
+  return serviceTokenRequest<ServiceToken>(
+    "/api/admin/service-tokens",
+    { method: "POST", body: JSON.stringify(request) },
+    "Failed to create service token",
+    baseUrl,
+  );
+}
+
+export async function rotateServiceToken(
+  tokenId: string,
+  overlapSeconds: number,
+  baseUrl?: string,
+): Promise<ServiceToken> {
+  return serviceTokenRequest<ServiceToken>(
+    `/api/admin/service-tokens/${encodeURIComponent(tokenId)}/rotate`,
+    {
+      method: "POST",
+      body: JSON.stringify({ overlap_seconds: overlapSeconds }),
+    },
+    "Failed to rotate service token",
+    baseUrl,
+  );
+}
+
+export async function revokeServiceToken(
+  tokenId: string,
+  reason: string,
+  baseUrl?: string,
+): Promise<void> {
+  await serviceTokenRequest<void>(
+    `/api/admin/service-tokens/${encodeURIComponent(tokenId)}`,
+    { method: "DELETE", body: JSON.stringify({ reason }) },
+    "Failed to revoke service token",
+    baseUrl,
+  );
+}

package/src/lib/auth-fetch.ts

@@ -0,0 +1,35 @@
+import {
+  getAccessToken,
+  getDevAuthSessionHeaderValue,
+} from "@features/auth/lib/auth-session";
+import { getWorkspaceSelectionHeaders } from "./workspace-session";
+
+export const authFetch = async (
+  input: RequestInfo | URL,
+  init: RequestInit = {},
+  options: { includeWorkspaceHeaders?: boolean } = {},
+): Promise<Response> => {
+  const headers = new Headers(init.headers ?? {});
+  const token = getAccessToken();
+  if (token && !headers.has("Authorization")) {
+    headers.set("Authorization", `Bearer ${token}`);
+  }
+  const devSession = getDevAuthSessionHeaderValue();
+  if (devSession && !headers.has("X-Orcheo-Dev-Session")) {
+    headers.set("X-Orcheo-Dev-Session", devSession);
+  }
+  if (options.includeWorkspaceHeaders ?? true) {
+    for (const [name, value] of Object.entries(
+      getWorkspaceSelectionHeaders(),
+    )) {
+      if (!headers.has(name)) {
+        headers.set(name, value);
+      }
+    }
+  }
+  return globalThis.fetch(input, {
+    ...init,
+    credentials: init.credentials ?? "include",
+    headers,
+  });
+};

package/src/lib/config.ts

@@ -0,0 +1,102 @@
+const DEFAULT_BACKEND_URL = "http://localhost:2025";
+
+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 getStudioVersion = (): string => __ORCHEO_STUDIO_VERSION__;
+
+export const buildWorkflowWebSocketUrl = (
+  workflowId: string,
+  baseUrl?: string,
+  authToken?: string | null,
+): string => {
+  const resolvedId = workflowId.trim();
+  if (!resolvedId) {
+    throw new Error("workflowId is required to create a WebSocket URL");
+  }
+  const resolved = normaliseBaseUrl(baseUrl ?? getBackendBaseUrl());
+  const search = authToken
+    ? `?${new URLSearchParams({ access_token: authToken }).toString()}`
+    : "";
+  if (resolved.startsWith("ws://") || resolved.startsWith("wss://")) {
+    return `${trimTrailingSlash(resolved)}/ws/workflow/${resolvedId}${search}`;
+  }
+  const protocol = resolved.startsWith("https://") ? "wss://" : "ws://";
+  const host = resolved.replace(/^https?:\/\//, "").replace(/^ws?:\/\//, "");
+  return `${protocol}${trimTrailingSlash(host)}/ws/workflow/${resolvedId}${search}`;
+};
+
+const WEBSOCKET_AUTH_PROTOCOL = "orcheo-auth";
+const WEBSOCKET_AUTH_PREFIX = "bearer.";
+
+export const buildWorkflowWebSocketProtocols = (
+  token?: string | null,
+): string[] | undefined => {
+  if (!token) {
+    return undefined;
+  }
+  return [WEBSOCKET_AUTH_PROTOCOL, `${WEBSOCKET_AUTH_PREFIX}${token}`];
+};