@umituz/react-native-ai-generation-content 1.4.0 → 1.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -19,7 +19,9 @@
     "orchestration",
     "fal",
     "gemini",
-    "provider-agnostic"
+    "provider-agnostic",
+    "background-jobs",
+    "queue"
   ],
   "author": "umituz",
   "license": "MIT",
@@ -28,13 +30,18 @@
     "url": "git+https://github.com/umituz/react-native-ai-generation-content.git"
   },
   "peerDependencies": {
-    "react": ">=18.0.0"
+    "@tanstack/react-query": ">=5.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.74.0"
   },
   "devDependencies": {
+    "@tanstack/react-query": "^5.0.0",
     "@types/react": "^19.0.0",
+    "@types/react-native": "^0.73.0",
     "@typescript-eslint/eslint-plugin": "^7.0.0",
     "@typescript-eslint/parser": "^7.0.0",
     "eslint": "^8.57.0",
+    "react-native": "^0.76.0",
     "typescript": "^5.3.0"
   },
   "publishConfig": {

package/src/domain/entities/index.ts

@@ -8,3 +8,4 @@ export * from "./generation.types";
 export * from "./polling.types";
 export * from "./progress.types";
 export * from "./middleware.types";
+export * from "./job.types";

package/src/domain/entities/job.types.ts

@@ -0,0 +1,57 @@
+/**
+ * Background Job Types
+ * Generic job management for AI generation tasks
+ */
+
+export type BackgroundJobStatus =
+  | "queued"
+  | "processing"
+  | "uploading"
+  | "completed"
+  | "failed";
+
+export interface BackgroundJob<TInput = unknown, TResult = unknown> {
+  readonly id: string;
+  readonly input: TInput;
+  readonly type: string;
+  readonly status: BackgroundJobStatus;
+  readonly progress: number;
+  readonly result?: TResult;
+  readonly error?: string;
+  readonly createdAt: Date;
+  readonly completedAt?: Date;
+}
+
+export interface AddJobInput<TInput = unknown> {
+  readonly id: string;
+  readonly input: TInput;
+  readonly type: string;
+  readonly status?: BackgroundJobStatus;
+  readonly progress?: number;
+}
+
+export interface UpdateJobInput {
+  readonly id: string;
+  readonly updates: Partial<Omit<BackgroundJob, "id" | "createdAt">>;
+}
+
+export interface JobExecutorConfig<TInput = unknown, TResult = unknown> {
+  readonly execute: (input: TInput, onProgress?: (progress: number) => void) => Promise<TResult>;
+  readonly onComplete?: (job: BackgroundJob<TInput, TResult>) => Promise<void>;
+  readonly onError?: (job: BackgroundJob<TInput, TResult>, error: Error) => Promise<void>;
+  readonly timeoutMs?: number;
+}
+
+export interface BackgroundQueueConfig {
+  readonly maxConcurrent?: number;
+  readonly retryCount?: number;
+  readonly retryDelayMs?: number;
+  readonly queryKey?: readonly string[];
+}
+
+export const DEFAULT_QUEUE_CONFIG: Required<BackgroundQueueConfig> = {
+  maxConcurrent: 1,
+  retryCount: 2,
+  retryDelayMs: 2000,
+  queryKey: ["ai", "background-jobs"],
+};

package/src/index.ts

@@ -48,9 +48,16 @@ export type {
   AfterGenerateHook,
   GenerationMiddleware,
   MiddlewareChain,
+  // Background Job Types
+  BackgroundJobStatus,
+  BackgroundJob,
+  AddJobInput,
+  UpdateJobInput,
+  JobExecutorConfig,
+  BackgroundQueueConfig,
 } from "./domain/entities";
 
-export { DEFAULT_POLLING_CONFIG, DEFAULT_PROGRESS_STAGES } from "./domain/entities";
+export { DEFAULT_POLLING_CONFIG, DEFAULT_PROGRESS_STAGES, DEFAULT_QUEUE_CONFIG } from "./domain/entities";
 
 // =============================================================================
 // INFRASTRUCTURE LAYER - Services
@@ -126,9 +133,35 @@ export type {
 // PRESENTATION LAYER - Hooks
 // =============================================================================
 
-export { useGeneration } from "./presentation/hooks";
+export {
+  useGeneration,
+  usePendingJobs,
+  useBackgroundGeneration,
+} from "./presentation/hooks";
 
 export type {
   UseGenerationOptions,
   UseGenerationReturn,
+  UsePendingJobsOptions,
+  UsePendingJobsReturn,
+  UseBackgroundGenerationOptions,
+  UseBackgroundGenerationReturn,
 } from "./presentation/hooks";
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export {
+  GenerationProgressModal,
+  PendingJobCard,
+} from "./presentation/components";
+
+export type {
+  GenerationProgressModalProps,
+  GenerationProgressRenderProps,
+  PendingJobCardProps,
+  PendingJobCardStyles,
+  PendingJobCardColors,
+  StatusLabels,
+} from "./presentation/components";

package/src/presentation/components/GenerationProgressModal.tsx

@@ -0,0 +1,166 @@
+/**
+ * GenerationProgressModal
+ * Generic AI generation progress modal with customizable rendering
+ */
+
+import React from "react";
+import { Modal, View, Text, StyleSheet } from "react-native";
+
+export interface GenerationProgressModalProps {
+  visible: boolean;
+  progress: number;
+  title?: string;
+  message?: string;
+  hint?: string;
+  overlayColor?: string;
+  modalBackgroundColor?: string;
+  textColor?: string;
+  progressColor?: string;
+  progressBackgroundColor?: string;
+  renderContent?: (props: GenerationProgressRenderProps) => React.ReactNode;
+}
+
+export interface GenerationProgressRenderProps {
+  progress: number;
+  title?: string;
+  message?: string;
+  hint?: string;
+}
+
+export const GenerationProgressModal: React.FC<
+  GenerationProgressModalProps
+> = ({
+  visible,
+  progress,
+  title,
+  message,
+  hint,
+  overlayColor = "rgba(0, 0, 0, 0.7)",
+  modalBackgroundColor = "#1C1C1E",
+  textColor = "#FFFFFF",
+  progressColor = "#007AFF",
+  progressBackgroundColor = "#3A3A3C",
+  renderContent,
+}) => {
+  const clampedProgress = Math.max(0, Math.min(100, progress));
+
+  if (renderContent) {
+    return (
+      <Modal
+        visible={visible}
+        transparent
+        animationType="fade"
+        statusBarTranslucent
+      >
+        <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
+          {renderContent({ progress: clampedProgress, title, message, hint })}
+        </View>
+      </Modal>
+    );
+  }
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      statusBarTranslucent
+    >
+      <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
+        <View
+          style={[styles.modal, { backgroundColor: modalBackgroundColor }]}
+        >
+          {title && (
+            <Text style={[styles.title, { color: textColor }]}>{title}</Text>
+          )}
+
+          {message && (
+            <Text style={[styles.message, { color: textColor }]}>
+              {message}
+            </Text>
+          )}
+
+          <View style={styles.progressContainer}>
+            <View
+              style={[
+                styles.progressBackground,
+                { backgroundColor: progressBackgroundColor },
+              ]}
+            >
+              <View
+                style={[
+                  styles.progressFill,
+                  {
+                    backgroundColor: progressColor,
+                    width: `${clampedProgress}%`,
+                  },
+                ]}
+              />
+            </View>
+            <Text style={[styles.progressText, { color: textColor }]}>
+              {Math.round(clampedProgress)}%
+            </Text>
+          </View>
+
+          {hint && (
+            <Text style={[styles.hint, { color: textColor }]}>{hint}</Text>
+          )}
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    justifyContent: "center",
+    alignItems: "center",
+    padding: 20,
+  },
+  modal: {
+    width: "100%",
+    maxWidth: 400,
+    borderRadius: 24,
+    padding: 32,
+    alignItems: "center",
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: "700",
+    marginBottom: 12,
+    textAlign: "center",
+  },
+  message: {
+    fontSize: 16,
+    marginBottom: 24,
+    textAlign: "center",
+    opacity: 0.8,
+  },
+  progressContainer: {
+    width: "100%",
+    marginBottom: 16,
+    alignItems: "center",
+  },
+  progressBackground: {
+    width: "100%",
+    height: 8,
+    borderRadius: 4,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 4,
+  },
+  progressText: {
+    fontSize: 14,
+    fontWeight: "600",
+    marginTop: 8,
+  },
+  hint: {
+    fontSize: 14,
+    textAlign: "center",
+    fontStyle: "italic",
+    opacity: 0.6,
+  },
+});

package/src/presentation/components/PendingJobCard.tsx

@@ -0,0 +1,223 @@
+/**
+ * PendingJobCard Component
+ * Displays a pending background job with progress
+ */
+
+import React from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  ActivityIndicator,
+  StyleSheet,
+} from "react-native";
+import type { BackgroundJob } from "../../domain/entities/job.types";
+
+export interface PendingJobCardStyles {
+  readonly card?: object;
+  readonly content?: object;
+  readonly header?: object;
+  readonly typeText?: object;
+  readonly statusText?: object;
+  readonly progressBar?: object;
+  readonly progressFill?: object;
+  readonly actions?: object;
+  readonly actionButton?: object;
+}
+
+export interface PendingJobCardColors {
+  readonly background?: string;
+  readonly text?: string;
+  readonly textSecondary?: string;
+  readonly error?: string;
+  readonly progressBackground?: string;
+  readonly progressFill?: string;
+  readonly actionBackground?: string;
+}
+
+export interface StatusLabels {
+  readonly queued?: string;
+  readonly processing?: string;
+  readonly uploading?: string;
+  readonly completed?: string;
+  readonly failed?: string;
+}
+
+export interface PendingJobCardProps<TInput = unknown, TResult = unknown> {
+  readonly job: BackgroundJob<TInput, TResult>;
+  readonly onCancel?: (id: string) => void;
+  readonly onRetry?: (id: string) => void;
+  readonly typeLabel?: string;
+  readonly statusLabels?: StatusLabels;
+  readonly colors?: PendingJobCardColors;
+  readonly styles?: PendingJobCardStyles;
+  readonly renderThumbnail?: (job: BackgroundJob<TInput, TResult>) => React.ReactNode;
+  readonly renderActions?: (job: BackgroundJob<TInput, TResult>) => React.ReactNode;
+}
+
+const DEFAULT_STATUS_LABELS: StatusLabels = {
+  queued: "Waiting in queue...",
+  processing: "Processing...",
+  uploading: "Uploading...",
+  completed: "Completed",
+  failed: "Failed",
+};
+
+const DEFAULT_COLORS: Required<PendingJobCardColors> = {
+  background: "#1C1C1E",
+  text: "#FFFFFF",
+  textSecondary: "#8E8E93",
+  error: "#FF453A",
+  progressBackground: "#3A3A3C",
+  progressFill: "#007AFF",
+  actionBackground: "#2C2C2E",
+};
+
+export function PendingJobCard<TInput = unknown, TResult = unknown>({
+  job,
+  onCancel,
+  onRetry,
+  typeLabel,
+  statusLabels = DEFAULT_STATUS_LABELS,
+  colors = {},
+  styles: customStyles = {},
+  renderThumbnail,
+  renderActions,
+}: PendingJobCardProps<TInput, TResult>): React.ReactElement {
+  const mergedColors = { ...DEFAULT_COLORS, ...colors };
+  const isFailed = job.status === "failed";
+
+  const statusText =
+    job.status === "failed"
+      ? job.error || statusLabels.failed
+      : statusLabels[job.status] || statusLabels.processing;
+
+  const styles = StyleSheet.create({
+    card: {
+      flexDirection: "row",
+      backgroundColor: mergedColors.background,
+      borderRadius: 16,
+      overflow: "hidden",
+      opacity: isFailed ? 0.7 : 1,
+      ...((customStyles.card as object) || {}),
+    },
+    content: {
+      flex: 1,
+      padding: 12,
+      justifyContent: "space-between",
+      ...((customStyles.content as object) || {}),
+    },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      ...((customStyles.header as object) || {}),
+    },
+    typeText: {
+      fontSize: 14,
+      fontWeight: "600",
+      color: mergedColors.text,
+      ...((customStyles.typeText as object) || {}),
+    },
+    statusText: {
+      fontSize: 12,
+      color: isFailed ? mergedColors.error : mergedColors.textSecondary,
+      marginTop: 4,
+      ...((customStyles.statusText as object) || {}),
+    },
+    progressBar: {
+      height: 4,
+      backgroundColor: mergedColors.progressBackground,
+      borderRadius: 2,
+      marginTop: 8,
+      overflow: "hidden",
+      ...((customStyles.progressBar as object) || {}),
+    },
+    progressFill: {
+      height: "100%",
+      backgroundColor: mergedColors.progressFill,
+      borderRadius: 2,
+      width: `${job.progress}%`,
+      ...((customStyles.progressFill as object) || {}),
+    },
+    actions: {
+      flexDirection: "row",
+      gap: 8,
+      marginTop: 8,
+      ...((customStyles.actions as object) || {}),
+    },
+    actionButton: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      backgroundColor: mergedColors.actionBackground,
+      justifyContent: "center",
+      alignItems: "center",
+      ...((customStyles.actionButton as object) || {}),
+    },
+    thumbnail: {
+      width: 80,
+      height: 80,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: mergedColors.progressBackground,
+    },
+    loader: {
+      position: "absolute",
+    },
+  });
+
+  return (
+    <View style={styles.card}>
+      {renderThumbnail && (
+        <View style={styles.thumbnail}>
+          {renderThumbnail(job)}
+          {!isFailed && (
+            <ActivityIndicator
+              color={mergedColors.text}
+              size="small"
+              style={styles.loader}
+            />
+          )}
+        </View>
+      )}
+      <View style={styles.content}>
+        <View>
+          <View style={styles.header}>
+            {typeLabel && <Text style={styles.typeText}>{typeLabel}</Text>}
+          </View>
+          <Text style={styles.statusText} numberOfLines={1}>
+            {statusText}
+          </Text>
+          {!isFailed && (
+            <View style={styles.progressBar}>
+              <View style={styles.progressFill} />
+            </View>
+          )}
+        </View>
+        {renderActions ? (
+          renderActions(job)
+        ) : (
+          <View style={styles.actions}>
+            {isFailed && onRetry && (
+              <TouchableOpacity
+                style={styles.actionButton}
+                onPress={() => onRetry(job.id)}
+              >
+                <Text style={{ color: mergedColors.text }}>↻</Text>
+              </TouchableOpacity>
+            )}
+            {onCancel && (
+              <TouchableOpacity
+                style={styles.actionButton}
+                onPress={() => onCancel(job.id)}
+              >
+                <Text style={{ color: mergedColors.error }}>✕</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+      </View>
+    </View>
+  );
+}

package/src/presentation/components/index.ts

@@ -0,0 +1,21 @@
+/**
+ * Presentation Components
+ */
+
+export {
+  GenerationProgressModal,
+} from "./GenerationProgressModal";
+
+export type {
+  GenerationProgressModalProps,
+  GenerationProgressRenderProps,
+} from "./GenerationProgressModal";
+
+export { PendingJobCard } from "./PendingJobCard";
+
+export type {
+  PendingJobCardProps,
+  PendingJobCardStyles,
+  PendingJobCardColors,
+  StatusLabels,
+} from "./PendingJobCard";

package/src/presentation/hooks/index.ts

@@ -7,3 +7,15 @@ export type {
   UseGenerationOptions,
   UseGenerationReturn,
 } from "./use-generation";
+
+export { usePendingJobs } from "./use-pending-jobs";
+export type {
+  UsePendingJobsOptions,
+  UsePendingJobsReturn,
+} from "./use-pending-jobs";
+
+export { useBackgroundGeneration } from "./use-background-generation";
+export type {
+  UseBackgroundGenerationOptions,
+  UseBackgroundGenerationReturn,
+} from "./use-background-generation";

package/src/presentation/hooks/use-background-generation.ts

@@ -0,0 +1,164 @@
+/**
+ * useBackgroundGeneration Hook
+ * Executes AI generation tasks in the background with queue management
+ */
+
+import { useCallback, useRef } from "react";
+import { usePendingJobs } from "./use-pending-jobs";
+import type {
+  BackgroundJob,
+  JobExecutorConfig,
+  BackgroundQueueConfig,
+} from "../../domain/entities/job.types";
+import { DEFAULT_QUEUE_CONFIG } from "../../domain/entities/job.types";
+
+export interface UseBackgroundGenerationOptions<TInput, TResult>
+  extends Partial<BackgroundQueueConfig> {
+  readonly executor: JobExecutorConfig<TInput, TResult>;
+  readonly onJobComplete?: (job: BackgroundJob<TInput, TResult>) => void;
+  readonly onJobError?: (job: BackgroundJob<TInput, TResult>) => void;
+  readonly onAllComplete?: () => void;
+}
+
+export interface UseBackgroundGenerationReturn<TInput, TResult> {
+  readonly startJob: (input: TInput, type: string) => Promise<string>;
+  readonly cancelJob: (id: string) => void;
+  readonly retryJob: (id: string) => void;
+  readonly pendingJobs: BackgroundJob<TInput, TResult>[];
+  readonly activeJobCount: number;
+  readonly hasActiveJobs: boolean;
+}
+
+export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
+  options: UseBackgroundGenerationOptions<TInput, TResult>,
+): UseBackgroundGenerationReturn<TInput, TResult> {
+  const config = { ...DEFAULT_QUEUE_CONFIG, ...options };
+  const activeJobsRef = useRef<Set<string>>(new Set());
+  const jobInputsRef = useRef<Map<string, { input: TInput; type: string }>>(
+    new Map(),
+  );
+
+  const {
+    jobs,
+    addJobAsync,
+    updateJob,
+    removeJob,
+    getJob,
+  } = usePendingJobs<TInput, TResult>({
+    queryKey: config.queryKey,
+  });
+
+  const executeJob = useCallback(
+    async (jobId: string, input: TInput) => {
+      const { executor } = options;
+
+      try {
+        updateJob({
+          id: jobId,
+          updates: { status: "processing", progress: 10 },
+        });
+
+        const result = await executor.execute(input, (progress) => {
+          updateJob({ id: jobId, updates: { progress } });
+        });
+
+        updateJob({
+          id: jobId,
+          updates: {
+            status: "completed",
+            progress: 100,
+            result,
+            completedAt: new Date(),
+          },
+        });
+
+        const completedJob = getJob(jobId);
+        if (completedJob) {
+          await executor.onComplete?.(completedJob);
+          options.onJobComplete?.(completedJob);
+        }
+
+        removeJob(jobId);
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+
+        updateJob({
+          id: jobId,
+          updates: {
+            status: "failed",
+            error: errorMsg,
+            progress: 0,
+          },
+        });
+
+        const failedJob = getJob(jobId);
+        if (failedJob) {
+          await executor.onError?.(
+            failedJob,
+            error instanceof Error ? error : new Error(errorMsg),
+          );
+          options.onJobError?.(failedJob);
+        }
+      } finally {
+        activeJobsRef.current.delete(jobId);
+
+        if (activeJobsRef.current.size === 0) {
+          options.onAllComplete?.();
+        }
+      }
+    },
+    [options, updateJob, removeJob, getJob],
+  );
+
+  const startJob = useCallback(
+    async (input: TInput, type: string): Promise<string> => {
+      const jobId = `job-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`;
+
+      jobInputsRef.current.set(jobId, { input, type });
+
+      await addJobAsync({
+        id: jobId,
+        input,
+        type,
+        status: "queued",
+        progress: 0,
+      });
+
+      activeJobsRef.current.add(jobId);
+
+      executeJob(jobId, input);
+
+      return jobId;
+    },
+    [addJobAsync, executeJob],
+  );
+
+  const cancelJob = useCallback(
+    (id: string) => {
+      activeJobsRef.current.delete(id);
+      jobInputsRef.current.delete(id);
+      removeJob(id);
+    },
+    [removeJob],
+  );
+
+  const retryJob = useCallback(
+    (id: string) => {
+      const jobData = jobInputsRef.current.get(id);
+      if (!jobData) return;
+
+      removeJob(id);
+      startJob(jobData.input, jobData.type);
+    },
+    [removeJob, startJob],
+  );
+
+  return {
+    startJob,
+    cancelJob,
+    retryJob,
+    pendingJobs: jobs,
+    activeJobCount: activeJobsRef.current.size,
+    hasActiveJobs: activeJobsRef.current.size > 0,
+  };
+}

package/src/presentation/hooks/use-pending-jobs.ts

@@ -0,0 +1,123 @@
+/**
+ * usePendingJobs Hook
+ * Generic pending job management with TanStack Query
+ */
+
+import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import type {
+  BackgroundJob,
+  AddJobInput,
+  UpdateJobInput,
+} from "../../domain/entities/job.types";
+import { DEFAULT_QUEUE_CONFIG } from "../../domain/entities/job.types";
+
+export interface UsePendingJobsOptions {
+  readonly queryKey?: readonly string[];
+  readonly enabled?: boolean;
+}
+
+export interface UsePendingJobsReturn<TInput = unknown, TResult = unknown> {
+  readonly jobs: BackgroundJob<TInput, TResult>[];
+  readonly hasJobs: boolean;
+  readonly addJob: (input: AddJobInput<TInput>) => void;
+  readonly addJobAsync: (input: AddJobInput<TInput>) => Promise<BackgroundJob<TInput, TResult>>;
+  readonly updateJob: (input: UpdateJobInput) => void;
+  readonly removeJob: (id: string) => void;
+  readonly clearCompleted: () => void;
+  readonly clearFailed: () => void;
+  readonly getJob: (id: string) => BackgroundJob<TInput, TResult> | undefined;
+}
+
+export function usePendingJobs<TInput = unknown, TResult = unknown>(
+  options: UsePendingJobsOptions = {},
+): UsePendingJobsReturn<TInput, TResult> {
+  const queryClient = useQueryClient();
+  const queryKey = options.queryKey ?? DEFAULT_QUEUE_CONFIG.queryKey;
+
+  const { data: jobs = [] } = useQuery<BackgroundJob<TInput, TResult>[]>({
+    queryKey,
+    queryFn: () => [],
+    staleTime: Infinity,
+    gcTime: 30 * 60 * 1000,
+    enabled: options.enabled !== false,
+  });
+
+  const addJobMutation = useMutation({
+    mutationFn: async (input: AddJobInput<TInput>) => {
+      const newJob: BackgroundJob<TInput, TResult> = {
+        id: input.id,
+        input: input.input,
+        type: input.type,
+        status: input.status ?? "queued",
+        progress: input.progress ?? 0,
+        createdAt: new Date(),
+      };
+      return newJob;
+    },
+    onSuccess: (newJob) => {
+      queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
+        queryKey,
+        (old) => [newJob, ...(old ?? [])],
+      );
+    },
+  });
+
+  const updateJobMutation = useMutation({
+    mutationFn: async ({ id, updates }: UpdateJobInput) => ({ id, updates }),
+    onSuccess: ({ id, updates }) => {
+      queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
+        queryKey,
+        (old) => {
+          if (!old) return [];
+          return old.map((job) =>
+            job.id === id ? ({ ...job, ...updates } as BackgroundJob<TInput, TResult>) : job,
+          );
+        },
+      );
+    },
+  });
+
+  const removeJobMutation = useMutation({
+    mutationFn: async (id: string) => id,
+    onSuccess: (id) => {
+      queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
+        queryKey,
+        (old) => old?.filter((job) => job.id !== id) ?? [],
+      );
+    },
+  });
+
+  const clearCompletedMutation = useMutation({
+    mutationFn: async () => null,
+    onSuccess: () => {
+      queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
+        queryKey,
+        (old) => old?.filter((job) => job.status !== "completed") ?? [],
+      );
+    },
+  });
+
+  const clearFailedMutation = useMutation({
+    mutationFn: async () => null,
+    onSuccess: () => {
+      queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
+        queryKey,
+        (old) => old?.filter((job) => job.status !== "failed") ?? [],
+      );
+    },
+  });
+
+  const getJob = (id: string) => jobs.find((job) => job.id === id);
+
+  return {
+    jobs,
+    hasJobs: jobs.length > 0,
+    addJob: addJobMutation.mutate,
+    addJobAsync: addJobMutation.mutateAsync,
+    updateJob: updateJobMutation.mutate,
+    removeJob: removeJobMutation.mutate,
+    clearCompleted: clearCompletedMutation.mutate,
+    clearFailed: clearFailedMutation.mutate,
+    getJob,
+  };
+}