From 41ee56841a2901c8aa24feab51159792c3d88cf4 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Fri, 24 Apr 2026 11:38:10 -0500
Subject: [PATCH] Polish checklist sub-issue workflow readability.

Strengthen the current-step marker, keep compact step ordinals visible on mobile, remove duplicate progress count badges, and append blocker step numbers so dependencies map directly to checklist order.

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/IssueRow.tsx        |  4 ++--
 ui/src/components/IssuesList.test.tsx |  3 ++-
 ui/src/components/IssuesList.tsx      | 19 ++++++-------------
 3 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/ui/src/components/IssueRow.tsx b/ui/src/components/IssueRow.tsx
index 17734343bc7..f5da510b646 100644
--- a/ui/src/components/IssueRow.tsx
+++ b/ui/src/components/IssueRow.tsx
@@ -78,13 +78,13 @@ export function IssueRow({
       className={cn(
         "group flex items-start gap-2 border-b border-border py-2.5 pl-2 pr-3 text-sm no-underline text-inherit transition-colors last:border-b-0 sm:items-center sm:py-2 sm:pl-1",
         selected ? "hover:bg-transparent" : "hover:bg-accent/50",
-        checklistCurrentStep ? "border-l-2 border-l-primary/40 pl-[calc(theme(spacing.2)-2px)] sm:pl-[calc(theme(spacing.1)-2px)]" : null,
+        checklistCurrentStep ? "border-l-2 border-l-primary bg-primary/5 pl-[calc(theme(spacing.2)-2px)] sm:pl-[calc(theme(spacing.1)-2px)]" : null,
         className,
       )}
     >
       {hasChecklistStep ? (
         <span
-          className="hidden w-8 shrink-0 self-center text-right font-mono text-xs text-muted-foreground sm:inline-block"
+          className="inline-block w-4 shrink-0 self-center text-right font-mono text-[10px] text-muted-foreground sm:w-8 sm:text-xs"
           aria-hidden="true"
         >
           {checklistStepNumber}.
diff --git a/ui/src/components/IssuesList.test.tsx b/ui/src/components/IssuesList.test.tsx
index b6f6a174a1a..bd239cb3435 100644
--- a/ui/src/components/IssuesList.test.tsx
+++ b/ui/src/components/IssuesList.test.tsx
@@ -435,6 +435,7 @@ describe("IssuesList", () => {
       expect(container.textContent).toContain("1/3 done");
       expect(container.textContent).toContain("0 in progress");
       expect(container.textContent).toContain("1 blocked");
+      expect(container.textContent).not.toContain("Done 1");
       expect(container.textContent).toContain("Next up");
       const link = container.querySelector('a[href="/issues/PAP-2"]');
       expect(link?.textContent).toContain("Implement next slice");
@@ -488,7 +489,7 @@ describe("IssuesList", () => {
       expect(rows.filter((row) => row.getAttribute("data-current-step") === "true")).toHaveLength(1);
       expect(rows.find((row) => row.textContent?.includes("Active blocker"))?.getAttribute("data-current-step")).toBe("true");
       expect(rows.find((row) => row.textContent?.includes("Done first"))?.getAttribute("data-title-class")).toContain("text-muted-foreground");
-      expect(container.textContent).toContain("blocked by PAP-3");
+      expect(container.textContent).toContain("blocked by PAP-3 · step 1");
     });
 
     act(() => {
diff --git a/ui/src/components/IssuesList.tsx b/ui/src/components/IssuesList.tsx
index 6cb6baf56e1..b3b20749f48 100644
--- a/ui/src/components/IssuesList.tsx
+++ b/ui/src/components/IssuesList.tsx
@@ -393,16 +393,6 @@ function SubIssueProgressSummaryStrip({
               />
             ))}
           </div>
-          <div className="flex flex-wrap gap-1.5">
-            {statusEntries.map(({ status, count }) => (
-              <span
-                key={status}
-                className={cn("inline-flex items-center rounded-full px-2 py-0.5 text-[11px] font-medium", statusBadge[status])}
-              >
-                {issueStatusLabels[status]} {count}
-              </span>
-            ))}
-          </div>
         </div>
 
         <div className="min-w-0 rounded-md border border-border bg-background px-3 py-2 text-sm lg:w-72">
@@ -1290,6 +1280,9 @@ export function IssuesList({
                         const blockerIssue = issueById.get(blockerId);
                         if (!blockerIssue) return null;
                         const label = blockerIssue.identifier ?? blockerIssue.id.slice(0, 8);
+                        const blockerStep = checklistMeta.stepNumberByIssueId.get(blockerId);
+                        const blockerStepSuffix = blockerStep ? ` \u00b7 step ${blockerStep}` : "";
+                        const chipLabel = `blocked by ${label}${blockerStepSuffix}`;
                         return (
                           <button
                             key={blockerId}
@@ -1303,10 +1296,10 @@ export function IssuesList({
                               target.focus?.();
                             }}
                             className="inline-flex items-center rounded-full border border-amber-400/45 bg-amber-50/60 px-1.5 py-0.5 text-[10px] font-medium text-amber-700 hover:bg-amber-100/80 dark:border-amber-300/35 dark:bg-amber-400/10 dark:text-amber-300"
-                            title={`Blocked by ${label}`}
-                            aria-label={`Blocked by ${label}`}
+                            title={chipLabel}
+                            aria-label={chipLabel}
                           >
-                            blocked by {label}
+                            {chipLabel}
                           </button>
                         );
                       })}