@umituz/react-native-ai-generation-content 1.7.0 → 1.8.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-generation-content",
-  "version": "1.7.0",
+  "version": "1.8.1",
   "description": "Provider-agnostic AI generation orchestration for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -31,17 +31,20 @@
   },
   "peerDependencies": {
     "@tanstack/react-query": ">=5.0.0",
+    "@umituz/react-native-design-system-theme": "latest",
     "react": ">=18.0.0",
     "react-native": ">=0.74.0"
   },
   "devDependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "@types/react": "^19.0.0",
+    "@umituz/react-native-design-system-theme": "latest",
+    "@types/react": "~19.1.10",
     "@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",
+    "react": "19.1.0",
+    "react-native": "0.81.5",
     "typescript": "^5.3.0"
   },
   "publishConfig": {

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

@@ -42,7 +42,10 @@ export interface JobExecutorConfig<TInput = unknown, TResult = unknown> {
   readonly timeoutMs?: number;
 }
 
+export type GenerationMode = "direct" | "queued";
+
 export interface BackgroundQueueConfig {
+  readonly mode?: GenerationMode;
   readonly maxConcurrent?: number;
   readonly retryCount?: number;
   readonly retryDelayMs?: number;
@@ -50,6 +53,7 @@ export interface BackgroundQueueConfig {
 }
 
 export const DEFAULT_QUEUE_CONFIG: Required<BackgroundQueueConfig> = {
+  mode: "queued",
   maxConcurrent: 1,
   retryCount: 2,
   retryDelayMs: 2000,

package/src/index.ts

@@ -55,6 +55,7 @@ export type {
   UpdateJobInput,
   JobExecutorConfig,
   BackgroundQueueConfig,
+  GenerationMode,
 } from "./domain/entities";
 
 export { DEFAULT_POLLING_CONFIG, DEFAULT_PROGRESS_STAGES, DEFAULT_QUEUE_CONFIG } from "./domain/entities";
@@ -146,6 +147,7 @@ export type {
   UsePendingJobsReturn,
   UseBackgroundGenerationOptions,
   UseBackgroundGenerationReturn,
+  DirectExecutionResult,
 } from "./presentation/hooks";
 
 // =============================================================================
@@ -154,14 +156,20 @@ export type {
 
 export {
   GenerationProgressModal,
+  GenerationProgressContent,
+  GenerationProgressBar,
   PendingJobCard,
+  PendingJobProgressBar,
+  PendingJobCardActions,
 } from "./presentation/components";
 
 export type {
   GenerationProgressModalProps,
   GenerationProgressRenderProps,
+  GenerationProgressContentProps,
+  GenerationProgressBarProps,
   PendingJobCardProps,
-  PendingJobCardStyles,
-  PendingJobCardColors,
   StatusLabels,
+  PendingJobProgressBarProps,
+  PendingJobCardActionsProps,
 } from "./presentation/components";

package/src/presentation/components/GenerationProgressBar.tsx

@@ -0,0 +1,77 @@
+/**
+ * GenerationProgressBar
+ * Individual progress bar component for AI generation
+ */
+
+import React from "react";
+import { View, StyleSheet, Text } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface GenerationProgressBarProps {
+    progress: number;
+    textColor?: string;
+    progressColor?: string;
+    backgroundColor?: string;
+}
+
+export const GenerationProgressBar: React.FC<GenerationProgressBarProps> = ({
+    progress,
+    textColor,
+    progressColor,
+    backgroundColor,
+}) => {
+    const tokens = useAppDesignTokens();
+    const clampedProgress = Math.max(0, Math.min(100, progress));
+
+    return (
+        <View style={styles.container}>
+            <View
+                style={[
+                    styles.background,
+                    { backgroundColor: backgroundColor || tokens.colors.borderLight },
+                ]}
+            >
+                <View
+                    style={[
+                        styles.fill,
+                        {
+                            backgroundColor: progressColor || tokens.colors.primary,
+                            width: `${clampedProgress}%`,
+                        },
+                    ]}
+                />
+            </View>
+            <Text
+                style={[
+                    styles.text,
+                    { color: textColor || tokens.colors.textPrimary },
+                ]}
+            >
+                {Math.round(clampedProgress)}%
+            </Text>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: "100%",
+        marginBottom: 16,
+        alignItems: "center",
+    },
+    background: {
+        width: "100%",
+        height: 8,
+        borderRadius: 4,
+        overflow: "hidden",
+    },
+    fill: {
+        height: "100%",
+        borderRadius: 4,
+    },
+    text: {
+        fontSize: 14,
+        fontWeight: "600",
+        marginTop: 8,
+    },
+});

package/src/presentation/components/GenerationProgressContent.tsx

@@ -0,0 +1,123 @@
+/**
+ * GenerationProgressContent
+ * Content for the AI generation progress modal
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { GenerationProgressBar } from "./GenerationProgressBar";
+
+export interface GenerationProgressContentProps {
+    progress: number;
+    title?: string;
+    message?: string;
+    hint?: string;
+    dismissLabel?: string;
+    onDismiss?: () => void;
+    backgroundColor?: string;
+    textColor?: string;
+    progressColor?: string;
+    progressBackgroundColor?: string;
+    dismissButtonColor?: string;
+}
+
+export const GenerationProgressContent: React.FC<
+    GenerationProgressContentProps
+> = ({
+    progress,
+    title,
+    message,
+    hint,
+    dismissLabel = "Got it",
+    onDismiss,
+    backgroundColor,
+    textColor,
+    progressColor,
+    progressBackgroundColor,
+    dismissButtonColor,
+}) => {
+        const tokens = useAppDesignTokens();
+
+        const activeTextColor = textColor || tokens.colors.textPrimary;
+        const activeBgColor = backgroundColor || tokens.colors.surface;
+
+        return (
+            <View style={[styles.modal, { backgroundColor: activeBgColor }]}>
+                {title && (
+                    <Text style={[styles.title, { color: activeTextColor }]}>{title}</Text>
+                )}
+
+                {message && (
+                    <Text style={[styles.message, { color: activeTextColor }]}>
+                        {message}
+                    </Text>
+                )}
+
+                <GenerationProgressBar
+                    progress={progress}
+                    textColor={activeTextColor}
+                    progressColor={progressColor}
+                    backgroundColor={progressBackgroundColor}
+                />
+
+                {hint && (
+                    <Text style={[styles.hint, { color: activeTextColor }]}>{hint}</Text>
+                )}
+
+                {onDismiss && (
+                    <TouchableOpacity
+                        style={[
+                            styles.dismissButton,
+                            { backgroundColor: dismissButtonColor || tokens.colors.primary },
+                        ]}
+                        onPress={onDismiss}
+                    >
+                        <Text style={styles.dismissText}>{dismissLabel}</Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        );
+    };
+
+const styles = StyleSheet.create({
+    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,
+    },
+    hint: {
+        fontSize: 14,
+        textAlign: "center",
+        fontStyle: "italic",
+        opacity: 0.6,
+        marginBottom: 16,
+    },
+    dismissButton: {
+        marginTop: 8,
+        paddingVertical: 14,
+        paddingHorizontal: 32,
+        borderRadius: 12,
+        minWidth: 140,
+        alignItems: "center",
+    },
+    dismissText: {
+        color: "#FFFFFF",
+        fontSize: 16,
+        fontWeight: "600",
+    },
+});

package/src/presentation/components/GenerationProgressModal.tsx

@@ -4,39 +4,29 @@
  */
 
 import React from "react";
+import { Modal, View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import {
-  Modal,
-  View,
-  Text,
-  TouchableOpacity,
-  StyleSheet,
-} from "react-native";
+  GenerationProgressContent,
+  GenerationProgressContentProps,
+} from "./GenerationProgressContent";
 
-export interface GenerationProgressModalProps {
-  visible: boolean;
+export interface GenerationProgressRenderProps {
   progress: number;
   title?: string;
   message?: string;
   hint?: string;
-  dismissLabel?: string;
   onDismiss?: () => void;
+}
+
+export interface GenerationProgressModalProps
+  extends Omit<GenerationProgressContentProps, "backgroundColor"> {
+  visible: boolean;
   overlayColor?: string;
   modalBackgroundColor?: string;
-  textColor?: string;
-  progressColor?: string;
-  progressBackgroundColor?: string;
-  dismissButtonColor?: string;
   renderContent?: (props: GenerationProgressRenderProps) => React.ReactNode;
 }
 
-export interface GenerationProgressRenderProps {
-  progress: number;
-  title?: string;
-  message?: string;
-  hint?: string;
-  onDismiss?: () => void;
-}
-
 export const GenerationProgressModal: React.FC<
   GenerationProgressModalProps
 > = ({
@@ -45,19 +35,45 @@ export const GenerationProgressModal: React.FC<
   title,
   message,
   hint,
-  dismissLabel = "Got it",
+  dismissLabel,
   onDismiss,
   overlayColor = "rgba(0, 0, 0, 0.7)",
-  modalBackgroundColor = "#1C1C1E",
-  textColor = "#FFFFFF",
-  progressColor = "#007AFF",
-  progressBackgroundColor = "#3A3A3C",
-  dismissButtonColor = "#007AFF",
+  modalBackgroundColor,
+  textColor,
+  progressColor,
+  progressBackgroundColor,
+  dismissButtonColor,
   renderContent,
 }) => {
-  const clampedProgress = Math.max(0, Math.min(100, progress));
+    const tokens = useAppDesignTokens();
+    const clampedProgress = Math.max(0, Math.min(100, progress));
+
+    const content = renderContent ? (
+      renderContent({
+        progress: clampedProgress,
+        title,
+        message,
+        hint,
+        onDismiss,
+      })
+    ) : (
+      <GenerationProgressContent
+        progress={clampedProgress}
+        title={title}
+        message={message}
+        hint={hint}
+        dismissLabel={dismissLabel}
+        onDismiss={onDismiss}
+        backgroundColor={modalBackgroundColor || tokens.colors.surface}
+        textColor={textColor || tokens.colors.textPrimary}
+        progressColor={progressColor || tokens.colors.primary}
+        progressBackgroundColor={
+          progressBackgroundColor || tokens.colors.borderLight
+        }
+        dismissButtonColor={dismissButtonColor || tokens.colors.primary}
+      />
+    );
 
-  if (renderContent) {
     return (
       <Modal
         visible={visible}
@@ -66,81 +82,11 @@ export const GenerationProgressModal: React.FC<
         statusBarTranslucent
       >
         <View style={[styles.overlay, { backgroundColor: overlayColor }]}>
-          {renderContent({
-            progress: clampedProgress,
-            title,
-            message,
-            hint,
-            onDismiss,
-          })}
+          {content}
         </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>
-          )}
-
-          {onDismiss && (
-            <TouchableOpacity
-              style={[
-                styles.dismissButton,
-                { backgroundColor: dismissButtonColor },
-              ]}
-              onPress={onDismiss}
-            >
-              <Text style={styles.dismissText}>{dismissLabel}</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-      </View>
-    </Modal>
-  );
-};
+  };
 
 const styles = StyleSheet.create({
   overlay: {
@@ -149,63 +95,4 @@ const styles = StyleSheet.create({
     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,
-    marginBottom: 16,
-  },
-  dismissButton: {
-    marginTop: 8,
-    paddingVertical: 14,
-    paddingHorizontal: 32,
-    borderRadius: 12,
-    minWidth: 140,
-    alignItems: "center",
-  },
-  dismissText: {
-    color: "#FFFFFF",
-    fontSize: 16,
-    fontWeight: "600",
-  },
 });

package/src/presentation/components/PendingJobCard.tsx

@@ -4,36 +4,11 @@
  */
 
 import React from "react";
-import {
-  View,
-  Text,
-  TouchableOpacity,
-  ActivityIndicator,
-  StyleSheet,
-} from "react-native";
+import { View, Text, ActivityIndicator, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 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;
-}
+import { PendingJobProgressBar } from "./PendingJobProgressBar";
+import { PendingJobCardActions } from "./PendingJobCardActions";
 
 export interface StatusLabels {
   readonly queued?: string;
@@ -49,10 +24,12 @@ export interface PendingJobCardProps<TInput = unknown, TResult = unknown> {
   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;
+  readonly renderThumbnail?: (
+    job: BackgroundJob<TInput, TResult>,
+  ) => React.ReactNode;
+  readonly renderActions?: (
+    job: BackgroundJob<TInput, TResult>,
+  ) => React.ReactNode;
 }
 
 const DEFAULT_STATUS_LABELS: StatusLabels = {
@@ -63,28 +40,16 @@ const DEFAULT_STATUS_LABELS: StatusLabels = {
   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 tokens = useAppDesignTokens();
   const isFailed = job.status === "failed";
 
   const statusText =
@@ -95,86 +60,44 @@ export function PendingJobCard<TInput = unknown, TResult = unknown>({
   const styles = StyleSheet.create({
     card: {
       flexDirection: "row",
-      backgroundColor: mergedColors.background,
+      backgroundColor: tokens.colors.surface,
       borderRadius: 16,
       overflow: "hidden",
       opacity: isFailed ? 0.7 : 1,
-      ...((customStyles.card as object) || {}),
+    },
+    thumbnailWrapper: {
+      width: 80,
+      height: 80,
+      justifyContent: "center",
+      alignItems: "center",
+      backgroundColor: tokens.colors.backgroundSecondary,
     },
     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) || {}),
+      color: tokens.colors.textPrimary,
     },
     statusText: {
       fontSize: 12,
-      color: isFailed ? mergedColors.error : mergedColors.textSecondary,
+      color: isFailed ? tokens.colors.error : tokens.colors.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",
     },
+    loader: { position: "absolute" },
   });
 
   return (
     <View style={styles.card}>
       {renderThumbnail && (
-        <View style={styles.thumbnail}>
+        <View style={styles.thumbnailWrapper}>
           {renderThumbnail(job)}
           {!isFailed && (
             <ActivityIndicator
-              color={mergedColors.text}
+              color={tokens.colors.primary}
               size="small"
               style={styles.loader}
             />
@@ -183,39 +106,21 @@ export function PendingJobCard<TInput = unknown, TResult = unknown>({
       )}
       <View style={styles.content}>
         <View>
-          <View style={styles.header}>
-            {typeLabel && <Text style={styles.typeText}>{typeLabel}</Text>}
-          </View>
+          {typeLabel && <Text style={styles.typeText}>{typeLabel}</Text>}
           <Text style={styles.statusText} numberOfLines={1}>
             {statusText}
           </Text>
-          {!isFailed && (
-            <View style={styles.progressBar}>
-              <View style={styles.progressFill} />
-            </View>
-          )}
+          {!isFailed && <PendingJobProgressBar progress={job.progress} />}
         </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>
+          <PendingJobCardActions
+            id={job.id}
+            isFailed={isFailed}
+            onCancel={onCancel}
+            onRetry={onRetry}
+          />
         )}
       </View>
     </View>

package/src/presentation/components/PendingJobCardActions.tsx

@@ -0,0 +1,73 @@
+/**
+ * PendingJobCardActions
+ * Action buttons for the PendingJobCard
+ */
+
+import React from "react";
+import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface PendingJobCardActionsProps {
+    id: string;
+    isFailed: boolean;
+    onCancel?: (id: string) => void;
+    onRetry?: (id: string) => void;
+    textColor?: string;
+    errorColor?: string;
+    backgroundColor?: string;
+}
+
+export const PendingJobCardActions: React.FC<PendingJobCardActionsProps> = ({
+    id,
+    isFailed,
+    onCancel,
+    onRetry,
+    textColor,
+    errorColor,
+    backgroundColor,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const styles = StyleSheet.create({
+        actions: {
+            flexDirection: "row",
+            gap: 8,
+            marginTop: 8,
+        },
+        actionButton: {
+            width: 32,
+            height: 32,
+            borderRadius: 16,
+            backgroundColor: backgroundColor || tokens.colors.backgroundSecondary,
+            justifyContent: "center",
+            alignItems: "center",
+        },
+        text: {
+            color: textColor || tokens.colors.textPrimary,
+        },
+        errorText: {
+            color: errorColor || tokens.colors.error,
+        },
+    });
+
+    return (
+        <View style={styles.actions}>
+            {isFailed && onRetry && (
+                <TouchableOpacity
+                    style={styles.actionButton}
+                    onPress={() => onRetry(id)}
+                >
+                    <Text style={styles.text}>↻</Text>
+                </TouchableOpacity>
+            )}
+            {onCancel && (
+                <TouchableOpacity
+                    style={styles.actionButton}
+                    onPress={() => onCancel(id)}
+                >
+                    <Text style={styles.errorText}>✕</Text>
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};

package/src/presentation/components/PendingJobProgressBar.tsx

@@ -0,0 +1,54 @@
+/**
+ * PendingJobProgressBar
+ * Individual progress bar for the PendingJobCard
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface PendingJobProgressBarProps {
+    progress: number;
+    backgroundColor?: string;
+    fillColor?: string;
+}
+
+export const PendingJobProgressBar: React.FC<PendingJobProgressBarProps> = ({
+    progress,
+    backgroundColor,
+    fillColor,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+        <View
+            style={[
+                styles.progressContainer,
+                { backgroundColor: backgroundColor || tokens.colors.borderLight },
+            ]}
+        >
+            <View
+                style={[
+                    styles.progressFill,
+                    {
+                        backgroundColor: fillColor || tokens.colors.primary,
+                        width: `${Math.max(0, Math.min(100, progress))}%`,
+                    },
+                ]}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    progressContainer: {
+        height: 4,
+        borderRadius: 2,
+        marginTop: 8,
+        overflow: "hidden",
+    },
+    progressFill: {
+        height: "100%",
+        borderRadius: 2,
+    },
+});

package/src/presentation/components/index.ts

@@ -1,21 +1,22 @@
-/**
- * Presentation Components
- */
-
-export {
-  GenerationProgressModal,
-} from "./GenerationProgressModal";
+export { GenerationProgressModal } from "./GenerationProgressModal";
+export { GenerationProgressContent } from "./GenerationProgressContent";
+export { GenerationProgressBar } from "./GenerationProgressBar";
+export { PendingJobCard } from "./PendingJobCard";
+export { PendingJobProgressBar } from "./PendingJobProgressBar";
+export { PendingJobCardActions } from "./PendingJobCardActions";
 
 export type {
   GenerationProgressModalProps,
   GenerationProgressRenderProps,
 } from "./GenerationProgressModal";
 
-export { PendingJobCard } from "./PendingJobCard";
+export type { GenerationProgressContentProps } from "./GenerationProgressContent";
+export type { GenerationProgressBarProps } from "./GenerationProgressBar";
 
 export type {
   PendingJobCardProps,
-  PendingJobCardStyles,
-  PendingJobCardColors,
   StatusLabels,
 } from "./PendingJobCard";
+
+export type { PendingJobProgressBarProps } from "./PendingJobProgressBar";
+export type { PendingJobCardActionsProps } from "./PendingJobCardActions";

package/src/presentation/hooks/index.ts

@@ -18,4 +18,5 @@ export { useBackgroundGeneration } from "./use-background-generation";
 export type {
   UseBackgroundGenerationOptions,
   UseBackgroundGenerationReturn,
+  DirectExecutionResult,
 } from "./use-background-generation";

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

@@ -1,9 +1,11 @@
 /**
  * useBackgroundGeneration Hook
- * Executes AI generation tasks in the background with queue management
+ * Executes AI generation tasks with optional queue management
+ * - mode: 'direct' - Execute immediately, no queue UI (for images)
+ * - mode: 'queued' - Use pending jobs queue with UI (for videos)
  */
 
-import { useCallback, useRef } from "react";
+import { useCallback, useRef, useState } from "react";
 import { usePendingJobs } from "./use-pending-jobs";
 import type {
   BackgroundJob,
@@ -18,15 +20,27 @@ export interface UseBackgroundGenerationOptions<TInput, TResult>
   readonly onJobComplete?: (job: BackgroundJob<TInput, TResult>) => void;
   readonly onJobError?: (job: BackgroundJob<TInput, TResult>) => void;
   readonly onAllComplete?: () => void;
+  readonly onProgress?: (progress: number) => void;
+}
+
+export interface DirectExecutionResult<TResult> {
+  readonly success: boolean;
+  readonly result?: TResult;
+  readonly error?: string;
 }
 
 export interface UseBackgroundGenerationReturn<TInput, TResult> {
   readonly startJob: (input: TInput, type: string) => Promise<string>;
+  readonly executeDirectly: (
+    input: TInput,
+  ) => Promise<DirectExecutionResult<TResult>>;
   readonly cancelJob: (id: string) => void;
   readonly retryJob: (id: string) => void;
   readonly pendingJobs: BackgroundJob<TInput, TResult>[];
   readonly activeJobCount: number;
   readonly hasActiveJobs: boolean;
+  readonly isProcessing: boolean;
+  readonly progress: number;
 }
 
 export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
@@ -38,16 +52,41 @@ export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
     new Map(),
   );
 
-  const {
-    jobs,
-    addJobAsync,
-    updateJob,
-    removeJob,
-    getJob,
-  } = usePendingJobs<TInput, TResult>({
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [progress, setProgress] = useState(0);
+
+  const { jobs, addJobAsync, updateJob, removeJob, getJob } = usePendingJobs<
+    TInput,
+    TResult
+  >({
     queryKey: config.queryKey,
   });
 
+  const executeDirectly = useCallback(
+    async (input: TInput): Promise<DirectExecutionResult<TResult>> => {
+      const { executor } = options;
+
+      setIsProcessing(true);
+      setProgress(0);
+
+      try {
+        const result = await executor.execute(input, (p) => {
+          setProgress(p);
+          options.onProgress?.(p);
+        });
+
+        setProgress(100);
+        return { success: true, result };
+      } catch (error) {
+        const errorMsg = error instanceof Error ? error.message : String(error);
+        return { success: false, error: errorMsg };
+      } finally {
+        setIsProcessing(false);
+      }
+    },
+    [options],
+  );
+
   const executeJob = useCallback(
     async (jobId: string, input: TInput) => {
       const { executor } = options;
@@ -58,8 +97,8 @@ export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
           updates: { status: "processing", progress: 10 },
         });
 
-        const result = await executor.execute(input, (progress) => {
-          updateJob({ id: jobId, updates: { progress } });
+        const result = await executor.execute(input, (p) => {
+          updateJob({ id: jobId, updates: { progress: p } });
         });
 
         updateJob({
@@ -84,11 +123,7 @@ export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
 
         updateJob({
           id: jobId,
-          updates: {
-            status: "failed",
-            error: errorMsg,
-            progress: 0,
-          },
+          updates: { status: "failed", error: errorMsg, progress: 0 },
         });
 
         const failedJob = getJob(jobId);
@@ -101,7 +136,6 @@ export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
         }
       } finally {
         activeJobsRef.current.delete(jobId);
-
         if (activeJobsRef.current.size === 0) {
           options.onAllComplete?.();
         }
@@ -125,8 +159,7 @@ export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
       });
 
       activeJobsRef.current.add(jobId);
-
-      executeJob(jobId, input);
+      void executeJob(jobId, input);
 
       return jobId;
     },
@@ -146,19 +179,21 @@ export function useBackgroundGeneration<TInput = unknown, TResult = unknown>(
     (id: string) => {
       const jobData = jobInputsRef.current.get(id);
       if (!jobData) return;
-
       removeJob(id);
-      startJob(jobData.input, jobData.type);
+      void startJob(jobData.input, jobData.type);
     },
     [removeJob, startJob],
   );
 
   return {
     startJob,
+    executeDirectly,
     cancelJob,
     retryJob,
     pendingJobs: jobs,
     activeJobCount: activeJobsRef.current.size,
     hasActiveJobs: activeJobsRef.current.size > 0,
+    isProcessing,
+    progress,
   };
 }

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

@@ -43,7 +43,7 @@ export function usePendingJobs<TInput = unknown, TResult = unknown>(
   });
 
   const addJobMutation = useMutation({
-    mutationFn: async (input: AddJobInput<TInput>) => {
+    mutationFn: (input: AddJobInput<TInput>) => {
       const newJob: BackgroundJob<TInput, TResult> = {
         id: input.id,
         input: input.input,
@@ -52,7 +52,7 @@ export function usePendingJobs<TInput = unknown, TResult = unknown>(
         progress: input.progress ?? 0,
         createdAt: new Date(),
       };
-      return newJob;
+      return Promise.resolve(newJob);
     },
     onSuccess: (newJob) => {
       queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
@@ -63,7 +63,8 @@ export function usePendingJobs<TInput = unknown, TResult = unknown>(
   });
 
   const updateJobMutation = useMutation({
-    mutationFn: async ({ id, updates }: UpdateJobInput) => ({ id, updates }),
+    mutationFn: ({ id, updates }: UpdateJobInput) =>
+      Promise.resolve({ id, updates }),
     onSuccess: ({ id, updates }) => {
       queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
         queryKey,
@@ -78,7 +79,7 @@ export function usePendingJobs<TInput = unknown, TResult = unknown>(
   });
 
   const removeJobMutation = useMutation({
-    mutationFn: async (id: string) => id,
+    mutationFn: (id: string) => Promise.resolve(id),
     onSuccess: (id) => {
       queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
         queryKey,
@@ -88,7 +89,7 @@ export function usePendingJobs<TInput = unknown, TResult = unknown>(
   });
 
   const clearCompletedMutation = useMutation({
-    mutationFn: async () => null,
+    mutationFn: () => Promise.resolve(null),
     onSuccess: () => {
       queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
         queryKey,
@@ -98,7 +99,7 @@ export function usePendingJobs<TInput = unknown, TResult = unknown>(
   });
 
   const clearFailedMutation = useMutation({
-    mutationFn: async () => null,
+    mutationFn: () => Promise.resolve(null),
     onSuccess: () => {
       queryClient.setQueryData<BackgroundJob<TInput, TResult>[]>(
         queryKey,