AI Story Writer Backend Migration Complete, Frontend UI Components Added

frontend/src/hooks/useSchedulerTaskAlerts.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { useAuth } from '@clerk/clerk-react';
-import { apiClient } from '../api/client';
 import { showToastNotification } from '../utils/toastNotifications';
+import { getTasksNeedingIntervention, TaskNeedingIntervention } from '../api/schedulerDashboard';
 
 /**
  * Hook to poll for tasks needing intervention and show toast notifications
@@ -31,32 +31,7 @@ export function useSchedulerTaskAlerts(options: {
         isPollingRef.current = true;
 
         // Fetch tasks needing intervention
-        const response = await apiClient.get<{
-          success: boolean;
-          tasks: Array<{
-            task_id: number;
-            task_type: string;
-            user_id: string;
-            platform?: string;
-            website_url?: string;
-            failure_pattern: {
-              consecutive_failures: number;
-              recent_failures: number;
-              failure_reason: string;
-              last_failure_time: string | null;
-              error_patterns: string[];
-            };
-            failure_reason: string | null;
-            last_failure: string | null;
-          }>;
-          count: number;
-        }>(`/api/scheduler/tasks-needing-intervention/${userId}`);
-
-        if (!response.data.success) {
-          return;
-        }
-
-        const tasks = response.data.tasks || [];
+        const tasks: TaskNeedingIntervention[] = await getTasksNeedingIntervention(userId);
 
         // Show toast only for critical failures (API limits) - other failures are shown in dedicated section
         for (const task of tasks) {

frontend/src/hooks/useStoryWriterState.ts

@@ -22,6 +22,7 @@ export interface StoryWriterState {
   storyLength: string;
   enableExplainer: boolean;
   enableIllustration: boolean;
+  enableNarration: boolean;
   enableVideoNarration: boolean;
 
   // Image generation settings
@@ -75,6 +76,7 @@ const DEFAULT_STATE: Partial<StoryWriterState> = {
   storyLength: 'Medium',
   enableExplainer: true,
   enableIllustration: true,
+  enableNarration: true,
   enableVideoNarration: true,
   // Image generation settings
   imageProvider: null,
@@ -252,6 +254,10 @@ export const useStoryWriterState = () => {
     setState((prev) => ({ ...prev, enableIllustration: enabled }));
   }, []);
 
+  const setEnableNarration = useCallback((enabled: boolean) => {
+    setState((prev) => ({ ...prev, enableNarration: enabled }));
+  }, []);
+
   const setEnableVideoNarration = useCallback((enabled: boolean) => {
     setState((prev) => ({ ...prev, enableVideoNarration: enabled }));
   }, []);
@@ -371,6 +377,7 @@ export const useStoryWriterState = () => {
       story_length: state.storyLength,
       enable_explainer: state.enableExplainer,
       enable_illustration: state.enableIllustration,
+      enable_narration: state.enableNarration,
       enable_video_narration: state.enableVideoNarration,
       // Image generation settings
       image_provider: state.imageProvider || undefined,
@@ -422,6 +429,7 @@ export const useStoryWriterState = () => {
     setStoryLength,
     setEnableExplainer,
     setEnableIllustration,
+    setEnableNarration,
     setEnableVideoNarration,
     setImageProvider,
     setImageWidth,