diff options
Diffstat (limited to 'makima/frontend/src/components/directives')
4 files changed, 244 insertions, 27 deletions
diff --git a/makima/frontend/src/components/directives/DirectiveDAG.tsx b/makima/frontend/src/components/directives/DirectiveDAG.tsx index f225356..7fa2ccf 100644 --- a/makima/frontend/src/components/directives/DirectiveDAG.tsx +++ b/makima/frontend/src/components/directives/DirectiveDAG.tsx @@ -28,6 +28,7 @@ interface DirectiveDAGProps { onComplete?: (stepId: string) => void; onFail?: (stepId: string) => void; onSkip?: (stepId: string) => void; + onViewTask?: (taskId: string) => void; } interface Layer { @@ -52,7 +53,7 @@ function topoSort(steps: DirectiveStep[]): Layer[] { })); } -export function DirectiveDAG({ steps, specializedSteps, onComplete, onFail, onSkip }: DirectiveDAGProps) { +export function DirectiveDAG({ steps, specializedSteps, onComplete, onFail, onSkip, onViewTask }: DirectiveDAGProps) { const layers = useMemo(() => topoSort(steps), [steps]); const orchestratorSteps = specializedSteps?.filter(s => s.type === "orchestrator") ?? []; @@ -70,7 +71,7 @@ export function DirectiveDAG({ steps, specializedSteps, onComplete, onFail, onSk <div className="flex flex-col gap-4 items-center py-4"> {/* Orchestrator steps (Planning/Cleanup/Orders) - rendered above regular steps */} {orchestratorSteps.map(step => ( - <SpecializedStepNode key={step.id} step={step} /> + <SpecializedStepNode key={step.id} step={step} onViewTask={onViewTask} /> ))} {/* Connector line if both orchestrator step and regular steps exist */} @@ -96,6 +97,7 @@ export function DirectiveDAG({ steps, specializedSteps, onComplete, onFail, onSk onComplete={onComplete ? () => onComplete(step.id) : undefined} onFail={onFail ? () => onFail(step.id) : undefined} onSkip={onSkip ? () => onSkip(step.id) : undefined} + onViewTask={onViewTask} /> ))} </div> @@ -111,13 +113,13 @@ export function DirectiveDAG({ steps, specializedSteps, onComplete, onFail, onSk {/* Completion steps (PR creation) - rendered below regular steps */} {completionSteps.map(step => ( - <SpecializedStepNode key={step.id} step={step} /> + <SpecializedStepNode key={step.id} step={step} onViewTask={onViewTask} /> ))} </div> ); } -function SpecializedStepNode({ step }: { step: SpecializedStep }) { +function SpecializedStepNode({ step, onViewTask }: { step: SpecializedStep; onViewTask?: (taskId: string) => void }) { const themeColors = step.type === "orchestrator" ? { bg: "bg-[#1a1a30]", @@ -145,12 +147,13 @@ function SpecializedStepNode({ step }: { step: SpecializedStep }) { <span className={`text-[11px] font-mono ${themeColors.text} flex-1 truncate`}> {step.name} </span> - <a - href={`/exec/${step.taskId}`} - className="text-[9px] font-mono text-[#556677] hover:text-white underline" + <button + type="button" + onClick={() => onViewTask?.(step.taskId)} + className="text-[9px] font-mono text-[#556677] hover:text-white underline bg-transparent border-none p-0 cursor-pointer" > View task - </a> + </button> </div> ); } diff --git a/makima/frontend/src/components/directives/DirectiveDetail.tsx b/makima/frontend/src/components/directives/DirectiveDetail.tsx index 8f39207..5f3489a 100644 --- a/makima/frontend/src/components/directives/DirectiveDetail.tsx +++ b/makima/frontend/src/components/directives/DirectiveDetail.tsx @@ -3,6 +3,7 @@ import type { DirectiveWithSteps, DirectiveStatus, UpdateDirectiveRequest } from import { DirectiveDAG } from "./DirectiveDAG"; import type { SpecializedStep } from "./DirectiveDAG"; import { DirectiveLogStream } from "./DirectiveLogStream"; +import { TaskSlideOutPanel } from "./TaskSlideOutPanel"; import { useMultiTaskSubscription } from "../../hooks/useMultiTaskSubscription"; import { useSupervisorQuestions } from "../../contexts/SupervisorQuestionsContext"; @@ -53,6 +54,11 @@ export function DirectiveDetail({ const [pickingUpOrders, setPickingUpOrders] = useState(false); const [pickUpResult, setPickUpResult] = useState<string | null>(null); const [creatingPR, setCreatingPR] = useState(false); + const [slideOutTaskId, setSlideOutTaskId] = useState<string | null>(null); + + const handleViewTask = (taskId: string) => { + setSlideOutTaskId(taskId); + }; // Sync goalText and reset editing state when directive changes useEffect(() => { @@ -178,7 +184,15 @@ export function DirectiveDetail({ }; + // Find the task name for the slide-out panel + const slideOutTaskName = slideOutTaskId + ? (directive.steps.find((s) => s.taskId === slideOutTaskId)?.name ?? + taskMap.get(slideOutTaskId) ?? + undefined) + : undefined; + 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)]"> @@ -228,21 +242,31 @@ export function DirectiveDetail({ {/* Reconcile mode toggle */} <div className="flex items-center gap-2 mb-2"> - <button - type="button" - onClick={() => onUpdate({ reconcileMode: !directive.reconcileMode })} - className={`text-[10px] font-mono border rounded px-2 py-0.5 transition-colors ${ - directive.reconcileMode - ? "text-amber-400 border-amber-800 bg-amber-900/20" - : "text-[#556677] border-[#2a3a5a] hover:text-[#7788aa]" - }`} - > - {directive.reconcileMode ? "Reconcile: ON" : "Reconcile: OFF"} - </button> + <div className="flex items-center border border-[#2a3a5a] rounded overflow-hidden"> + {(["auto", "semi-auto", "manual"] as const).map((mode) => { + const isActive = directive.reconcileMode === mode; + const modeStyles: Record<string, string> = { + auto: isActive ? "text-[#9bc3ff] bg-[#1a2540]" : "text-[#445566] hover:text-[#7788aa]", + "semi-auto": isActive ? "text-amber-400 bg-amber-900/20" : "text-[#445566] hover:text-[#7788aa]", + manual: isActive ? "text-orange-400 bg-orange-900/20" : "text-[#445566] hover:text-[#7788aa]", + }; + const labels: Record<string, string> = { auto: "Auto", "semi-auto": "Semi", manual: "Manual" }; + return ( + <button + key={mode} + type="button" + onClick={() => onUpdate({ reconcileMode: mode })} + className={`text-[10px] font-mono px-2 py-0.5 transition-colors border-r border-[#2a3a5a] last:border-r-0 ${modeStyles[mode]}`} + > + {labels[mode]} + </button> + ); + })} + </div> <span className="text-[9px] font-mono text-[#445566]"> - {directive.reconcileMode - ? "Questions pause execution" - : "Questions timeout after 30s"} + {directive.reconcileMode === "auto" && "Questions timeout after 30s"} + {directive.reconcileMode === "semi-auto" && "Questions pause execution"} + {directive.reconcileMode === "manual" && "Tasks ask clarifying questions"} </span> </div> @@ -424,6 +448,7 @@ export function DirectiveDetail({ onComplete={onCompleteStep} onFail={onFailStep} onSkip={onSkipStep} + onViewTask={handleViewTask} /> </div> @@ -445,6 +470,14 @@ export function DirectiveDetail({ </div> )} </div> + + <TaskSlideOutPanel + taskId={slideOutTaskId || ""} + taskName={slideOutTaskName} + isOpen={!!slideOutTaskId} + onClose={() => setSlideOutTaskId(null)} + /> + </> ); } diff --git a/makima/frontend/src/components/directives/StepNode.tsx b/makima/frontend/src/components/directives/StepNode.tsx index 775b898..f854297 100644 --- a/makima/frontend/src/components/directives/StepNode.tsx +++ b/makima/frontend/src/components/directives/StepNode.tsx @@ -23,9 +23,10 @@ interface StepNodeProps { onComplete?: () => void; onFail?: () => void; onSkip?: () => void; + onViewTask?: (taskId: string) => void; } -export function StepNode({ step, onComplete, onFail, onSkip }: StepNodeProps) { +export function StepNode({ step, onComplete, onFail, onSkip, onViewTask }: StepNodeProps) { const colors = STATUS_COLORS[step.status] || STATUS_COLORS.pending; const label = STATUS_LABELS[step.status] || step.status.toUpperCase(); const isContractBacked = !!step.contractType; @@ -66,12 +67,13 @@ export function StepNode({ step, onComplete, onFail, onSkip }: StepNodeProps) { </a> )} {step.taskId && !step.contractId && ( - <a - href={`/exec/${step.taskId}`} - className="text-[9px] font-mono text-[#556677] hover:text-[#75aafc] underline block mb-1" + <button + type="button" + onClick={() => onViewTask?.(step.taskId!)} + className="text-[9px] font-mono text-[#556677] hover:text-[#75aafc] underline block mb-1 bg-transparent border-none p-0 cursor-pointer text-left" > {step.status === "running" ? "Auto-executing..." : "View task"} - </a> + </button> )} {(step.status === "running" || step.status === "ready") && ( <div className="flex gap-1 mt-1"> diff --git a/makima/frontend/src/components/directives/TaskSlideOutPanel.tsx b/makima/frontend/src/components/directives/TaskSlideOutPanel.tsx new file mode 100644 index 0000000..29fce23 --- /dev/null +++ b/makima/frontend/src/components/directives/TaskSlideOutPanel.tsx @@ -0,0 +1,179 @@ +import { useState, useEffect, useCallback } from "react"; +import { useTaskSubscription } from "../../hooks/useTaskSubscription"; +import type { TaskOutputEvent } from "../../hooks/useTaskSubscription"; +import { TaskOutput } from "../mesh/TaskOutput"; +import { WorktreeFilesPanel } from "../mesh/WorktreeFilesPanel"; +import { getTaskOutput } from "../../lib/api"; + +interface TaskSlideOutPanelProps { + taskId: string; + taskName?: string; + isOpen: boolean; + onClose: () => void; +} + +export function TaskSlideOutPanel({ + taskId, + taskName, + isOpen, + onClose, +}: TaskSlideOutPanelProps) { + const [entries, setEntries] = useState<TaskOutputEvent[]>([]); + const [isStreaming, setIsStreaming] = useState(false); + const [loadingHistory, setLoadingHistory] = useState(false); + + // Escape key handler + useEffect(() => { + const handleEsc = (e: KeyboardEvent) => { + if (e.key === "Escape") onClose(); + }; + if (isOpen) document.addEventListener("keydown", handleEsc); + return () => document.removeEventListener("keydown", handleEsc); + }, [isOpen, onClose]); + + // Load historical output when panel opens with a taskId + useEffect(() => { + if (!isOpen || !taskId) { + setEntries([]); + setIsStreaming(false); + return; + } + + let cancelled = false; + setLoadingHistory(true); + + getTaskOutput(taskId) + .then((res) => { + if (cancelled) return; + // Map TaskOutputEntry to TaskOutputEvent + const mapped: TaskOutputEvent[] = res.entries.map((e) => ({ + taskId: e.taskId, + messageType: e.messageType, + content: e.content, + toolName: e.toolName, + toolInput: e.toolInput, + isError: e.isError, + costUsd: e.costUsd, + durationMs: e.durationMs, + isPartial: false, + })); + setEntries(mapped); + }) + .catch((err) => { + if (cancelled) return; + console.error("Failed to load task output history:", err); + }) + .finally(() => { + if (!cancelled) setLoadingHistory(false); + }); + + return () => { + cancelled = true; + }; + }, [isOpen, taskId]); + + // Handle live output events + const handleOutput = useCallback( + (event: TaskOutputEvent) => { + if (event.isPartial) return; + setEntries((prev) => [...prev, event]); + setIsStreaming(true); + }, + [] + ); + + // Handle task updates (to detect completion) + const handleUpdate = useCallback( + (event: { status: string }) => { + if ( + event.status === "completed" || + event.status === "failed" || + event.status === "cancelled" + ) { + setIsStreaming(false); + } else if (event.status === "running") { + setIsStreaming(true); + } + }, + [] + ); + + // Subscribe to live output + useTaskSubscription({ + taskId: isOpen ? taskId : null, + subscribeOutput: isOpen && !!taskId, + onOutput: handleOutput, + onUpdate: handleUpdate, + }); + + return ( + <> + {/* Backdrop overlay */} + <div + className={`fixed inset-0 bg-black/30 z-50 transition-opacity duration-300 ${ + isOpen ? "opacity-100" : "opacity-0 pointer-events-none" + }`} + onClick={onClose} + /> + + {/* Slide-out panel */} + <div + className={`fixed top-0 right-0 h-full w-[550px] max-w-[90vw] z-50 bg-[#0d1117] border-l border-[rgba(117,170,252,0.2)] shadow-xl shadow-black/50 flex flex-col transition-transform duration-300 ease-in-out ${ + isOpen ? "translate-x-0" : "translate-x-full" + }`} + > + {/* Header */} + <div className="flex items-center justify-between px-4 py-3 border-b border-dashed border-[rgba(117,170,252,0.25)] shrink-0"> + <div className="flex items-center gap-2 min-w-0 flex-1"> + <span className="text-[10px] font-mono text-[#75aafc] uppercase tracking-wide shrink-0"> + Task + </span> + <span className="text-[12px] font-mono text-white truncate"> + {taskName || taskId} + </span> + {isStreaming && ( + <span className="flex items-center gap-1 px-1.5 py-0.5 bg-green-400/10 border border-green-400/30 shrink-0"> + <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" /> + <span className="text-green-400 font-mono text-[9px] uppercase"> + Live + </span> + </span> + )} + </div> + <button + type="button" + onClick={onClose} + className="text-[#7788aa] hover:text-white font-mono text-sm transition-colors ml-2 shrink-0 w-6 h-6 flex items-center justify-center" + > + ✕ + </button> + </div> + + {/* Content */} + <div className="flex-1 flex flex-col min-h-0 overflow-hidden"> + {/* Task Output section (~60% height) */} + <div className="flex-[3] min-h-0 flex flex-col border-b border-[rgba(117,170,252,0.15)]"> + {loadingHistory ? ( + <div className="flex-1 flex items-center justify-center"> + <span className="font-mono text-xs text-[#555] animate-pulse"> + Loading output... + </span> + </div> + ) : ( + <TaskOutput + entries={entries} + isStreaming={isStreaming} + taskId={taskId} + /> + )} + </div> + + {/* Worktree Changes section (~40% height) */} + <div className="flex-[2] min-h-0 overflow-y-auto"> + {taskId && <WorktreeFilesPanel taskId={taskId} />} + </div> + </div> + </div> + </> + ); +} |