From a2646a828febbdac798a206655a15eae7e463bca Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Mon, 9 Feb 2026 02:35:36 +0000
Subject: Add directive init

---
 .../src/components/directives/DirectiveDetail.tsx        | 16 ++++++++++++++++
 makima/frontend/src/components/directives/StepNode.tsx   |  8 ++++++++
 2 files changed, 24 insertions(+)

(limited to 'makima/frontend/src/components/directives')

diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx
index abd2c55..1340482 100644
--- a/makima/frontend/src/components/directives/DirectiveDetail.tsx
+++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx
@@ -98,6 +98,22 @@ export function DirectiveDetail({
           </div>
         )}
 
+        {/* Orchestrator planning indicator */}
+        {directive.orchestratorTaskId && (
+          <div className="flex items-center gap-2 mb-2 px-2 py-1.5 bg-[#1a1a30] border border-[rgba(117,170,252,0.2)] rounded">
+            <span className="inline-block w-2 h-2 rounded-full bg-[#75aafc] animate-pulse" />
+            <span className="text-[10px] font-mono text-[#75aafc]">
+              Planning in progress...
+            </span>
+            <a
+              href={`/mesh/${directive.orchestratorTaskId}`}
+              className="text-[9px] font-mono text-[#556677] hover:text-[#75aafc] underline ml-auto"
+            >
+              View task
+            </a>
+          </div>
+        )}
+
         {/* Controls */}
         <div className="flex flex-wrap gap-2">
           {(directive.status === "draft" || directive.status === "paused") && (
diff --git a/makima/frontend/src/components/directives/StepNode.tsx b/makima/frontend/src/components/directives/StepNode.tsx
index fa91956..2844b4a 100644
--- a/makima/frontend/src/components/directives/StepNode.tsx
+++ b/makima/frontend/src/components/directives/StepNode.tsx
@@ -46,6 +46,14 @@ export function StepNode({ step, onComplete, onFail, onSkip }: StepNodeProps) {
           {step.description}
         </p>
       )}
+      {step.taskId && (
+        <a
+          href={`/mesh/${step.taskId}`}
+          className="text-[9px] font-mono text-[#556677] hover:text-[#75aafc] underline block mb-1"
+        >
+          {step.status === "running" ? "Auto-executing..." : "View task"}
+        </a>
+      )}
       {(step.status === "running" || step.status === "ready") && (
         <div className="flex gap-1 mt-1">
           {onComplete && (
-- 
cgit v1.2.3