feat(scheduling): add Queue tab with provider lanes and execution analytics

Adds a new 'Queue' tab to the Scheduling page that visualizes:
- Queue overview (running, pending, avg wait, oldest pending)
- Provider lanes chart showing jobs grouped by provider bucket
- Provider bucket summary with running/pending counts
- Recent runs chart with execution history

This completes Phase 4 of the Provider-Aware Queue PRD.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Test User

web/pages/Scheduling.tsx

@@ -18,6 +18,9 @@ import Tabs from '../components/ui/Tabs';
 import ScheduleConfig from '../components/scheduling/ScheduleConfig.js';
 import type { IScheduleConfigForm } from '../components/scheduling/ScheduleConfig.js';
 import ScheduleTimeline from '../components/scheduling/ScheduleTimeline.js';
+import ProviderLanesChart from '../components/scheduling/ProviderLanesChart.js';
+import ProviderBucketSummary from '../components/scheduling/ProviderBucketSummary.js';
+import RecentRunsChart from '../components/scheduling/RecentRunsChart.js';
 import { useStore } from '../store/useStore';
 import type { INightWatchConfig, IQueueAnalytics, IQueueStatus } from '../api';
 import {
@@ -775,6 +778,109 @@ const Scheduling: React.FC = () => {
         </Card>
       ),
     },
+    {
+      id: 'queue',
+      label: 'Queue',
+      content: (
+        <div className="space-y-6">
+          {/* Queue Overview Card */}
+          <Card className="p-6">
+            <h3 className="text-lg font-semibold text-slate-200 mb-4">Queue Overview</h3>
+            <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
+              <div className="bg-slate-950/40 rounded-lg p-4 border border-slate-800">
+                <div className="text-xs uppercase tracking-wide text-slate-500 mb-1">Running</div>
+                <div className="text-2xl font-bold text-green-400">
+                  {queueStatus?.running ? 1 : 0}
+                </div>
+                {queueStatus?.running && (
+                  <div className="text-xs text-slate-400 mt-1 truncate" title={queueStatus.running.projectName}>
+                    {queueStatus.running.jobType} · {queueStatus.running.projectName}
+                  </div>
+                )}
+              </div>
+              <div className="bg-slate-950/40 rounded-lg p-4 border border-slate-800">
+                <div className="text-xs uppercase tracking-wide text-slate-500 mb-1">Pending</div>
+                <div className="text-2xl font-bold text-blue-400">
+                  {queueStatus?.pending.total ?? 0}
+                </div>
+              </div>
+              <div className="bg-slate-950/40 rounded-lg p-4 border border-slate-800">
+                <div className="text-xs uppercase tracking-wide text-slate-500 mb-1">Avg Wait</div>
+                <div className="text-2xl font-bold text-slate-200">
+                  {queueStatus?.averageWaitSeconds != null
+                    ? `${Math.floor(queueStatus.averageWaitSeconds / 60)}m`
+                    : '—'}
+                </div>
+              </div>
+              <div className="bg-slate-950/40 rounded-lg p-4 border border-slate-800">
+                <div className="text-xs uppercase tracking-wide text-slate-500 mb-1">Oldest Pending</div>
+                <div className="text-2xl font-bold text-slate-200">
+                  {queueStatus?.oldestPendingAge != null
+                    ? `${Math.floor(queueStatus.oldestPendingAge / 60)}m`
+                    : '—'}
+                </div>
+              </div>
+            </div>
+          </Card>
+
+          {/* Provider Lanes */}
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-semibold text-slate-200">Provider Lanes</h3>
+                <p className="text-xs text-slate-500 mt-0.5">
+                  Running and pending jobs grouped by provider bucket
+                </p>
+              </div>
+            </div>
+            {queueStatus ? (
+              <ProviderLanesChart status={queueStatus} />
+            ) : (
+              <div className="text-sm text-slate-500 py-2">Loading queue status...</div>
+            )}
+          </Card>
+
+          {/* Provider Bucket Summary */}
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-semibold text-slate-200">Provider Buckets</h3>
+                <p className="text-xs text-slate-500 mt-0.5">
+                  Running and pending counts per provider bucket
+                </p>
+              </div>
+            </div>
+            {queueAnalytics ? (
+              <ProviderBucketSummary analytics={queueAnalytics} />
+            ) : (
+              <div className="text-sm text-slate-500 py-2">Loading analytics...</div>
+            )}
+          </Card>
+
+          {/* Recent Runs */}
+          <Card className="p-6">
+            <div className="flex items-center justify-between mb-4">
+              <div>
+                <h3 className="text-lg font-semibold text-slate-200">Recent Runs</h3>
+                <p className="text-xs text-slate-500 mt-0.5">
+                  Last 24 hours of job executions
+                </p>
+              </div>
+              {queueAnalytics?.averageWaitSeconds != null && (
+                <div className="text-xs text-slate-500">
+                  Avg wait: {Math.floor(queueAnalytics.averageWaitSeconds / 60)}m
+                </div>
+              )}
+            </div>
+            {queueAnalytics ? (
+              <RecentRunsChart analytics={queueAnalytics} />
+            ) : (
+              <div className="text-sm text-slate-500 py-2">Loading analytics...</div>
+            )}
+          </Card>
+        </div>
+      ),
+    },
   ];
 
   return (