From 2d57b8dafa9ba9ee3c70bbe41ed8b6fc9f2c7c49 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Fri, 24 Apr 2026 10:08:14 -0500
Subject: [PATCH] Restore covered blocked cyan status ring

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/StatusIcon.test.tsx            | 13 +++++++------
 ui/src/components/StatusIcon.tsx                 |  8 ++++++--
 ui/storybook/stories/status-language.stories.tsx |  8 ++++----
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/ui/src/components/StatusIcon.test.tsx b/ui/src/components/StatusIcon.test.tsx
index 3be51ebc0d4..b2900632ef6 100644
--- a/ui/src/components/StatusIcon.test.tsx
+++ b/ui/src/components/StatusIcon.test.tsx
@@ -5,7 +5,7 @@ import { describe, expect, it } from "vitest";
 import { StatusIcon } from "./StatusIcon";
 
 describe("StatusIcon", () => {
-  it("renders covered blocked issues with a dashed red attention state label", () => {
+  it("renders covered blocked issues with the cyan covered state visual", () => {
     const html = renderToStaticMarkup(
       <StatusIcon
         status="blocked"
@@ -23,10 +23,10 @@ describe("StatusIcon", () => {
     expect(html).toContain('data-blocker-attention-state="covered"');
     expect(html).toContain('aria-label="Blocked · waiting on active sub-issue PAP-2"');
     expect(html).toContain('title="Blocked · waiting on active sub-issue PAP-2"');
-    expect(html).toContain("border-red-600");
-    expect(html).toContain("border-dashed");
-    expect(html).not.toContain("border-cyan-600");
-    expect(html).not.toContain("-bottom-0.5");
+    expect(html).toContain("border-cyan-600");
+    expect(html).not.toContain("border-red-600");
+    expect(html).not.toContain("border-dashed");
+    expect(html).toContain("-bottom-0.5");
   });
 
   it("uses covered blocked copy for the active dependency count matrix", () => {
@@ -45,7 +45,8 @@ describe("StatusIcon", () => {
     );
 
     expect(html).toContain('aria-label="Blocked · covered by 2 active dependencies"');
-    expect(html).toContain("border-dashed");
+    expect(html).toContain("border-cyan-600");
+    expect(html).not.toContain("border-dashed");
   });
 
   it("keeps normal blocked issues on the attention-required visual", () => {
diff --git a/ui/src/components/StatusIcon.tsx b/ui/src/components/StatusIcon.tsx
index 6ec189d819e..c18655956ac 100644
--- a/ui/src/components/StatusIcon.tsx
+++ b/ui/src/components/StatusIcon.tsx
@@ -51,7 +51,9 @@ function blockedAttentionLabel(blockerAttention: IssueBlockerAttention | null |
 export function StatusIcon({ status, blockerAttention, onChange, className, showLabel }: StatusIconProps) {
   const [open, setOpen] = useState(false);
   const isCoveredBlocked = status === "blocked" && blockerAttention?.state === "covered";
-  const colorClass = issueStatusIcon[status] ?? issueStatusIconDefault;
+  const colorClass = isCoveredBlocked
+    ? "text-cyan-600 border-cyan-600 dark:text-cyan-400 dark:border-cyan-400"
+    : issueStatusIcon[status] ?? issueStatusIconDefault;
   const isDone = status === "done";
   const ariaLabel = status === "blocked" ? blockedAttentionLabel(blockerAttention) : statusLabel(status);
 
@@ -60,7 +62,6 @@ export function StatusIcon({ status, blockerAttention, onChange, className, show
       className={cn(
         "relative inline-flex h-4 w-4 rounded-full border-2 shrink-0",
         colorClass,
-        isCoveredBlocked && "border-dashed",
         onChange && !showLabel && "cursor-pointer",
         className
       )}
@@ -71,6 +72,9 @@ export function StatusIcon({ status, blockerAttention, onChange, className, show
       {isDone && (
         <span className="absolute inset-0 m-auto h-2 w-2 rounded-full bg-current" />
       )}
+      {isCoveredBlocked && (
+        <span className="absolute -bottom-0.5 -right-0.5 h-2 w-2 rounded-full border border-background bg-current" />
+      )}
     </span>
   );
 
diff --git a/ui/storybook/stories/status-language.stories.tsx b/ui/storybook/stories/status-language.stories.tsx
index d9d467682d4..4b6ac2dfbd2 100644
--- a/ui/storybook/stories/status-language.stories.tsx
+++ b/ui/storybook/stories/status-language.stories.tsx
@@ -62,7 +62,7 @@ const coveredBlockedMatrix: CoveredBlockedCell[] = [
       attentionBlockerCount: 0,
       sampleBlockerIdentifier: "PAP-2175",
     },
-    expectedVisual: "dashed red ring",
+    expectedVisual: "cyan ring",
     expectedCopy: "Blocked · waiting on active sub-issue PAP-2175",
   },
   {
@@ -76,7 +76,7 @@ const coveredBlockedMatrix: CoveredBlockedCell[] = [
       attentionBlockerCount: 0,
       sampleBlockerIdentifier: null,
     },
-    expectedVisual: "dashed red ring",
+    expectedVisual: "cyan ring",
     expectedCopy: "Blocked · waiting on 3 active sub-issues",
   },
   {
@@ -90,7 +90,7 @@ const coveredBlockedMatrix: CoveredBlockedCell[] = [
       attentionBlockerCount: 0,
       sampleBlockerIdentifier: "PAP-1918",
     },
-    expectedVisual: "dashed red ring",
+    expectedVisual: "cyan ring",
     expectedCopy: "Blocked · covered by active dependency PAP-1918",
   },
   {
@@ -104,7 +104,7 @@ const coveredBlockedMatrix: CoveredBlockedCell[] = [
       attentionBlockerCount: 0,
       sampleBlockerIdentifier: null,
     },
-    expectedVisual: "dashed red ring",
+    expectedVisual: "cyan ring",
     expectedCopy: "Blocked · covered by 2 active dependencies",
   },
   {