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

ui/src/components/StatusIcon.test.tsx

@@ -0,0 +1,72 @@
+// @vitest-environment node
+
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { StatusIcon } from "./StatusIcon";
+
+describe("StatusIcon", () => {
+  it("renders covered blocked issues with the cyan covered state visual", () => {
+    const html = renderToStaticMarkup(
+      <StatusIcon
+        status="blocked"
+        blockerAttention={{
+          state: "covered",
+          reason: "active_child",
+          unresolvedBlockerCount: 1,
+          coveredBlockerCount: 1,
+          attentionBlockerCount: 0,
+          sampleBlockerIdentifier: "PAP-2",
+        }}
+      />,
+    );
+
+    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-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", () => {
+    const html = renderToStaticMarkup(
+      <StatusIcon
+        status="blocked"
+        blockerAttention={{
+          state: "covered",
+          reason: "active_dependency",
+          unresolvedBlockerCount: 2,
+          coveredBlockerCount: 2,
+          attentionBlockerCount: 0,
+          sampleBlockerIdentifier: null,
+        }}
+      />,
+    );
+
+    expect(html).toContain('aria-label="Blocked · covered by 2 active dependencies"');
+    expect(html).toContain("border-cyan-600");
+    expect(html).not.toContain("border-dashed");
+  });
+
+  it("keeps normal blocked issues on the attention-required visual", () => {
+    const html = renderToStaticMarkup(
+      <StatusIcon
+        status="blocked"
+        blockerAttention={{
+          state: "needs_attention",
+          reason: "attention_required",
+          unresolvedBlockerCount: 1,
+          coveredBlockerCount: 0,
+          attentionBlockerCount: 1,
+          sampleBlockerIdentifier: "PAP-2",
+        }}
+      />,
+    );
+
+    expect(html).not.toContain('data-blocker-attention-state="covered"');
+    expect(html).toContain('aria-label="Blocked · 1 unresolved blocker needs attention"');
+    expect(html).toContain("border-red-600");
+    expect(html).not.toContain("border-dashed");
+  });
+});