From ec9738a069e61529be040eff065318972b8a11e2 Mon Sep 17 00:00:00 2001 From: soryu Date: Wed, 4 Mar 2026 16:47:12 +0000 Subject: feat: task slide-out panel, 3-way reconcile toggle, daemon reauth fix (#85) * WIP: heartbeat checkpoint * WIP: heartbeat checkpoint * feat: soryu-co/soryu - makima: Fix daemon reauth flow for new claude setup-token output format * feat: soryu-co/soryu - makima: Update frontend reconcile toggle to three-way switch * feat: soryu-co/soryu - makima: Add task slide-out panel to directive page --- .../src/components/directives/DirectiveDAG.tsx | 19 ++- .../src/components/directives/DirectiveDetail.tsx | 61 +++++-- .../src/components/directives/StepNode.tsx | 12 +- .../components/directives/TaskSlideOutPanel.tsx | 179 +++++++++++++++++++++ 4 files changed, 244 insertions(+), 27 deletions(-) create mode 100644 makima/frontend/src/components/directives/TaskSlideOutPanel.tsx (limited to 'makima/frontend/src/components') 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
{/* Orchestrator steps (Planning/Cleanup/Orders) - rendered above regular steps */} {orchestratorSteps.map(step => ( - + ))} {/* 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} /> ))}
@@ -111,13 +113,13 @@ export function DirectiveDAG({ steps, specializedSteps, onComplete, onFail, onSk {/* Completion steps (PR creation) - rendered below regular steps */} {completionSteps.map(step => ( - + ))} ); } -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 }) { {step.name} - onViewTask?.(step.taskId)} + className="text-[9px] font-mono text-[#556677] hover:text-white underline bg-transparent border-none p-0 cursor-pointer" > View task - + ); } 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(null); const [creatingPR, setCreatingPR] = useState(false); + const [slideOutTaskId, setSlideOutTaskId] = useState(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 ( + <>
{/* Header */}
@@ -228,21 +242,31 @@ export function DirectiveDetail({ {/* Reconcile mode toggle */}
- +
+ {(["auto", "semi-auto", "manual"] as const).map((mode) => { + const isActive = directive.reconcileMode === mode; + const modeStyles: Record = { + 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 = { auto: "Auto", "semi-auto": "Semi", manual: "Manual" }; + return ( + + ); + })} +
- {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"}
@@ -424,6 +448,7 @@ export function DirectiveDetail({ onComplete={onCompleteStep} onFail={onFailStep} onSkip={onSkipStep} + onViewTask={handleViewTask} />
@@ -445,6 +470,14 @@ export function DirectiveDetail({
)} + + 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) { )} {step.taskId && !step.contractId && ( - 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"} - + )} {(step.status === "running" || step.status === "ready") && (
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([]); + 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 */} +
+ + {/* Slide-out panel */} +
+ {/* Header */} +
+
+ + Task + + + {taskName || taskId} + + {isStreaming && ( + + + + Live + + + )} +
+ +
+ + {/* Content */} +
+ {/* Task Output section (~60% height) */} +
+ {loadingHistory ? ( +
+ + Loading output... + +
+ ) : ( + + )} +
+ + {/* Worktree Changes section (~40% height) */} +
+ {taskId && } +
+
+
+ + ); +} -- cgit v1.2.3