1 files changed, 22 insertions, 3 deletions
diff --git a/makima/frontend/src/components/directives/StepNode.tsx b/makima/frontend/src/components/directives/StepNode.tsx
index 2844b4a..775b898 100644
--- a/makima/frontend/src/components/directives/StepNode.tsx
+++ b/makima/frontend/src/components/directives/StepNode.tsx
@@ -28,10 +28,11 @@ interface StepNodeProps {
 export function StepNode({ step, onComplete, onFail, onSkip }: StepNodeProps) {
   const colors = STATUS_COLORS[step.status] || STATUS_COLORS.pending;
   const label = STATUS_LABELS[step.status] || step.status.toUpperCase();
+  const isContractBacked = !!step.contractType;
 
   return (
     <div
-      className={`${colors.bg} ${colors.border} border rounded px-3 py-2 min-w-[160px] max-w-[220px]`}
+      className={`${colors.bg} ${isContractBacked ? "border-2 border-dashed" : "border"} ${colors.border} rounded px-3 py-2 min-w-[160px] max-w-[220px]`}
     >
       <div className="flex items-center justify-between gap-2 mb-1">
         <span className="text-[11px] font-mono text-white truncate font-medium">
@@ -41,14 +42,32 @@ export function StepNode({ step, onComplete, onFail, onSkip }: StepNodeProps) {
           {label}
         </span>
       </div>
+      {isContractBacked && (
+        <div className="flex items-center gap-1 mb-1">
+          <span className="text-[8px] font-mono text-violet-400 bg-violet-400/10 border border-violet-400/20 rounded px-1 py-0.5 uppercase tracking-wide">
+            CONTRACT
+          </span>
+          <span className="text-[8px] font-mono text-violet-300/60">
+            {step.contractType}
+          </span>
+        </div>
+      )}
       {step.description && (
         <p className="text-[10px] text-[#7788aa] font-mono truncate mb-1">
           {step.description}
         </p>
       )}
-      {step.taskId && (
+      {step.contractId && (
+        <a
+          href={`/contracts/${step.contractId}`}
+          className="text-[9px] font-mono text-violet-400/60 hover:text-violet-300 underline block mb-1"
+        >
+          {step.status === "running" ? "Contract running..." : "View contract"}
+        </a>
+      )}
+      {step.taskId && !step.contractId && (
         <a
-          href={`/mesh/${step.taskId}`}
+          href={`/exec/${step.taskId}`}
           className="text-[9px] font-mono text-[#556677] hover:text-[#75aafc] underline block mb-1"
         >
           {step.status === "running" ? "Auto-executing..." : "View task"}