Refine jobs page layout and display

- Move job progress to appear after job status column
- Display tokens with 'Tokens: X' format for clarity
- Add text truncation to job_id to prevent overflow (max-width: 80px, ellipsis)
- Update real-time token updates to include 'Tokens:' prefix
- Improve visual hierarchy and information clarity

templates/jobs.html

@@ -116,7 +116,7 @@
             if (jobUpdate.status === 'completed' && jobUpdate.used_tokens) {
                 const tokensElement = jobRow.querySelector('.job-tokens');
                 if (tokensElement) {
-                    tokensElement.textContent = jobUpdate.used_tokens;
+                    tokensElement.textContent = 'Tokens: ' + jobUpdate.used_tokens;
                 }
             }
 
@@ -128,7 +128,7 @@
                     progressElement.className = 'job-progress';
                     progressElement.style.fontSize = '0.8rem';
                     progressElement.style.color = '#6b7280';
-                    progressElement.style.gridColumn = '6'; // Position in worker details column
+                    progressElement.style.gridColumn = '8'; // Position after status column
                     progressElement.style.marginTop = '0.25rem';
                     jobRow.appendChild(progressElement);
                 }
@@ -451,7 +451,7 @@
             {% for job in queue_items %}
             <div class="job-row" data-job-id="{{ job.id }}">
                 <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-id" style="font-family: monospace; font-size: 0.8rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 80px;" title="{{ job.job_id or 'N/A' }}">{{ 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 %}
@@ -480,7 +480,7 @@
                     {% if job.status == 'processing' %}<div class="spinner"></div>{% endif %}
                     {{ job.status.title() }}
                 </span>
-                <div class="job-tokens">{{ job.used_tokens or 0 }}</div>
+                <div class="job-tokens" style="font-size: 0.8rem; color: #6b7280;">Tokens: {{ job.used_tokens or 0 }}</div>
                 <div class="job-actions">
                     <!-- Actions will be populated by JavaScript -->
                 </div>