diff --git a/apps/flowlord/handler.go b/apps/flowlord/handler.go
index a4823be..46603cb 100644
--- a/apps/flowlord/handler.go
+++ b/apps/flowlord/handler.go
@@ -47,6 +47,9 @@ var HeaderTemplate string
 //go:embed handler/about.tmpl
 var AboutTemplate string
 
+//go:embed handler/backload.tmpl
+var BackloadTemplate string
+
 //go:embed handler/static/*
 var StaticFiles embed.FS
 
@@ -128,6 +131,7 @@ func (tm *taskMaster) StartHandler() {
 	router.Get("/web/files", tm.htmlFiles)
 	router.Get("/web/task", tm.htmlTask)
 	router.Get("/web/workflow", tm.htmlWorkflow)
+	router.Get("/web/backload", tm.htmlBackload)
 	router.Get("/web/about", tm.htmlAbout)
 
 	if tm.port == 0 {
@@ -284,11 +288,11 @@ func (tm *taskMaster) refreshHandler(w http.ResponseWriter, _ *http.Request) {
 	}
 	v := struct {
 		Files   []string `json:",omitempty"`
-		Cache string 
+		Cache   string
 		Updated time.Time
 	}{
 		Files:   files,
-		Cache: s, 
+		Cache:   s,
 		Updated: tm.lastUpdate.UTC(),
 	}
 	b, _ := json.MarshalIndent(v, "", "  ")
@@ -391,7 +395,6 @@ func (tm *taskMaster) htmlAlert(w http.ResponseWriter, r *http.Request) {
 	// Get dates with alerts for calendar highlighting
 	datesWithData, _ := tm.taskCache.DatesByType("alerts")
 
-	w.WriteHeader(http.StatusOK)
 	w.Header().Set("Content-Type", "text/html")
 	w.Write(alertHTML(alerts, dt, datesWithData))
 }
@@ -413,7 +416,6 @@ func (tm *taskMaster) htmlFiles(w http.ResponseWriter, r *http.Request) {
 	// Get dates with file messages for calendar highlighting
 	datesWithData, _ := tm.taskCache.DatesByType("files")
 
-	w.WriteHeader(http.StatusOK)
 	w.Header().Set("Content-Type", "text/html")
 	w.Write(filesHTML(files, dt, datesWithData))
 }
@@ -464,7 +466,6 @@ func (tm *taskMaster) htmlTask(w http.ResponseWriter, r *http.Request) {
 	// Get dates with tasks for calendar highlighting
 	datesWithData, _ := tm.taskCache.DatesByType("tasks")
 
-	w.WriteHeader(http.StatusOK)
 	w.Header().Set("Content-Type", "text/html")
 	htmlBytes := taskHTML(tasks, taskStats, totalCount, dt, filter, datesWithData, summaryTime+queryTime)
 	w.Write(htmlBytes)
@@ -472,14 +473,13 @@ func (tm *taskMaster) htmlTask(w http.ResponseWriter, r *http.Request) {
 
 // htmlWorkflow handles GET /web/workflow - displays workflow phases from database
 func (tm *taskMaster) htmlWorkflow(w http.ResponseWriter, r *http.Request) {
-	w.WriteHeader(http.StatusOK)
 	w.Header().Set("Content-Type", "text/html")
 	w.Write(workflowHTML(tm.taskCache))
 }
 
 // htmlAbout handles GET /web/about - displays system information and cache statistics
 func (tm *taskMaster) htmlAbout(w http.ResponseWriter, r *http.Request) {
-	w.WriteHeader(http.StatusOK)
+
 	w.Header().Set("Content-Type", "text/html")
 	w.Write(tm.aboutHTML())
 }
@@ -542,8 +542,11 @@ func taskHTML(tasks []sqlite.TaskView, taskStats sqlite.TaskStats, totalCount in
 	prevDate := date.AddDate(0, 0, -1)
 	nextDate := date.AddDate(0, 0, 1)
 
-	// Get aggregate counts from TaskStats
-	counts := taskStats.TotalCounts()
+	// Get unfiltered counts for summary section (always show full day stats)
+	unfilteredCounts := taskStats.TotalCounts()
+
+	// Get filtered hourly breakdown (respects filters)
+	_, hourlyStats := taskStats.GetCountsWithHourlyFiltered(filter)
 
 	// Get unique types and jobs from TaskStats for filter dropdowns
 	types := taskStats.UniqueTypes()
@@ -569,7 +572,8 @@ func taskHTML(tasks []sqlite.TaskView, taskStats sqlite.TaskStats, totalCount in
 		"PrevDate":      prevDate.Format("2006-01-02"),
 		"NextDate":      nextDate.Format("2006-01-02"),
 		"Tasks":         tasks,
-		"Counts":        counts,
+		"Counts":        unfilteredCounts,
+		"HourlyStats":   hourlyStats,
 		"Filter":        filter,
 		"CurrentPage":   "task",
 		"PageTitle":     "Task Dashboard",
@@ -603,7 +607,7 @@ func taskHTML(tasks []sqlite.TaskView, taskStats sqlite.TaskStats, totalCount in
 	// Single consolidated log with all metrics
 	log.Printf("Task page: date=%s filters=[id=%q type=%q job=%q result=%q] total=%d filtered=%d page=%d/%d query=%v render=%v size=%.2fMB",
 		date.Format("2006-01-02"), filter.ID, filter.Type, filter.Job, filter.Result,
-		counts.Total, totalCount, filter.Page, totalPages,
+		unfilteredCounts.Total, totalCount, filter.Page, totalPages,
 		queryTime, renderTime, float64(htmlSize)/(1024*1024))
 
 	return buf.Bytes()
@@ -678,6 +682,7 @@ func (tm *taskMaster) aboutHTML() []byte {
 		"AppName":          sts.AppName,
 		"Version":          sts.Version,
 		"RunTime":          sts.RunTime,
+		"StartTime":        tm.initTime.Format(time.RFC3339),
 		"LastUpdate":       sts.LastUpdate,
 		"NextUpdate":       sts.NextUpdate,
 		"TotalDBSize":      dbSize.TotalSize,
@@ -712,6 +717,65 @@ func (tm *taskMaster) aboutHTML() []byte {
 	return buf.Bytes()
 }
 
+// htmlBackload handles GET /web/backload - displays the backload form
+func (tm *taskMaster) htmlBackload(w http.ResponseWriter, r *http.Request) {
+	w.WriteHeader(http.StatusOK)
+	w.Header().Set("Content-Type", "text/html")
+	w.Write(backloadHTML(tm.taskCache))
+}
+
+// backloadHTML renders the backload form HTML page
+func backloadHTML(tCache *sqlite.SQLite) []byte {
+	// Get all phases grouped by workflow file
+	phasesByWorkflow := tCache.GetAllPhasesGrouped()
+
+	// Create flat list of phases for JSON encoding
+	type phaseJSON struct {
+		Workflow  string `json:"workflow"`
+		Task      string `json:"task"`
+		Job       string `json:"job"`
+		Template  string `json:"template"`
+		Rule      string `json:"rule"`
+		DependsOn string `json:"dependsOn"`
+	}
+	var allPhases []phaseJSON
+	for workflow, phases := range phasesByWorkflow {
+		for _, p := range phases {
+			allPhases = append(allPhases, phaseJSON{
+				Workflow:  workflow,
+				Task:      p.Topic(),
+				Job:       p.Job(),
+				Template:  p.Template,
+				Rule:      p.Rule,
+				DependsOn: p.DependsOn,
+			})
+		}
+	}
+	phasesJSON, _ := json.Marshal(allPhases)
+
+	data := map[string]interface{}{
+		"PhasesByWorkflow": phasesByWorkflow,
+		"PhasesJSON":       template.JS(phasesJSON),
+		"CurrentPage":      "backload",
+		"PageTitle":        "Backload",
+		"isLocal":          isLocal,
+		"DatesWithData":    []string{}, // Backload page doesn't use date picker with highlights
+	}
+
+	// Parse and execute template using the shared funcMap
+	tmpl, err := template.New("backload").Funcs(getBaseFuncMap()).Parse(HeaderTemplate + BackloadTemplate)
+	if err != nil {
+		return []byte("Error parsing template: " + err.Error())
+	}
+
+	var buf bytes.Buffer
+	if err := tmpl.Execute(&buf, data); err != nil {
+		return []byte("Error executing template: " + err.Error())
+	}
+
+	return buf.Bytes()
+}
+
 // AlertData holds both the alerts and summary data for the template
 type AlertData struct {
 	Alerts  []sqlite.AlertRecord
diff --git a/apps/flowlord/handler/about.tmpl b/apps/flowlord/handler/about.tmpl
index ae77ba2..641a499 100644
--- a/apps/flowlord/handler/about.tmpl
+++ b/apps/flowlord/handler/about.tmpl
@@ -25,8 +25,9 @@
                     </div>
                     <div class="info-item">
                         <span class="info-label">Runtime</span>
-                        <span class="info-value">{{.RunTime}}</span>
+                        <span class="info-value" id="uptime">{{.RunTime}}</span>
                     </div>
+                    <input type="hidden" id="startTime" value="{{.StartTime}}">
                 </div>
                 
                 <div class="info-card">
@@ -112,7 +113,7 @@
                             {{range .TableStats}}
                             <tr>
                                 <td>{{.Name}}</td>
-                                <td>{{.RowCount}}</td>
+                                <td class="row-count">{{.RowCount}}</td>
                                 <td class="size-cell">{{.TableHuman}}</td>
                                 <td class="size-cell">{{.IndexHuman}}</td>
                                 <td class="size-cell">{{.TotalHuman}}</td>
@@ -127,12 +128,46 @@
     </div>
     
     <script>
-        // Auto-refresh every 30 seconds
-        if (window.location.search.indexOf('norefresh') === -1) {
-            setTimeout(function() {
-                location.reload();
-            }, 30000);
-        }
+        // Format numbers with commas for readability
+        document.querySelectorAll('.row-count').forEach(function(cell) {
+            const num = parseInt(cell.textContent, 10);
+            if (!isNaN(num)) {
+                cell.textContent = num.toLocaleString();
+            }
+        });
+
+        // Calculate and update uptime dynamically
+        (function() {
+            const startTimeStr = document.getElementById('startTime').value;
+            if (!startTimeStr) return;
+            
+            const startTime = new Date(startTimeStr);
+            const uptimeEl = document.getElementById('uptime');
+            
+            function formatDuration(ms) {
+                const seconds = Math.floor(ms / 1000);
+                const minutes = Math.floor(seconds / 60);
+                const hours = Math.floor(minutes / 60);
+                const days = Math.floor(hours / 24);
+                
+                const parts = [];
+                if (days > 0) parts.push(days + 'd');
+                if (hours % 24 > 0) parts.push((hours % 24) + 'h');
+                if (minutes % 60 > 0) parts.push((minutes % 60) + 'm');
+                if (seconds % 60 > 0 || parts.length === 0) parts.push((seconds % 60) + 's');
+                
+                return parts.join(' ');
+            }
+            
+            function updateUptime() {
+                const now = new Date();
+                const diff = now - startTime;
+                uptimeEl.textContent = formatDuration(diff);
+            }
+            
+            updateUptime();
+            setInterval(updateUptime, 1000);
+        })();
     </script>
 </body>
 </html>
diff --git a/apps/flowlord/handler/alert.tmpl b/apps/flowlord/handler/alert.tmpl
index ae7f3ee..f20202f 100644
--- a/apps/flowlord/handler/alert.tmpl
+++ b/apps/flowlord/handler/alert.tmpl
@@ -41,9 +41,9 @@
                     <tr>
                         <td class="id-cell id-column truncated copyable" 
                             data-full-text="{{.TaskID}}" 
-                            onclick="toggleField(this, '{{.TaskID}}')" 
-                            oncontextmenu="showContextMenu(event, '{{.TaskID}}')"
-                            ondblclick="copyToClipboard('{{.TaskID}}')"
+                            onclick="window.FlowlordUtils.toggleField(this, '{{.TaskID}}')" 
+                            oncontextmenu="window.FlowlordUtils.showContextMenu(event, '{{.TaskID}}')"
+                            ondblclick="window.FlowlordUtils.copyToClipboard('{{.TaskID}}')"
                             title="Click to expand/collapse, double-click or right-click to copy">
                             {{.TaskID}}
                         </td>
@@ -51,9 +51,9 @@
                         <td class="job-cell job-column">{{.Job}}</td>
                         <td class="message-cell message-column truncated copyable" 
                             data-full-text="{{.Msg}}" 
-                            onclick="toggleField(this, '{{.Msg}}')" 
-                            oncontextmenu="showContextMenu(event, '{{.Msg}}')"
-                            ondblclick="copyToClipboard('{{.Msg}}')"
+                            onclick="window.FlowlordUtils.toggleField(this, '{{.Msg}}')" 
+                            oncontextmenu="window.FlowlordUtils.showContextMenu(event, '{{.Msg}}')"
+                            ondblclick="window.FlowlordUtils.copyToClipboard('{{.Msg}}')"
                             title="Click to expand/collapse, double-click or right-click to copy">
                             {{.Msg}}
                         </td>
@@ -69,269 +69,17 @@
         </div>
     </div>
 
+    <script src="{{if .isLocal}}./static{{else}}/static{{end}}/table-sort.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            const table = document.getElementById('alertTable');
-            const tbody = table.querySelector('tbody');
-            const headers = table.querySelectorAll('th.sortable');
-            const dateFilter = document.getElementById('dateFilter');
-            const clearFilter = document.getElementById('clearFilter');
-            
-            let currentSort = { column: null, direction: 'asc' };
-
-            // Get URL parameters
-            function getUrlParams() {
-                const urlParams = new URLSearchParams(window.location.search);
-                return {
-                    date: urlParams.get('date') || '',
-                    sort: urlParams.get('sort') || '',
-                    direction: urlParams.get('direction') || 'asc'
-                };
-            }
-
-            // Update URL with new parameters
-            function updateUrl(date, sort, direction) {
-                const url = new URL(window.location);
-                
-                if (date) {
-                    url.searchParams.set('date', date);
-                } else {
-                    url.searchParams.delete('date');
-                }
-                
-                if (sort) {
-                    url.searchParams.set('sort', sort);
-                    url.searchParams.set('direction', direction);
-                } else {
-                    url.searchParams.delete('sort');
-                    url.searchParams.delete('direction');
-                }
-                
-                // Reload page with new URL
-                window.location.href = url.toString();
-            }
-
-            // Initialize date filter from URL
-            function initializeDateFilter() {
-                const params = getUrlParams();
-                
-                if (params.date) {
-                    dateFilter.value = params.date;
-                } else {
-                    // Set today's date as default if no date parameter
-                    const today = new Date().toISOString().split('T')[0];
-                    dateFilter.value = today;
-                }
-            }
-
-            // Initialize sorting from URL
-            function initializeSorting() {
-                const params = getUrlParams();
-                
-                if (params.sort) {
-                    currentSort = { column: params.sort, direction: params.direction };
-                    sortTable(params.sort, params.direction);
-                    updateSortIndicators(params.sort, params.direction);
+            // Initialize table sorting with column type hints
+            window.FlowlordTableSort.init('alertTable', {
+                columnTypes: {
+                    'alerted': 'datetime',
+                    'tasktime': 'datetime'
                 }
-            }
-
-            function sortTable(column, direction) {
-                const rows = Array.from(tbody.querySelectorAll('tr'));
-                const columnIndex = Array.from(headers).findIndex(th => th.dataset.sort === column);
-                
-                rows.sort((a, b) => {
-                    const aVal = a.cells[columnIndex].textContent.trim();
-                    const bVal = b.cells[columnIndex].textContent.trim();
-                    
-                    let comparison = 0;
-                    
-                    // Check if this is a datetime column (alerted or created)
-                    if (column === 'alerted' || column === 'created') {
-                        // Parse as ISO datetime strings
-                        const aDate = new Date(aVal);
-                        const bDate = new Date(bVal);
-                        
-                        if (!isNaN(aDate.getTime()) && !isNaN(bDate.getTime())) {
-                            comparison = aDate - bDate;
-                        } else {
-                            // Fallback to string comparison if parsing fails
-                            comparison = aVal.localeCompare(bVal);
-                        }
-                    } else {
-                        // Try to parse as numbers first for other columns
-                        const aNum = parseFloat(aVal);
-                        const bNum = parseFloat(bVal);
-                        
-                        if (!isNaN(aNum) && !isNaN(bNum)) {
-                            comparison = aNum - bNum;
-                        } else {
-                            // Compare as strings
-                            comparison = aVal.localeCompare(bVal);
-                        }
-                    }
-                    
-                    return direction === 'asc' ? comparison : -comparison;
-                });
-                
-                // Clear tbody and re-append sorted rows
-                tbody.innerHTML = '';
-                rows.forEach(row => tbody.appendChild(row));
-            }
-
-            function updateSortIndicators(activeColumn, direction) {
-                headers.forEach(th => {
-                    th.classList.remove('sort-asc', 'sort-desc');
-                    if (th.dataset.sort === activeColumn) {
-                        th.classList.add(direction === 'asc' ? 'sort-asc' : 'sort-desc');
-                    }
-                });
-            }
-
-            // Column sorting event listeners
-            headers.forEach(header => {
-                header.addEventListener('click', function() {
-                    const column = this.dataset.sort;
-                    let direction = 'asc';
-                    
-                    if (currentSort.column === column) {
-                        direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
-                    }
-                    
-                    currentSort = { column, direction };
-                    updateUrl(getUrlParams().date, column, direction);
-                });
-            });
-
-            // Date filter event listeners
-            dateFilter.addEventListener('change', function() {
-                const params = getUrlParams();
-                updateUrl(this.value, params.sort, params.direction);
             });
-
-            clearFilter.addEventListener('click', function() {
-                const params = getUrlParams();
-                updateUrl('', params.sort, params.direction);
-            });
-
-            // Initialize the page
-            initializeDateFilter();
-            initializeSorting();
         });
-
-        // Toggle field expansion/collapse functionality
-        function toggleField(element, fullText) {
-            // Prevent event bubbling to avoid conflicts with sorting
-            event.stopPropagation();
-            
-            if (element.classList.contains('expanded')) {
-                // Collapse the field
-                element.classList.remove('expanded');
-                element.classList.add('truncated');
-            } else {
-                // Expand the field
-                element.classList.remove('truncated');
-                element.classList.add('expanded');
-            }
-        }
-
-        // Context menu functionality
-        function showContextMenu(event, text) {
-            event.preventDefault();
-            event.stopPropagation();
-            
-            // Remove any existing context menu
-            const existingMenu = document.querySelector('.context-menu');
-            if (existingMenu) {
-                existingMenu.remove();
-            }
-            
-            // Create context menu
-            const contextMenu = document.createElement('div');
-            contextMenu.className = 'context-menu';
-            contextMenu.innerHTML = `
-                <div class="context-menu-item" onclick="copyToClipboard('${text.replace(/'/g, "\\'")}')">
-                    📋 Copy
-                </div>
-            `;
-            
-            // Position the context menu
-            contextMenu.style.left = event.pageX + 'px';
-            contextMenu.style.top = event.pageY + 'px';
-            
-            document.body.appendChild(contextMenu);
-            
-            // Close context menu when clicking elsewhere
-            const closeMenu = (e) => {
-                if (!contextMenu.contains(e.target)) {
-                    contextMenu.remove();
-                    document.removeEventListener('click', closeMenu);
-                }
-            };
-            
-            setTimeout(() => {
-                document.addEventListener('click', closeMenu);
-            }, 100);
-        }
-
-        // Copy to clipboard functionality with enhanced feedback
-        function copyToClipboard(text) {
-            const targetElement = event ? event.target : document.activeElement;
-            
-            navigator.clipboard.writeText(text).then(function() {
-                showCopyFeedback(targetElement, 'Copied!');
-            }).catch(function(err) {
-                console.error('Could not copy text: ', err);
-                // Fallback for older browsers
-                const textArea = document.createElement('textarea');
-                textArea.value = text;
-                textArea.style.position = 'fixed';
-                textArea.style.left = '-999999px';
-                textArea.style.top = '-999999px';
-                document.body.appendChild(textArea);
-                textArea.focus();
-                textArea.select();
-                try {
-                    document.execCommand('copy');
-                    showCopyFeedback(targetElement, 'Copied!');
-                } catch (err) {
-                    console.error('Fallback copy failed: ', err);
-                    showCopyFeedback(targetElement, 'Copy failed!', true);
-                }
-                document.body.removeChild(textArea);
-            });
-        }
-
-        // Show copy feedback with animation
-        function showCopyFeedback(element, message, isError = false) {
-            // Remove any existing feedback
-            const existingFeedback = element.querySelector('.copy-feedback');
-            if (existingFeedback) {
-                existingFeedback.remove();
-            }
-            
-            // Create feedback element
-            const feedback = document.createElement('div');
-            feedback.className = 'copy-feedback';
-            feedback.textContent = message;
-            feedback.style.backgroundColor = isError ? '#dc3545' : '#28a745';
-            
-            // Position feedback relative to the element
-            const rect = element.getBoundingClientRect();
-            feedback.style.position = 'fixed';
-            feedback.style.left = (rect.left + rect.width / 2) + 'px';
-            feedback.style.top = (rect.top - 10) + 'px';
-            feedback.style.transform = 'translateX(-50%)';
-            
-            element.appendChild(feedback);
-            
-            // Remove feedback after animation
-            setTimeout(() => {
-                if (feedback.parentNode) {
-                    feedback.remove();
-                }
-            }, 2000);
-        }
     </script>
 </body>
 </html>
-</html>
\ No newline at end of file
diff --git a/apps/flowlord/handler/backload.tmpl b/apps/flowlord/handler/backload.tmpl
new file mode 100644
index 0000000..4689397
--- /dev/null
+++ b/apps/flowlord/handler/backload.tmpl
@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flowlord: Backload</title>
+    <link rel="icon" type="image/svg+xml" href="{{if .isLocal}}./static{{else}}/static{{end}}/favicon.svg">
+    <link rel="stylesheet" href="{{if .isLocal}}./static{{else}}/static{{end}}/style.css">
+</head>
+<body>
+    {{template "header" .}}
+    <div class="container">
+        <div class="content">
+            <div class="backload-form">
+                <div class="info-grid">
+                    <!-- Task Selection Section -->
+                    <div class="info-card">
+                        <h3>Task Selection</h3>
+                        <div class="form-group">
+                            <label for="taskSearch">Task</label>
+                            <div class="search-select-container">
+                                <input type="text" id="taskSearch" class="form-control" placeholder="Type to search or click to browse..." autocomplete="off">
+                                <div id="taskDropdown" class="search-dropdown"></div>
+                            </div>
+                            <input type="hidden" id="taskSelect" value="">
+                        </div>
+                        <div class="form-group">
+                            <label for="jobSelect">Job</label>
+                            <select id="jobSelect" class="form-control" disabled>
+                                <option value="">Select a job...</option>
+                            </select>
+                        </div>
+                        <div class="form-group">
+                            <label for="workflowFilter">Filter by Workflow</label>
+                            <select id="workflowFilter" class="form-control">
+                                <option value="">All Workflows</option>
+                                {{range $file, $phases := .PhasesByWorkflow}}
+                                <option value="{{$file}}">{{$file}}</option>
+                                {{end}}
+                            </select>
+                        </div>
+                    </div>
+
+                    <!-- Date Section -->
+                    <div class="info-card">
+                        <h3>Date</h3>
+                        <div class="form-group">
+                            <label>Date Mode</label>
+                            <div class="toggle-group">
+                                <button type="button" class="toggle-btn active" data-mode="single">At</button>
+                                <button type="button" class="toggle-btn" data-mode="range">Range</button>
+                            </div>
+                        </div>
+                        <div id="singleDateInput">
+                            <div class="form-group">
+                                <label for="atDate">Date</label>
+                                <input type="date" id="atDate" class="form-control">
+                            </div>
+                        </div>
+                        <div id="dateRangeInputs" style="display: none;">
+                            <div class="form-group">
+                                <label for="fromDate">From</label>
+                                <input type="date" id="fromDate" class="form-control">
+                            </div>
+                            <div class="form-group">
+                                <label for="toDate">To</label>
+                                <input type="date" id="toDate" class="form-control">
+                            </div>
+                        </div>
+                        <div class="form-group">
+                            <label for="bySelect">By</label>
+                            <select id="bySelect" class="form-control">
+                                <option value="hour">Hour</option>
+                                <option value="day" selected>Day</option>
+                                <option value="week">Week</option>
+                                <option value="month">Month</option>
+                            </select>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Meta Fields Section -->
+                <div class="info-card" id="metaSection" style="display: none;">
+                    <h3>Meta Fields</h3>
+                    <p class="meta-hint">The selected task template requires the following meta fields:</p>
+                    <div id="metaFieldsContainer"></div>
+                </div>
+
+                <!-- Meta File Section -->
+                <div class="info-card" id="metaFileSection" style="display: none;">
+                    <h3>Meta File</h3>
+                    <p class="meta-hint">Provide a path to a JSON/CSV file for meta data (each row creates a task):</p>
+                    <div class="form-group">
+                        <label for="metaFileInput">Meta File Path</label>
+                        <input type="text" id="metaFileInput" class="form-control" placeholder="s3://bucket/path/to/meta.json">
+                    </div>
+                </div>
+
+                <!-- Template Info Section -->
+                <div class="info-card template-section" id="templateSection" style="display: none;">
+                    <h3>Template Details</h3>
+                    <div class="template-info">
+                        <div class="form-group">
+                            <label>Template</label>
+                            <div class="template-display" id="templateDisplay"></div>
+                        </div>
+                        <div class="form-group">
+                            <label>Rule</label>
+                            <div class="template-display" id="ruleDisplay"></div>
+                        </div>
+                    </div>
+                </div>
+
+                <!-- Action Buttons -->
+                <div class="action-buttons">
+                    <button type="button" id="previewBtn" class="btn btn-primary" disabled>
+                        Preview (Dry Run)
+                    </button>
+                    <button type="button" id="executeBtn" class="btn btn-success" disabled style="display: none;">
+                        Execute Backload
+                    </button>
+                    <button type="button" id="resetBtn" class="btn btn-secondary">
+                        Reset
+                    </button>
+                </div>
+
+                <!-- Request Body Display -->
+                <div class="info-card" id="requestBodySection" style="display: none;">
+                    <h3>Request Body</h3>
+                    <pre class="request-body-display" id="requestBodyDisplay"></pre>
+                </div>
+
+                <!-- Preview Results Section -->
+                <div class="info-card" id="previewSection" style="display: none;">
+                    <h3>Preview Results</h3>
+                    <div id="previewStatus" class="preview-status"></div>
+                    <div class="table-container">
+                        <table id="previewTable">
+                            <thead>
+                                <tr>
+                                    <th class="num-column">#</th>
+                                    <th class="type-column">Type</th>
+                                    <th class="job-column">Job</th>
+                                    <th class="info-column">Info</th>
+                                    <th class="meta-column">Meta</th>
+                                </tr>
+                            </thead>
+                            <tbody id="previewTableBody">
+                            </tbody>
+                        </table>
+                    </div>
+                    <div id="previewCount" class="stats"></div>
+                </div>
+
+                <!-- Execution Result Section -->
+                <div class="info-card" id="executionSection" style="display: none;">
+                    <h3>Execution Result</h3>
+                    <div id="executionStatus" class="execution-status"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+    <script src="{{if .isLocal}}./static{{else}}/static{{end}}/backload.js"></script>
+    <script>
+        // Initialize the backload form with server-provided data
+        document.addEventListener('DOMContentLoaded', function() {
+            const phasesData = {{.PhasesJSON}};
+            const apiEndpoint = '/backload';
+            window.FlowlordBackload.init(phasesData, apiEndpoint);
+        });
+    </script>
+</body>
+</html>
diff --git a/apps/flowlord/handler/header.tmpl b/apps/flowlord/handler/header.tmpl
index 27c90e2..3730667 100644
--- a/apps/flowlord/handler/header.tmpl
+++ b/apps/flowlord/handler/header.tmpl
@@ -2,7 +2,7 @@
 <div class="nav-header">
     <div class="nav-container">
         <div class="nav-controls">
-            {{if and (ne .CurrentPage "workflow") (ne .CurrentPage "about")}}
+            {{if and (ne .CurrentPage "workflow") (ne .CurrentPage "about") (ne .CurrentPage "backload")}}
             <div class="date-picker-container">
                 <label for="datePicker" class="date-picker-label">Date:</label>
                 <input type="text" id="datePicker" class="date-picker" value="{{.DateValue}}" readonly>
@@ -16,7 +16,12 @@
         <div class="nav-brand">
             <h1>{{if .PageTitle}}{{.PageTitle}}{{else}}Flowlord Dashboard{{end}}</h1>
         </div>
-        <nav class="nav-menu">
+        <button class="nav-toggle" id="navToggle" aria-label="Toggle navigation">
+            <span class="nav-toggle-bar"></span>
+            <span class="nav-toggle-bar"></span>
+            <span class="nav-toggle-bar"></span>
+        </button>
+        <nav class="nav-menu" id="navMenu">
             {{if .isLocal}}
             <a href="./alert_preview.html{{if .DateValue}}?date={{.DateValue}}{{end}}" class="nav-link {{if eq .CurrentPage "alert"}}active{{end}}">
                 <span class="nav-icon">🚨</span>
@@ -34,6 +39,10 @@
                 <span class="nav-icon">🌳</span>
                 Workflow
             </a>
+            <a href="./backload_preview.html" class="nav-link {{if eq .CurrentPage "backload"}}active{{end}}">
+                <span class="nav-icon">🔄</span>
+                Backload
+            </a>
             <a href="./about_preview.html" class="nav-link {{if eq .CurrentPage "about"}}active{{end}}">
                 <span class="nav-icon">ℹ️</span>
                 About
@@ -55,6 +64,10 @@
                 <span class="nav-icon">🌳</span>
                 Workflow
             </a>
+            <a href="/web/backload" class="nav-link {{if eq .CurrentPage "backload"}}active{{end}}">
+                <span class="nav-icon">🔄</span>
+                Backload
+            </a>
             <a href="/web/about" class="nav-link {{if eq .CurrentPage "about"}}active{{end}}">
                 <span class="nav-icon">ℹ️</span>
                 About
@@ -73,6 +86,32 @@
             const datesWithData = [{{range $index, $date := .DatesWithData}}{{if $index}},{{end}}"{{$date}}"{{end}}];
             window.FlowlordCalendar.init(datesWithData);
         }
+
+        // Mobile nav toggle
+        const navToggle = document.getElementById('navToggle');
+        const navMenu = document.getElementById('navMenu');
+        if (navToggle && navMenu) {
+            navToggle.addEventListener('click', function() {
+                navToggle.classList.toggle('active');
+                navMenu.classList.toggle('open');
+            });
+
+            // Close menu when clicking a link
+            navMenu.querySelectorAll('.nav-link').forEach(function(link) {
+                link.addEventListener('click', function() {
+                    navToggle.classList.remove('active');
+                    navMenu.classList.remove('open');
+                });
+            });
+
+            // Close menu when clicking outside
+            document.addEventListener('click', function(e) {
+                if (!navToggle.contains(e.target) && !navMenu.contains(e.target)) {
+                    navToggle.classList.remove('active');
+                    navMenu.classList.remove('open');
+                }
+            });
+        }
     });
 </script>
 {{end}}
diff --git a/apps/flowlord/handler/static/backload.js b/apps/flowlord/handler/static/backload.js
new file mode 100644
index 0000000..db9fa91
--- /dev/null
+++ b/apps/flowlord/handler/static/backload.js
@@ -0,0 +1,644 @@
+// Backload form functionality
+(function() {
+    'use strict';
+
+    // Module state
+    let allPhases = [];
+    let currentPhase = null;
+    let previewTasks = [];
+    let searchTimeout = null;
+    let selectedDropdownIndex = -1;
+
+    // DOM element references (cached on init)
+    const elements = {};
+
+    // Initialize the backload form
+    function init(phasesData, apiEndpoint) {
+        allPhases = phasesData || [];
+        
+        // Cache DOM elements
+        elements.taskSearch = document.getElementById('taskSearch');
+        elements.taskDropdown = document.getElementById('taskDropdown');
+        elements.taskSelect = document.getElementById('taskSelect');
+        elements.workflowFilter = document.getElementById('workflowFilter');
+        elements.jobSelect = document.getElementById('jobSelect');
+        elements.templateSection = document.getElementById('templateSection');
+        elements.templateDisplay = document.getElementById('templateDisplay');
+        elements.ruleDisplay = document.getElementById('ruleDisplay');
+        elements.metaSection = document.getElementById('metaSection');
+        elements.metaFieldsContainer = document.getElementById('metaFieldsContainer');
+        elements.metaFileSection = document.getElementById('metaFileSection');
+        elements.metaFileInput = document.getElementById('metaFileInput');
+        elements.previewBtn = document.getElementById('previewBtn');
+        elements.executeBtn = document.getElementById('executeBtn');
+        elements.resetBtn = document.getElementById('resetBtn');
+        elements.previewSection = document.getElementById('previewSection');
+        elements.previewStatus = document.getElementById('previewStatus');
+        elements.previewTableBody = document.getElementById('previewTableBody');
+        elements.previewCount = document.getElementById('previewCount');
+        elements.executionSection = document.getElementById('executionSection');
+        elements.executionStatus = document.getElementById('executionStatus');
+        elements.requestBodySection = document.getElementById('requestBodySection');
+        elements.requestBodyDisplay = document.getElementById('requestBodyDisplay');
+        elements.fromDate = document.getElementById('fromDate');
+        elements.toDate = document.getElementById('toDate');
+        elements.atDate = document.getElementById('atDate');
+        elements.bySelect = document.getElementById('bySelect');
+        elements.singleDateInput = document.getElementById('singleDateInput');
+        elements.dateRangeInputs = document.getElementById('dateRangeInputs');
+
+        // Store API endpoint
+        elements.apiEndpoint = apiEndpoint || '/backload';
+
+        // Setup event listeners
+        setupEventListeners();
+
+        // Initialize date inputs with today's date
+        initializeDates();
+    }
+
+    // Get unique tasks from phases
+    function getUniqueTasks(workflowFilterValue) {
+        const taskSet = new Set();
+        allPhases.forEach(p => {
+            if (!workflowFilterValue || p.workflow === workflowFilterValue) {
+                taskSet.add(p.task);
+            }
+        });
+        return Array.from(taskSet).sort();
+    }
+
+    // Setup all event listeners
+    function setupEventListeners() {
+        // Date mode toggle
+        document.querySelectorAll('.toggle-btn').forEach(btn => {
+            btn.addEventListener('click', handleDateModeToggle);
+        });
+
+        // Task search
+        elements.taskSearch.addEventListener('input', handleTaskSearchInput);
+        elements.taskSearch.addEventListener('focus', handleTaskSearchFocus);
+        elements.taskSearch.addEventListener('keydown', handleTaskSearchKeydown);
+
+        // Task dropdown
+        elements.taskDropdown.addEventListener('click', handleDropdownClick);
+
+        // Close dropdown when clicking outside
+        document.addEventListener('click', handleDocumentClick);
+
+        // Workflow filter
+        elements.workflowFilter.addEventListener('change', handleWorkflowFilterChange);
+
+        // Job selection
+        elements.jobSelect.addEventListener('change', handleJobSelectChange);
+
+        // Date inputs
+        ['fromDate', 'toDate', 'atDate'].forEach(id => {
+            document.getElementById(id).addEventListener('change', updatePreviewButton);
+        });
+
+        // Buttons
+        elements.previewBtn.addEventListener('click', handlePreviewClick);
+        elements.executeBtn.addEventListener('click', handleExecuteClick);
+        elements.resetBtn.addEventListener('click', handleResetClick);
+    }
+
+    // Date mode toggle handler
+    function handleDateModeToggle() {
+        document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
+        this.classList.add('active');
+        
+        if (this.dataset.mode === 'range') {
+            elements.dateRangeInputs.style.display = 'block';
+            elements.singleDateInput.style.display = 'none';
+        } else {
+            elements.dateRangeInputs.style.display = 'none';
+            elements.singleDateInput.style.display = 'block';
+        }
+        updatePreviewButton();
+    }
+
+    // Task search input handler
+    function handleTaskSearchInput() {
+        clearTimeout(searchTimeout);
+        const query = this.value.trim();
+        
+        searchTimeout = setTimeout(() => {
+            showTaskDropdown(query);
+        }, 100);
+    }
+
+    // Task search focus handler
+    function handleTaskSearchFocus() {
+        this.value = '';
+        elements.taskSelect.value = '';
+        selectedDropdownIndex = -1;
+        showTaskDropdown('');
+    }
+
+    // Task search keydown handler for keyboard navigation
+    function handleTaskSearchKeydown(e) {
+        const items = elements.taskDropdown.querySelectorAll('.search-dropdown-item');
+        if (items.length === 0) return;
+
+        switch(e.key) {
+            case 'ArrowDown':
+                e.preventDefault();
+                selectedDropdownIndex = Math.min(selectedDropdownIndex + 1, items.length - 1);
+                updateDropdownSelection(items);
+                break;
+            case 'ArrowUp':
+                e.preventDefault();
+                selectedDropdownIndex = Math.max(selectedDropdownIndex - 1, 0);
+                updateDropdownSelection(items);
+                break;
+            case 'Enter':
+                e.preventDefault();
+                if (selectedDropdownIndex >= 0 && items[selectedDropdownIndex]) {
+                    const task = items[selectedDropdownIndex].dataset.task;
+                    selectTask(task);
+                }
+                break;
+            case 'Escape':
+                e.preventDefault();
+                elements.taskDropdown.style.display = 'none';
+                selectedDropdownIndex = -1;
+                break;
+        }
+    }
+
+    // Update dropdown selection highlight
+    function updateDropdownSelection(items) {
+        items.forEach((item, index) => {
+            if (index === selectedDropdownIndex) {
+                item.classList.add('selected');
+                item.scrollIntoView({ block: 'nearest' });
+            } else {
+                item.classList.remove('selected');
+            }
+        });
+    }
+
+    // Select a task
+    function selectTask(task) {
+        elements.taskSearch.value = task;
+        elements.taskSelect.value = task;
+        elements.taskDropdown.style.display = 'none';
+        selectedDropdownIndex = -1;
+        
+        // Set workflow filter to the task's workflow if not already filtered
+        if (!elements.workflowFilter.value) {
+            const phase = allPhases.find(p => p.task === task);
+            if (phase && phase.workflow) {
+                elements.workflowFilter.value = phase.workflow;
+            }
+        }
+        
+        onTaskSelected(task);
+    }
+
+    // Show task dropdown with optional filtering
+    function showTaskDropdown(query) {
+        const workflow = elements.workflowFilter.value;
+        const tasks = getUniqueTasks(workflow);
+        const matches = query 
+            ? tasks.filter(t => t.toLowerCase().includes(query.toLowerCase()))
+            : tasks;
+        
+        selectedDropdownIndex = -1;
+        
+        if (matches.length > 0) {
+            elements.taskDropdown.innerHTML = matches.map(task => 
+                `<div class="search-dropdown-item" data-task="${escapeHtml(task)}">${query ? highlightMatch(task, query) : escapeHtml(task)}</div>`
+            ).join('');
+            elements.taskDropdown.style.display = 'block';
+        } else {
+            elements.taskDropdown.innerHTML = '<div class="search-dropdown-empty">No matching tasks</div>';
+            elements.taskDropdown.style.display = 'block';
+        }
+    }
+
+    // Highlight matching text in search results
+    function highlightMatch(text, query) {
+        const idx = text.toLowerCase().indexOf(query.toLowerCase());
+        if (idx === -1) return escapeHtml(text);
+        return escapeHtml(text.slice(0, idx)) + '<strong>' + escapeHtml(text.slice(idx, idx + query.length)) + '</strong>' + escapeHtml(text.slice(idx + query.length));
+    }
+
+    // Handle dropdown item click
+    function handleDropdownClick(e) {
+        const item = e.target.closest('.search-dropdown-item');
+        if (item) {
+            const task = item.dataset.task;
+            selectTask(task);
+        }
+    }
+
+    // Close dropdown when clicking outside
+    function handleDocumentClick(e) {
+        if (!elements.taskSearch.contains(e.target) && !elements.taskDropdown.contains(e.target)) {
+            elements.taskDropdown.style.display = 'none';
+            selectedDropdownIndex = -1;
+        }
+    }
+
+    // Workflow filter change handler
+    function handleWorkflowFilterChange() {
+        elements.taskSearch.value = '';
+        elements.taskSelect.value = '';
+        elements.jobSelect.innerHTML = '<option value="">Select a job...</option>';
+        elements.jobSelect.disabled = true;
+        hideTemplateInfo();
+        updatePreviewButton();
+    }
+
+    // Handle task selection
+    function onTaskSelected(task) {
+        const workflow = elements.workflowFilter.value;
+        elements.jobSelect.innerHTML = '<option value="">Select a job...</option>';
+        elements.jobSelect.disabled = true;
+        hideTemplateInfo();
+        
+        // Find phases matching this task (optionally filtered by workflow)
+        const phases = allPhases.filter(p => 
+            p.task === task && (!workflow || p.workflow === workflow)
+        );
+        const jobs = [...new Set(phases.map(p => p.job).filter(j => j))];
+        
+        if (jobs.length > 0) {
+            jobs.sort().forEach(job => {
+                const option = document.createElement('option');
+                option.value = job;
+                option.textContent = job;
+                elements.jobSelect.appendChild(option);
+            });
+            elements.jobSelect.disabled = false;
+        } else {
+            // No job needed, use first phase
+            const phase = phases[0];
+            if (phase) {
+                showTemplateInfo(phase);
+            }
+        }
+        updatePreviewButton();
+    }
+
+    // Job selection change handler
+    function handleJobSelectChange() {
+        const task = elements.taskSelect.value;
+        const job = this.value;
+        const workflow = elements.workflowFilter.value;
+        
+        const phase = allPhases.find(p => 
+            p.task === task && 
+            (p.job === job || (!job && !p.job)) &&
+            (!workflow || p.workflow === workflow)
+        );
+        if (phase) {
+            showTemplateInfo(phase);
+        }
+        updatePreviewButton();
+    }
+
+    // Format rule string for better readability
+    function formatRule(str) {
+        if (!str) return '(no rule)';
+        return str.split('&').join('\n');
+    }
+
+    // Show template information and detect meta fields
+    function showTemplateInfo(phase) {
+        currentPhase = phase;
+        elements.templateSection.style.display = 'block';
+        elements.templateDisplay.textContent = phase.template || '(no template)';
+        elements.ruleDisplay.textContent = formatRule(phase.rule);
+        
+        // Parse template for meta fields
+        const metaRegex = /\{meta:(\w+)\}/g;
+        const metaKeys = [];
+        let match;
+        while ((match = metaRegex.exec(phase.template)) !== null) {
+            if (!metaKeys.includes(match[1])) {
+                metaKeys.push(match[1]);
+            }
+        }
+        
+        // Check if rule has meta-file
+        const hasMetaFile = phase.rule && phase.rule.includes('meta-file=');
+        
+        // Show meta fields section if template has meta placeholders and no meta-file in rule
+        if (metaKeys.length > 0 && !hasMetaFile) {
+            elements.metaSection.style.display = 'block';
+            elements.metaFieldsContainer.innerHTML = '';
+            
+            metaKeys.forEach(key => {
+                const formGroup = document.createElement('div');
+                formGroup.className = 'form-group';
+                formGroup.innerHTML = `
+                    <label for="meta_${key}">{meta:${key}}</label>
+                    <input type="text" id="meta_${key}" class="form-control meta-input" 
+                           data-meta-key="${key}" placeholder="Enter values (comma-separated for multiple)">
+                    <small class="form-hint">Comma-separated values create multiple tasks</small>
+                `;
+                elements.metaFieldsContainer.appendChild(formGroup);
+            });
+        } else {
+            elements.metaSection.style.display = 'none';
+        }
+        
+        // Show meta file section if rule has meta-file
+        if (hasMetaFile) {
+            elements.metaFileSection.style.display = 'block';
+            const metaFileMatch = phase.rule.match(/meta-file=([^&]+)/);
+            if (metaFileMatch) {
+                elements.metaFileInput.value = metaFileMatch[1];
+            }
+        } else {
+            elements.metaFileSection.style.display = 'none';
+            elements.metaFileInput.value = '';
+        }
+    }
+
+    // Hide template information
+    function hideTemplateInfo() {
+        currentPhase = null;
+        elements.templateSection.style.display = 'none';
+        elements.metaSection.style.display = 'none';
+        elements.metaFileSection.style.display = 'none';
+        elements.previewSection.style.display = 'none';
+        elements.executionSection.style.display = 'none';
+        elements.executeBtn.style.display = 'none';
+        elements.requestBodySection.style.display = 'none';
+        
+        elements.metaFieldsContainer.innerHTML = '';
+        elements.metaFileInput.value = '';
+    }
+
+    // Get current date mode from toggle
+    function getDateMode() {
+        const activeBtn = document.querySelector('.toggle-btn.active');
+        return activeBtn ? activeBtn.dataset.mode : 'range';
+    }
+
+    // Update preview button state
+    function updatePreviewButton() {
+        const task = elements.taskSelect.value;
+        const dateMode = getDateMode();
+        let hasDate = false;
+        
+        if (dateMode === 'range') {
+            hasDate = elements.fromDate.value || elements.toDate.value;
+        } else {
+            hasDate = elements.atDate.value;
+        }
+        
+        elements.previewBtn.disabled = !task || !hasDate;
+    }
+
+    // Build request object
+    function buildRequest(execute) {
+        const dateMode = getDateMode();
+        const request = {
+            Task: elements.taskSelect.value,
+        };
+        
+        if (execute) {
+            request.Execute = true;
+        }
+        
+        const job = elements.jobSelect.value;
+        if (job) {
+            request.Job = job;
+        }
+        
+        const by = elements.bySelect.value;
+        if (by && by !== 'day') {
+            request.By = by;
+        }
+        
+        if (dateMode === 'range') {
+            if (elements.fromDate.value) request.From = elements.fromDate.value;
+            if (elements.toDate.value) request.To = elements.toDate.value;
+        } else {
+            if (elements.atDate.value) request.At = elements.atDate.value;
+        }
+        
+        // Collect meta fields
+        if (elements.metaSection.style.display !== 'none') {
+            const metaInputs = document.querySelectorAll('.meta-input');
+            if (metaInputs.length > 0) {
+                const meta = {};
+                metaInputs.forEach(input => {
+                    const key = input.dataset.metaKey;
+                    const value = input.value.trim();
+                    if (value) {
+                        meta[key] = value.split(',').map(v => v.trim());
+                    }
+                });
+                if (Object.keys(meta).length > 0) {
+                    request.meta = meta;
+                }
+            }
+        }
+        
+        // Collect meta file
+        if (elements.metaFileSection.style.display !== 'none') {
+            const metaFile = elements.metaFileInput.value.trim();
+            if (metaFile) {
+                request['meta-file'] = metaFile;
+            }
+        }
+        
+        return request;
+    }
+
+    // Set button loading state
+    function setButtonLoading(btn, loading, originalText) {
+        if (loading) {
+            btn.disabled = true;
+            btn.classList.add('btn-loading');
+            btn.innerHTML = '<span class="loading-spinner"></span> Loading...';
+        } else {
+            btn.disabled = false;
+            btn.classList.remove('btn-loading');
+            btn.textContent = originalText;
+        }
+    }
+
+    // Preview button click handler
+    async function handlePreviewClick() {
+        const request = buildRequest(false);
+        const requestBody = JSON.stringify(request, null, 2);
+        
+        elements.requestBodySection.style.display = 'block';
+        elements.requestBodyDisplay.textContent = requestBody;
+        
+        setButtonLoading(elements.previewBtn, true, 'Preview (Dry Run)');
+        
+        try {
+            const response = await fetch(elements.apiEndpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(request),
+            });
+            
+            const responseText = await response.text();
+            let data;
+            
+            try {
+                data = JSON.parse(responseText);
+            } catch (e) {
+                throw new Error(responseText || 'Request failed');
+            }
+            
+            if (!response.ok) {
+                throw new Error(data.Status || responseText || 'Request failed');
+            }
+            
+            previewTasks = data.Tasks || [];
+            showPreviewResults(data);
+            
+        } catch (error) {
+            elements.previewStatus.className = 'preview-status error';
+            elements.previewStatus.textContent = 'Error: ' + error.message;
+            elements.previewSection.style.display = 'block';
+            elements.previewTableBody.innerHTML = '';
+            elements.previewCount.textContent = '';
+            elements.executeBtn.style.display = 'none';
+        } finally {
+            setButtonLoading(elements.previewBtn, false, 'Preview (Dry Run)');
+            updatePreviewButton();
+        }
+    }
+
+    // Execute button click handler
+    async function handleExecuteClick() {
+        if (!confirm('Are you sure you want to execute this backload? This will create ' + previewTasks.length + ' tasks.')) {
+            return;
+        }
+        
+        const request = buildRequest(true);
+        elements.requestBodyDisplay.textContent = JSON.stringify(request, null, 2);
+        
+        setButtonLoading(elements.executeBtn, true, 'Execute Backload');
+        
+        try {
+            const response = await fetch(elements.apiEndpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(request),
+            });
+            
+            const responseText = await response.text();
+            let data;
+            
+            try {
+                data = JSON.parse(responseText);
+            } catch (e) {
+                throw new Error(responseText || 'Execution failed');
+            }
+            
+            if (!response.ok) {
+                throw new Error(data.Status || responseText || 'Execution failed');
+            }
+            
+            elements.executionSection.style.display = 'block';
+            elements.executionStatus.className = 'execution-status success';
+            elements.executionStatus.innerHTML = `
+                <strong>Success!</strong><br>
+                ${escapeHtml(data.Status)}<br>
+                Created ${data.Count} tasks.
+            `;
+            elements.executeBtn.style.display = 'none';
+            
+        } catch (error) {
+            elements.executionSection.style.display = 'block';
+            elements.executionStatus.className = 'execution-status error';
+            elements.executionStatus.textContent = 'Error: ' + error.message;
+        } finally {
+            setButtonLoading(elements.executeBtn, false, 'Execute Backload');
+        }
+    }
+
+    // Reset button click handler
+    function handleResetClick() {
+        elements.taskSearch.value = '';
+        elements.taskSelect.value = '';
+        elements.workflowFilter.value = '';
+        elements.jobSelect.innerHTML = '<option value="">Select a job...</option>';
+        elements.jobSelect.disabled = true;
+        elements.fromDate.value = '';
+        elements.toDate.value = '';
+        elements.atDate.value = '';
+        elements.bySelect.value = 'day';
+        
+        document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
+        document.querySelector('.toggle-btn[data-mode="single"]').classList.add('active');
+        elements.singleDateInput.style.display = 'block';
+        elements.dateRangeInputs.style.display = 'none';
+        
+        hideTemplateInfo();
+        initializeDates();
+        updatePreviewButton();
+    }
+
+    // Show preview results
+    function showPreviewResults(data) {
+        elements.previewSection.style.display = 'block';
+        elements.previewStatus.className = 'preview-status info';
+        elements.previewStatus.textContent = data.Status || 'Dry run complete';
+        
+        elements.previewTableBody.innerHTML = '';
+        
+        if (data.Tasks && data.Tasks.length > 0) {
+            data.Tasks.forEach((task, index) => {
+                const row = document.createElement('tr');
+                row.innerHTML = `
+                    <td class="num-cell num-column">${index + 1}</td>
+                    <td class="type-cell type-column">${escapeHtml(task.type || '')}</td>
+                    <td class="job-cell job-column">${escapeHtml(task.job || '')}</td>
+                    <td class="info-cell info-column expandable" title="Click to expand">${escapeHtml(task.info || '')}</td>
+                    <td class="meta-cell meta-column expandable" title="Click to expand">${escapeHtml(task.meta || '')}</td>
+                `;
+                elements.previewTableBody.appendChild(row);
+            });
+            
+            elements.previewCount.textContent = `Total tasks to be created: ${data.Count}`;
+            elements.executeBtn.style.display = 'inline-block';
+            elements.executeBtn.disabled = false;
+        } else {
+            elements.previewTableBody.innerHTML = '<tr><td colspan="5" class="no-tasks">No tasks would be created</td></tr>';
+            elements.previewCount.textContent = '';
+            elements.executeBtn.style.display = 'none';
+        }
+        
+        // Add expand/collapse functionality to cells
+        document.querySelectorAll('#previewTableBody .expandable').forEach(cell => {
+            cell.addEventListener('click', function() {
+                this.classList.toggle('expanded');
+            });
+        });
+    }
+
+    // Initialize date inputs with today's date
+    function initializeDates() {
+        const today = new Date().toISOString().split('T')[0];
+        elements.fromDate.value = today;
+        elements.toDate.value = today;
+        elements.atDate.value = today;
+        updatePreviewButton();
+    }
+
+    // Escape HTML for safe display
+    function escapeHtml(text) {
+        if (text === null || text === undefined) return '';
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML;
+    }
+
+    // Export to global scope
+    window.FlowlordBackload = {
+        init: init
+    };
+})();
diff --git a/apps/flowlord/handler/static/style.css b/apps/flowlord/handler/static/style.css
index 930852a..1799bc7 100644
--- a/apps/flowlord/handler/static/style.css
+++ b/apps/flowlord/handler/static/style.css
@@ -793,6 +793,8 @@ th.status-cell, td.status-cell {
 }
 
 .collapsible-content {
+    max-height: none;
+    opacity: 1;
     transition: all 0.3s ease;
     overflow: hidden;
 }
@@ -802,6 +804,22 @@ th.status-cell, td.status-cell {
     opacity: 0;
 }
 
+/* Chart Container Styles */
+.chart-container {
+    width: 100%;
+    padding: 20px;
+    background: #ffffff;
+    border-radius: 8px;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+#hourlyChart {
+    display: block;
+    width: 100%;
+    height: 400px;
+    cursor: default;
+}
+
 .summary-section h3 {
     margin: 0 0 16px 0;
     color: #495057;
@@ -809,6 +827,59 @@ th.status-cell, td.status-cell {
     font-weight: 600;
 }
 
+.summary-stats-text {
+    padding: 15px 20px;
+    background: #f8f9fa;
+    border-radius: 6px;
+    font-size: 15px;
+    color: #495057;
+    font-weight: 500;
+    margin-top: 16px;
+    border: 1px solid #dee2e6;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    align-items: center;
+}
+
+.summary-stat-item {
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.stat-color-box {
+    width: 14px;
+    height: 14px;
+    border-radius: 2px;
+    display: inline-block;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+.stat-total {
+    background: #6c757d;
+}
+
+.stat-completed {
+    background: #4caf50;
+}
+
+.stat-error {
+    background: #f44336;
+}
+
+.stat-alert {
+    background: #ff9800;
+}
+
+.stat-warn {
+    background: #ffc107;
+}
+
+.stat-running {
+    background: #2196f3;
+}
+
 .summary {
     background: #ecf0f1;
     padding: 15px 20px;
@@ -1287,4 +1358,493 @@ th.status-cell, td.status-cell {
 .pagination-controls .btn {
     padding: 0.5rem 1rem;
     text-decoration: none;
+}
+
+/* ===== BACKLOAD FORM STYLES ===== */
+.backload-form {
+    padding: 20px;
+}
+
+.backload-form .info-card {
+    margin-bottom: 20px;
+}
+
+.form-group {
+    margin-bottom: 16px;
+}
+
+.form-group label {
+    display: block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #495057;
+    margin-bottom: 6px;
+}
+
+.form-control {
+    width: 100%;
+    padding: 10px 12px;
+    font-size: 14px;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    background-color: white;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+    box-sizing: border-box;
+}
+
+.form-control:focus {
+    outline: none;
+    border-color: #3498db;
+    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.15);
+}
+
+.form-control:disabled {
+    background-color: #e9ecef;
+    cursor: not-allowed;
+}
+
+select.form-control {
+    background-color: white;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right 8px center;
+    background-repeat: no-repeat;
+    background-size: 16px;
+    padding-right: 32px;
+}
+
+select.form-control:disabled {
+    background-color: #e9ecef;
+}
+
+.form-hint {
+    display: block;
+    font-size: 12px;
+    color: #6c757d;
+    margin-top: 4px;
+}
+
+.toggle-group {
+    display: inline-flex;
+    border: 1px solid #ced4da;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.toggle-btn {
+    padding: 8px 20px;
+    border: none;
+    background: #f8f9fa;
+    color: #495057;
+    font-size: 14px;
+    font-weight: 500;
+    cursor: pointer;
+    transition: all 0.2s ease;
+}
+
+.toggle-btn:not(:last-child) {
+    border-right: 1px solid #ced4da;
+}
+
+.toggle-btn:hover {
+    background: #e9ecef;
+}
+
+.toggle-btn.active {
+    background: #3498db;
+    color: white;
+}
+
+.template-section {
+    background: #f8f9fa;
+}
+
+.template-display {
+    background: white;
+    border: 1px solid #e1e5e9;
+    border-radius: 4px;
+    padding: 12px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 13px;
+    color: #495057;
+    word-break: break-word;
+    white-space: pre-wrap;
+    line-height: 1.6;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+.meta-hint {
+    color: #6c757d;
+    font-size: 14px;
+    margin-bottom: 16px;
+}
+
+.action-buttons {
+    display: flex;
+    gap: 12px;
+    padding: 20px 0;
+    border-top: 1px solid #e1e5e9;
+    margin-top: 10px;
+}
+
+.btn-primary {
+    background: #3498db;
+    color: white;
+    border: 1px solid #2980b9;
+}
+
+.btn-primary:hover {
+    background: #2980b9;
+}
+
+.btn-primary:disabled {
+    background: #a0c4e8;
+    border-color: #a0c4e8;
+    cursor: not-allowed;
+}
+
+.btn-success {
+    background: #27ae60;
+    color: white;
+    border: 1px solid #1e8449;
+}
+
+.btn-success:hover {
+    background: #1e8449;
+}
+
+.btn-success:disabled {
+    background: #82c99b;
+    border-color: #82c99b;
+    cursor: not-allowed;
+}
+
+.preview-status, .execution-status {
+    padding: 12px 16px;
+    border-radius: 6px;
+    margin-bottom: 16px;
+    font-weight: 500;
+}
+
+.preview-status.info {
+    background: #d1ecf1;
+    color: #0c5460;
+    border: 1px solid #bee5eb;
+}
+
+.preview-status.error, .execution-status.error {
+    background: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+}
+
+.execution-status.success {
+    background: #d4edda;
+    color: #155724;
+    border: 1px solid #c3e6cb;
+}
+
+#previewTable {
+    margin-top: 16px;
+}
+
+/* Preview table column widths */
+#previewTable {
+    table-layout: fixed;
+    width: 100%;
+}
+
+#previewTable .num-column {
+    width: 40px;
+    max-width: 40px;
+    text-align: center;
+}
+
+#previewTable .type-column {
+    width: 100px;
+    max-width: 120px;
+}
+
+#previewTable .job-column {
+    width: 100px;
+    max-width: 120px;
+}
+
+#previewTable .info-column,
+#previewTable .meta-column {
+    width: auto;
+}
+
+#previewTable .info-cell,
+#previewTable .meta-cell {
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 13px;
+    word-break: break-word;
+    white-space: normal;
+    line-height: 1.4;
+}
+
+#previewTable .num-cell {
+    text-align: center;
+    color: #6c757d;
+}
+
+/* Request body display */
+.request-body-display {
+    background: #1e1e1e;
+    color: #d4d4d4;
+    border: 1px solid #333;
+    border-radius: 4px;
+    padding: 12px;
+    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 13px;
+    line-height: 1.5;
+    max-height: 300px;
+    overflow: auto;
+    margin: 0;
+    white-space: pre-wrap;
+    word-break: break-word;
+}
+
+/* Search dropdown styles */
+.search-select-container {
+    position: relative;
+}
+
+.search-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background: white;
+    border: 1px solid #ced4da;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    max-height: 250px;
+    overflow-y: auto;
+    z-index: 100;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.search-dropdown-item {
+    padding: 10px 12px;
+    cursor: pointer;
+    font-size: 14px;
+    color: #495057;
+    border-bottom: 1px solid #f0f0f0;
+}
+
+.search-dropdown-item:last-child {
+    border-bottom: none;
+}
+
+.search-dropdown-item:hover {
+    background: #f8f9fa;
+}
+
+.search-dropdown-item strong {
+    color: #3498db;
+}
+
+.search-dropdown-empty {
+    padding: 12px;
+    color: #6c757d;
+    font-style: italic;
+    text-align: center;
+}
+
+.search-dropdown-item.selected {
+    background: #e3f2fd;
+    color: #1976d2;
+}
+
+/* ===== LOADING SPINNER STYLES ===== */
+.loading-spinner {
+    display: inline-block;
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(255, 255, 255, 0.3);
+    border-radius: 50%;
+    border-top-color: white;
+    animation: spin 0.8s linear infinite;
+    vertical-align: middle;
+    margin-right: 6px;
+}
+
+.btn-loading {
+    pointer-events: none;
+    opacity: 0.7;
+    cursor: wait;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+/* ===== RESPONSIVE NAVIGATION ===== */
+/* Mobile menu toggle button */
+.nav-toggle {
+    display: none;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 5px;
+    width: 40px;
+    height: 40px;
+    padding: 8px;
+    background: rgba(255, 255, 255, 0.1);
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 6px;
+    cursor: pointer;
+    order: 3;
+    transition: background 0.2s ease;
+}
+
+.nav-toggle:hover {
+    background: rgba(255, 255, 255, 0.2);
+}
+
+.nav-toggle-bar {
+    display: block;
+    width: 20px;
+    height: 2px;
+    background: white;
+    border-radius: 1px;
+    transition: all 0.3s ease;
+}
+
+.nav-toggle.active .nav-toggle-bar:nth-child(1) {
+    transform: translateY(7px) rotate(45deg);
+}
+
+.nav-toggle.active .nav-toggle-bar:nth-child(2) {
+    opacity: 0;
+}
+
+.nav-toggle.active .nav-toggle-bar:nth-child(3) {
+    transform: translateY(-7px) rotate(-45deg);
+}
+
+/* Responsive breakpoints */
+@media (max-width: 900px) {
+    .nav-toggle {
+        display: flex;
+    }
+
+    .nav-container {
+        flex-wrap: wrap;
+        position: relative;
+    }
+
+    .nav-menu {
+        display: none;
+        position: absolute;
+        top: 100%;
+        right: 0;
+        left: 0;
+        background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
+        flex-direction: column;
+        gap: 0;
+        padding: 0;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+        border-radius: 0 0 8px 8px;
+        z-index: 1000;
+        order: 4;
+    }
+
+    .nav-menu.open {
+        display: flex;
+    }
+
+    .nav-link {
+        padding: 14px 20px;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        justify-content: flex-start;
+    }
+
+    .nav-link:last-child {
+        border-bottom: none;
+        border-radius: 0 0 8px 8px;
+    }
+
+    .nav-link.active {
+        border-bottom-color: rgba(255, 255, 255, 0.1);
+        border-left: 3px solid #3498db;
+    }
+
+    .nav-brand {
+        flex: 1;
+        text-align: center;
+        order: 2;
+    }
+
+    .nav-brand h1 {
+        font-size: 18px;
+    }
+
+    .nav-controls {
+        order: 1;
+    }
+}
+
+@media (max-width: 600px) {
+    .nav-container {
+        padding: 0 10px;
+        gap: 10px;
+    }
+
+    .nav-brand h1 {
+        font-size: 16px;
+        padding: 12px 0;
+    }
+
+    .nav-controls {
+        display: none;
+    }
+
+    /* Show date picker inside dropdown on very small screens */
+    .nav-menu.open .nav-controls-mobile {
+        display: flex;
+    }
+
+    .date-picker-container {
+        padding: 6px 8px;
+    }
+
+    .date-picker {
+        min-width: 110px;
+        font-size: 13px;
+        padding: 4px 6px;
+    }
+
+    .date-picker-label {
+        font-size: 13px;
+    }
+
+    .btn-sm {
+        padding: 3px 6px;
+        font-size: 11px;
+    }
+}
+
+@media (max-width: 400px) {
+    .nav-brand h1 {
+        font-size: 14px;
+    }
+
+    .nav-toggle {
+        width: 36px;
+        height: 36px;
+        padding: 6px;
+    }
+
+    .nav-toggle-bar {
+        width: 18px;
+    }
 }
\ No newline at end of file
diff --git a/apps/flowlord/handler/static/table-sort.js b/apps/flowlord/handler/static/table-sort.js
new file mode 100644
index 0000000..1295bea
--- /dev/null
+++ b/apps/flowlord/handler/static/table-sort.js
@@ -0,0 +1,185 @@
+// Reusable table sorting functionality
+(function() {
+    'use strict';
+
+    /**
+     * Initialize table sorting for a given table
+     * @param {string} tableId - The ID of the table element
+     * @param {Object} options - Configuration options
+     * @param {Function} options.onSort - Callback when sort changes (column, direction)
+     * @param {boolean} options.persistToUrl - Whether to persist sort state to URL (default: true)
+     * @param {Object} options.columnTypes - Map of column names to types ('string', 'number', 'date')
+     */
+    function init(tableId, options) {
+        const table = document.getElementById(tableId);
+        if (!table) return null;
+
+        const tbody = table.querySelector('tbody');
+        const headers = table.querySelectorAll('th.sortable');
+        
+        if (!tbody || headers.length === 0) return null;
+
+        options = options || {};
+        const persistToUrl = options.persistToUrl !== false;
+        const columnTypes = options.columnTypes || {};
+        const onSort = options.onSort || null;
+
+        let currentSort = { column: null, direction: 'asc' };
+
+        // Get URL parameters
+        function getUrlParams() {
+            const urlParams = new URLSearchParams(window.location.search);
+            return {
+                sort: urlParams.get('sort') || '',
+                direction: urlParams.get('direction') || 'asc'
+            };
+        }
+
+        // Update URL with sort parameters
+        function updateUrl(column, direction) {
+            if (!persistToUrl) return;
+            
+            const url = new URL(window.location);
+            
+            if (column) {
+                url.searchParams.set('sort', column);
+                url.searchParams.set('direction', direction);
+            } else {
+                url.searchParams.delete('sort');
+                url.searchParams.delete('direction');
+            }
+            
+            window.history.replaceState({}, '', url.toString());
+        }
+
+        // Perform the sort
+        function sortTable(column, direction) {
+            const rows = Array.from(tbody.querySelectorAll('tr'));
+            const columnIndex = Array.from(headers).findIndex(th => th.dataset.sort === column);
+            
+            if (columnIndex === -1) return;
+
+            const columnType = columnTypes[column] || 'string';
+
+            rows.sort((a, b) => {
+                const aCell = a.cells[columnIndex];
+                const bCell = b.cells[columnIndex];
+                
+                if (!aCell || !bCell) return 0;
+                
+                const aVal = aCell.textContent.trim();
+                const bVal = bCell.textContent.trim();
+                
+                let comparison = 0;
+                
+                switch (columnType) {
+                    case 'date':
+                    case 'datetime':
+                        const aDate = new Date(aVal);
+                        const bDate = new Date(bVal);
+                        if (!isNaN(aDate.getTime()) && !isNaN(bDate.getTime())) {
+                            comparison = aDate - bDate;
+                        } else {
+                            comparison = aVal.localeCompare(bVal);
+                        }
+                        break;
+                        
+                    case 'number':
+                        const aNum = parseFloat(aVal);
+                        const bNum = parseFloat(bVal);
+                        if (!isNaN(aNum) && !isNaN(bNum)) {
+                            comparison = aNum - bNum;
+                        } else {
+                            comparison = aVal.localeCompare(bVal);
+                        }
+                        break;
+                        
+                    default: // string
+                        // Try to parse as numbers first
+                        const aNumeric = parseFloat(aVal);
+                        const bNumeric = parseFloat(bVal);
+                        if (!isNaN(aNumeric) && !isNaN(bNumeric)) {
+                            comparison = aNumeric - bNumeric;
+                        } else {
+                            comparison = aVal.localeCompare(bVal);
+                        }
+                }
+                
+                return direction === 'asc' ? comparison : -comparison;
+            });
+            
+            // Clear tbody and re-append sorted rows
+            tbody.innerHTML = '';
+            rows.forEach(row => tbody.appendChild(row));
+            
+            currentSort = { column, direction };
+        }
+
+        // Update sort indicators on headers
+        function updateSortIndicators(activeColumn, direction) {
+            headers.forEach(th => {
+                th.classList.remove('sort-asc', 'sort-desc');
+                if (th.dataset.sort === activeColumn) {
+                    th.classList.add(direction === 'asc' ? 'sort-asc' : 'sort-desc');
+                }
+            });
+        }
+
+        // Handle header click
+        function handleHeaderClick(e) {
+            const header = e.target.closest('th.sortable');
+            if (!header) return;
+            
+            const column = header.dataset.sort;
+            let direction = 'asc';
+            
+            if (currentSort.column === column) {
+                direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+            }
+            
+            sortTable(column, direction);
+            updateSortIndicators(column, direction);
+            updateUrl(column, direction);
+            
+            if (onSort) {
+                onSort(column, direction);
+            }
+        }
+
+        // Add click listeners to headers
+        headers.forEach(header => {
+            header.addEventListener('click', handleHeaderClick);
+        });
+
+        // Initialize from URL if enabled
+        if (persistToUrl) {
+            const params = getUrlParams();
+            if (params.sort) {
+                sortTable(params.sort, params.direction);
+                updateSortIndicators(params.sort, params.direction);
+            }
+        }
+
+        // Return API for programmatic control
+        return {
+            sort: function(column, direction) {
+                sortTable(column, direction || 'asc');
+                updateSortIndicators(column, direction || 'asc');
+                updateUrl(column, direction || 'asc');
+            },
+            getCurrentSort: function() {
+                return { ...currentSort };
+            },
+            refresh: function() {
+                if (currentSort.column) {
+                    sortTable(currentSort.column, currentSort.direction);
+                }
+            }
+        };
+    }
+
+    // Export to global scope
+    window.FlowlordTableSort = {
+        init: init
+    };
+})();
diff --git a/apps/flowlord/handler/static/task.js b/apps/flowlord/handler/static/task.js
index 43cef1c..b7d4a1a 100644
--- a/apps/flowlord/handler/static/task.js
+++ b/apps/flowlord/handler/static/task.js
@@ -4,6 +4,9 @@
 
     // Initialize task page with configuration
     function initTaskPage(config) {
+        // Always initialize filters, even if there's no table
+        initializeFilters(config);
+        
         const table = document.getElementById('taskTable');
         if (!table) {
             return;
@@ -136,9 +139,6 @@
             });
         });
 
-        // Initialize filters
-        initializeFilters(config);
-
         // Event delegation for expand/collapse on click
         if (tbody) {
             tbody.addEventListener('click', function(e) {
@@ -182,9 +182,8 @@
     function initializeFilters(config) {
         const typeFilter = document.getElementById('typeFilter');
         const jobFilter = document.getElementById('jobFilter');
-        const table = document.getElementById('taskTable');
         
-        if (!table || !config) return;
+        if (!typeFilter || !jobFilter || !config) return;
         
         const taskTypes = config.taskTypes || [];
         const jobMap = new Map(config.jobsByType || []);
@@ -243,18 +242,28 @@
         jobFilter.addEventListener('change', function() {
             applyFilters();
         });
+
+        // Handle result change - reload page with filter
+        const resultFilter = document.getElementById('resultFilter');
+        if (resultFilter) {
+            resultFilter.addEventListener('change', function() {
+                applyFilters();
+            });
+        }
     }
     
     // Apply filters by reloading page with query parameters
     function applyFilters() {
         const typeFilter = document.getElementById('typeFilter');
         const jobFilter = document.getElementById('jobFilter');
+        const resultFilter = document.getElementById('resultFilter');
         
         const url = new URL(window.location);
         url.searchParams.delete('page'); // Reset to page 1 when filtering
         
         const selectedType = typeFilter ? typeFilter.value : '';
         const selectedJob = jobFilter ? jobFilter.value : '';
+        const selectedResult = resultFilter ? resultFilter.value : '';
         
         if (selectedType) {
             url.searchParams.set('type', selectedType);
@@ -268,6 +277,12 @@
             url.searchParams.delete('job');
         }
         
+        if (selectedResult) {
+            url.searchParams.set('result', selectedResult);
+        } else {
+            url.searchParams.delete('result');
+        }
+        
         window.location.href = url.toString();
     }
     
@@ -309,24 +324,6 @@
         window.location.href = url.toString();
     };
 
-    // Filter by result type using stat-cards
-    window.filterByResult = function(resultType) {
-        const url = new URL(window.location);
-        url.searchParams.delete('page'); // Reset to page 1
-        
-        // Reset task type and job filters when clicking on stat cards
-        url.searchParams.delete('type');
-        url.searchParams.delete('job');
-        
-        if (resultType === 'all') {
-            url.searchParams.delete('result');
-        } else {
-            url.searchParams.set('result', resultType);
-        }
-        
-        window.location.href = url.toString();
-    };
-
     // Toggle collapsible section
     window.toggleCollapsible = function(sectionId) {
         const content = document.getElementById(sectionId + '-content');
diff --git a/apps/flowlord/handler/static/utils.js b/apps/flowlord/handler/static/utils.js
index f12ddbd..1d2b649 100644
--- a/apps/flowlord/handler/static/utils.js
+++ b/apps/flowlord/handler/static/utils.js
@@ -2,8 +2,25 @@
 (function() {
     'use strict';
 
+    // Escape HTML for safe display in innerHTML
+    function escapeHtml(text) {
+        if (text === null || text === undefined) return '';
+        const div = document.createElement('div');
+        div.textContent = String(text);
+        return div.innerHTML;
+    }
+
+    // Escape text for use in inline JavaScript attributes
+    function escapeJsString(text) {
+        if (text === null || text === undefined) return '';
+        return String(text).replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/"/g, '\\"');
+    }
+
     // Context menu functionality
     function showContextMenu(event, text) {
+        event.preventDefault();
+        event.stopPropagation();
+        
         // Remove any existing context menu
         const existingMenu = document.querySelector('.context-menu');
         if (existingMenu) {
@@ -13,11 +30,16 @@
         // Create context menu
         const contextMenu = document.createElement('div');
         contextMenu.className = 'context-menu';
-        contextMenu.innerHTML = `
-            <div class="context-menu-item" onclick="window.FlowlordUtils.copyToClipboard('${escapeHtml(text)}')">
-                📋 Copy
-            </div>
-        `;
+        
+        const menuItem = document.createElement('div');
+        menuItem.className = 'context-menu-item';
+        menuItem.innerHTML = '📋 Copy';
+        menuItem.addEventListener('click', function() {
+            copyToClipboard(text);
+            contextMenu.remove();
+        });
+        
+        contextMenu.appendChild(menuItem);
         
         // Position the context menu
         contextMenu.style.left = event.pageX + 'px';
@@ -38,11 +60,6 @@
         }, 100);
     }
 
-    // Escape HTML for safe insertion
-    function escapeHtml(text) {
-        return text.replace(/'/g, "\\'").replace(/"/g, '\\"');
-    }
-
     // Copy to clipboard functionality with enhanced feedback
     function copyToClipboard(text) {
         const targetElement = event ? event.target : document.activeElement;
@@ -72,9 +89,11 @@
     }
 
     // Show copy feedback with animation
-    function showCopyFeedback(element, message, isError = false) {
+    function showCopyFeedback(element, message, isError) {
+        isError = isError || false;
+        
         // Remove any existing feedback
-        const existingFeedback = element.querySelector('.copy-feedback');
+        const existingFeedback = document.querySelector('.copy-feedback');
         if (existingFeedback) {
             existingFeedback.remove();
         }
@@ -92,7 +111,7 @@
         feedback.style.top = (rect.top - 10) + 'px';
         feedback.style.transform = 'translateX(-50%)';
         
-        element.appendChild(feedback);
+        document.body.appendChild(feedback);
         
         // Remove feedback after animation
         setTimeout(() => {
@@ -104,27 +123,35 @@
 
     // Toggle field expansion
     function toggleField(element, fullText) {
-        if (element.classList.contains('truncated')) {
-            element.classList.remove('truncated');
-            element.classList.add('expanded');
-            element.textContent = fullText;
-        } else {
-            element.classList.add('truncated');
+        // Prevent event bubbling to avoid conflicts with sorting
+        if (event) {
+            event.stopPropagation();
+        }
+        
+        if (element.classList.contains('expanded')) {
+            // Collapse the field
             element.classList.remove('expanded');
+            element.classList.add('truncated');
             // Reset to truncated text if available in data attribute
             const truncatedText = element.getAttribute('data-truncated-text');
             if (truncatedText) {
                 element.textContent = truncatedText;
             }
+        } else {
+            // Expand the field
+            element.classList.remove('truncated');
+            element.classList.add('expanded');
+            element.textContent = fullText;
         }
     }
 
     // Export to global scope
     window.FlowlordUtils = {
+        escapeHtml: escapeHtml,
+        escapeJsString: escapeJsString,
         showContextMenu: showContextMenu,
         copyToClipboard: copyToClipboard,
         showCopyFeedback: showCopyFeedback,
         toggleField: toggleField
     };
 })();
-
diff --git a/apps/flowlord/handler/task.tmpl b/apps/flowlord/handler/task.tmpl
index 2c20329..1fd4fcc 100644
--- a/apps/flowlord/handler/task.tmpl
+++ b/apps/flowlord/handler/task.tmpl
@@ -12,33 +12,46 @@
     <div class="container full-width">
 
         <div class="summary-section">
-            <h3>Task Summary</h3>
-            <div class="summary-stats">
-                <div class="stat-card{{if not .Filter.Result}} active{{end}}" data-filter="all" onclick="filterByResult('all')">
-                    <div class="stat-number">{{.Counts.Total}}</div>
-                    <div class="stat-label">Total Tasks</div>
+            <h3>Summary</h3>
+            {{if .HourlyStats}}
+            <div class="collapsible-section">
+                <div class="collapsible-header" onclick="toggleCollapsible('hourlyChart')">
+                    <h3>Hourly Task Breakdown</h3>
+                    <span class="collapsible-toggle" id="hourlyChart-toggle">▼</span>
                 </div>
-                <div class="stat-card{{if eq .Filter.Result "complete"}} active{{end}}" data-filter="complete" onclick="filterByResult('complete')">
-                    <div class="stat-number">{{.Counts.Completed}}</div>
-                    <div class="stat-label">Completed</div>
-                </div>
-                <div class="stat-card{{if eq .Filter.Result "error"}} active{{end}}" data-filter="error" onclick="filterByResult('error')">
-                    <div class="stat-number">{{.Counts.Error}}</div>
-                    <div class="stat-label">Errors</div>
-                </div>
-                <div class="stat-card{{if eq .Filter.Result "alert"}} active{{end}}" data-filter="alert" onclick="filterByResult('alert')">
-                    <div class="stat-number">{{.Counts.Alert}}</div>
-                    <div class="stat-label">Alerts</div>
-                </div>
-                <div class="stat-card{{if eq .Filter.Result "warn"}} active{{end}}" data-filter="warn" onclick="filterByResult('warn')">
-                    <div class="stat-number">{{.Counts.Warn}}</div>
-                    <div class="stat-label">Warnings</div>
-                </div>
-                <div class="stat-card{{if eq .Filter.Result "running"}} active{{end}}" data-filter="running" onclick="filterByResult('running')">
-                    <div class="stat-number">{{.Counts.Running}}</div>
-                    <div class="stat-label">Running</div>
+                <div class="collapsible-content" id="hourlyChart-content">
+                    <div class="chart-container">
+                        <canvas id="hourlyChart"></canvas>
+                    </div>
                 </div>
             </div>
+            {{end}}
+            <div class="summary-stats-text">
+                <span class="summary-stat-item">
+                    <span class="stat-color-box stat-total"></span>
+                    Total: {{.Counts.Total}}
+                </span>
+                <span class="summary-stat-item">
+                    <span class="stat-color-box stat-completed"></span>
+                    Completed: {{.Counts.Completed}}
+                </span>
+                <span class="summary-stat-item">
+                    <span class="stat-color-box stat-error"></span>
+                    Errors: {{.Counts.Error}}
+                </span>
+                <span class="summary-stat-item">
+                    <span class="stat-color-box stat-alert"></span>
+                    Alerts: {{.Counts.Alert}}
+                </span>
+                <span class="summary-stat-item">
+                    <span class="stat-color-box stat-warn"></span>
+                    Warnings: {{.Counts.Warn}}
+                </span>
+                <span class="summary-stat-item">
+                    <span class="stat-color-box stat-running"></span>
+                    Running: {{.Counts.Running}}
+                </span>
+            </div>
         </div>
 
         {{if gt .TotalPages 1}}
@@ -75,6 +88,17 @@
                         <option value="">All Jobs</option>
                     </select>
                 </div>
+                <div class="filter-group">
+                    <label for="resultFilter">Result</label>
+                    <select id="resultFilter"{{if .Filter.ID}} disabled{{end}}>
+                        <option value="">All Results</option>
+                        <option value="complete"{{if eq .Filter.Result "complete"}} selected{{end}}>Completed</option>
+                        <option value="error"{{if eq .Filter.Result "error"}} selected{{end}}>Errors</option>
+                        <option value="alert"{{if eq .Filter.Result "alert"}} selected{{end}}>Alerts</option>
+                        <option value="warn"{{if eq .Filter.Result "warn"}} selected{{end}}>Warnings</option>
+                        <option value="running"{{if eq .Filter.Result "running"}} selected{{end}}>Running</option>
+                    </select>
+                </div>
                 <div class="filter-buttons">
                     <button type="button" class="btn btn-primary" onclick="searchById()">Search ID</button>
                     <button type="button" class="btn btn-secondary" onclick="clearFilters()">Clear All</button>
@@ -176,8 +200,185 @@
                     }
                 });
             }
+
+            // Render hourly task chart
+            {{if .HourlyStats}}
+            renderHourlyChart();
+            
+            // Re-render chart on window resize with debouncing
+            let resizeTimeout;
+            window.addEventListener('resize', function() {
+                clearTimeout(resizeTimeout);
+                resizeTimeout = setTimeout(function() {
+                    renderHourlyChart();
+                }, 150);
+            });
+            {{end}}
         });
 
+        function renderHourlyChart() {
+            const canvas = document.getElementById('hourlyChart');
+            if (!canvas) return;
+
+            const ctx = canvas.getContext('2d');
+            
+            // Get hourly data from template
+            const hourlyData = [
+                {{range $i, $stats := .HourlyStats}}
+                {
+                    hour: {{$i}},
+                    completed: {{$stats.Completed}},
+                    error: {{$stats.Error}},
+                    alert: {{$stats.Alert}},
+                    warn: {{$stats.Warn}},
+                    running: {{$stats.Running}},
+                    total: {{$stats.Total}}
+                },
+                {{end}}
+            ];
+
+            // Chart dimensions and styling
+            const padding = { top: 20, right: 40, bottom: 60, left: 60 };
+            const dpr = window.devicePixelRatio || 1;
+            
+            // Set canvas size
+            canvas.style.width = '100%';
+            canvas.style.height = '400px';
+            const rect = canvas.getBoundingClientRect();
+            canvas.width = rect.width * dpr;
+            canvas.height = rect.height * dpr;
+            ctx.scale(dpr, dpr);
+
+            const width = rect.width;
+            const height = rect.height;
+            const chartWidth = width - padding.left - padding.right;
+            const chartHeight = height - padding.top - padding.bottom;
+
+            // Calculate nice round max value with buffer
+            function getNiceMax(value) {
+                if (value === 0) return 20;
+                
+                // Add 12% buffer for visual spacing
+                const buffered = value * 1.12;
+                
+                // Try nice intervals that divide evenly by 4
+                // This gives us 5 grid lines with clean tick marks
+                // intervals of: 5, 10, 25, 50, 75, 100, 125, 250, etc.
+                const niceIntervals = [
+                    5, 10, 25, 50, 75, 100, 125, 250, 500, 750, 
+                    1000, 1250, 2500, 5000, 7500, 10000, 25000, 50000
+                ];
+                
+                for (let interval of niceIntervals) {
+                    const maxValue = interval * 4; // 4 intervals = 5 grid lines
+                    if (maxValue >= buffered) {
+                        return maxValue;
+                    }
+                }
+                
+                // For very large numbers, round up to nearest multiple of 100000
+                return Math.ceil(buffered / 100000) * 100000;
+            }
+            
+            // Find max total and round to nice number
+            const actualMax = Math.max(...hourlyData.map(d => d.total), 1);
+            const maxTotal = getNiceMax(actualMax);
+            
+            // Color scheme matching the summary cards
+            const colors = {
+                completed: '#4caf50',
+                error: '#f44336',
+                alert: '#ff9800',
+                warn: '#ffc107',
+                running: '#2196f3'
+            };
+
+            // Draw grid lines and y-axis labels
+            ctx.strokeStyle = '#e0e0e0';
+            ctx.lineWidth = 1;
+            ctx.fillStyle = '#666';
+            ctx.font = '12px system-ui, -apple-system, sans-serif';
+            ctx.textAlign = 'right';
+            
+            // Use 4 intervals (5 lines including 0)
+            const numIntervals = 4;
+            const tickInterval = maxTotal / numIntervals;
+            
+            for (let i = 0; i <= numIntervals; i++) {
+                const value = Math.round(tickInterval * i);
+                const y = padding.top + chartHeight - (chartHeight / numIntervals) * i;
+                
+                // Draw grid line
+                ctx.beginPath();
+                ctx.moveTo(padding.left, y);
+                ctx.lineTo(padding.left + chartWidth, y);
+                ctx.stroke();
+                
+                // Draw y-axis label
+                ctx.fillText(value.toString(), padding.left - 10, y + 4);
+            }
+
+            // Calculate bar width
+            const barWidth = chartWidth / 24;
+            const barPadding = barWidth * 0.1;
+            const actualBarWidth = barWidth - barPadding;
+
+            // Draw bars for each hour
+            hourlyData.forEach((data, index) => {
+                if (data.total === 0) return;
+
+                const x = padding.left + (index * barWidth) + (barPadding / 2);
+                const scale = chartHeight / maxTotal;
+                
+                let currentY = padding.top + chartHeight;
+
+                // Stack the bars from bottom to top
+                const segments = [
+                    { value: data.completed, color: colors.completed },
+                    { value: data.error, color: colors.error },
+                    { value: data.alert, color: colors.alert },
+                    { value: data.warn, color: colors.warn },
+                    { value: data.running, color: colors.running }
+                ];
+
+                segments.forEach(segment => {
+                    if (segment.value > 0) {
+                        const segmentHeight = segment.value * scale;
+                        currentY -= segmentHeight;
+                        
+                        ctx.fillStyle = segment.color;
+                        ctx.fillRect(x, currentY, actualBarWidth, segmentHeight);
+                    }
+                });
+            });
+
+            // Draw x-axis labels (hours)
+            ctx.fillStyle = '#666';
+            ctx.textAlign = 'center';
+            ctx.font = '11px system-ui, -apple-system, sans-serif';
+            
+            for (let i = 0; i < 24; i++) {
+                const x = padding.left + (i * barWidth) + (barWidth / 2);
+                const label = i.toString().padStart(2, '0');
+                ctx.fillText(label, x, padding.top + chartHeight + 20);
+            }
+
+            // Draw axis labels
+            ctx.fillStyle = '#333';
+            ctx.font = 'bold 14px system-ui, -apple-system, sans-serif';
+            
+            // X-axis label
+            ctx.textAlign = 'center';
+            ctx.fillText('Hour of Day', width / 2, height - 10);
+            
+            // Y-axis label
+            ctx.save();
+            ctx.translate(15, height / 2);
+            ctx.rotate(-Math.PI / 2);
+            ctx.fillText('Number of Tasks', 0, 0);
+            ctx.restore();
+        }
+
         // Search by task ID - resets other filters
         function searchById() {
             const idValue = document.getElementById('idFilter').value.trim();
diff --git a/apps/flowlord/handler/workflow.tmpl b/apps/flowlord/handler/workflow.tmpl
index 013db21..f9d91aa 100644
--- a/apps/flowlord/handler/workflow.tmpl
+++ b/apps/flowlord/handler/workflow.tmpl
@@ -77,9 +77,9 @@
                         <td class="rule-cell truncated copyable" 
                             data-full-text="{{.Rule}}" 
                             data-truncated-text="{{if ge (len .Rule) 120}}{{slice .Rule 0 120}}...{{else}}{{.Rule}}{{end}}"
-                            onclick="toggleField(this, '{{.Rule}}')" 
-                            oncontextmenu="showContextMenu(event, '{{.Rule}}')"
-                            ondblclick="copyToClipboard('{{.Rule}}')"
+                            onclick="window.FlowlordUtils.toggleField(this, '{{.Rule}}')" 
+                            oncontextmenu="window.FlowlordUtils.showContextMenu(event, '{{.Rule}}')"
+                            ondblclick="window.FlowlordUtils.copyToClipboard('{{.Rule}}')"
                             title="Click to expand/collapse, double-click or right-click to copy">
                             {{if ge (len .Rule) 120}}{{slice .Rule 0 120}}...{{else}}{{.Rule}}{{end}}
                         </td>
@@ -88,9 +88,9 @@
                         <td class="template-cell truncated copyable" 
                             data-full-text="{{.Template}}" 
                             data-truncated-text="{{if ge (len .Template) 120}}{{slice .Template 0 120}}...{{else}}{{.Template}}{{end}}"
-                            onclick="toggleField(this, '{{.Template}}')" 
-                            oncontextmenu="showContextMenu(event, '{{.Template}}')"
-                            ondblclick="copyToClipboard('{{.Template}}')"
+                            onclick="window.FlowlordUtils.toggleField(this, '{{.Template}}')" 
+                            oncontextmenu="window.FlowlordUtils.showContextMenu(event, '{{.Template}}')"
+                            ondblclick="window.FlowlordUtils.copyToClipboard('{{.Template}}')"
                             title="Click to expand/collapse, double-click or right-click to copy">
                             {{if ge (len .Template) 120}}{{slice .Template 0 120}}...{{else}}{{.Template}}{{end}}
                         </td>
@@ -115,123 +115,17 @@
         {{end}}
     </div>
 
+    <script src="{{if .isLocal}}./static{{else}}/static{{end}}/table-sort.js"></script>
     <script>
         document.addEventListener('DOMContentLoaded', function() {
-            const table = document.getElementById('workflowTable');
-            if (!table) return;
-            
-            const tbody = table.querySelector('tbody');
-            const headers = table.querySelectorAll('th.sortable');
-            
-            let currentSort = { column: null, direction: 'asc' };
-
-            // Get URL parameters
-            function getUrlParams() {
-                const urlParams = new URLSearchParams(window.location.search);
-                return {
-                    workflow: urlParams.get('workflow') || '',
-                    task: urlParams.get('task') || '',
-                    job: urlParams.get('job') || '',
-                    sort: urlParams.get('sort') || '',
-                    direction: urlParams.get('direction') || 'asc'
-                };
-            }
-
-            // Update URL with new parameters
-            function updateUrl(workflow, task, job, sort, direction) {
-                const url = new URL(window.location);
-                
-                if (workflow) url.searchParams.set('workflow', workflow);
-                else url.searchParams.delete('workflow');
-                
-                if (task) url.searchParams.set('task', task);
-                else url.searchParams.delete('task');
-                
-                if (job) url.searchParams.set('job', job);
-                else url.searchParams.delete('job');
-                
-                if (sort) {
-                    url.searchParams.set('sort', sort);
-                    url.searchParams.set('direction', direction);
-                } else {
-                    url.searchParams.delete('sort');
-                    url.searchParams.delete('direction');
+            // Initialize table sorting
+            window.FlowlordTableSort.init('workflowTable', {
+                columnTypes: {
+                    'retry': 'number'
                 }
-                
-                // Reload page with new URL
-                window.location.href = url.toString();
-            }
-
-            // Initialize sorting from URL
-            function initializeSorting() {
-                const params = getUrlParams();
-                
-                if (params.sort) {
-                    currentSort = { column: params.sort, direction: params.direction };
-                    sortTable(params.sort, params.direction);
-                    updateSortIndicators(params.sort, params.direction);
-                }
-            }
-
-            function sortTable(column, direction) {
-                const rows = Array.from(tbody.querySelectorAll('tr'));
-                const columnIndex = Array.from(headers).findIndex(th => th.dataset.sort === column);
-                
-                rows.sort((a, b) => {
-                    const aVal = a.cells[columnIndex].textContent.trim();
-                    const bVal = b.cells[columnIndex].textContent.trim();
-                    
-                    let comparison = 0;
-                    
-                    // Try to parse as numbers first (for retry column)
-                    if (column === 'retry') {
-                        const aNum = parseInt(aVal);
-                        const bNum = parseInt(bVal);
-                        
-                        if (!isNaN(aNum) && !isNaN(bNum)) {
-                            comparison = aNum - bNum;
-                        } else {
-                            comparison = aVal.localeCompare(bVal);
-                        }
-                    } else {
-                        comparison = aVal.localeCompare(bVal);
-                    }
-                    
-                    return direction === 'asc' ? comparison : -comparison;
-                });
-                
-                // Clear tbody and re-append sorted rows
-                tbody.innerHTML = '';
-                rows.forEach(row => tbody.appendChild(row));
-            }
-
-            function updateSortIndicators(activeColumn, direction) {
-                headers.forEach(th => {
-                    th.classList.remove('sort-asc', 'sort-desc');
-                    if (th.dataset.sort === activeColumn) {
-                        th.classList.add(direction === 'asc' ? 'sort-asc' : 'sort-desc');
-                    }
-                });
-            }
-
-            // Column sorting event listeners
-            headers.forEach(header => {
-                header.addEventListener('click', function() {
-                    const column = this.dataset.sort;
-                    let direction = 'asc';
-                    
-                    if (currentSort.column === column) {
-                        direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
-                    }
-                    
-                    currentSort = { column, direction };
-                    const params = getUrlParams();
-                    updateUrl(params.workflow, params.task, params.job, column, direction);
-                });
             });
 
-            // Initialize the page
-            initializeSorting();
+            // Initialize filters
             initializeFilters();
         });
 
@@ -253,9 +147,9 @@
             const jobMap = new Map(); // task -> Set of jobs
             
             rows.forEach(row => {
-                const workflowCell = row.cells[0]; // Workflow File column
-                const taskCell = row.cells[1]; // Task column
-                const jobCell = row.cells[2]; // Job column
+                const workflowCell = row.cells[0];
+                const taskCell = row.cells[1];
+                const jobCell = row.cells[2];
                 
                 if (workflowCell && taskCell && jobCell) {
                     const workflow = workflowCell.textContent.trim();
@@ -265,7 +159,6 @@
                     if (workflow) workflows.add(workflow);
                     if (task) {
                         tasks.add(task);
-                        
                         if (!jobMap.has(task)) {
                             jobMap.set(task, new Set());
                         }
@@ -277,8 +170,7 @@
             });
             
             // Populate workflow dropdown
-            const sortedWorkflows = Array.from(workflows).sort();
-            sortedWorkflows.forEach(workflow => {
+            Array.from(workflows).sort().forEach(workflow => {
                 const option = document.createElement('option');
                 option.value = workflow;
                 option.textContent = workflow;
@@ -286,23 +178,24 @@
             });
             
             // Populate task dropdown
-            const sortedTasks = Array.from(tasks).sort();
-            sortedTasks.forEach(task => {
+            Array.from(tasks).sort().forEach(task => {
                 const option = document.createElement('option');
                 option.value = task;
                 option.textContent = task;
                 taskFilter.appendChild(option);
             });
             
+            // Store jobMap for later use
+            window.workflowJobMap = jobMap;
+            
             // Handle task change
             taskFilter.addEventListener('change', function() {
                 const selectedTask = this.value;
                 const jobOptions = jobFilter.querySelectorAll('option:not([value=""])');
                 jobOptions.forEach(option => option.remove());
                 
-                if (selectedTask && jobMap.has(selectedTask)) {
-                    const jobs = Array.from(jobMap.get(selectedTask)).sort();
-                    jobs.forEach(job => {
+                if (selectedTask && window.workflowJobMap.has(selectedTask)) {
+                    Array.from(window.workflowJobMap.get(selectedTask)).sort().forEach(job => {
                         const option = document.createElement('option');
                         option.value = job;
                         option.textContent = job;
@@ -350,15 +243,10 @@
                     const taskMatch = !selectedTask || task === selectedTask;
                     const jobMatch = !selectedJob || job === selectedJob;
                     
-                    if (workflowMatch && taskMatch && jobMatch) {
-                        row.style.display = '';
-                    } else {
-                        row.style.display = 'none';
-                    }
+                    row.style.display = (workflowMatch && taskMatch && jobMatch) ? '' : 'none';
                 }
             });
             
-            // Update phase count
             updatePhaseCount();
         }
         
@@ -387,143 +275,12 @@
             if (taskFilter) taskFilter.value = '';
             if (jobFilter) {
                 jobFilter.value = '';
-                // Clear job options except "All Jobs"
                 const jobOptions = jobFilter.querySelectorAll('option:not([value=""])');
                 jobOptions.forEach(option => option.remove());
             }
             
             filterTable();
         }
-
-        // Toggle collapsible section
-        function toggleCollapsible(sectionId) {
-            const content = document.getElementById(sectionId + '-content');
-            const toggle = document.getElementById(sectionId + '-toggle');
-            
-            if (content.classList.contains('collapsed')) {
-                content.classList.remove('collapsed');
-                toggle.classList.add('expanded');
-            } else {
-                content.classList.add('collapsed');
-                toggle.classList.remove('expanded');
-            }
-        }
-
-        // Toggle field expansion/collapse functionality
-        function toggleField(element, fullText) {
-            // Prevent event bubbling to avoid conflicts with sorting
-            event.stopPropagation();
-            
-            if (element.classList.contains('expanded')) {
-                // Collapse the field
-                element.classList.remove('expanded');
-                element.classList.add('truncated');
-                element.textContent = element.dataset.truncatedText;
-            } else {
-                // Expand the field
-                element.classList.remove('truncated');
-                element.classList.add('expanded');
-                element.textContent = fullText;
-            }
-        }
-
-        // Context menu functionality
-        function showContextMenu(event, text) {
-            event.preventDefault();
-            event.stopPropagation();
-            
-            // Remove any existing context menu
-            const existingMenu = document.querySelector('.context-menu');
-            if (existingMenu) {
-                existingMenu.remove();
-            }
-            
-            // Create context menu
-            const contextMenu = document.createElement('div');
-            contextMenu.className = 'context-menu';
-            contextMenu.innerHTML = `
-                <div class="context-menu-item" onclick="copyToClipboard('${text.replace(/'/g, "\\'")}')">
-                    📋 Copy
-                </div>
-            `;
-            
-            // Position the context menu
-            contextMenu.style.left = event.pageX + 'px';
-            contextMenu.style.top = event.pageY + 'px';
-            
-            document.body.appendChild(contextMenu);
-            
-            // Close context menu when clicking elsewhere
-            const closeMenu = (e) => {
-                if (!contextMenu.contains(e.target)) {
-                    contextMenu.remove();
-                    document.removeEventListener('click', closeMenu);
-                }
-            };
-            
-            setTimeout(() => {
-                document.addEventListener('click', closeMenu);
-            }, 100);
-        }
-
-        // Copy to clipboard functionality with enhanced feedback
-        function copyToClipboard(text) {
-            const targetElement = event ? event.target : document.activeElement;
-            
-            navigator.clipboard.writeText(text).then(function() {
-                showCopyFeedback(targetElement, 'Copied!');
-            }).catch(function(err) {
-                console.error('Could not copy text: ', err);
-                // Fallback for older browsers
-                const textArea = document.createElement('textarea');
-                textArea.value = text;
-                textArea.style.position = 'fixed';
-                textArea.style.left = '-999999px';
-                textArea.style.top = '-999999px';
-                document.body.appendChild(textArea);
-                textArea.focus();
-                textArea.select();
-                try {
-                    document.execCommand('copy');
-                    showCopyFeedback(targetElement, 'Copied!');
-                } catch (err) {
-                    console.error('Fallback copy failed: ', err);
-                    showCopyFeedback(targetElement, 'Copy failed!', true);
-                }
-                document.body.removeChild(textArea);
-            });
-        }
-
-        // Show copy feedback with animation
-        function showCopyFeedback(element, message, isError = false) {
-            // Remove any existing feedback
-            const existingFeedback = element.querySelector('.copy-feedback');
-            if (existingFeedback) {
-                existingFeedback.remove();
-            }
-            
-            // Create feedback element
-            const feedback = document.createElement('div');
-            feedback.className = 'copy-feedback';
-            feedback.textContent = message;
-            feedback.style.backgroundColor = isError ? '#dc3545' : '#28a745';
-            
-            // Position feedback relative to the element
-            const rect = element.getBoundingClientRect();
-            feedback.style.position = 'fixed';
-            feedback.style.left = (rect.left + rect.width / 2) + 'px';
-            feedback.style.top = (rect.top - 10) + 'px';
-            feedback.style.transform = 'translateX(-50%)';
-            
-            element.appendChild(feedback);
-            
-            // Remove feedback after animation
-            setTimeout(() => {
-                if (feedback.parentNode) {
-                    feedback.remove();
-                }
-            }, 2000);
-        }
     </script>
 </body>
 </html>
diff --git a/apps/flowlord/handler_test.go b/apps/flowlord/handler_test.go
index 5b46de5..be39aac 100644
--- a/apps/flowlord/handler_test.go
+++ b/apps/flowlord/handler_test.go
@@ -588,6 +588,32 @@ func generateSummary(tasks []sqlite.TaskView) sqlite.TaskStats {
 	return sqlite.TaskStats(data)
 }
 
+func TestBackloadHTML(t *testing.T) {
+	// Load workflow files 
+	taskCache := &sqlite.SQLite{LocalPath: ":memory:"}
+	if err := taskCache.Open(testPath+"/workflow/", nil); err != nil {
+		t.Fatalf("Failed to create test cache: %v", err)
+	}
+
+	// Test with no filters - summary will be generated from tasks data
+	html := backloadHTML(taskCache)
+
+	// Validate HTML using the new function
+	if err := validateHTML(html); err != nil {
+		t.Errorf("HTML validation failed: %v", err)
+	}
+
+	// Write HTML to a file for easy viewing
+	outputFile := "handler/backload_preview.html"
+	err := os.WriteFile(outputFile, html, 0644)
+	if err != nil {
+		t.Fatalf("Failed to write HTML file: %v", err)
+	}
+
+	t.Logf("backload preview generated and saved to: ./%s", outputFile)
+
+}
+
 func TestWorkflowHTML(t *testing.T) {
 	// Load workflow files 
 	taskCache := &sqlite.SQLite{LocalPath: ":memory:"}
diff --git a/apps/flowlord/sqlite/stats.go b/apps/flowlord/sqlite/stats.go
index f372c50..c6781fb 100644
--- a/apps/flowlord/sqlite/stats.go
+++ b/apps/flowlord/sqlite/stats.go
@@ -228,3 +228,96 @@ func (ts TaskStats) TotalCounts() TaskCounts {
 
 	return counts
 }
+
+// GetCountsWithHourly returns both total and hourly task counts in a single iteration
+// The hourly array contains 24 TaskCounts where index represents the hour (0-23)
+func (ts TaskStats) GetCountsWithHourly() (TaskCounts, [24]TaskCounts) {
+	return ts.GetCountsWithHourlyFiltered(nil)
+}
+
+// GetCountsWithHourlyFiltered returns total and hourly counts with optional filtering by type, job, and result
+// The hourly array contains 24 TaskCounts where index represents the hour (0-23)
+func (ts TaskStats) GetCountsWithHourlyFiltered(filter *TaskFilter) (TaskCounts, [24]TaskCounts) {
+	var total TaskCounts
+	var hourly [24]TaskCounts
+
+	for key, stats := range ts {
+		// Apply type and job filters
+		if filter != nil {
+			// Parse key format "type:job"
+			parts := strings.SplitN(key, ":", 2)
+			taskType := parts[0]
+			taskJob := ""
+			if len(parts) == 2 {
+				taskJob = parts[1]
+			}
+
+			// Skip if type filter doesn't match
+			if filter.Type != "" && taskType != filter.Type {
+				continue
+			}
+
+			// Skip if job filter doesn't match
+			if filter.Job != "" && taskJob != filter.Job {
+				continue
+			}
+		}
+
+		// Process completed tasks
+		if filter == nil || filter.Result == "" || filter.Result == "complete" {
+			for _, t := range stats.CompletedTimes {
+				hour := t.Hour()
+				hourly[hour].Completed++
+				hourly[hour].Total++
+				total.Completed++
+				total.Total++
+			}
+		}
+
+		// Process error tasks
+		if filter == nil || filter.Result == "" || filter.Result == "error" {
+			for _, t := range stats.ErrorTimes {
+				hour := t.Hour()
+				hourly[hour].Error++
+				hourly[hour].Total++
+				total.Error++
+				total.Total++
+			}
+		}
+
+		// Process alert tasks
+		if filter == nil || filter.Result == "" || filter.Result == "alert" {
+			for _, t := range stats.AlertTimes {
+				hour := t.Hour()
+				hourly[hour].Alert++
+				hourly[hour].Total++
+				total.Alert++
+				total.Total++
+			}
+		}
+
+		// Process warn tasks
+		if filter == nil || filter.Result == "" || filter.Result == "warn" {
+			for _, t := range stats.WarnTimes {
+				hour := t.Hour()
+				hourly[hour].Warn++
+				hourly[hour].Total++
+				total.Warn++
+				total.Total++
+			}
+		}
+
+		// Process running tasks
+		if filter == nil || filter.Result == "" || filter.Result == "running" {
+			for _, t := range stats.RunningTimes {
+				hour := t.Hour()
+				hourly[hour].Running++
+				hourly[hour].Total++
+				total.Running++
+				total.Total++
+			}
+		}
+	}
+
+	return total, hourly
+}
diff --git a/apps/flowlord/sqlite/workflow.go b/apps/flowlord/sqlite/workflow.go
index 2cc5b9e..de4103b 100644
--- a/apps/flowlord/sqlite/workflow.go
+++ b/apps/flowlord/sqlite/workflow.go
@@ -364,6 +364,22 @@ func (s *SQLite) GetWorkflowFiles() []string {
 	return files
 }
 
+// GetAllPhasesGrouped returns all phases grouped by workflow file
+func (s *SQLite) GetAllPhasesGrouped() map[string][]PhaseDB {
+	result := make(map[string][]PhaseDB)
+
+	workflowFiles := s.GetWorkflowFiles()
+	for _, filePath := range workflowFiles {
+		phases, err := s.GetPhasesForWorkflow(filePath)
+		if err != nil {
+			continue
+		}
+		result[filePath] = phases
+	}
+
+	return result
+}
+
 // GetPhasesForWorkflow returns all phases for a specific workflow file
 func (s *SQLite) GetPhasesForWorkflow(filePath string) ([]PhaseDB, error) {
 	rows, err := s.db.Query(`
diff --git a/apps/flowlord/taskmaster.go b/apps/flowlord/taskmaster.go
index 9bd8ac4..87d482d 100644
--- a/apps/flowlord/taskmaster.go
+++ b/apps/flowlord/taskmaster.go
@@ -176,7 +176,7 @@ func (tm *taskMaster) refreshCache() ([]string, error) {
 	if len(files) > 0 {
 		log.Println("reloading workflow changes")
 		tcron := tm.cron
-		tm.cron = cron.New(cron.WithSeconds())
+		tm.cron = cron.New(cron.WithParser(cronParser))
 		if err := tm.schedule(); err != nil {
 			tm.cron = tcron // revert to old cron schedule
 			return files, fmt.Errorf("cron schedule: %w", err)
diff --git a/internal/docs/img/flowlord_backload.png b/internal/docs/img/flowlord_backload.png
new file mode 100644
index 0000000..6fc8fdb
Binary files /dev/null and b/internal/docs/img/flowlord_backload.png differ
diff --git a/internal/docs/img/flowlord_tasks.png b/internal/docs/img/flowlord_tasks.png
index 2deaff4..ae0b077 100644
Binary files a/internal/docs/img/flowlord_tasks.png and b/internal/docs/img/flowlord_tasks.png differ
diff --git a/internal/test/workflow/jobs.toml b/internal/test/workflow/jobs.toml
index 2a2ff05..2dab99b 100644
--- a/internal/test/workflow/jobs.toml
+++ b/internal/test/workflow/jobs.toml
@@ -1,6 +1,6 @@
 [[phase]]
 task = "worker"
-rule = "cron=0 */5 * * *?job=parent_job"
+rule = "cron=0 */5 * * *&job=parent_job"
 retry = 3
 template = "?date={yyyy}-{mm}-{dd}T{hh}"