import { useState, useMemo, useEffect, useRef } from "react";
import type { DirectiveWithSteps, DirectiveStatus } from "../../lib/api";
import { DirectiveDAG } from "./DirectiveDAG";
import { DirectiveLogStream } from "./DirectiveLogStream";
import { useMultiTaskSubscription } from "../../hooks/useMultiTaskSubscription";
const STATUS_BADGE: Record<DirectiveStatus, { color: string; label: string }> = {
draft: { color: "text-[#7788aa] border-[#2a3a5a]", label: "DRAFT" },
active: { color: "text-green-400 border-green-800", label: "ACTIVE" },
idle: { color: "text-yellow-400 border-yellow-800", label: "IDLE" },
paused: { color: "text-orange-400 border-orange-800", label: "PAUSED" },
archived: { color: "text-[#556677] border-[#2a3a5a]", label: "ARCHIVED" },
};
interface DirectiveDetailProps {
directive: DirectiveWithSteps;
onStart: () => void;
onPause: () => void;
onAdvance: () => void;
onCompleteStep: (stepId: string) => void;
onFailStep: (stepId: string) => void;
onSkipStep: (stepId: string) => void;
onUpdateGoal: (goal: string) => void;
onDelete: () => void;
onRefresh: () => void;
onCleanupTasks: () => void;
}
export function DirectiveDetail({
directive,
onStart,
onPause,
onAdvance,
onCompleteStep,
onFailStep,
onSkipStep,
onUpdateGoal,
onDelete,
onRefresh,
onCleanupTasks,
}: DirectiveDetailProps) {
const [editingGoal, setEditingGoal] = useState(false);
const [goalText, setGoalText] = useState(directive.goal);
const [visibleTaskIds, setVisibleTaskIds] = useState<Set<string> | null>(null);
const [searchQuery, setSearchQuery] = useState("");
const [isLogCollapsed, setIsLogCollapsed] = useState(true);
const prevHadRunningRef = useRef(false);
const badge = STATUS_BADGE[directive.status] || STATUS_BADGE.draft;
const completedSteps = directive.steps.filter((s) => s.status === "completed").length;
const totalSteps = directive.steps.length;
const progress = totalSteps > 0 ? Math.round((completedSteps / totalSteps) * 100) : 0;
const terminalStatuses = new Set(["completed", "failed", "skipped"]);
const hasTerminalTasks = directive.steps.some((s) => s.taskId && terminalStatuses.has(s.status));
// Build task map from directive steps and orchestrator
// Derive a stable key from the actual task IDs to avoid recreating the map on every poll
const taskMapKey = useMemo(() => {
const parts: string[] = [];
if (directive.orchestratorTaskId) parts.push(`o:${directive.orchestratorTaskId}`);
for (const step of directive.steps) {
if (step.taskId) parts.push(`${step.id}:${step.taskId}`);
}
return parts.join(",");
}, [directive.orchestratorTaskId, directive.steps]);
const taskMap = useMemo(() => {
const map = new Map<string, string>();
if (directive.orchestratorTaskId) {
map.set(directive.orchestratorTaskId, "Orchestrator");
}
for (const step of directive.steps) {
if (step.taskId) {
map.set(step.taskId, step.name);
}
}
return map;
}, [taskMapKey]); // eslint-disable-line react-hooks/exhaustive-deps
// Subscribe to all task outputs
const { connected, entries, clearEntries } = useMultiTaskSubscription({
taskMap,
enabled: taskMap.size > 0,
});
// Auto-expand log panel when tasks start running
const hasRunningTasks = directive.steps.some((s) => s.status === "running") ||
!!directive.orchestratorTaskId;
useEffect(() => {
if (hasRunningTasks && !prevHadRunningRef.current) {
setIsLogCollapsed(false);
}
prevHadRunningRef.current = hasRunningTasks;
}, [hasRunningTasks]);
const handleGoalSave = () => {
if (goalText.trim() && goalText !== directive.goal) {
onUpdateGoal(goalText.trim());
}
setEditingGoal(false);
};
return (
<div className="flex flex-col h-full overflow-y-auto">
{/* Header */}
<div className="px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.2)]">
<div className="flex items-center justify-between mb-2">
<h2 className="text-[14px] font-mono text-white font-medium truncate pr-2">
{directive.title}
</h2>
<div className="flex items-center gap-2 shrink-0">
<span
className={`text-[10px] font-mono ${badge.color} border rounded px-2 py-0.5`}
>
{badge.label}
</span>
<button
type="button"
onClick={onRefresh}
className="text-[10px] font-mono text-[#7788aa] hover:text-white"
title="Refresh"
>
[refresh]
</button>
</div>
</div>
{/* Progress bar */}
{totalSteps > 0 && (
<div className="flex items-center gap-2 mb-2">
<div className="flex-1 h-1.5 bg-[#1a2540] rounded overflow-hidden">
<div
className="h-full bg-emerald-600 rounded transition-all"
style={{ width: `${progress}%` }}
/>
</div>
<span className="text-[10px] font-mono text-[#7788aa] shrink-0">
{completedSteps}/{totalSteps} steps
</span>
</div>
)}
{/* Repo info */}
{(directive.repositoryUrl || directive.localPath) && (
<div className="text-[10px] font-mono text-[#556677] mb-2 truncate">
{directive.repositoryUrl || directive.localPath}
{directive.baseBranch && ` @ ${directive.baseBranch}`}
</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>
)}
{/* PR link */}
{directive.prUrl && (
<div className="flex items-center gap-2 mb-2 px-2 py-1.5 bg-[#0a1a10] border border-emerald-900 rounded">
<span className="inline-block w-2 h-2 rounded-full bg-emerald-400" />
<span className="text-[10px] font-mono text-emerald-400">
PR created
</span>
<a
href={directive.prUrl}
target="_blank"
rel="noopener noreferrer"
className="text-[10px] font-mono text-emerald-400 hover:text-emerald-300 underline ml-auto truncate max-w-[200px]"
>
{directive.prUrl}
</a>
</div>
)}
{/* Completion task indicator */}
{directive.completionTaskId && (
<div className="flex items-center gap-2 mb-2 px-2 py-1.5 bg-[#1a1a10] border border-yellow-900 rounded">
<span className="inline-block w-2 h-2 rounded-full bg-yellow-400 animate-pulse" />
<span className="text-[10px] font-mono text-yellow-400">
{directive.prUrl ? "Updating PR..." : "Creating PR..."}
</span>
<a
href={`/mesh/${directive.completionTaskId}`}
className="text-[9px] font-mono text-[#556677] hover:text-yellow-400 underline ml-auto"
>
View task
</a>
</div>
)}
{/* Controls */}
<div className="flex flex-wrap gap-2">
{(directive.status === "draft" || directive.status === "paused") && (
<button
type="button"
onClick={onStart}
className="text-[10px] font-mono text-green-400 hover:text-green-300 border border-green-800 rounded px-2 py-1"
>
Start
</button>
)}
{directive.status === "active" && (
<>
<button
type="button"
onClick={onPause}
className="text-[10px] font-mono text-orange-400 hover:text-orange-300 border border-orange-800 rounded px-2 py-1"
>
Pause
</button>
<button
type="button"
onClick={onAdvance}
className="text-[10px] font-mono text-[#75aafc] hover:text-white border border-[rgba(117,170,252,0.3)] rounded px-2 py-1"
>
Advance
</button>
</>
)}
{directive.status === "idle" && (
<div className="flex items-center gap-2">
<span className="text-[10px] font-mono text-yellow-400">
All steps done. Update goal to add new work.
</span>
<button
type="button"
onClick={() => setEditingGoal(true)}
className="text-[10px] font-mono text-[#75aafc] hover:text-white border border-[rgba(117,170,252,0.3)] rounded px-2 py-1"
>
Update Goal
</button>
</div>
)}
{hasTerminalTasks && (
<button
type="button"
onClick={onCleanupTasks}
className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-1 ml-auto"
>
Clean up tasks
</button>
)}
<button
type="button"
onClick={onDelete}
className={`text-[10px] font-mono text-red-400 hover:text-red-300 border border-red-800 rounded px-2 py-1 ${hasTerminalTasks ? "" : "ml-auto"}`}
>
Delete
</button>
</div>
</div>
{/* Goal */}
<div className="px-4 py-3 border-b border-[rgba(117,170,252,0.1)]">
<div className="flex items-center justify-between mb-1">
<span className="text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide">
Goal
</span>
{!editingGoal && (
<button
type="button"
onClick={() => { setGoalText(directive.goal); setEditingGoal(true); }}
className="text-[9px] font-mono text-[#556677] hover:text-[#75aafc]"
>
[edit]
</button>
)}
</div>
{editingGoal ? (
<div className="flex flex-col gap-1.5">
<textarea
value={goalText}
onChange={(e) => setGoalText(e.target.value)}
className="w-full bg-[#0a1628] border border-[rgba(117,170,252,0.2)] rounded px-2 py-1.5 text-[11px] font-mono text-white resize-y min-h-[60px]"
rows={3}
/>
<div className="flex gap-1.5">
<button
type="button"
onClick={handleGoalSave}
className="text-[10px] font-mono text-emerald-400 hover:text-emerald-300 border border-emerald-800 rounded px-2 py-0.5"
>
Save
</button>
<button
type="button"
onClick={() => setEditingGoal(false)}
className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-0.5"
>
Cancel
</button>
</div>
</div>
) : (
<p className="text-[11px] font-mono text-[#c0d0e0] whitespace-pre-wrap">
{directive.goal}
</p>
)}
</div>
{/* DAG */}
<div className="px-4 py-3 flex-1">
<span className="text-[10px] font-mono text-[#9bc3ff] uppercase tracking-wide block mb-2">
Steps ({totalSteps})
</span>
<DirectiveDAG
steps={directive.steps}
onComplete={onCompleteStep}
onFail={onFailStep}
onSkip={onSkipStep}
/>
</div>
{/* Log Stream */}
{taskMap.size > 0 && (
<div className="px-4 py-3 border-t border-[rgba(117,170,252,0.1)]">
<DirectiveLogStream
entries={entries}
taskMap={taskMap}
connected={connected}
visibleTaskIds={visibleTaskIds}
searchQuery={searchQuery}
isCollapsed={isLogCollapsed}
onToggleCollapse={() => setIsLogCollapsed((prev) => !prev)}
onSetVisibleTaskIds={setVisibleTaskIds}
onSetSearchQuery={setSearchQuery}
onClear={clearEntries}
/>
</div>
)}
</div>
);
}
