From 1b692b8cde4a888c8a35af69231f181b57bf5619 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Fri, 6 Feb 2026 20:06:30 +0000
Subject: Fix: Cleanup old chain code

---
 .../src/components/directives/StepNode.tsx         | 87 ++++++++++++++++++++++
 1 file changed, 87 insertions(+)
 create mode 100644 makima/frontend/src/components/directives/StepNode.tsx

(limited to 'makima/frontend/src/components/directives/StepNode.tsx')

diff --git a/makima/frontend/src/components/directives/StepNode.tsx b/makima/frontend/src/components/directives/StepNode.tsx
new file mode 100644
index 0000000..e54f5eb
--- /dev/null
+++ b/makima/frontend/src/components/directives/StepNode.tsx
@@ -0,0 +1,87 @@
+import { Handle, Position } from "@xyflow/react";
+import type { StepStatus, ConfidenceLevel, DirectiveGraphNode } from "../../lib/api";
+
+// Step status colors for both list and DAG views
+export const stepStatusStyles: Record<StepStatus, { border: string; bg: string; text: string }> = {
+  pending: { border: "#556677", bg: "#556677", text: "#556677" },
+  ready: { border: "#3b82f6", bg: "#3b82f6", text: "#3b82f6" },
+  running: { border: "#22c55e", bg: "#22c55e", text: "#22c55e" },
+  evaluating: { border: "#eab308", bg: "#eab308", text: "#eab308" },
+  passed: { border: "#75aafc", bg: "#75aafc", text: "#75aafc" },
+  failed: { border: "#ef4444", bg: "#ef4444", text: "#ef4444" },
+  rework: { border: "#f97316", bg: "#f97316", text: "#f97316" },
+  skipped: { border: "#556677", bg: "#556677", text: "#556677" },
+  blocked: { border: "#ef4444", bg: "#ef4444", text: "#ef4444" },
+};
+
+// Confidence level colors
+export const confidenceColors: Record<ConfidenceLevel, string> = {
+  green: "#22c55e",
+  yellow: "#eab308",
+  red: "#ef4444",
+};
+
+// Node dimensions
+export const NODE_WIDTH = 180;
+export const NODE_HEIGHT = 70;
+
+// Custom node component for steps
+export function StepNodeComponent({ data }: { data: DirectiveGraphNode & { selected?: boolean } }) {
+  const styles = stepStatusStyles[data.status] || stepStatusStyles.pending;
+  const isRunning = data.status === "running" || data.status === "evaluating";
+
+  return (
+    <div
+      className={`rounded-lg border-2 bg-[#0a1628] overflow-hidden ${
+        isRunning ? "animate-pulse" : ""
+      }`}
+      style={{
+        width: NODE_WIDTH,
+        height: NODE_HEIGHT,
+        borderColor: styles.border,
+        borderStyle: data.status === "pending" ? "dashed" : "solid",
+      }}
+    >
+      <Handle
+        type="target"
+        position={Position.Top}
+        className="!bg-[#75aafc] !w-3 !h-3 !border-2 !border-[#0a1628]"
+      />
+
+      {/* Status indicator bar */}
+      <div className="h-1.5" style={{ backgroundColor: styles.bg }} />
+
+      {/* Content */}
+      <div className="p-2">
+        <div className="flex items-center justify-between mb-1">
+          <span className="font-mono text-xs text-[#dbe7ff] truncate flex-1">{data.name}</span>
+          {data.confidenceScore !== null && data.confidenceLevel && (
+            <div
+              className="w-2 h-2 rounded-full flex-shrink-0 ml-1"
+              style={{ backgroundColor: confidenceColors[data.confidenceLevel] }}
+              title={`Confidence: ${Math.round(data.confidenceScore * 100)}%`}
+            />
+          )}
+        </div>
+        <div className="flex items-center justify-between">
+          <span
+            className="font-mono text-[10px] uppercase px-1.5 py-0.5 rounded"
+            style={{
+              color: styles.text,
+              backgroundColor: `${styles.bg}20`,
+            }}
+          >
+            {data.status}
+          </span>
+          <span className="font-mono text-[10px] text-[#8b949e]">{data.stepType}</span>
+        </div>
+      </div>
+
+      <Handle
+        type="source"
+        position={Position.Bottom}
+        className="!bg-[#f59e0b] !w-3 !h-3 !border-2 !border-[#0a1628]"
+      />
+    </div>
+  );
+}
-- 
cgit v1.2.3