orcheo-studio 0.21.1

package/src/features/workflow/pages/workflow/hooks/use-workflow-chat.ts

@@ -0,0 +1,212 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { authFetch } from "@/lib/auth-fetch";
+import { buildBackendHttpUrl } from "@/lib/config";
+import {
+  requestWorkflowChatSession,
+  type WorkflowChatSession,
+} from "@features/chatkit/lib/workflow-session";
+import { recordChatTelemetry } from "@features/chatkit/lib/telemetry";
+
+export type ChatSessionStatus = "idle" | "loading" | "ready" | "error";
+
+type UseWorkflowChatArgs = {
+  workflowId: string | null | undefined;
+  backendBaseUrl: string | null;
+  userName: string;
+};
+
+const SESSION_REFRESH_BUFFER_MS = 30_000;
+
+export const useWorkflowChat = ({
+  workflowId,
+  backendBaseUrl,
+  userName,
+}: UseWorkflowChatArgs) => {
+  const [isChatOpen, setIsChatOpen] = useState(false);
+  const [activeChatNodeId, setActiveChatNodeId] = useState<string | null>(null);
+  const [chatTitle, setChatTitle] = useState("Chat");
+  const [sessionStatus, setSessionStatus] = useState<ChatSessionStatus>("idle");
+  const [sessionError, setSessionError] = useState<string | null>(null);
+  const sessionRef = useRef<WorkflowChatSession | null>(null);
+  const pendingSessionRef = useRef<Promise<string> | null>(null);
+  const previousWorkflowIdRef = useRef<string | null | undefined>(workflowId);
+
+  const resetSession = useCallback(() => {
+    sessionRef.current = null;
+    pendingSessionRef.current = null;
+    setSessionStatus("idle");
+    setSessionError(null);
+  }, []);
+
+  useEffect(() => {
+    if (workflowId === previousWorkflowIdRef.current) {
+      return;
+    }
+    previousWorkflowIdRef.current = workflowId;
+    resetSession();
+  }, [resetSession, workflowId]);
+
+  const isSessionValid = useCallback((session: WorkflowChatSession | null) => {
+    if (!session?.clientSecret) {
+      return false;
+    }
+    if (!session.expiresAt) {
+      return true;
+    }
+    return Date.now() + SESSION_REFRESH_BUFFER_MS < session.expiresAt;
+  }, []);
+
+  const refreshSession = useCallback(async () => {
+    if (!workflowId) {
+      const message = "Save the workflow before opening ChatKit.";
+      setSessionStatus("error");
+      setSessionError(message);
+      recordChatTelemetry("studio.chat.session.failure", {
+        reason: "missing_workflow",
+      });
+      throw new Error(message);
+    }
+
+    if (pendingSessionRef.current) {
+      return pendingSessionRef.current;
+    }
+
+    const pending = (async () => {
+      setSessionStatus("loading");
+      setSessionError(null);
+      try {
+        const session = await requestWorkflowChatSession(
+          workflowId,
+          backendBaseUrl ?? undefined,
+        );
+        sessionRef.current = session;
+        setSessionStatus("ready");
+        recordChatTelemetry("studio.chat.session.success", { workflowId });
+        return session.clientSecret;
+      } catch (error) {
+        const message =
+          error instanceof Error
+            ? error.message
+            : "Unable to start a ChatKit session.";
+        setSessionStatus("error");
+        setSessionError(message);
+        sessionRef.current = null;
+        recordChatTelemetry("studio.chat.session.failure", {
+          workflowId,
+          message,
+        });
+        throw error instanceof Error ? error : new Error(message);
+      } finally {
+        pendingSessionRef.current = null;
+      }
+    })();
+
+    pendingSessionRef.current = pending;
+    return pending;
+  }, [backendBaseUrl, workflowId]);
+
+  const getClientSecret = useCallback(
+    async (currentSecret: string | null) => {
+      void currentSecret;
+      const reusableSession = sessionRef.current;
+      if (reusableSession && isSessionValid(reusableSession)) {
+        return reusableSession.clientSecret;
+      }
+      return refreshSession();
+    },
+    [isSessionValid, refreshSession],
+  );
+
+  const handleOpenChat = useCallback(() => {
+    setChatTitle("Chat");
+    setActiveChatNodeId(null);
+    setIsChatOpen(true);
+    recordChatTelemetry("studio.chat.open", { workflowId });
+    void refreshSession();
+  }, [refreshSession, workflowId]);
+
+  const handleCloseChat = useCallback(() => {
+    setIsChatOpen(false);
+    setActiveChatNodeId(null);
+    recordChatTelemetry("studio.chat.close", { workflowId });
+  }, [workflowId]);
+
+  const handleChatResponseStart = useCallback(() => {}, []);
+
+  const handleChatResponseEnd = useCallback(() => {}, []);
+
+  const handleChatClientTool = useCallback(
+    async (toolCall: { name: string; params: Record<string, unknown> }) => {
+      if (toolCall.name !== "orcheo.run_workflow") {
+        return {};
+      }
+
+      if (!workflowId) {
+        throw new Error("Cannot trigger workflow without a workflow ID");
+      }
+
+      const params = toolCall.params ?? {};
+      const rawMessage =
+        typeof params.message === "string" ? params.message : "";
+      const threadId =
+        typeof params.threadId === "string"
+          ? params.threadId
+          : typeof params.thread_id === "string"
+            ? params.thread_id
+            : null;
+
+      const metadata = { ...(params as Record<string, unknown>) };
+      delete metadata.message;
+      delete metadata.threadId;
+      delete metadata.thread_id;
+
+      const response = await authFetch(
+        buildBackendHttpUrl(
+          `/api/chatkit/workflows/${workflowId}/trigger`,
+          backendBaseUrl,
+        ),
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            message: rawMessage,
+            actor: userName,
+            client_thread_id: threadId,
+            metadata,
+          }),
+        },
+      );
+
+      if (!response.ok) {
+        throw new Error("Failed to trigger workflow via ChatKit client tool");
+      }
+
+      const result = (await response.json()) as Record<string, unknown>;
+      return result;
+    },
+    [backendBaseUrl, userName, workflowId],
+  );
+
+  return {
+    isChatOpen,
+    setIsChatOpen,
+    activeChatNodeId,
+    setActiveChatNodeId,
+    chatTitle,
+    setChatTitle,
+    handleOpenChat,
+    handleCloseChat,
+    handleChatResponseStart,
+    handleChatResponseEnd,
+    handleChatClientTool,
+    getClientSecret,
+    refreshSession,
+    sessionStatus,
+    sessionError,
+    workflowId: workflowId ?? null,
+    backendBaseUrl,
+  };
+};

package/src/features/workflow/pages/workflow/hooks/use-workflow-credential-readiness.ts

@@ -0,0 +1,72 @@
+import { useCallback, useEffect, useState } from "react";
+
+import { fetchWorkflowCredentialReadiness } from "@features/workflow/lib/workflow-storage-api";
+import type { WorkflowCredentialReadinessResponse } from "@features/workflow/lib/workflow-storage.types";
+
+type UseWorkflowCredentialReadinessArgs = {
+  workflowId: string | null | undefined;
+  refreshKey?: unknown;
+};
+
+export type WorkflowCredentialReadiness = {
+  readiness: WorkflowCredentialReadinessResponse | null;
+  missingCredentials: string[];
+  isLoading: boolean;
+  refresh: () => void;
+};
+
+export const useWorkflowCredentialReadiness = ({
+  workflowId,
+  refreshKey,
+}: UseWorkflowCredentialReadinessArgs): WorkflowCredentialReadiness => {
+  const [readiness, setReadiness] =
+    useState<WorkflowCredentialReadinessResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [nonce, setNonce] = useState(0);
+
+  const refresh = useCallback(() => {
+    setNonce((current) => current + 1);
+  }, []);
+
+  useEffect(() => {
+    if (!workflowId) {
+      setReadiness(null);
+      setIsLoading(false);
+      return;
+    }
+
+    let isActive = true;
+    setIsLoading(true);
+
+    fetchWorkflowCredentialReadiness(workflowId)
+      .then((payload) => {
+        if (!isActive) {
+          return;
+        }
+        setReadiness(payload ?? null);
+      })
+      .catch(() => {
+        if (!isActive) {
+          return;
+        }
+        setReadiness(null);
+      })
+      .finally(() => {
+        if (!isActive) {
+          return;
+        }
+        setIsLoading(false);
+      });
+
+    return () => {
+      isActive = false;
+    };
+  }, [workflowId, nonce, refreshKey]);
+
+  return {
+    readiness,
+    missingCredentials: readiness?.missing_credentials ?? [],
+    isLoading,
+    refresh,
+  };
+};

package/src/features/workflow/pages/workflow/hooks/use-workflow-credentials.ts

@@ -0,0 +1,167 @@
+import { useEffect, useMemo, useState } from "react";
+
+import { authFetch } from "@/lib/auth-fetch";
+import { buildBackendHttpUrl } from "@/lib/config";
+import { toast } from "@/hooks/use-toast";
+import type {
+  Credential,
+  CredentialVaultEntryResponse,
+} from "@features/workflow/types/credential-vault";
+
+import {
+  createHandleAddCredential,
+  createHandleDeleteCredential,
+  createHandleRevealCredentialSecret,
+  createHandleUpdateCredential,
+} from "../handlers/credentials";
+
+type UseWorkflowCredentialsArgs = {
+  routeWorkflowId?: string;
+  currentWorkflowId: string | null;
+  backendBaseUrl: string | null;
+  userName: string;
+};
+
+export const useWorkflowCredentials = ({
+  routeWorkflowId,
+  currentWorkflowId,
+  backendBaseUrl,
+  userName,
+}: UseWorkflowCredentialsArgs) => {
+  const [credentials, setCredentials] = useState<Credential[]>([]);
+  const [isCredentialsLoading, setIsCredentialsLoading] = useState(true);
+
+  useEffect(() => {
+    const controller = new AbortController();
+    let isActive = true;
+
+    const fetchCredentials = async () => {
+      if (!isActive) {
+        return;
+      }
+
+      setIsCredentialsLoading(true);
+      try {
+        const url = new URL(
+          buildBackendHttpUrl("/api/credentials", backendBaseUrl),
+        );
+        if (routeWorkflowId) {
+          url.searchParams.set("workflow_id", routeWorkflowId);
+        }
+
+        const response = await authFetch(url.toString(), {
+          signal: controller.signal,
+        });
+
+        if (!response.ok) {
+          throw new Error(
+            `Failed to load credentials (status ${response.status})`,
+          );
+        }
+
+        const payload =
+          (await response.json()) as CredentialVaultEntryResponse[];
+
+        if (!isActive) {
+          return;
+        }
+
+        const mapped = payload.map<Credential>((entry) => ({
+          id: entry.id,
+          name: entry.name,
+          provider: entry.provider ?? entry.kind,
+          type: entry.provider ?? entry.kind,
+          createdAt: entry.created_at,
+          updatedAt: entry.updated_at,
+          owner: entry.owner ?? null,
+          access: entry.access,
+          secrets: undefined,
+          status: entry.status,
+          secretPreview: entry.secret_preview ?? null,
+        }));
+
+        setCredentials((previous) => {
+          const remoteIds = new Set(mapped.map((item) => item.id));
+          const localOnly = previous.filter((item) => !remoteIds.has(item.id));
+          return [...mapped, ...localOnly];
+        });
+      } catch (error) {
+        if (controller.signal.aborted) {
+          return;
+        }
+
+        console.error("Failed to load credential vault", error);
+        toast({
+          title: "Unable to load credentials",
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred while loading credentials.",
+          variant: "destructive",
+        });
+      } finally {
+        if (isActive) {
+          setIsCredentialsLoading(false);
+        }
+      }
+    };
+
+    fetchCredentials();
+
+    return () => {
+      isActive = false;
+      controller.abort();
+    };
+  }, [backendBaseUrl, routeWorkflowId]);
+
+  const handleAddCredential = useMemo(
+    () =>
+      createHandleAddCredential({
+        backendBaseUrl,
+        currentWorkflowId,
+        userName,
+        setCredentials,
+      }),
+    [backendBaseUrl, currentWorkflowId, setCredentials, userName],
+  );
+
+  const handleDeleteCredential = useMemo(
+    () =>
+      createHandleDeleteCredential({
+        backendBaseUrl,
+        currentWorkflowId,
+        setCredentials,
+      }),
+    [backendBaseUrl, currentWorkflowId, setCredentials],
+  );
+
+  const handleUpdateCredential = useMemo(
+    () =>
+      createHandleUpdateCredential({
+        backendBaseUrl,
+        currentWorkflowId,
+        userName,
+        setCredentials,
+      }),
+    [backendBaseUrl, currentWorkflowId, setCredentials, userName],
+  );
+
+  const handleRevealCredentialSecret = useMemo(
+    () =>
+      createHandleRevealCredentialSecret({
+        backendBaseUrl,
+        currentWorkflowId,
+        setCredentials,
+      }),
+    [backendBaseUrl, currentWorkflowId, setCredentials],
+  );
+
+  return {
+    credentials,
+    isCredentialsLoading,
+    handleAddCredential,
+    handleUpdateCredential,
+    handleDeleteCredential,
+    handleRevealCredentialSecret,
+  };
+};

package/src/features/workflow/pages/workflow/hooks/use-workflow-execution-state.ts

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+import type { WorkflowExecution } from "@features/workflow/pages/workflow/helpers/types";
+
+export function useWorkflowExecutionState() {
+  const [executions, setExecutions] = useState<WorkflowExecution[]>([]);
+  const [activeExecutionId, setActiveExecutionId] = useState<string | null>(
+    null,
+  );
+  const [isRunning, setIsRunning] = useState(false);
+
+  return {
+    executions,
+    setExecutions,
+    activeExecutionId,
+    setActiveExecutionId,
+    isRunning,
+    setIsRunning,
+  };
+}

package/src/features/workflow/pages/workflow/hooks/use-workflow-listeners.ts

@@ -0,0 +1,182 @@
+import { useEffect, useState } from "react";
+
+import { toast } from "@/hooks/use-toast";
+import {
+  fetchWorkflowListenerMetrics,
+  fetchWorkflowListeners,
+  pauseWorkflowListener,
+  resumeWorkflowListener,
+} from "@features/workflow/lib/workflow-storage-api";
+import type {
+  WorkflowListenerHealth,
+  WorkflowListenerMetricsResponse,
+} from "@features/workflow/lib/workflow-storage.types";
+
+type UseWorkflowListenersArgs = {
+  routeWorkflowId?: string;
+  currentWorkflowId: string | null;
+  workflowVersionCount: number;
+  actor: string;
+  enabled?: boolean;
+};
+
+type ListenerAction = "pause" | "resume";
+
+export function useWorkflowListeners({
+  routeWorkflowId,
+  currentWorkflowId,
+  workflowVersionCount,
+  actor,
+  enabled = true,
+}: UseWorkflowListenersArgs) {
+  const workflowId = currentWorkflowId ?? routeWorkflowId ?? null;
+  const [listeners, setListeners] = useState<WorkflowListenerHealth[]>([]);
+  const [metrics, setMetrics] =
+    useState<WorkflowListenerMetricsResponse | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const [activeSubscriptionId, setActiveSubscriptionId] = useState<
+    string | null
+  >(null);
+
+  useEffect(() => {
+    let isActive = true;
+
+    if (!enabled || !workflowId) {
+      setListeners([]);
+      setMetrics(null);
+      setIsLoading(false);
+      setIsRefreshing(false);
+      setActiveSubscriptionId(null);
+      return () => {
+        isActive = false;
+      };
+    }
+
+    const load = async () => {
+      if (!isActive) {
+        return;
+      }
+
+      setIsLoading(true);
+      try {
+        const [nextListeners, nextMetrics] = await Promise.all([
+          fetchWorkflowListeners(workflowId),
+          fetchWorkflowListenerMetrics(workflowId),
+        ]);
+        if (!isActive) {
+          return;
+        }
+        setListeners(nextListeners);
+        setMetrics(nextMetrics ?? null);
+      } catch (error) {
+        if (!isActive) {
+          return;
+        }
+        console.error("Failed to load workflow listeners", error);
+        toast({
+          title: "Unable to load listeners",
+          description:
+            error instanceof Error
+              ? error.message
+              : "An unexpected error occurred while loading listeners.",
+          variant: "destructive",
+        });
+      } finally {
+        if (isActive) {
+          setIsLoading(false);
+        }
+      }
+    };
+
+    void load();
+
+    return () => {
+      isActive = false;
+    };
+  }, [enabled, workflowId, workflowVersionCount]);
+
+  const refreshListeners = async () => {
+    if (!enabled || !workflowId) {
+      return;
+    }
+
+    setIsRefreshing(true);
+    try {
+      const [nextListeners, nextMetrics] = await Promise.all([
+        fetchWorkflowListeners(workflowId),
+        fetchWorkflowListenerMetrics(workflowId),
+      ]);
+      setListeners(nextListeners);
+      setMetrics(nextMetrics ?? null);
+    } catch (error) {
+      console.error("Failed to refresh workflow listeners", error);
+      toast({
+        title: "Unable to refresh listeners",
+        description:
+          error instanceof Error
+            ? error.message
+            : "An unexpected error occurred while refreshing listeners.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsRefreshing(false);
+    }
+  };
+
+  const updateListenerStatus = async (
+    subscriptionId: string,
+    action: ListenerAction,
+  ) => {
+    if (!workflowId) {
+      return;
+    }
+
+    setActiveSubscriptionId(subscriptionId);
+    try {
+      const updated =
+        action === "pause"
+          ? await pauseWorkflowListener(workflowId, subscriptionId, actor)
+          : await resumeWorkflowListener(workflowId, subscriptionId, actor);
+      setListeners((current) =>
+        current.map((item) =>
+          item.subscription_id === subscriptionId ? updated : item,
+        ),
+      );
+      toast({
+        title: action === "pause" ? "Listener paused" : "Listener resumed",
+        description: `${updated.node_name} is now ${updated.status}.`,
+      });
+      await refreshListeners();
+    } catch (error) {
+      console.error(`Failed to ${action} workflow listener`, error);
+      toast({
+        title:
+          action === "pause"
+            ? "Unable to pause listener"
+            : "Unable to resume listener",
+        description:
+          error instanceof Error
+            ? error.message
+            : "An unexpected error occurred while updating the listener.",
+        variant: "destructive",
+      });
+    } finally {
+      setActiveSubscriptionId(null);
+    }
+  };
+
+  return {
+    workflowId,
+    listeners,
+    metrics,
+    isLoading,
+    isRefreshing,
+    activeSubscriptionId,
+    refreshListeners,
+    pauseListener: (subscriptionId: string) =>
+      updateListenerStatus(subscriptionId, "pause"),
+    resumeListener: (subscriptionId: string) =>
+      updateListenerStatus(subscriptionId, "resume"),
+  };
+}