From f05ea4b23e76dc587e43ad9e28029ff187f56379 Mon Sep 17 00:00:00 2001
From: Bhanu Prakash Sai Potteri <bhanu.potteri@getzino.com>
Date: Sat, 23 May 2026 15:00:38 +0530
Subject: [PATCH] PhaseDots: distinguish failed states with halo ring, STALLED
 tag, dashed connector

---
 src/components/variants/VariantB.tsx | 32 ++++++++++++++++++++++++----
 1 file changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/components/variants/VariantB.tsx b/src/components/variants/VariantB.tsx
index 5ac953e..1945627 100644
--- a/src/components/variants/VariantB.tsx
+++ b/src/components/variants/VariantB.tsx
@@ -11,7 +11,7 @@ import {
   ChevronLeft, ChevronRight, Search, ArrowUp, ArrowDown, X, RefreshCw,
   CheckCircle2, LogOut, Sparkles, Car, ClipboardList, PhoneOutgoing,
   CalendarCheck2, MessageSquareHeart, Trophy, ArrowLeft, ChevronDown, ChevronUp,
-  Plus,
+  Plus, AlertTriangle,
 } from "lucide-react";
 import {
   BarChart as RBarChart, Bar, XAxis, YAxis, Tooltip, CartesianGrid,
@@ -76,28 +76,52 @@ function phaseIndexFor(state: string | null | undefined): number {
   if (state === STATE_IDS.AWAITING_SCHEDULER_CALL || state === STATE_IDS.SCHEDULING_CALL_FAILED) return 1;
   return 0;
 }
+function failedPhaseIndex(state: string | null | undefined): number {
+  if (state === STATE_IDS.SCHEDULING_CALL_FAILED) return 1;
+  if (state === STATE_IDS.FEEDBACK_CALL_FAILED) return 3;
+  return -1;
+}
 function PhaseDots({ state }: { state: string | null | undefined }) {
   const current = phaseIndexFor(state);
+  const failedAt = failedPhaseIndex(state);
   return (
     <div className="mt-4 flex items-center gap-2.5 flex-wrap">
       {PHASES.map((label, i) => {
         const reached = i <= current;
+        const isFailed = i === failedAt;
         return (
           <React.Fragment key={label}>
             <div className="flex items-center gap-1.5">
               <span
                 className="w-2.5 h-2.5 rounded-full shrink-0"
                 style={
-                  reached
+                  isFailed
+                    ? { background: "#e31837", boxShadow: "0 0 0 2px rgba(227,24,55,0.35)" }
+                    : reached
                     ? { background: "#e31837" }
                     : { background: "transparent", border: "2px solid rgba(255,255,255,0.4)" }
                 }
               />
-              <span className={`text-[11px] font-semibold uppercase tracking-[0.08em] ${reached ? "text-white" : "text-white/50"}`}>
+              <span className={`flex items-center gap-1 text-[11px] font-semibold uppercase tracking-[0.08em] ${reached ? "text-white" : "text-white/50"}`}>
                 {label}
+                {isFailed && (
+                  <span className="flex items-center gap-0.5 ml-0.5" style={{ color: "#ff8a9c" }} title="Stalled — call failed">
+                    <AlertTriangle size={10} strokeWidth={2.5} />
+                    <span className="text-[9.5px] tracking-[0.1em]">STALLED</span>
+                  </span>
+                )}
               </span>
             </div>
-            {i < PHASES.length - 1 && <span className="w-5 h-px" style={{ background: "rgba(255,255,255,0.2)" }} />}
+            {i < PHASES.length - 1 && (
+              <span
+                className="w-5 h-px"
+                style={
+                  isFailed
+                    ? { background: "transparent", borderTop: "1px dashed rgba(227,24,55,0.55)" }
+                    : { background: "rgba(255,255,255,0.2)" }
+                }
+              />
+            )}
           </React.Fragment>
         );
       })}