@invect/ui 0.0.1

package/src/api/credentials.api.ts

@@ -0,0 +1,197 @@
+// Credential-related React Query hooks
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useApiClient } from '../contexts/ApiContext';
+import { queryKeys, getErrorMessage } from './query-keys';
+import type { CredentialFilters, CreateCredentialInput, UpdateCredentialInput } from './types';
+
+// Credential Queries
+export function useCredentials(filters?: CredentialFilters, options?: { enabled?: boolean }) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.credentials(filters),
+    queryFn: () => apiClient.listCredentials(filters),
+    staleTime: 1000 * 60 * 5,
+    enabled: options?.enabled ?? true,
+  });
+}
+
+export function useCredential(id: string) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.credential(id),
+    queryFn: () => apiClient.getCredential(id),
+    enabled: Boolean(id),
+    staleTime: 1000 * 60,
+  });
+}
+
+export function useCredentialUsage(id: string, enabled: boolean = true) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.credentialUsage(id),
+    queryFn: () => apiClient.getCredentialUsage(id),
+    enabled: enabled && Boolean(id),
+    staleTime: 1000 * 60,
+  });
+}
+
+// Credential Mutations
+export function useCreateCredential() {
+  const apiClient = useApiClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (input: CreateCredentialInput) => apiClient.createCredential(input),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['credentials'] });
+    },
+    onError: (error) => {
+      console.error('Error creating credential:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useUpdateCredential() {
+  const apiClient = useApiClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: UpdateCredentialInput }) =>
+      apiClient.updateCredential(id, data),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: ['credentials'] });
+      queryClient.invalidateQueries({ queryKey: queryKeys.credential(id) });
+    },
+    onError: (error) => {
+      console.error('Error updating credential:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useDeleteCredential() {
+  const apiClient = useApiClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => apiClient.deleteCredential(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['credentials'] });
+    },
+    onError: (error) => {
+      console.error('Error deleting credential:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useTestCredential() {
+  const apiClient = useApiClient();
+
+  return useMutation({
+    mutationFn: (id: string) => apiClient.testCredential(id),
+    onError: (error) => {
+      console.error('Error testing credential:', getErrorMessage(error));
+    },
+  });
+}
+
+// Test Credential Request Mutation (for testing API connections)
+export function useTestCredentialRequest() {
+  const apiClient = useApiClient();
+
+  return useMutation({
+    mutationFn: (params: {
+      url: string;
+      method: 'GET' | 'POST' | 'PUT' | 'DELETE' | 'PATCH';
+      headers?: Record<string, string>;
+      body?: string;
+    }) => apiClient.testCredentialRequest(params),
+    onError: (error) => {
+      console.error('Error testing credential request:', getErrorMessage(error));
+    },
+  });
+}
+
+// OAuth2 Queries
+export function useOAuth2Providers() {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: ['oauth2', 'providers'],
+    queryFn: () => apiClient.getOAuth2Providers(),
+    staleTime: 1000 * 60 * 60, // 1 hour - providers don't change
+  });
+}
+
+export function useOAuth2Provider(providerId: string) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: ['oauth2', 'provider', providerId],
+    queryFn: () => apiClient.getOAuth2Provider(providerId),
+    enabled: Boolean(providerId),
+    staleTime: 1000 * 60 * 60,
+  });
+}
+
+// OAuth2 Mutations
+export function useStartOAuth2Flow() {
+  const apiClient = useApiClient();
+
+  return useMutation({
+    mutationFn: (params: {
+      providerId?: string;
+      clientId?: string;
+      clientSecret?: string;
+      redirectUri: string;
+      scopes?: string[];
+      returnUrl?: string;
+      credentialName?: string;
+      existingCredentialId?: string;
+    }) => apiClient.startOAuth2Flow(params),
+    onError: (error) => {
+      console.error('Error starting OAuth2 flow:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useHandleOAuth2Callback() {
+  const apiClient = useApiClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (params: {
+      code: string;
+      state: string;
+      clientId?: string;
+      clientSecret?: string;
+      redirectUri?: string;
+    }) => apiClient.handleOAuth2Callback(params),
+    onSuccess: () => {
+      // Invalidate both the list and all individual credential queries
+      // so the detail dialog picks up the new tokens
+      queryClient.invalidateQueries({ queryKey: ['credentials'] });
+    },
+    onError: (error) => {
+      console.error('Error handling OAuth2 callback:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useRefreshOAuth2Credential() {
+  const apiClient = useApiClient();
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (credentialId: string) => apiClient.refreshOAuth2Credential(credentialId),
+    onSuccess: (_, credentialId) => {
+      queryClient.invalidateQueries({ queryKey: ['credentials'] });
+      queryClient.invalidateQueries({ queryKey: queryKeys.credential(credentialId) });
+    },
+    onError: (error) => {
+      console.error('Error refreshing OAuth2 credential:', getErrorMessage(error));
+    },
+  });
+}

package/src/api/executions.api.ts

@@ -0,0 +1,228 @@
+// Execution-related React Query hooks
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMemo } from 'react';
+import { useApiClient } from '../contexts/ApiContext';
+import { queryKeys, getErrorMessage } from './query-keys';
+import { ValidationError } from './types';
+import { type FlowRun, type FlowInputs } from '@invect/core/types';
+
+// Execution Queries
+// NOTE: Real-time updates are provided by useFlowRunStream (SSE).
+// These hooks only do an initial fetch; the stream writes into the same cache keys.
+
+export function useFlowRuns(flowId: string) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.executions(flowId),
+    queryFn: () => apiClient.getFlowRunsByFlowId(flowId),
+    enabled: !!flowId,
+  });
+}
+
+export function useFlowRun(id: string) {
+  const apiClient = useApiClient();
+  return useQuery({
+    queryKey: queryKeys.flowRun(id),
+    queryFn: () => apiClient.getFlowRun(id),
+    enabled: !!id,
+  });
+}
+
+export function useNodeExecutions(flowRunId: string) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.nodeExecutions(flowRunId),
+    queryFn: () => apiClient.getNodeExecutionsByFlowRun(flowRunId),
+    enabled: !!flowRunId,
+  });
+}
+
+export function useLatestFlowRun(flowId: string) {
+  const { data: executionsResponse } = useFlowRuns(flowId);
+  const executions = executionsResponse?.data || [];
+
+  const latestExecution = useMemo(() => {
+    if (!executions.length) {
+      return null;
+    }
+    return executions.sort(
+      (a: FlowRun, b: FlowRun) => new Date(b.startedAt).getTime() - new Date(a.startedAt).getTime(),
+    )[0];
+  }, [executions]);
+
+  return useFlowRun(latestExecution?.id || '');
+}
+
+export function useListFlowRuns(
+  flowId?: string,
+  status?: string,
+  page?: number,
+  limit?: number,
+  sortBy?: string,
+  sortOrder?: 'asc' | 'desc',
+) {
+  const apiClient = useApiClient();
+
+  const filter: Record<string, string[]> = {};
+  if (flowId) {
+    filter.flowId = [flowId];
+  }
+  if (status) {
+    filter.status = [status];
+  }
+
+  const queryOptions = {
+    filter: Object.keys(filter).length > 0 ? filter : undefined,
+    pagination: page && limit ? { page, limit } : undefined,
+    sort: sortBy && sortOrder ? { sortBy: sortBy as keyof FlowRun, sortOrder } : undefined,
+  };
+
+  return useQuery({
+    queryKey: queryKeys.allExecutions(flowId, status, page, limit, sortBy, sortOrder),
+    queryFn: () => apiClient.getAllFlowRuns(queryOptions),
+    staleTime: 1000 * 60 * 2, // 2 minutes
+    retry: (failureCount, error) => {
+      if (failureCount >= 2) {
+        return false;
+      }
+      if (error instanceof Error && error.message.includes('4')) {
+        return false;
+      }
+      return true;
+    },
+  });
+}
+
+// Execution Mutations
+export function useExecuteFlow() {
+  const apiClient = useApiClient();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: ({
+      flowId,
+      inputs,
+      useBatchProcessing,
+    }: {
+      flowId: string;
+      inputs?: FlowInputs;
+      useBatchProcessing?: boolean;
+    }) =>
+      apiClient.executeFlow(flowId, inputs, {
+        version: 'latest',
+        useBatchProcessing: useBatchProcessing,
+      }),
+    onSuccess: (_, { flowId }) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.executions(flowId) });
+    },
+    onError: (error) => {
+      console.error('Error executing flow:', getErrorMessage(error));
+
+      if (error instanceof ValidationError) {
+        console.log('🔍 Flow Execution Validation Error Details:');
+        console.log('🔍 - isValid:', error.validationResult.isValid);
+        console.log('🔍 - warnings:', error.validationResult.warnings);
+
+        if (!error.validationResult.isValid) {
+          console.log('🔍 - errors:', error.validationResult.errors);
+
+          error.validationResult.errors.forEach((validationError, index) => {
+            console.log(`🔍 Execution Error ${index + 1}:`, {
+              nodeId: validationError.nodeId,
+              message: validationError.message,
+              type: validationError.type,
+              severity: validationError.severity,
+              additionalContext: validationError.additionalContext,
+            });
+          });
+        }
+      }
+    },
+  });
+}
+
+// Execution Control Mutations
+export function usePauseFlowRun() {
+  const queryClient = useQueryClient();
+  const apiClient = useApiClient();
+  return useMutation({
+    mutationFn: ({ executionId, reason }: { executionId: string; reason?: string }) =>
+      apiClient.pauseFlowRun(executionId, reason),
+    onSuccess: (_, { executionId }) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.flowRun(executionId) });
+    },
+    onError: (error) => {
+      console.error('Failed to pause execution:', error);
+    },
+  });
+}
+
+export function useResumeFlowRun() {
+  const queryClient = useQueryClient();
+  const apiClient = useApiClient();
+  return useMutation({
+    mutationFn: (executionId: string) => apiClient.resumeFlowRun(executionId),
+    onSuccess: (_, executionId) => {
+      queryClient.invalidateQueries({ queryKey: ['executions'] });
+      queryClient.invalidateQueries({ queryKey: queryKeys.flowRun(executionId) });
+    },
+    onError: (error) => {
+      console.error('Failed to resume execution:', error);
+    },
+  });
+}
+
+export function useCancelFlowRun() {
+  const queryClient = useQueryClient();
+  const apiClient = useApiClient();
+  return useMutation({
+    mutationFn: (executionId: string) => apiClient.cancelFlowRun(executionId),
+    onSuccess: (_, executionId) => {
+      queryClient.invalidateQueries({ queryKey: ['executions'] });
+      queryClient.invalidateQueries({ queryKey: queryKeys.flowRun(executionId) });
+    },
+    onError: (error) => {
+      console.error('Failed to cancel execution:', error);
+    },
+  });
+}
+
+// Execute Flow To Node Mutation
+export function useExecuteFlowToNode() {
+  const apiClient = useApiClient();
+
+  return useMutation({
+    mutationFn: (params: {
+      flowId: string;
+      nodeId: string;
+      inputs?: Record<string, unknown>;
+      options?: { useBatchProcessing?: boolean };
+    }) =>
+      apiClient.executeFlowToNode(
+        params.flowId,
+        params.nodeId,
+        params.inputs || {},
+        params.options,
+      ),
+    onError: (error) => {
+      console.error('Error executing flow to node:', getErrorMessage(error));
+    },
+  });
+}
+
+// Test Node Mutation
+export function useTestNode() {
+  const apiClient = useApiClient();
+
+  return useMutation({
+    mutationFn: (params: {
+      nodeType: string;
+      params: Record<string, unknown>;
+      inputs: Record<string, unknown>;
+    }) => apiClient.testNode(params.nodeType, params.params, params.inputs),
+    onError: (error) => {
+      console.error('Error testing node:', getErrorMessage(error));
+    },
+  });
+}

package/src/api/flows.api.ts

@@ -0,0 +1,195 @@
+// Flow-related React Query hooks
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useApiClient } from '../contexts/ApiContext';
+import { queryKeys, getErrorMessage } from './query-keys';
+import { type ReactFlowDataOptions } from './types';
+import {
+  type CreateFlowDto,
+  type CreateFlowVersionDto,
+  type QueryOptions,
+  type Flow,
+  type FlowVersion,
+  type ReactFlowData,
+  type InvectDefinition,
+} from '@invect/core/types';
+
+export function useDashboardStats() {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.dashboardStats,
+    queryFn: () => apiClient.getDashboardStats(),
+    staleTime: 1000 * 30, // 30 seconds
+    refetchInterval: 1000 * 60, // Refresh every minute
+  });
+}
+
+export function useFlows(options?: QueryOptions<Flow>) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: [...queryKeys.flows, options],
+    queryFn: () => apiClient.getFlows(options),
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    retry: (failureCount, error) => {
+      if (failureCount >= 2) {
+        return false;
+      }
+      if (error instanceof Error && error.message.includes('4')) {
+        return false;
+      }
+      return true;
+    },
+  });
+}
+
+export function useFlow(id: string) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.flow(id),
+    queryFn: () => apiClient.getFlow(id),
+    enabled: !!id,
+    staleTime: 1000 * 30, // 30 seconds - reduced to ensure fresh data after mutations
+    retry: (failureCount, error) => {
+      if (failureCount >= 2) {
+        return false;
+      }
+      if (error instanceof Error && error.message.includes('4')) {
+        return false;
+      }
+      return true;
+    },
+  });
+}
+
+export function useFlowVersions(flowId: string, options?: QueryOptions<FlowVersion>) {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: [...queryKeys.flowVersions(flowId), options],
+    queryFn: () => apiClient.getFlowVersions(flowId, options),
+    enabled: !!flowId,
+    staleTime: 1000 * 30, // 30 seconds - reduced to ensure fresh data after mutations
+  });
+}
+
+// React Flow Data Query
+export function useFlowReactFlowData(
+  flowId: string,
+  options?: ReactFlowDataOptions,
+): ReturnType<typeof useQuery<ReactFlowData, Error>> {
+  const apiClient = useApiClient();
+
+  return useQuery({
+    queryKey: queryKeys.reactFlow(flowId, options?.version, options?.flowRunId),
+    queryFn: () => apiClient.getFlowReactFlowData(flowId, options),
+    enabled: !!flowId,
+    staleTime: options?.flowRunId ? 0 : 1000 * 30,
+    retry: (failureCount, error) => {
+      if (failureCount >= 2) {
+        return false;
+      }
+      if (error instanceof Error && error.message.includes('4')) {
+        return false;
+      }
+      return true;
+    },
+  });
+}
+
+// Flow Mutations
+export function useCreateFlow() {
+  const queryClient = useQueryClient();
+  const apiClient = useApiClient();
+  return useMutation({
+    mutationFn: (data: CreateFlowDto) => apiClient.createFlow(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.flows });
+    },
+    onError: (error) => {
+      console.error('Error creating flow:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useCreateFlowWithVersion() {
+  const queryClient = useQueryClient();
+  const apiClient = useApiClient();
+  return useMutation({
+    mutationFn: ({
+      flowDto,
+      versionDto,
+    }: {
+      flowDto: CreateFlowDto;
+      versionDto: CreateFlowVersionDto;
+    }) => apiClient.createFlowWithVersion(flowDto, versionDto),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.flows });
+    },
+    onError: (error) => {
+      console.error('Error creating flow with version:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useUpdateFlow() {
+  const queryClient = useQueryClient();
+  const apiClient = useApiClient();
+  return useMutation({
+    mutationFn: ({ id, data }: { id: string; data: Partial<CreateFlowDto> }) =>
+      apiClient.updateFlow(id, data),
+    onSuccess: (_, { id }) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.flow(id) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.flows });
+    },
+    onError: (error) => {
+      console.error('Error updating flow:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useDeleteFlow() {
+  const queryClient = useQueryClient();
+  const apiClient = useApiClient();
+  return useMutation({
+    mutationFn: (id: string) => apiClient.deleteFlow(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.flows });
+    },
+    onError: (error) => {
+      console.error('Error deleting flow:', getErrorMessage(error));
+    },
+  });
+}
+
+// Flow Version Mutations
+export function useCreateFlowVersion() {
+  const queryClient = useQueryClient();
+  const apiClient = useApiClient();
+  return useMutation({
+    mutationFn: ({ flowId, data }: { flowId: string; data: CreateFlowVersionDto }) =>
+      apiClient.createFlowVersion(flowId, data),
+    onSuccess: (_, { flowId }) => {
+      queryClient.invalidateQueries({ queryKey: queryKeys.flowVersions(flowId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.flow(flowId) });
+      queryClient.invalidateQueries({ queryKey: queryKeys.flows });
+    },
+    onError: (error) => {
+      console.error('Error creating flow version:', getErrorMessage(error));
+    },
+  });
+}
+
+export function useValidateFlow() {
+  const apiClient = useApiClient();
+
+  return useMutation({
+    mutationFn: ({ flowId, flowData }: { flowId: string; flowData: InvectDefinition }) =>
+      apiClient.validateFlow(flowId, flowData),
+    retry: false,
+    onError: (error) => {
+      console.error('Error validating flow:', getErrorMessage(error));
+    },
+  });
+}

package/src/api/index.ts

@@ -0,0 +1,17 @@
+// API layer barrel export
+// Types
+export * from './types';
+
+// API Client
+export { ApiClient } from './client';
+
+// Query keys
+export { queryKeys, getErrorMessage } from './query-keys';
+
+// Domain hooks
+export * from './flows.api';
+export * from './executions.api';
+export * from './credentials.api';
+export * from './triggers.api';
+export * from './agent-tools.api';
+export * from './node-data.api';