Fix directive evaluation and add to frontend

2 files changed, 72 insertions, 3 deletions

diff --git a/makima/frontend/src/components/directives/DirectiveContractsTab.tsx b/makima/frontend/src/components/directives/DirectiveContractsTab.tsx
index 59ebfc8..28da117 100644
--- a/makima/frontend/src/components/directives/DirectiveContractsTab.tsx
+++ b/makima/frontend/src/components/directives/DirectiveContractsTab.tsx
@@ -100,6 +100,23 @@ export function DirectiveContractsTab({
           label: step.name,
         });
       }
+      // Show monitoring/evaluation contracts
+      if (step.monitoringContractId) {
+        contracts.push({
+          summary: {
+            id: step.monitoringContractId,
+            name: `${step.name} - Evaluation`,
+            contractType: "monitoring",
+            status: step.status === "evaluating" ? "active" : "completed",
+            phase: "plan",
+            taskCount: 1,
+            tasksDone: step.status === "evaluating" ? 0 : 1,
+            tasksRunning: step.status === "evaluating" ? 1 : 0,
+            tasksFailed: 0,
+          },
+          label: `${step.name} eval`,
+        });
+      }
     }
   }
 
diff --git a/makima/frontend/src/components/directives/StepDiagram.tsx b/makima/frontend/src/components/directives/StepDiagram.tsx
index 91a3438..33892e0 100644
--- a/makima/frontend/src/components/directives/StepDiagram.tsx
+++ b/makima/frontend/src/components/directives/StepDiagram.tsx
@@ -41,10 +41,20 @@ const statusColors: Record<string, { border: string; dot: string; bg: string; gl
 
 const statusLabels: Record<string, string> = {
   pending: "Pending",
+  ready: "Ready",
   running: "Running",
   evaluating: "Evaluating",
   passed: "Passed",
   failed: "Failed",
+  rework: "Rework",
+  skipped: "Skipped",
+  blocked: "Blocked",
+};
+
+const confidenceColors: Record<string, string> = {
+  green: "text-green-400",
+  yellow: "text-yellow-400",
+  red: "text-red-400",
 };
 
 /**
@@ -122,6 +132,44 @@ function StepCard({ step }: { step: ChainStep }) {
         </p>
       )}
 
+      {/* Evaluation info */}
+      {(step.confidenceScore != null || step.evaluationCount > 0 || step.reworkCount > 0) && (
+        <div className="border-t border-[rgba(117,170,252,0.1)] pt-2 mt-1">
+          <div className="flex items-center gap-2 font-mono text-[9px]">
+            {step.confidenceScore != null && (
+              <span className={confidenceColors[step.confidenceLevel || ""] || "text-[#7788aa]"}>
+                {Math.round(step.confidenceScore * 100)}% confidence
+              </span>
+            )}
+            {step.evaluationCount > 0 && (
+              <span className="text-[#7788aa]">
+                eval #{step.evaluationCount}
+              </span>
+            )}
+            {step.reworkCount > 0 && (
+              <span className="text-orange-400">
+                rework x{step.reworkCount}
+              </span>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Monitoring link (when evaluating) */}
+      {step.status === "evaluating" && step.monitoringContractId && (
+        <div className="border-t border-[rgba(117,170,252,0.1)] pt-1.5 mt-1">
+          <span
+            className="font-mono text-[9px] text-blue-400 cursor-pointer hover:text-blue-300"
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(`/contracts/${step.monitoringContractId}`);
+            }}
+          >
+            evaluation contract &rarr;
+          </span>
+        </div>
+      )}
+
       {/* Contract progress */}
       {summary && (
         <div className="border-t border-[rgba(117,170,252,0.1)] pt-2 mt-1">
@@ -149,7 +197,7 @@ function StepCard({ step }: { step: ChainStep }) {
       )}
 
       {/* Contract link arrow */}
-      {hasContract && !summary && (
+      {hasContract && !summary && step.status !== "evaluating" && (
         <div className="border-t border-[rgba(117,170,252,0.1)] pt-1.5 mt-1">
           <span className="font-mono text-[9px] text-[#75aafc]">
             view contract &rarr;
@@ -200,7 +248,8 @@ export function StepDiagram({ steps }: StepDiagramProps) {
   // Compute overall progress
   const passedCount = steps.filter(s => s.status === "passed").length;
   const failedCount = steps.filter(s => s.status === "failed").length;
-  const runningCount = steps.filter(s => s.status === "running" || s.status === "evaluating").length;
+  const runningCount = steps.filter(s => s.status === "running").length;
+  const evaluatingCount = steps.filter(s => s.status === "evaluating").length;
 
   return (
     <div>
@@ -213,7 +262,10 @@ export function StepDiagram({ steps }: StepDiagramProps) {
           <span className="text-green-400">{passedCount} passed</span>
         )}
         {runningCount > 0 && (
-          <span className="text-yellow-400">{runningCount} active</span>
+          <span className="text-yellow-400">{runningCount} running</span>
+        )}
+        {evaluatingCount > 0 && (
+          <span className="text-blue-400">{evaluatingCount} evaluating</span>
         )}
         {failedCount > 0 && (
           <span className="text-red-400">{failedCount} failed</span>