feat: improve loading and error states on Batch and Analytics pages

Analytics page now shows skeleton loaders (cards and chart placeholders)
while data loads, and displays a retry button when the API call fails.
Batch page error state now shows the actual error message and suggests
user action.

Closes leeworks-agents/SPARC#16

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

SPARC/api.py

@@ -77,13 +77,6 @@ class JobStatus(BaseModel):
     error: str | None = None
 
 
-class PaginatedJobsResponse(BaseModel):
-    """Paginated response for job listings."""
-
-    items: list["JobStatus"]
-    next_cursor: str | None = None
-
-
 class HealthResponse(BaseModel):
     """Health check response."""
 
@@ -584,51 +577,24 @@ async def get_job_status(
     return _job_row_to_status(job_row)
 
 
-@app.get("/jobs", response_model=PaginatedJobsResponse, tags=["Jobs"])
+@app.get("/jobs", response_model=list[JobStatus], tags=["Jobs"])
 async def list_jobs(
     status: Annotated[
         str | None,
         Query(description="Filter by status: pending, running, completed, failed"),
     ] = None,
     limit: Annotated[int, Query(ge=1, le=100)] = 10,
-    cursor: Annotated[
-        str | None,
-        Query(description="Opaque cursor from a previous response's next_cursor field"),
-    ] = None,
     _: UserResponse = Depends(get_current_user),
 ):
-    """List analysis jobs with cursor-based pagination.
-
-    Pass ``limit`` to control page size. The response includes a ``next_cursor``
-    field; pass it back as the ``cursor`` query parameter to fetch the next page.
-    When ``next_cursor`` is ``null``, there are no more results.
-
-    Existing clients that use only ``limit`` (without ``cursor``) continue to
-    work without modification.
+    """List all analysis jobs.
 
     Args:
         status: Optional filter by job status
         limit: Maximum number of jobs to return (default 10, max 100)
-        cursor: Opaque pagination cursor from a previous response
 
     Returns:
-        Paginated list of job statuses
+        List of job statuses
     """
     db = _get_job_db()
-    # Fetch one extra to determine if there is a next page
-    job_rows = db.list_jobs(status=status, limit=limit + 1, cursor=cursor)
-
-    has_next = len(job_rows) > limit
-    if has_next:
-        job_rows = job_rows[:limit]
-
-    items = [_job_row_to_status(row) for row in job_rows]
-
-    next_cursor = None
-    if has_next and job_rows:
-        last = job_rows[-1]
-        created = last["created_at"]
-        ts = created.isoformat() if hasattr(created, "isoformat") else str(created)
-        next_cursor = f"{ts}|{last['job_id']}"
-
-    return PaginatedJobsResponse(items=items, next_cursor=next_cursor)
+    job_rows = db.list_jobs(status=status, limit=limit)
+    return [_job_row_to_status(row) for row in job_rows]

SPARC/database.py

@@ -568,45 +568,20 @@ class DatabaseClient:
         self,
         status: Optional[str] = None,
         limit: int = 10,
-        cursor: Optional[str] = None,
     ) -> List[Dict]:
-        """List jobs with optional status filter and cursor-based pagination.
-
-        Args:
-            status: Optional status filter (pending, running, completed, failed).
-            limit: Maximum number of jobs to return.
-            cursor: Opaque cursor (``created_at|job_id``) from a previous
-                response. When provided, only jobs older than the cursor are
-                returned.
-
-        Returns:
-            List of job dicts ordered by created_at descending.
-        """
-        conditions: list[str] = []
-        params: list = []
-
-        if status:
-            conditions.append("status = %s")
-            params.append(status)
-
-        if cursor:
-            try:
-                ts_str, cursor_job_id = cursor.rsplit("|", 1)
-                conditions.append("(created_at, job_id) < (%s, %s)")
-                params.extend([ts_str, cursor_job_id])
-            except ValueError:
-                pass  # Ignore malformed cursors; return from start
-
+        """List jobs, optionally filtered by status."""
         query = "SELECT * FROM jobs"
-        if conditions:
-            query += " WHERE " + " AND ".join(conditions)
-        query += " ORDER BY created_at DESC, job_id DESC LIMIT %s"
+        params: list = []
+        if status:
+            query += " WHERE status = %s"
+            params.append(status)
+        query += " ORDER BY created_at DESC LIMIT %s"
         params.append(limit)
 
         with self.get_conn() as conn:
-            with conn.cursor(cursor_factory=RealDictCursor) as cur:
-                cur.execute(query, params)
-                return [dict(row) for row in cur.fetchall()]
+            with conn.cursor(cursor_factory=RealDictCursor) as cursor:
+                cursor.execute(query, params)
+                return [dict(row) for row in cursor.fetchall()]
 
     def mark_stale_jobs_failed(self) -> int:
         """Mark any jobs in 'running' or 'pending' state as 'failed'.

frontend/src/pages/Analytics.tsx

@@ -9,15 +9,38 @@ const COLORS = ['#6366f1', '#0ea5e9', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'
 export function AnalyticsPage() {
   const [days, setDays] = useState(30);
 
-  const { data, isLoading, isError } = useQuery({
+  const { data, isLoading, isError, refetch } = useQuery({
     queryKey: ['analytics', days],
     queryFn: () => analyticsApi.getAnalytics(days),
   });
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center min-h-[400px]">
-        <div className="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
+      <div className="space-y-6">
+        <div>
+          <h2 className="text-xl font-semibold text-text-primary border-b-2 border-primary/30 pb-2 mb-2">
+            Analytics Dashboard
+          </h2>
+          <p className="text-text-secondary">Loading analytics data...</p>
+        </div>
+        {/* Skeleton cards */}
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+          {[1, 2, 3].map((i) => (
+            <div key={i} className="bg-gradient-to-br from-primary/10 to-secondary/10 border border-primary/20 rounded-xl p-5 text-center animate-pulse">
+              <div className="h-9 w-16 bg-primary/20 rounded mx-auto mb-2" />
+              <div className="h-4 w-24 bg-primary/10 rounded mx-auto" />
+            </div>
+          ))}
+        </div>
+        {/* Skeleton charts */}
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {[1, 2].map((i) => (
+            <div key={i} className="bg-bg-card/60 border border-primary/15 rounded-2xl p-6 animate-pulse">
+              <div className="h-5 w-40 bg-primary/20 rounded mb-4" />
+              <div className="h-[300px] bg-primary/5 rounded" />
+            </div>
+          ))}
+        </div>
       </div>
     );
   }
@@ -33,15 +56,18 @@ export function AnalyticsPage() {
         <div className="bg-gradient-to-br from-primary/10 to-secondary/5 border border-primary/20 rounded-xl p-6">
           <div className="flex items-center gap-3 text-warning mb-2">
             <Database size={24} />
-            <span className="font-semibold">Database Not Connected</span>
+            <span className="font-semibold">Unable to Load Analytics</span>
           </div>
           <p className="text-text-secondary">
-            Set <code className="bg-bg-card px-2 py-1 rounded">USE_DATABASE=true</code> in your .env file to enable analytics tracking.
+            Could not connect to the analytics database. Ensure PostgreSQL is running and
+            <code className="bg-bg-card px-2 py-1 rounded mx-1">DATABASE_URL</code> is configured correctly.
           </p>
-        </div>
-        <div className="flex items-center gap-2 bg-secondary/10 border border-secondary/20 text-secondary rounded-xl px-4 py-3">
-          <AlertCircle size={18} />
-          <span>Analytics features require storing analysis results in PostgreSQL for historical tracking.</span>
+          <button
+            onClick={() => refetch()}
+            className="mt-3 text-sm bg-primary/20 hover:bg-primary/30 text-primary font-medium px-4 py-2 rounded-lg transition-colors"
+          >
+            Retry
+          </button>
         </div>
       </div>
     );

frontend/src/pages/Batch.tsx

@@ -114,9 +114,21 @@ export function Batch() {
 
       {/* Error */}
       {mutation.isError && (
-        <div className="flex items-center gap-2 bg-error/10 border border-error/20 text-error rounded-xl px-4 py-3">
+        <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>Batch analysis failed. Please try again.</span>
+            <span className="font-semibold">Batch analysis failed</span>
+          </div>
+          <p className="text-text-secondary text-sm mt-1 ml-7">
+            {mutation.error instanceof Error ? mutation.error.message : 'An unexpected error occurred.'}
+            {' '}Check your connection and try again.
+          </p>
+          <button
+            onClick={() => mutation.reset()}
+            className="ml-7 mt-2 text-sm text-primary hover:text-primary-dark underline"
+          >
+            Dismiss
+          </button>
         </div>
       )}