Move time graph to the top

Author: Thomas Stromberg

internal/server/static/index.html

@@ -1667,8 +1667,9 @@ <h3>Why calculate PR costs?</h3>
             }
 
             // Build the HTML for the timeline
-            let html = '<div class="workflow-timeline" style="margin-top: 32px;">';
-            html += '<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 16px; color: #1d1d1f;">Workflow State Timeline</h3>';
+            let html = '<div class="workflow-timeline" style="margin-top: 32px; margin-bottom: 32px;">';
+            html += '<h3 style="font-size: 18px; font-weight: 600; margin-bottom: 4px; color: #1d1d1f;">Workflow State Timeline</h3>';
+            html += '<p style="font-size: 14px; color: #6e6e73; margin-bottom: 16px;">How long, on average, is a PR stuck in each state?</p>';
 
             // Stacked bar
             html += '<div style="display: flex; width: 100%; height: 40px; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">';
@@ -2090,16 +2091,17 @@ <h3>Why calculate PR costs?</h3>
 
                     // Generate HTML with efficiency section at top
                     let html = formatEfficiencyHTML(efficiencyPct, grade, message, preventableCost, preventableHours, b.total_cost, totalHours, b.pr_duration, false, 0, 0);
-                    html += '<div class="result-section">';
-                    html += '<h2>Cost Breakdown</h2>';
-                    html += '<pre><code>' + formatBreakdown(data) + '</code></pre>';
-                    html += '</div>';
 
                     // Add workflow timeline if available (only when using turnserver)
                     if (data.seconds_in_state) {
                         html += formatWorkflowTimeline(data.seconds_in_state);
                     }
 
+                    html += '<div class="result-section">';
+                    html += '<h2>Cost Breakdown</h2>';
+                    html += '<pre><code>' + formatBreakdown(data) + '</code></pre>';
+                    html += '</div>';
+
                     resultDiv.innerHTML = html;
                 }
 
@@ -2230,6 +2232,17 @@ <h3>Why calculate PR costs?</h3>
                                         const avgEfficiencyPct = avgTotalHours > 0 ? 100.0 * (avgTotalHours - avgPreventableHours) / avgTotalHours : 100.0;
                                         const avgEfficiency = efficiencyGrade(avgEfficiencyPct);
 
+                                        // Add workflow timeline if available (only when using turnserver)
+                                        if (data.seconds_in_state) {
+                                            // Calculate average seconds per PR
+                                            const avgSecondsInState = {};
+                                            const sampleCount = e.successful_samples || 1;
+                                            for (const [state, totalSeconds] of Object.entries(data.seconds_in_state)) {
+                                                avgSecondsInState[state] = Math.round(totalSeconds / sampleCount);
+                                            }
+                                            html += formatWorkflowTimeline(avgSecondsInState);
+                                        }
+
                                         // Extrapolated total section
                                         html += '<div class="result-section">';
                                         html += `<h2>${days}-day Estimated Costs</h2>`;
@@ -2242,17 +2255,6 @@ <h3>Why calculate PR costs?</h3>
                                         html += '<pre><code>' + formatAveragePR(e) + '</code></pre>';
                                         html += '</div>';
 
-                                        // Add workflow timeline if available (only when using turnserver)
-                                        if (data.seconds_in_state) {
-                                            // Calculate average seconds per PR
-                                            const avgSecondsInState = {};
-                                            const sampleCount = e.successful_samples || 1;
-                                            for (const [state, totalSeconds] of Object.entries(data.seconds_in_state)) {
-                                                avgSecondsInState[state] = Math.round(totalSeconds / sampleCount);
-                                            }
-                                            html += formatWorkflowTimeline(avgSecondsInState);
-                                        }
-
                                         resultDiv.innerHTML = html;
                                         resolve();
                                         return;