Fix jobs page layout and remove redundant columns

- Swap Queue ID and Job ID column order (Queue ID first)
- Remove bold formatting from job type for consistency
- Improve cell delineation with better padding and borders
- Reduce wasted space with tighter grid gaps and padding
- Fix Worker Details vs Job Progress redundancy:
  * Worker Details: Shows assignment status (Assigned to worker, Local processing, etc.)
  * Job Progress: Shows actual processing status (appears below worker details during processing)
- Update real-time updates to maintain separation of concerns

templates/jobs.html

@@ -8,9 +8,10 @@
     .jobs-table { background: white; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); overflow: hidden; }
     .table-header { padding: 2rem; border-bottom: 1px solid #e5e7eb; }
     .table-header h2 { margin: 0; color: #1e293b; }
-    .job-row { display: grid; grid-template-columns: 80px 80px 1fr 2fr 1fr 1fr 100px 100px 120px; gap: 1rem; padding: 1rem 2rem; border-bottom: 1px solid #f1f5f9; align-items: center; }
+    .job-row { display: grid; grid-template-columns: 80px 80px 1fr 2fr 1fr 1fr 100px 100px 120px; gap: 0.75rem; padding: 0.75rem 1.5rem; border-bottom: 1px solid #e5e7eb; align-items: center; }
     .job-row:last-child { border-bottom: none; }
-    .job-type { font-weight: 600; color: #1e293b; }
+    .job-type { color: #374151; }
+    .job-row > div { padding: 0.25rem 0; }
     .job-data { color: #64748b; font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
     .job-time { color: #64748b; font-size: 0.9rem; }
     .job-status { padding: 0.25rem 0.75rem; border-radius: 20px; font-size: 0.8rem; font-weight: 500; text-align: center; }
@@ -119,21 +120,25 @@
                 }
             }
 
-            // Update worker details
-            const workerDetailsElement = jobRow.querySelector('.worker-details');
-            if (workerDetailsElement && jobUpdate.result) {
-                workerDetailsElement.textContent = jobUpdate.result.status || '-';
-            }
-
-            // Add progress info for processing jobs
+            // Add progress info for processing jobs (separate from worker assignment details)
             if (jobUpdate.status === 'processing' && jobUpdate.result) {
                 let progressElement = jobRow.querySelector('.job-progress');
                 if (!progressElement) {
                     progressElement = document.createElement('div');
                     progressElement.className = 'job-progress';
+                    progressElement.style.fontSize = '0.8rem';
+                    progressElement.style.color = '#6b7280';
+                    progressElement.style.gridColumn = '6'; // Position in worker details column
+                    progressElement.style.marginTop = '0.25rem';
                     jobRow.appendChild(progressElement);
                 }
                 progressElement.textContent = jobUpdate.result.status || 'Processing...';
+            } else {
+                // Remove progress element if job is no longer processing
+                const progressElement = jobRow.querySelector('.job-progress');
+                if (progressElement) {
+                    progressElement.remove();
+                }
             }
         }
     }
@@ -445,16 +450,28 @@
             </div>
             {% for job in queue_items %}
             <div class="job-row" data-job-id="{{ job.id }}">
-                <div class="job-id" style="font-family: monospace; font-size: 0.8rem; color: #6b7280;">{{ job.job_id or 'N/A' }}</div>
                 <div class="queue-id" style="font-family: monospace; font-size: 0.8rem; color: #6b7280;">{{ job.id }}</div>
+                <div class="job-id" style="font-family: monospace; font-size: 0.8rem; color: #6b7280;">{{ job.job_id or 'N/A' }}</div>
                 <div class="job-type">{{ job.request_type.title() }}</div>
                 <div class="job-data" title="{{ job.data.get('prompt', job.data.get('description', 'N/A')) }}">
                     {{ job.data.get('prompt', job.data.get('description', 'N/A'))[:50] }}{% if job.data.get('prompt', job.data.get('description', 'N/A'))|length > 50 %}...{% endif %}
                 </div>
                 <div class="job-time">{{ job.created_at[:19] }}</div>
                 <div class="worker-details" style="font-size: 0.8rem; color: #6b7280;">
-                    {% if job.result and job.result.get('status') %}
-                        {{ job.result.status }}
+                    {% if job.status == 'processing' %}
+                        {% if job.job_id %}
+                            Assigned to worker
+                        {% else %}
+                            Local processing
+                        {% endif %}
+                    {% elif job.status == 'queued' %}
+                        Pending assignment
+                    {% elif job.status == 'completed' %}
+                        Completed
+                    {% elif job.status == 'failed' %}
+                        Failed
+                    {% elif job.status == 'cancelled' %}
+                        Cancelled
                     {% else %}
                         -
                     {% endif %}