merge: resolve Batch.tsx conflict between model picker and job history

Combine both useQuery hooks (modelsQuery for model selector, jobsQuery for
job history) and pass selectedModel to analyzeBatch while also triggering
jobsQuery.refetch() on successful submission.

frontend/src/pages/Batch.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useMutation, useQuery } from '@tanstack/react-query';
 import { analysisApi } from '../api/client';
-import { Rocket, CheckCircle, AlertCircle, ChevronDown, ChevronUp } from 'lucide-react';
+import { Rocket, CheckCircle, AlertCircle, ChevronDown, ChevronUp, RefreshCw, Inbox } from 'lucide-react';
 import { BarChart, Bar, XAxis, YAxis, Tooltip, ResponsiveContainer, Cell } from 'recharts';
 import type { BatchAnalysisResult } from '../types';
 
@@ -17,10 +17,18 @@ export function Batch() {
     queryFn: () => analysisApi.listModels(),
   });
 
+  const jobsQuery = useQuery({
+    queryKey: ['jobs'],
+    queryFn: () => analysisApi.listJobs(undefined, 20),
+  });
+
   const mutation = useMutation({
     mutationFn: ({ companies, workers }: { companies: string[]; workers: number }) =>
       analysisApi.analyzeBatch(companies, workers, selectedModel || undefined),
-    onSuccess: (data) => setResult(data),
+    onSuccess: (data) => {
+      setResult(data);
+      jobsQuery.refetch();
+    },
   });
 
   const handleSubmit = (e: React.FormEvent) => {
@@ -152,12 +160,29 @@ export function Batch() {
             {mutation.error instanceof Error ? mutation.error.message : 'An unexpected error occurred.'}
             {' '}Check your connection and try again.
           </p>
-          <button
+          <div className="ml-7 mt-2 flex items-center gap-3">
-            onClick={() => mutation.reset()}
+            <button
-            className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline"
+              onClick={() => {
-          >
+                const companies = companiesInput
-            Dismiss
+                  .split(/[,\n]/)
-          </button>
+                  .map((c) => c.trim())
+                  .filter((c) => c.length > 0);
+                if (companies.length > 0) {
+                  mutation.mutate({ companies, workers: maxWorkers });
+                }
+              }}
+              className="text-sm text-primary hover:text-primary-dark underline flex items-center gap-1"
+            >
+              <RefreshCw size={14} />
+              Retry
+            </button>
+            <button
+              onClick={() => mutation.reset()}
+              className="text-sm text-text-secondary hover:text-text-primary underline"
+            >
+              Dismiss
+            </button>
+          </div>
         </div>
       )}
 
@@ -259,6 +284,123 @@ export function Batch() {
           </div>
         </div>
       )}
+
+      {/* Job History */}
+      <div>
+        <h3 className="text-lg font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-4">
+          Job History
+        </h3>
+
+        {/* Loading skeleton */}
+        {jobsQuery.isLoading && (
+          <div className="space-y-3">
+            {[...Array(3)].map((_, i) => (
+              <div
+                key={i}
+                className="bg-bg-card/60 border border-primary/15 rounded-xl p-4 animate-pulse"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    <div className="h-5 w-5 rounded-full bg-primary/20" />
+                    <div className="h-4 w-32 rounded bg-primary/20" />
+                    <div className="h-4 w-20 rounded bg-primary/10" />
+                  </div>
+                  <div className="h-6 w-20 rounded-full bg-primary/15" />
+                </div>
+                <div className="mt-3 flex gap-4">
+                  <div className="h-3 w-24 rounded bg-primary/10" />
+                  <div className="h-3 w-16 rounded bg-primary/10" />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {/* Job history error */}
+        {jobsQuery.isError && (
+          <div className="bg-error/10 border border-error/20 rounded-xl px-4 py-3">
+            <div className="flex items-center gap-2 text-error">
+              <AlertCircle size={18} />
+              <span className="font-semibold">Failed to load job history</span>
+            </div>
+            <p className="text-text-secondary text-sm mt-1 ml-7">
+              {jobsQuery.error instanceof Error ? jobsQuery.error.message : 'Could not retrieve past jobs.'}
+            </p>
+            <button
+              onClick={() => jobsQuery.refetch()}
+              className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline flex items-center gap-1"
+            >
+              <RefreshCw size={14} />
+              Retry
+            </button>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {jobsQuery.isSuccess && jobsQuery.data.length === 0 && !result && (
+          <div className="bg-bg-card/60 border border-primary/15 border-dashed rounded-xl p-8 text-center">
+            <Inbox className="mx-auto text-text-secondary/40 mb-3" size={40} />
+            <p className="text-text-secondary font-medium">No batch jobs yet</p>
+            <p className="text-text-secondary/70 text-sm mt-1">
+              Submit a batch analysis above to get started. Your job history will appear here.
+            </p>
+          </div>
+        )}
+
+        {/* Job list */}
+        {jobsQuery.isSuccess && jobsQuery.data.length > 0 && (
+          <div className="space-y-3">
+            {jobsQuery.data.map((job) => (
+              <div
+                key={job.job_id}
+                className="bg-bg-card/60 border border-primary/15 rounded-xl p-4"
+              >
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-3">
+                    {job.status === 'completed' && <CheckCircle className="text-success" size={18} />}
+                    {job.status === 'failed' && <AlertCircle className="text-error" size={18} />}
+                    {(job.status === 'pending' || job.status === 'running') && (
+                      <div className="animate-spin rounded-full h-[18px] w-[18px] border-t-2 border-b-2 border-secondary" />
+                    )}
+                    <span className="font-mono text-sm text-text-primary">{job.job_id.slice(0, 8)}</span>
+                    <span className="text-text-secondary text-sm">
+                      {job.total_companies} {job.total_companies === 1 ? 'company' : 'companies'}
+                    </span>
+                  </div>
+                  <span
+                    className={`text-xs font-semibold px-2.5 py-1 rounded-full ${
+                      job.status === 'completed'
+                        ? 'bg-success/15 text-success'
+                        : job.status === 'failed'
+                          ? 'bg-error/15 text-error'
+                          : 'bg-secondary/15 text-secondary'
+                    }`}
+                  >
+                    {job.status}
+                  </span>
+                </div>
+                {(job.status === 'running' || job.status === 'pending') && job.total_companies > 0 && (
+                  <div className="mt-3">
+                    <div className="flex items-center justify-between text-xs text-text-secondary mb-1">
+                      <span>Progress</span>
+                      <span>{job.completed_companies}/{job.total_companies}</span>
+                    </div>
+                    <div className="h-1.5 bg-bg-dark rounded-full overflow-hidden">
+                      <div
+                        className="h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-300"
+                        style={{ width: `${(job.completed_companies / job.total_companies) * 100}%` }}
+                      />
+                    </div>
+                  </div>
+                )}
+                {job.status === 'failed' && job.error && (
+                  <p className="mt-2 text-sm text-error/80">{job.error}</p>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
     </div>
   );
 }