TaskManager refactor

frontend/src/components/PasswordPrompt.svelte

@@ -0,0 +1,123 @@
+<!-- [DEF:PasswordPrompt:Component] -->
+<!--
+@SEMANTICS: password, prompt, modal, input, security
+@PURPOSE: A modal component to prompt the user for database passwords when a migration task is paused.
+@LAYER: UI
+@RELATION: USES -> frontend/src/lib/api.js (inferred)
+@RELATION: EMITS -> resume, cancel
+-->
+<script>
+    import { createEventDispatcher } from 'svelte';
+    
+    export let show = false;
+    export let databases = []; // List of database names requiring passwords
+    export let errorMessage = "";
+    
+    const dispatch = createEventDispatcher();
+    
+    let passwords = {};
+    let submitting = false;
+    
+    function handleSubmit() {
+        if (submitting) return;
+        
+        // Validate all passwords entered
+        const missing = databases.filter(db => !passwords[db]);
+        if (missing.length > 0) {
+            alert(`Please enter passwords for: ${missing.join(', ')}`);
+            return;
+        }
+        
+        submitting = true;
+        dispatch('resume', { passwords });
+        // Reset submitting state is handled by parent or on close
+    }
+    
+    function handleCancel() {
+        dispatch('cancel');
+        show = false;
+    }
+    
+    // Reset passwords when modal opens/closes
+    $: if (!show) {
+        passwords = {};
+        submitting = false;
+    }
+</script>
+
+{#if show}
+    <div class="fixed inset-0 z-50 overflow-y-auto" aria-labelledby="modal-title" role="dialog" aria-modal="true">
+        <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+            <!-- Background overlay -->
+            <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" aria-hidden="true" on:click={handleCancel}></div>
+
+            <span class="hidden sm:inline-block sm:align-middle sm:h-screen" aria-hidden="true">&#8203;</span>
+
+            <div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <div class="sm:flex sm:items-start">
+                        <div class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
+                            <!-- Heroicon name: outline/lock-closed -->
+                            <svg class="h-6 w-6 text-red-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
+                            </svg>
+                        </div>
+                        <div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
+                            <h3 class="text-lg leading-6 font-medium text-gray-900" id="modal-title">
+                                Database Password Required
+                            </h3>
+                            <div class="mt-2">
+                                <p class="text-sm text-gray-500 mb-4">
+                                    The migration process requires passwords for the following databases to proceed.
+                                </p>
+                                
+                                {#if errorMessage}
+                                    <div class="mb-4 p-2 bg-red-50 text-red-700 text-xs rounded border border-red-200">
+                                        Error: {errorMessage}
+                                    </div>
+                                {/if}
+
+                                <form on:submit|preventDefault={handleSubmit} class="space-y-4">
+                                    {#each databases as dbName}
+                                        <div>
+                                            <label for="password-{dbName}" class="block text-sm font-medium text-gray-700">
+                                                Password for {dbName}
+                                            </label>
+                                            <input
+                                                type="password"
+                                                id="password-{dbName}"
+                                                bind:value={passwords[dbName]}
+                                                class="mt-1 block w-full border-gray-300 rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm p-2 border"
+                                                placeholder="Enter password"
+                                                required
+                                            />
+                                        </div>
+                                    {/each}
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+                    <button
+                        type="button"
+                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-indigo-600 text-base font-medium text-white hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:ml-3 sm:w-auto sm:text-sm disabled:opacity-50"
+                        on:click={handleSubmit}
+                        disabled={submitting}
+                    >
+                        {submitting ? 'Resuming...' : 'Resume Migration'}
+                    </button>
+                    <button
+                        type="button"
+                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                        on:click={handleCancel}
+                        disabled={submitting}
+                    >
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+{/if}
+<!-- [/DEF:PasswordPrompt] -->

frontend/src/components/TaskHistory.svelte

@@ -0,0 +1,126 @@
+<!-- [DEF:TaskHistory:Component] -->
+<!--
+@SEMANTICS: task, history, list, status, monitoring
+@PURPOSE: Displays a list of recent tasks with their status and allows selecting them for viewing logs.
+@LAYER: UI
+@RELATION: USES -> frontend/src/lib/stores.js
+@RELATION: USES -> frontend/src/lib/api.js (inferred)
+-->
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { selectedTask } from '../lib/stores.js';
+    
+    let tasks = [];
+    let loading = true;
+    let error = "";
+    let interval;
+    
+    async function fetchTasks() {
+        try {
+            const res = await fetch('/api/tasks?limit=10');
+            if (!res.ok) throw new Error('Failed to fetch tasks');
+            tasks = await res.json();
+            
+            // Update selected task if it exists in the list (for status updates)
+            if ($selectedTask) {
+                const updatedTask = tasks.find(t => t.id === $selectedTask.id);
+                if (updatedTask && updatedTask.status !== $selectedTask.status) {
+                    selectedTask.set(updatedTask);
+                }
+            }
+        } catch (e) {
+            error = e.message;
+        } finally {
+            loading = false;
+        }
+    }
+    
+    function selectTask(task) {
+        selectedTask.set(task);
+    }
+    
+    function getStatusColor(status) {
+        switch (status) {
+            case 'SUCCESS': return 'bg-green-100 text-green-800';
+            case 'FAILED': return 'bg-red-100 text-red-800';
+            case 'RUNNING': return 'bg-blue-100 text-blue-800';
+            case 'AWAITING_INPUT': return 'bg-orange-100 text-orange-800';
+            case 'AWAITING_MAPPING': return 'bg-yellow-100 text-yellow-800';
+            default: return 'bg-gray-100 text-gray-800';
+        }
+    }
+    
+    onMount(() => {
+        fetchTasks();
+        interval = setInterval(fetchTasks, 5000); // Poll every 5s
+    });
+    
+    onDestroy(() => {
+        clearInterval(interval);
+    });
+</script>
+
+<div class="bg-white shadow overflow-hidden sm:rounded-lg mb-8">
+    <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
+        <h3 class="text-lg leading-6 font-medium text-gray-900">
+            Recent Tasks
+        </h3>
+        <button 
+            on:click={fetchTasks}
+            class="text-sm text-indigo-600 hover:text-indigo-900 focus:outline-none"
+        >
+            Refresh
+        </button>
+    </div>
+    
+    {#if loading && tasks.length === 0}
+        <div class="p-4 text-center text-gray-500">Loading tasks...</div>
+    {:else if error}
+        <div class="p-4 text-center text-red-500">{error}</div>
+    {:else if tasks.length === 0}
+        <div class="p-4 text-center text-gray-500">No recent tasks found.</div>
+    {:else}
+        <ul class="divide-y divide-gray-200">
+            {#each tasks as task}
+                <li>
+                    <button 
+                        class="w-full text-left block hover:bg-gray-50 focus:outline-none focus:bg-gray-50 transition duration-150 ease-in-out"
+                        class:bg-indigo-50={$selectedTask && $selectedTask.id === task.id}
+                        on:click={() => selectTask(task)}
+                    >
+                        <div class="px-4 py-4 sm:px-6">
+                            <div class="flex items-center justify-between">
+                                <p class="text-sm font-medium text-indigo-600 truncate">
+                                    {task.plugin_id}
+                                    <span class="text-gray-500 text-xs ml-2">({task.id.slice(0, 8)})</span>
+                                </p>
+                                <div class="ml-2 flex-shrink-0 flex">
+                                    <p class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {getStatusColor(task.status)}">
+                                        {task.status}
+                                    </p>
+                                </div>
+                            </div>
+                            <div class="mt-2 sm:flex sm:justify-between">
+                                <div class="sm:flex">
+                                    <p class="flex items-center text-sm text-gray-500">
+                                        {#if task.params.from_env && task.params.to_env}
+                                            {task.params.from_env} &rarr; {task.params.to_env}
+                                        {:else}
+                                            Params: {Object.keys(task.params).length} keys
+                                        {/if}
+                                    </p>
+                                </div>
+                                <div class="mt-2 flex items-center text-sm text-gray-500 sm:mt-0">
+                                    <p>
+                                        Started: {new Date(task.started_at || task.created_at || Date.now()).toLocaleString()}
+                                    </p>
+                                </div>
+                            </div>
+                        </div>
+                    </button>
+                </li>
+            {/each}
+        </ul>
+    {/if}
+</div>
+<!-- [/DEF:TaskHistory] -->

frontend/src/components/TaskRunner.svelte

@@ -16,6 +16,7 @@
     import { getWsUrl } from '../lib/api.js';
     import { addToast } from '../lib/toasts.js';
     import MissingMappingModal from './MissingMappingModal.svelte';
+    import PasswordPrompt from './PasswordPrompt.svelte';
     // [/SECTION]
 
     let ws;
@@ -26,10 +27,13 @@
     let reconnectTimeout;
     let waitingForData = false;
     let dataTimeout;
-    let connectionStatus = 'disconnected'; // 'connecting', 'connected', 'disconnected', 'waiting', 'completed', 'awaiting_mapping'
+    let connectionStatus = 'disconnected'; // 'connecting', 'connected', 'disconnected', 'waiting', 'completed', 'awaiting_mapping', 'awaiting_input'
     let showMappingModal = false;
     let missingDbInfo = { name: '', uuid: '' };
     let targetDatabases = [];
+    
+    let showPasswordPrompt = false;
+    let passwordPromptData = { databases: [], errorMessage: '' };
 
     // [DEF:connect:Function]
     /**
@@ -73,6 +77,20 @@
                     showMappingModal = true;
                 }
             }
+            
+            // Check for password request via log context or message
+            // Note: The backend logs "Task paused for user input" with context
+            if (logEntry.message && logEntry.message.includes('Task paused for user input') && logEntry.context && logEntry.context.input_request) {
+                const request = logEntry.context.input_request;
+                if (request.type === 'database_password') {
+                    connectionStatus = 'awaiting_input';
+                    passwordPromptData = {
+                        databases: request.databases || [],
+                        errorMessage: request.error_message || ''
+                    };
+                    showPasswordPrompt = true;
+                }
+            }
         };
 
         ws.onerror = (error) => {
@@ -158,6 +176,25 @@
             addToast('Failed to resolve mapping: ' + e.message, 'error');
         }
     }
+    
+    async function handlePasswordResume(event) {
+        const task = get(selectedTask);
+        const { passwords } = event.detail;
+        
+        try {
+            await fetch(`/api/tasks/${task.id}/resume`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ passwords })
+            });
+            
+            showPasswordPrompt = false;
+            connectionStatus = 'connected';
+            addToast('Passwords submitted, resuming migration...', 'success');
+        } catch (e) {
+            addToast('Failed to resume task: ' + e.message, 'error');
+        }
+    }
 
     function startDataTimeout() {
         waitingForData = false;
@@ -228,6 +265,9 @@
                 {:else if connectionStatus === 'awaiting_mapping'}
                     <span class="h-3 w-3 rounded-full bg-orange-500 animate-pulse"></span>
                     <span class="text-xs text-gray-500">Awaiting Mapping</span>
+                {:else if connectionStatus === 'awaiting_input'}
+                    <span class="h-3 w-3 rounded-full bg-orange-500 animate-pulse"></span>
+                    <span class="text-xs text-gray-500">Awaiting Input</span>
                 {:else}
                     <span class="h-3 w-3 rounded-full bg-red-500"></span>
                     <span class="text-xs text-gray-500">Disconnected</span>
@@ -263,6 +303,14 @@
     on:resolve={handleMappingResolve}
     on:cancel={() => { connectionStatus = 'disconnected'; ws.close(); }}
 />
+
+<PasswordPrompt
+    bind:show={showPasswordPrompt}
+    databases={passwordPromptData.databases}
+    errorMessage={passwordPromptData.errorMessage}
+    on:resume={handlePasswordResume}
+    on:cancel={() => { showPasswordPrompt = false; }}
+/>
 <!-- [/SECTION] -->
 
 <!-- [/DEF:TaskRunner] -->

frontend/src/routes/migration/+page.svelte

@@ -15,6 +15,7 @@
   import DashboardGrid from '../../components/DashboardGrid.svelte';
   import MappingTable from '../../components/MappingTable.svelte';
   import MissingMappingModal from '../../components/MissingMappingModal.svelte';
+  import TaskHistory from '../../components/TaskHistory.svelte';
   import type { DashboardMetadata, DashboardSelection } from '../../types/dashboard';
   // [/SECTION]
 
@@ -194,6 +195,8 @@
 <!-- [SECTION: TEMPLATE] -->
 <div class="max-w-4xl mx-auto p-6">
   <h1 class="text-2xl font-bold mb-6">Migration Dashboard</h1>
+  
+  <TaskHistory />
 
   {#if loading}
     <p>Loading environments...</p>