From c6025b02e3b4e70d7b60d2e8c6833f7d51ffa665 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Mon, 23 Mar 2026 15:14:56 +0000
Subject: [PATCH] fix: align Job type to camelCase matching backend to_dict()
 response
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Frontend Job interface used snake_case (file_name, file_size, progress_pct,
step_label, provider_updates, result_csv_url, created_at) but backend
returns camelCase (fileName, fileSize, progressPct, stepLabel,
providerUpdates, resultCsvUrl, createdAt) — causing all fields to be
undefined and showing 'NaN MB', broken progress bar, empty labels.

Updated types/index.ts Job, ProviderUpdate, JobSummary interfaces and
JobProgressCard.tsx to use the correct camelCase field names.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../src/components/brief/JobProgressCard.tsx  | 16 ++++-----
 frontend/src/types/index.ts                   | 34 +++++++++----------
 2 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/brief/JobProgressCard.tsx b/frontend/src/components/brief/JobProgressCard.tsx
index d0b8069..ba378a8 100644
--- a/frontend/src/components/brief/JobProgressCard.tsx
+++ b/frontend/src/components/brief/JobProgressCard.tsx
@@ -23,10 +23,10 @@ export default function JobProgressCard({ job, onDelete }: Props) {
       <div className="flex items-start justify-between mb-2">
         <div>
           <div className="font-medium text-sm truncate max-w-xs" style={{ color: 'var(--text-primary)' }}>
-            {job.file_name}
+            {job.fileName}
           </div>
           <div className="text-xs mt-0.5" style={{ color: 'var(--text-muted)' }}>
-            {(job.file_size / 1024 / 1024).toFixed(1)} MB
+            {job.fileSize ? (job.fileSize / 1024 / 1024).toFixed(1) + ' MB' : '—'}
           </div>
         </div>
         <div className="flex items-center gap-2">
@@ -50,19 +50,19 @@ export default function JobProgressCard({ job, onDelete }: Props) {
         <div className="h-1 rounded-full mb-2" style={{ background: 'var(--border)' }}>
           <div
             className="h-full rounded-full transition-all duration-500"
-            style={{ width: `${job.progress_pct}%`, background: isDone ? 'var(--success)' : 'var(--accent)' }}
+            style={{ width: `${job.progressPct ?? 0}%`, background: isDone ? 'var(--success)' : 'var(--accent)' }}
           />
         </div>
       )}
 
-      {job.step_label && (
-        <div className="text-xs mb-2" style={{ color: 'var(--text-muted)' }}>{job.step_label}</div>
+      {job.stepLabel && (
+        <div className="text-xs mb-2" style={{ color: 'var(--text-muted)' }}>{job.stepLabel}</div>
       )}
 
       {/* Provider updates */}
-      {Object.entries(job.provider_updates || {}).length > 0 && (
+      {Object.entries(job.providerUpdates || {}).length > 0 && (
         <div className="flex gap-2 flex-wrap mb-2">
-          {Object.entries(job.provider_updates).map(([key, pu]) => (
+          {Object.entries(job.providerUpdates).map(([key, pu]) => (
             <span key={key} className="text-xs px-2 py-0.5 rounded" style={{
               background: pu.status === 'success' ? 'rgba(34,197,94,0.1)' : pu.status === 'error' ? 'rgba(239,68,68,0.1)' : 'rgba(255,255,255,0.05)',
               color: pu.status === 'success' ? 'var(--success)' : pu.status === 'error' ? 'var(--danger)' : 'var(--text-muted)',
@@ -95,7 +95,7 @@ export default function JobProgressCard({ job, onDelete }: Props) {
 
       {isDone && job.summary && (
         <div className="text-xs mt-2" style={{ color: 'var(--text-muted)' }}>
-          {job.summary.assets_extracted} assets · ${job.summary.cost_usd_total?.toFixed(4)} · {job.summary.processing_time_seconds?.toFixed(1)}s
+          {job.summary.assetsExtracted} assets · ${job.summary.costUsdTotal?.toFixed(4)} · {job.summary.processingTimeSeconds?.toFixed(1)}s
         </div>
       )}
     </div>
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index 6ce24ae..598bbbe 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -55,34 +55,34 @@ export interface ProviderUpdate {
   provider: string
   model: string
   status: string
-  latency_ms?: number
-  tokens_in?: number
-  tokens_out?: number
-  cost_usd?: number
+  latencyMs?: number
+  tokensIn?: number
+  tokensOut?: number
+  costUsd?: number
   error?: string
 }
 
 export interface JobSummary {
-  assets_extracted: number
-  confidence_score: number
-  cost_usd_total: number
-  tokens_total: number
-  processing_time_seconds: number
+  assetsExtracted: number
+  confidenceScore: number
+  costUsdTotal: number
+  tokensTotal: number
+  processingTimeSeconds: number
 }
 
 export interface Job {
   id: string
-  file_name: string
-  file_size: number
-  user_id: string
+  fileName: string
+  fileSize: number
+  userId: string
   phase: JobPhase
-  progress_pct: number
-  step_label: string
-  provider_updates: Record<string, ProviderUpdate>
+  progressPct: number
+  stepLabel: string
+  providerUpdates: Record<string, ProviderUpdate>
   error?: string
-  result_csv_url?: string
+  resultCsvUrl?: string
   summary?: JobSummary
-  created_at: string
+  createdAt: string
 }
 
 export interface ModelConfiguration {