error states

Author: kanekoshoyu

src/components/interactive/CoverLetterCard.tsx

@@ -55,7 +55,6 @@ export default function CoverLetterCard({ report, candidateName, roleName, compa
     tempDiv.innerHTML = `
       <div style="text-align: center; margin-bottom: 40px; border-bottom: 2px solid #000; padding-bottom: 20px;">
         <h1 style="margin: 0; font-size: 24px; font-weight: bold;">Cover Letter</h1>
-        <p style="margin: 10px 0 0 0; font-size: 14px; color: #666;">${candidateName} - ${roleName} @ ${companyName}</p>
       </div>
       <div style="white-space: pre-wrap; text-align: justify;">${report.cover_letter}</div>
     `;

src/components/interactive/JobDescriptionCard.tsx

@@ -34,7 +34,7 @@ function fmtMinutes(iso: string) {
 function prettifyStatus(raw: string) {
   if (!raw) return "Unknown";
   if (raw === "success") return "Successfully Processed";
-  if (raw === "failed_parse_jd") return "Failed to Parse";
+  if (raw === "failed_parsing_jd") return "Failed to Parse";
   return raw.replace(/_/g, " ");
 }
 

src/components/interactive/ReportCard.tsx

@@ -5,6 +5,7 @@ import { useReactToPrint } from "react-to-print";
 import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
 import { Progress } from "@/components/ui/progress";
 import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
 import { Check, X, Download, Shield, LogIn } from "lucide-react";
 import { EXTERNAL } from '@/constant';
 import { getUserProfile, getLoginUrl, type UserProfile } from '@/lib/utils';
@@ -59,10 +60,23 @@ function fmtMinutes(iso: string) {
 
 function prettifyStatus(raw: string) {
   if (!raw) return "—";
-  if (raw === "failed_parse_jd") return "Job description parsing failed";
+  if (raw === "failed_parsing_jd") return "Job description parsing failed";
+  if (raw === "failed_generating_report") return "Report generation failed";
   return raw.replace(/_/g, " ");
 }
 
+function getStatusIcon(status: string) {
+  if (status === "success") return <Check className="h-4 w-4 text-green-600" />;
+  if (status?.startsWith("failed")) return <X className="h-4 w-4 text-red-600" />;
+  return null;
+}
+
+function getStatusColor(status: string) {
+  if (status === "success") return "bg-green-100 text-green-800";
+  if (status?.startsWith("failed")) return "bg-red-100 text-red-800";
+  return "bg-yellow-100 text-yellow-800";
+}
+
 function getExpressionLevel(score: number): { level: string; color: string; imagePath: string } {
   if (score >= 80) {
     return { level: "High", color: "text-green-600", imagePath: "/expression_high.png" };
@@ -97,9 +111,8 @@ export default function ReportCard() {
 
   const roleName = report?.submission?.job_description?.role_name ?? "—";
   const companyName = report?.submission?.job_description?.company_name ?? "—";
-  const backfillStatus = prettifyStatus(
-    report?.submission?.job_description?.backfill_status ?? ""
-  );
+  const rawBackfillStatus = report?.submission?.job_description?.backfill_status ?? "";
+  const backfillStatus = prettifyStatus(rawBackfillStatus);
 
   // Create a nicely formatted filename for the PDF download
   const createFileName = () => {
@@ -410,12 +423,13 @@ export default function ReportCard() {
                 )}
               </p>
             </div>
-            {backfillStatus &&
-              backfillStatus.toLowerCase() !== "success" && (
+            {rawBackfillStatus &&
+              rawBackfillStatus.toLowerCase() !== "success" && (
                 <p>
-                  <span className="inline-flex items-center gap-1 rounded-full bg-red-100 text-red-700 px-2 py-1 text-xs font-medium">
+                  <Badge className={`flex items-center gap-1 ${getStatusColor(rawBackfillStatus)}`}>
+                    {getStatusIcon(rawBackfillStatus)}
                     {backfillStatus}
-                  </span>
+                  </Badge>
                 </p>
               )}
             <p className="text-sm text-gray-500">

src/components/interactive/RoleFitIndexForm.tsx

@@ -62,7 +62,7 @@ const STATE_CONFIG = {
   submitted: {
     step: 2,
     buttonText: "Analyzing…",
-    progressStep: 0,
+    progressStep: 1,
     isProcessing: true,
     canSubmit: false,
     helperText: "Analyzing your CV & JD — this usually takes ~30 seconds. You'll be redirected when the report is ready.",
@@ -71,7 +71,7 @@ const STATE_CONFIG = {
   parsed_jd: {
     step: 2,
     buttonText: "Analyzing…",
-    progressStep: 1,
+    progressStep: 2,
     isProcessing: true,
     canSubmit: false,
     helperText: "Analyzing your CV & JD — this usually takes ~30 seconds. You'll be redirected when the report is ready.",
@@ -80,7 +80,7 @@ const STATE_CONFIG = {
   generated_report: {
     step: 2,
     buttonText: "Analyzing…",
-    progressStep: 2,
+    progressStep: 3,
     isProcessing: true,
     canSubmit: false,
     helperText: "Analyzing your CV & JD — this usually takes ~30 seconds. You'll be redirected when the report is ready.",
@@ -103,6 +103,15 @@ const STATE_CONFIG = {
     canSubmit: true,
     helperText: "Failed to parse the job description. Please check the format and try again.",
     isError: true
+  },
+  failed_generating_report: {
+    step: 2,
+    buttonText: "Analyze Role Fit Now",
+    progressStep: 2,
+    isProcessing: false,
+    canSubmit: true,
+    helperText: "Failed to generate the report. Please try again.",
+    isError: true
   }
 } as const;
 
@@ -369,10 +378,10 @@ export default function RoleFitForm() {
 
         if ((rec.status || "").startsWith("failed_")) {
           if (rec.status === "failed_parsing_jd") {
-            // Don't set a generic error - let the UI show the failure at the parsing step
+            // Show failure at the parsing step and allow retry
             setCurrentState("failed_parsing_jd");
             clearTimeout(timeout);
-            reject(new Error("Failed to parse job description"));
+            resolve(false); // Resolve instead of reject to allow retry
           } else {
             setGenericError("Submission failed: " + rec.status);
             clearTimeout(timeout);
@@ -583,7 +592,7 @@ export default function RoleFitForm() {
                     {stateConfig.helperText ||
                       (genericError
                         ? "Something went wrong. Please try again."
-                        : "Analyzing your CV & JD — this usually takes ~30 seconds. You'll be redirected when the report is ready.")}
+                        : "Analyzing your CV & JD — this usually takes ~20 seconds. You'll be redirected when the report is ready.")}
                   </p>
                 </div>
               )}