summaryrefslogtreecommitdiff
path: root/makima/frontend/src/components/directives/StepNode.tsx
diff options
context:
space:
mode:
authorsoryu <soryu@soryu.co>2026-02-07 00:01:50 +0000
committersoryu <soryu@soryu.co>2026-02-07 00:01:50 +0000
commitb8d563d45f14a2b1db1f684aa0a8dcd7e5b6ad56 (patch)
tree95543fd150270018e384fbcf9d3df3dc45f052f6 /makima/frontend/src/components/directives/StepNode.tsx
parentcececbf326e258211ceae7afce716a5d1e46014f (diff)
downloadsoryu-b8d563d45f14a2b1db1f684aa0a8dcd7e5b6ad56.tar.gz
soryu-b8d563d45f14a2b1db1f684aa0a8dcd7e5b6ad56.zip
Remove directives for reimplementation
Diffstat (limited to 'makima/frontend/src/components/directives/StepNode.tsx')
-rw-r--r--makima/frontend/src/components/directives/StepNode.tsx87
1 files changed, 0 insertions, 87 deletions
diff --git a/makima/frontend/src/components/directives/StepNode.tsx b/makima/frontend/src/components/directives/StepNode.tsx
deleted file mode 100644
index e54f5eb..0000000
--- a/makima/frontend/src/components/directives/StepNode.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-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>
- );
-}