refactor(replay-ui): share one statusFor between panels

replay-ui/src/lib/property-status.ts

@@ -0,0 +1,29 @@
+import type { ResidualNode, Step } from "../types";
+
+export type Status = "violated" | "pending" | "holds";
+
+export const STATUS_ORDER: Record<Status, number> = {
+  violated: 0,
+  pending: 1,
+  holds: 2,
+};
+
+export function statusFor(
+  name: string,
+  violations: Set<string>,
+  residuals?: Record<string, ResidualNode>,
+): Status {
+  if (violations.has(name)) {
+    return "violated";
+  }
+  const residual = residuals?.[name];
+  if (residual && residual.op === "true") {
+    return "holds";
+  }
+  return "pending";
+}
+
+export function statusForStep(name: string, step: Step | null): Status {
+  if (!step) return "pending";
+  return statusFor(name, new Set(step.violations ?? []), step.residuals);
+}

replay-ui/src/panels/ViolationsPanel.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from "react";
 import type { ResidualNode, Witness } from "../types";
+import { STATUS_ORDER, statusFor } from "../lib/property-status";
 import ResidualNodeView from "../components/ResidualNode";
 import "./ViolationsPanel.css";
 
@@ -15,29 +16,6 @@ export interface ViolationsPanelProps {
   violationsOnly?: boolean;
 }
 
-type Status = "violated" | "pending" | "holds";
-
-const STATUS_ORDER: Record<Status, number> = {
-  violated: 0,
-  pending: 1,
-  holds: 2,
-};
-
-function statusFor(
-  name: string,
-  violations: Set<string>,
-  residuals?: Record<string, ResidualNode>,
-): Status {
-  if (violations.has(name)) {
-    return "violated";
-  }
-  const residual = residuals?.[name];
-  if (residual && residual.op === "true") {
-    return "holds";
-  }
-  return "pending";
-}
-
 function formatValue(value: unknown): string {
   const encoded = JSON.stringify(value);
   return encoded === undefined ? String(value) : encoded;