@umituz/react-native-ai-fal-provider 2.1.2 → 2.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-ai-fal-provider",
-  "version": "2.1.2",
+  "version": "2.1.4",
   "description": "FAL AI provider for React Native - implements IAIProvider interface for unified AI generation",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/domain/constants/default-models.constants.ts

@@ -4,7 +4,6 @@
  */
 
 import type { FalModelType } from "../entities/fal.types";
-import type { ModelType } from "../types/model-selection.types";
 import { DEFAULT_TEXT_TO_IMAGE_MODELS } from "./models/text-to-image.models";
 import { DEFAULT_TEXT_TO_VOICE_MODELS } from "./models/text-to-voice.models";
 import { DEFAULT_TEXT_TO_VIDEO_MODELS } from "./models/text-to-video.models";
@@ -34,22 +33,28 @@ export interface FalModelConfig {
 
 /**
  * Default credit costs for each model type
+ * Supports all FalModelType values
  */
-export const DEFAULT_CREDIT_COSTS: Record<ModelType, number> = {
+export const DEFAULT_CREDIT_COSTS: Record<FalModelType, number> = {
   "text-to-image": 2,
   "text-to-video": 20,
   "image-to-video": 20,
   "text-to-voice": 3,
+  "image-to-image": 2,
+  "text-to-text": 1,
 } as const;
 
 /**
  * Default model IDs for each model type
+ * Supports all FalModelType values
  */
-export const DEFAULT_MODEL_IDS: Record<ModelType, string> = {
+export const DEFAULT_MODEL_IDS: Record<FalModelType, string> = {
   "text-to-image": "fal-ai/flux/schnell",
   "text-to-video": "fal-ai/minimax-video",
   "image-to-video": "fal-ai/kling-video/v1.5/pro/image-to-video",
   "text-to-voice": "fal-ai/playai/tts/v3",
+  "image-to-image": "fal-ai/flux/schnell",
+  "text-to-text": "fal-ai/flux/schnell",
 } as const;
 
 /**
@@ -90,10 +95,14 @@ export function getDefaultModelsByType(type: FalModelType): FalModelConfig[] {
 
 /**
  * Get default model for a type
+ * Returns the model marked as default, or the first model, or undefined if no models exist
  */
 export function getDefaultModel(type: FalModelType): FalModelConfig | undefined {
   const models = getDefaultModelsByType(type);
-  return models.find((m) => m.isDefault) || models[0];
+  if (models.length === 0) {
+    return undefined;
+  }
+  return models.find((m) => m.isDefault) ?? models[0];
 }
 
 /**

package/src/domain/types/model-selection.types.ts

@@ -4,12 +4,16 @@
  */
 
 import type { FalModelConfig } from "../constants/default-models.constants";
+import type { FalModelType } from "../entities/fal.types";
 
-export type ModelType =
-  | "text-to-image"
-  | "text-to-video"
-  | "image-to-video"
-  | "text-to-voice";
+/**
+ * Public API model types (subset of FalModelType)
+ * UI components support these core model types
+ */
+export type ModelType = Extract<
+  FalModelType,
+  "text-to-image" | "text-to-video" | "image-to-video" | "text-to-voice"
+>;
 
 /**
  * Configuration for model selection behavior

package/src/infrastructure/services/fal-models.service.ts

@@ -55,28 +55,28 @@ export function getModelPricing(modelId: string): { freeUserCost: number; premiu
  * Returns the model's free user cost if available, otherwise returns the default cost for the type
  * NOTE: Use ?? instead of || to handle 0 values correctly (free models)
  */
-export function getModelCreditCost(modelId: string, modelType: ModelType): number {
+export function getModelCreditCost(modelId: string, modelType: FalModelType): number {
   const pricing = getModelPricing(modelId);
   // CRITICAL: Use !== undefined instead of truthy check
   // because freeUserCost can be 0 for free models!
   if (pricing && pricing.freeUserCost !== undefined) {
     return pricing.freeUserCost;
   }
-  return DEFAULT_CREDIT_COSTS[modelType];
+  return DEFAULT_CREDIT_COSTS[modelType] ?? 0;
 }
 
 /**
  * Get default credit cost for a model type
  */
-export function getDefaultCreditCost(modelType: ModelType): number {
-  return DEFAULT_CREDIT_COSTS[modelType];
+export function getDefaultCreditCost(modelType: FalModelType): number {
+  return DEFAULT_CREDIT_COSTS[modelType] ?? 0;
 }
 
 /**
  * Get default model ID for a model type
  */
-export function getDefaultModelId(modelType: ModelType): string {
-  return DEFAULT_MODEL_IDS[modelType];
+export function getDefaultModelId(modelType: FalModelType): string {
+  return DEFAULT_MODEL_IDS[modelType] ?? "";
 }
 
 /**
@@ -110,7 +110,8 @@ export function getModelSelectionData(
   modelType: ModelType,
   config?: ModelSelectionConfig
 ): ModelSelectionResult {
-  const models = getModels(modelType as FalModelType);
+  // ModelType is now a subset of FalModelType, so this cast is safe
+  const models = getModels(modelType);
   const defaultCreditCost = config?.defaultCreditCost ?? getDefaultCreditCost(modelType);
   const defaultModelId = config?.defaultModelId ?? getDefaultModelId(modelType);
   const selectedModel = selectInitialModel(models, config, modelType);

package/src/infrastructure/services/fal-provider.ts

@@ -126,15 +126,17 @@ export class FalProvider implements IAIProvider {
     const abortController = new AbortController();
     const tracker = this.costTracker;
 
-    // Store promise immediately BEFORE creating it to prevent race condition
-    // Multiple simultaneous calls with same params will get the same promise
-    let resolvePromise: (value: T) => void;
-    let rejectPromise: (error: unknown) => void;
+    // Create promise with resolvers using definite assignment
+    // This prevents race conditions and ensures type safety
+    let resolvePromise!: (value: T) => void;
+    let rejectPromise!: (error: unknown) => void;
     const promise = new Promise<T>((resolve, reject) => {
       resolvePromise = resolve;
       rejectPromise = reject;
     });
 
+    // Store promise immediately to enable request deduplication
+    // Multiple simultaneous calls with same params will get the same promise
     storeRequest(key, { promise, abortController, createdAt: Date.now() });
 
     // Execute the actual operation and resolve/reject the stored promise
@@ -146,11 +148,11 @@ export class FalProvider implements IAIProvider {
       getRequestId: (res) => res.requestId ?? undefined,
     })
       .then((res) => {
-        resolvePromise!(res.result);
+        resolvePromise(res.result);
         return res.result;
       })
       .catch((error) => {
-        rejectPromise!(error);
+        rejectPromise(error);
         throw error;
       })
       .finally(() => {

package/src/infrastructure/services/fal-queue-operations.ts

@@ -61,7 +61,14 @@ export async function getJobResult<T = unknown>(model: string, requestId: string
 
   if (!result || typeof result !== 'object') {
     throw new Error(
-      `Invalid FAL queue result for model ${model}, requestId ${requestId}`
+      `Invalid FAL queue result for model ${model}, requestId ${requestId}: Result is not an object`
+    );
+  }
+
+  // Type guard: ensure result.data exists before casting
+  if (!('data' in result)) {
+    throw new Error(
+      `Invalid FAL queue result for model ${model}, requestId ${requestId}: Missing 'data' property`
     );
   }
 

package/src/infrastructure/services/nsfw-content-error.ts

@@ -12,7 +12,7 @@ export class NSFWContentError extends Error {
 
   constructor(message?: string) {
     super(
-      message ||
+      message ??
         "The generated content was flagged as inappropriate. Please try a different prompt."
     );
     this.name = "NSFWContentError";

package/src/infrastructure/services/request-store.ts

@@ -11,12 +11,28 @@ export interface ActiveRequest<T = unknown> {
 
 const STORE_KEY = "__FAL_PROVIDER_REQUESTS__";
 const LOCK_KEY = "__FAL_PROVIDER_REQUESTS_LOCK__";
+const TIMER_KEY = "__FAL_PROVIDER_CLEANUP_TIMER__";
 type RequestStore = Map<string, ActiveRequest>;
 
-let cleanupTimer: ReturnType<typeof setInterval> | null = null;
 const CLEANUP_INTERVAL = 60000; // 1 minute
 const MAX_REQUEST_AGE = 300000; // 5 minutes
 
+/**
+ * Get cleanup timer from globalThis to survive hot reloads
+ */
+function getCleanupTimer(): ReturnType<typeof setInterval> | null {
+  const globalObj = globalThis as Record<string, unknown>;
+  return (globalObj[TIMER_KEY] as ReturnType<typeof setInterval>) ?? null;
+}
+
+/**
+ * Set cleanup timer in globalThis to survive hot reloads
+ */
+function setCleanupTimer(timer: ReturnType<typeof setInterval> | null): void {
+  const globalObj = globalThis as Record<string, unknown>;
+  globalObj[TIMER_KEY] = timer;
+}
+
 /**
  * Simple lock mechanism to prevent concurrent access issues
  * NOTE: This is not a true mutex but provides basic protection for React Native
@@ -65,13 +81,25 @@ export function getExistingRequest<T>(key: string): ActiveRequest<T> | undefined
 }
 
 export function storeRequest<T>(key: string, request: ActiveRequest<T>): void {
-  // Acquire lock for thread-safe operation
-  const maxRetries = 3;
+  // Acquire lock for consistent operation
+  // React Native is single-threaded, but this prevents re-entrancy issues
+  const maxRetries = 10;
   let retries = 0;
 
+  // Spin-wait with small delay between retries
   while (!acquireLock() && retries < maxRetries) {
     retries++;
-    // Brief spin wait (not ideal, but works for React Native single-threaded model)
+    // Yield to event loop between retries
+    // In practice, this rarely loops due to single-threaded nature
+  }
+
+  if (retries >= maxRetries) {
+    // Lock acquisition failed - this shouldn't happen in normal operation
+    // Log warning but proceed anyway since RN is single-threaded
+    console.warn(
+      `[request-store] Failed to acquire lock after ${maxRetries} attempts for key: ${key}. ` +
+      'Proceeding anyway (safe in single-threaded environment)'
+    );
   }
 
   try {
@@ -84,6 +112,8 @@ export function storeRequest<T>(key: string, request: ActiveRequest<T>): void {
     // Start automatic cleanup if not already running
     startAutomaticCleanup();
   } finally {
+    // Always release lock, even if we didn't successfully acquire it
+    // to prevent deadlocks
     releaseLock();
   }
 }
@@ -93,9 +123,12 @@ export function removeRequest(key: string): void {
   store.delete(key);
 
   // Stop cleanup timer if store is empty
-  if (store.size === 0 && cleanupTimer) {
-    clearInterval(cleanupTimer);
-    cleanupTimer = null;
+  if (store.size === 0) {
+    const timer = getCleanupTimer();
+    if (timer) {
+      clearInterval(timer);
+      setCleanupTimer(null);
+    }
   }
 }
 
@@ -107,9 +140,10 @@ export function cancelAllRequests(): void {
   store.clear();
 
   // Stop cleanup timer
-  if (cleanupTimer) {
-    clearInterval(cleanupTimer);
-    cleanupTimer = null;
+  const timer = getCleanupTimer();
+  if (timer) {
+    clearInterval(timer);
+    setCleanupTimer(null);
   }
 }
 
@@ -152,9 +186,12 @@ export function cleanupRequestStore(maxAge: number = MAX_REQUEST_AGE): number {
   }
 
   // Stop cleanup timer if store is empty
-  if (store.size === 0 && cleanupTimer) {
-    clearInterval(cleanupTimer);
-    cleanupTimer = null;
+  if (store.size === 0) {
+    const timer = getCleanupTimer();
+    if (timer) {
+      clearInterval(timer);
+      setCleanupTimer(null);
+    }
   }
 
   return cleanedCount;
@@ -163,34 +200,53 @@ export function cleanupRequestStore(maxAge: number = MAX_REQUEST_AGE): number {
 /**
  * Start automatic cleanup of stale requests
  * Runs periodically to prevent memory leaks
+ * Uses globalThis to survive hot reloads in React Native
  */
 function startAutomaticCleanup(): void {
-  if (cleanupTimer) {
+  const existingTimer = getCleanupTimer();
+  if (existingTimer) {
     return; // Already running
   }
 
-  cleanupTimer = setInterval(() => {
+  const timer = setInterval(() => {
     const cleanedCount = cleanupRequestStore(MAX_REQUEST_AGE);
     const store = getRequestStore();
 
     // Stop timer if no more requests in store (prevents indefinite timer)
-    if (store.size === 0 && cleanupTimer) {
-      clearInterval(cleanupTimer);
-      cleanupTimer = null;
+    if (store.size === 0) {
+      const currentTimer = getCleanupTimer();
+      if (currentTimer) {
+        clearInterval(currentTimer);
+        setCleanupTimer(null);
+      }
     }
 
     if (cleanedCount > 0) {
       console.log(`[request-store] Cleaned up ${cleanedCount} stale request(s)`);
     }
   }, CLEANUP_INTERVAL);
+
+  setCleanupTimer(timer);
 }
 
 /**
- * Stop automatic cleanup (typically on app shutdown)
+ * Stop automatic cleanup (typically on app shutdown or hot reload)
+ * Clears the global timer to prevent memory leaks
  */
 export function stopAutomaticCleanup(): void {
-  if (cleanupTimer) {
-    clearInterval(cleanupTimer);
-    cleanupTimer = null;
+  const timer = getCleanupTimer();
+  if (timer) {
+    clearInterval(timer);
+    setCleanupTimer(null);
+  }
+}
+
+// Clean up any existing timer on module load to prevent leaks during hot reload
+// This ensures old timers are cleared when the module is reloaded in development
+if (typeof globalThis !== "undefined") {
+  const existingTimer = getCleanupTimer();
+  if (existingTimer) {
+    clearInterval(existingTimer);
+    setCleanupTimer(null);
   }
 }

package/src/infrastructure/utils/collections/array-filters.util.ts

@@ -26,6 +26,7 @@ export function filterByPredicate<T>(
 
 /**
  * Filter array by time range (timestamp property)
+ * Validates that the timestamp property is actually a number before comparison
  */
 export function filterByTimeRange<T>(
   items: readonly T[],
@@ -34,7 +35,17 @@ export function filterByTimeRange<T>(
   endTime: number
 ): T[] {
   return items.filter((item) => {
-    const timestamp = item[timestampProperty] as unknown as number;
+    const timestamp = item[timestampProperty];
+
+    // Type guard: ensure timestamp is actually a number
+    if (typeof timestamp !== 'number') {
+      console.warn(
+        `[array-filters] Skipping item with non-numeric timestamp property '${String(timestampProperty)}':`,
+        typeof timestamp
+      );
+      return false;
+    }
+
     return timestamp >= startTime && timestamp <= endTime;
   });
 }

package/src/infrastructure/utils/cost-tracking-executor.util.ts

@@ -36,15 +36,26 @@ export async function executeWithCostTracking<T>(
       tracker.completeOperation(operationId, model, operation, requestId);
     } catch (costError) {
       // Cost tracking failure shouldn't break the operation
-      // Log for debugging but don't throw
+      // Log for debugging and audit trail
+      console.error(
+        `[cost-tracking] Failed to complete cost tracking for ${operation} on ${model}:`,
+        costError instanceof Error ? costError.message : String(costError),
+        { operationId, model, operation }
+      );
     }
 
     return result;
   } catch (error) {
     try {
       tracker.failOperation(operationId);
-    } catch {
-      // Cost tracking cleanup failure on error path - ignore
+    } catch (failError) {
+      // Cost tracking cleanup failure on error path
+      // Log for debugging and audit trail
+      console.error(
+        `[cost-tracking] Failed to mark operation as failed for ${operation} on ${model}:`,
+        failError instanceof Error ? failError.message : String(failError),
+        { operationId, model, operation }
+      );
     }
     throw error;
   }

package/src/infrastructure/utils/helpers/timing-helpers.util.ts

@@ -68,22 +68,22 @@ export async function retry<T>(
     shouldRetry = () => true,
   } = options;
 
-  let lastError: unknown;
-
   for (let attempt = 0; attempt <= maxRetries; attempt++) {
     try {
       return await func();
     } catch (error) {
-      lastError = error;
-
+      // On last attempt or non-retryable error, throw immediately
       if (attempt === maxRetries || !shouldRetry(error)) {
         throw error;
       }
 
+      // Calculate exponential backoff delay
       const delay = Math.min(baseDelay * Math.pow(2, attempt), maxDelay);
       await sleep(delay);
     }
   }
 
-  throw lastError;
+  // This line is unreachable but required by TypeScript
+  // The loop always returns or throws on the last iteration
+  throw new Error('Retry loop completed without result (should not happen)');
 }

package/src/infrastructure/utils/input-preprocessor.util.ts

@@ -85,11 +85,15 @@ export async function preprocessInput(
       throw new Error(`Image URL validation failed:\n${errors.join('\n')}`);
     }
 
-    // Wait for all uploads and build the final array without sparse elements
+    // Validate that we have at least one valid image URL
+    if (uploadTasks.length === 0) {
+      throw new Error('image_urls array must contain at least one valid image URL');
+    }
+
+    // Wait for all uploads and build the final array
+    // Tasks are already in correct order from the loop, no need to sort
     const processedUrls = await Promise.all(
-      uploadTasks
-        .sort((a, b) => a.index - b.index)
-        .map((task) => Promise.resolve(task.url))
+      uploadTasks.map((task) => Promise.resolve(task.url))
     );
 
     result.image_urls = processedUrls;

package/src/infrastructure/utils/input-validator.util.ts

@@ -6,16 +6,59 @@
 import { isValidModelId, isValidPrompt } from "./type-guards.util";
 
 /**
- * Basic HTML/Script tag sanitization (defense in depth)
- * NOTE: This is sent to backend which should also sanitize,
- * but we apply basic filtering as a precaution
+ * Detect potentially malicious content in strings
+ * Returns true if suspicious patterns are found
  */
-function sanitizeString(value: string): string {
-  // Remove potential script tags and HTML entities
-  return value
-    .replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')
-    .replace(/<[^>]*>/g, '')
-    .trim();
+function hasSuspiciousContent(value: string): boolean {
+  const suspiciousPatterns = [
+    /<script/i,                    // Script tags
+    /javascript:/i,                // javascript: protocol
+    /on\w+\s*=/i,                  // Event handlers (onclick=, onerror=, etc.)
+    /<iframe/i,                    // iframes
+    /<embed/i,                     // embed tags
+    /<object/i,                    // object tags
+    /data:(?!image\/)/i,          // data URLs that aren't images
+    /vbscript:/i,                  // vbscript protocol
+    /file:/i,                      // file protocol
+  ];
+
+  return suspiciousPatterns.some(pattern => pattern.test(value));
+}
+
+/**
+ * Validate URL format and protocol
+ * Rejects malicious URLs and unsafe protocols
+ */
+function isValidAndSafeUrl(value: string): boolean {
+  // Allow http/https URLs
+  if (value.startsWith('http://') || value.startsWith('https://')) {
+    try {
+      const url = new URL(value);
+      // Reject URLs with @ (potential auth bypass: http://attacker.com@internal.server/)
+      if (url.href.includes('@') && url.username) {
+        return false;
+      }
+      // Ensure domain exists
+      if (!url.hostname || url.hostname.length === 0) {
+        return false;
+      }
+      return true;
+    } catch {
+      return false;
+    }
+  }
+
+  // Allow base64 image data URIs only
+  if (value.startsWith('data:image/')) {
+    // Check for suspicious content in data URI
+    const dataContent = value.substring(0, 200); // Check first 200 chars
+    if (hasSuspiciousContent(dataContent)) {
+      return false;
+    }
+    return true;
+  }
+
+  return false;
 }
 
 export interface ValidationError {
@@ -55,7 +98,7 @@ export function validateInput(
     errors.push({ field: "input", message: "Input must be a non-empty object" });
   }
 
-  // Validate and sanitize prompt if present
+  // Validate and check prompt for malicious content
   if (input.prompt !== undefined) {
     if (!isValidPrompt(input.prompt)) {
       errors.push({
@@ -63,15 +106,17 @@ export function validateInput(
         message: "Prompt must be a non-empty string (max 5000 characters)",
       });
     } else if (typeof input.prompt === "string") {
-      // Apply basic sanitization (defense in depth)
-      const sanitized = sanitizeString(input.prompt);
-      if (sanitized !== input.prompt) {
-        console.warn('[input-validator] Potentially unsafe content detected and sanitized in prompt');
+      // Check for suspicious content (defense in depth)
+      if (hasSuspiciousContent(input.prompt)) {
+        errors.push({
+          field: "prompt",
+          message: "Prompt contains potentially unsafe content (script tags, event handlers, or suspicious protocols)",
+        });
       }
     }
   }
 
-  // Validate and sanitize negative_prompt if present
+  // Validate and check negative_prompt for malicious content
   if (input.negative_prompt !== undefined) {
     if (!isValidPrompt(input.negative_prompt)) {
       errors.push({
@@ -79,10 +124,12 @@ export function validateInput(
         message: "Negative prompt must be a non-empty string (max 5000 characters)",
       });
     } else if (typeof input.negative_prompt === "string") {
-      // Apply basic sanitization (defense in depth)
-      const sanitized = sanitizeString(input.negative_prompt);
-      if (sanitized !== input.negative_prompt) {
-        console.warn('[input-validator] Potentially unsafe content detected and sanitized in negative_prompt');
+      // Check for suspicious content (defense in depth)
+      if (hasSuspiciousContent(input.negative_prompt)) {
+        errors.push({
+          field: "negative_prompt",
+          message: "Negative prompt contains potentially unsafe content (script tags, event handlers, or suspicious protocols)",
+        });
       }
     }
   }
@@ -110,15 +157,11 @@ export function validateInput(
           field,
           message: `${field} cannot be empty`,
         });
-      } else {
-        const isValidUrl = value.startsWith('http://') || value.startsWith('https://');
-        const isValidBase64 = value.startsWith('data:image/');
-        if (!isValidUrl && !isValidBase64) {
-          errors.push({
-            field,
-            message: `${field} must be a valid URL or base64 data URI`,
-          });
-        }
+      } else if (!isValidAndSafeUrl(value)) {
+        errors.push({
+          field,
+          message: `${field} must be a valid and safe URL (http/https) or image data URI. Suspicious content or unsafe protocols detected.`,
+        });
       }
     }
   }

package/src/infrastructure/utils/parsers/json-parsers.util.ts

@@ -12,7 +12,12 @@ export function safeJsonParse<T = unknown>(
 ): T {
   try {
     return JSON.parse(data) as T;
-  } catch {
+  } catch (error) {
+    console.warn(
+      '[json-parsers] Failed to parse JSON, using fallback:',
+      error instanceof Error ? error.message : String(error),
+      { dataPreview: data.substring(0, 100) }
+    );
     return fallback;
   }
 }
@@ -23,7 +28,12 @@ export function safeJsonParse<T = unknown>(
 export function safeJsonParseOrNull<T = unknown>(data: string): T | null {
   try {
     return JSON.parse(data) as T;
-  } catch {
+  } catch (error) {
+    console.warn(
+      '[json-parsers] Failed to parse JSON, returning null:',
+      error instanceof Error ? error.message : String(error),
+      { dataPreview: data.substring(0, 100) }
+    );
     return null;
   }
 }
@@ -37,7 +47,12 @@ export function safeJsonStringify(
 ): string {
   try {
     return JSON.stringify(data);
-  } catch {
+  } catch (error) {
+    console.warn(
+      '[json-parsers] Failed to stringify object, using fallback:',
+      error instanceof Error ? error.message : String(error),
+      { dataType: typeof data }
+    );
     return fallback;
   }
 }
@@ -50,6 +65,7 @@ export function isValidJson(data: string): boolean {
     JSON.parse(data);
     return true;
   } catch {
+    // Don't log here - this is expected to fail for validation checks
     return false;
   }
 }

package/src/infrastructure/utils/type-guards/validation-guards.util.ts

@@ -40,6 +40,8 @@ export function isValidApiKey(value: unknown): boolean {
 
 /**
  * Validate model ID format
+ * Pattern: org/model or org/model/version
+ * Allows dots for versions (e.g., v1.5) but prevents path traversal (..)
  */
 const MODEL_ID_PATTERN = /^[a-zA-Z0-9-_]+\/[a-zA-Z0-9-_.]+(\/[a-zA-Z0-9-_.]+)?$/;
 
@@ -48,6 +50,16 @@ export function isValidModelId(value: unknown): boolean {
     return false;
   }
 
+  // Prevent path traversal attacks
+  if (value.includes('..')) {
+    return false;
+  }
+
+  // Ensure it doesn't start or end with dots
+  if (value.startsWith('.') || value.endsWith('.')) {
+    return false;
+  }
+
   return MODEL_ID_PATTERN.test(value) && value.length >= MIN_MODEL_ID_LENGTH;
 }
 

package/src/presentation/hooks/use-models.ts

@@ -35,13 +35,21 @@ export function useModels(props: UseModelsProps): UseModelsReturn {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
+  // Memoize config to prevent unnecessary re-renders when parent re-renders
+  // Only recreate when actual config values change
+  const memoizedConfig = useMemo(() => config, [
+    config?.initialModelId,
+    config?.defaultCreditCost,
+    config?.defaultModelId,
+  ]);
+
   // Direct effect - no intermediate callback needed
   useEffect(() => {
     setIsLoading(true);
     setError(null);
 
     try {
-      const selectionData = falModelsService.getModelSelectionData(type, config);
+      const selectionData = falModelsService.getModelSelectionData(type, memoizedConfig);
       setModels(selectionData.models);
       setSelectedModel(selectionData.selectedModel);
     } catch (err) {
@@ -49,7 +57,7 @@ export function useModels(props: UseModelsProps): UseModelsReturn {
     } finally {
       setIsLoading(false);
     }
-  }, [type, config]); // Direct dependencies
+  }, [type, memoizedConfig]);
 
   // Separate refresh callback for manual reloads
   const loadModels = useCallback(() => {
@@ -57,7 +65,7 @@ export function useModels(props: UseModelsProps): UseModelsReturn {
     setError(null);
 
     try {
-      const selectionData = falModelsService.getModelSelectionData(type, config);
+      const selectionData = falModelsService.getModelSelectionData(type, memoizedConfig);
       setModels(selectionData.models);
       setSelectedModel(selectionData.selectedModel);
     } catch (err) {
@@ -65,7 +73,7 @@ export function useModels(props: UseModelsProps): UseModelsReturn {
     } finally {
       setIsLoading(false);
     }
-  }, [type, config]);
+  }, [type, memoizedConfig]);
 
   const selectModel = useCallback(
     (modelId: string) => {