[codex] Add runtime lifecycle recovery and live issue visibility (#4419)

ui/src/components/StatusIcon.tsx

@@ -1,4 +1,5 @@
 import { useState } from "react";
+import type { IssueBlockerAttention } from "@paperclipai/shared";
 import { cn } from "../lib/utils";
 import { issueStatusIcon, issueStatusIconDefault } from "../lib/status-colors";
 import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
@@ -12,15 +13,49 @@ function statusLabel(status: string): string {
 
 interface StatusIconProps {
   status: string;
+  blockerAttention?: IssueBlockerAttention | null;
   onChange?: (status: string) => void;
   className?: string;
   showLabel?: boolean;
 }
 
-export function StatusIcon({ status, onChange, className, showLabel }: StatusIconProps) {
+function blockedAttentionLabel(blockerAttention: IssueBlockerAttention | null | undefined) {
+  if (!blockerAttention || blockerAttention.state === "none") return "Blocked";
+
+  if (blockerAttention.reason === "active_child") {
+    const count = blockerAttention.coveredBlockerCount;
+    if (count === 1 && blockerAttention.sampleBlockerIdentifier) {
+      return `Blocked · waiting on active sub-issue ${blockerAttention.sampleBlockerIdentifier}`;
+    }
+    if (count === 1) return "Blocked · waiting on 1 active sub-issue";
+    return `Blocked · waiting on ${count} active sub-issues`;
+  }
+
+  if (blockerAttention.reason === "active_dependency") {
+    const count = blockerAttention.coveredBlockerCount;
+    if (count === 1 && blockerAttention.sampleBlockerIdentifier) {
+      return `Blocked · covered by active dependency ${blockerAttention.sampleBlockerIdentifier}`;
+    }
+    if (count === 1) return "Blocked · covered by 1 active dependency";
+    return `Blocked · covered by ${count} active dependencies`;
+  }
+
+  if (blockerAttention.reason === "attention_required") {
+    const count = blockerAttention.unresolvedBlockerCount;
+    return `Blocked · ${count} unresolved ${count === 1 ? "blocker needs" : "blockers need"} attention`;
+  }
+
+  return "Blocked";
+}
+
+export function StatusIcon({ status, blockerAttention, onChange, className, showLabel }: StatusIconProps) {
   const [open, setOpen] = useState(false);
-  const colorClass = issueStatusIcon[status] ?? issueStatusIconDefault;
+  const isCoveredBlocked = status === "blocked" && blockerAttention?.state === "covered";
+  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);
 
   const circle = (
     <span
@@ -30,10 +65,16 @@ export function StatusIcon({ status, onChange, className, showLabel }: StatusIco
         onChange && !showLabel && "cursor-pointer",
         className
       )}
+      data-blocker-attention-state={isCoveredBlocked ? "covered" : undefined}
+      aria-label={ariaLabel}
+      title={ariaLabel}
     >
       {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>
   );