diff options
Diffstat (limited to 'makima/frontend/src/components/directives')
3 files changed, 651 insertions, 767 deletions
diff --git a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx b/makima/frontend/src/components/directives/DirectiveContextMenu.tsx deleted file mode 100644 index eda7e7f..0000000 --- a/makima/frontend/src/components/directives/DirectiveContextMenu.tsx +++ /dev/null @@ -1,251 +0,0 @@ -import { useEffect, useRef } from "react"; -import type { DirectiveSummary } from "../../lib/api"; - -interface DirectiveContextMenuProps { - x: number; - y: number; - directive: DirectiveSummary; - onClose: () => void; - onStart: () => void; - onPause: () => void; - onArchive: () => void; - onDelete: () => void; - onGoToPR: () => void; - /** - * Reset the contract to a fresh empty draft (clears goal + pr_url, status - * back to 'draft'). Past revisions stay as history. Optional so the legacy - * tabular UI doesn't have to wire it up. - */ - onNewDraft?: () => void; - /** Trigger a fresh PR creation from the current contract state. */ - onCreatePR?: () => void; - /** Manually advance the DAG (find newly-ready steps). */ - onAdvance?: () => void; - /** Run the cleanup task to prune merged/stale steps. */ - onCleanup?: () => void; - /** Pick up linked orders (queue them as new steps). */ - onPickUpOrders?: () => void; -} - -export function DirectiveContextMenu({ - x, - y, - directive, - onClose, - onStart, - onPause, - onArchive, - onDelete, - onGoToPR, - onNewDraft, - onCreatePR, - onAdvance, - onCleanup, - onPickUpOrders, -}: DirectiveContextMenuProps) { - const menuRef = useRef<HTMLDivElement>(null); - - // Close on click outside - useEffect(() => { - const handleClickOutside = (e: MouseEvent) => { - if (menuRef.current && !menuRef.current.contains(e.target as Node)) { - onClose(); - } - }; - - const handleKeyDown = (e: KeyboardEvent) => { - if (e.key === "Escape") { - onClose(); - } - }; - - document.addEventListener("mousedown", handleClickOutside); - document.addEventListener("keydown", handleKeyDown); - - return () => { - document.removeEventListener("mousedown", handleClickOutside); - document.removeEventListener("keydown", handleKeyDown); - }; - }, [onClose]); - - // Adjust position if menu would overflow viewport - useEffect(() => { - if (menuRef.current) { - const rect = menuRef.current.getBoundingClientRect(); - const viewportWidth = window.innerWidth; - const viewportHeight = window.innerHeight; - - if (rect.right > viewportWidth) { - menuRef.current.style.left = `${x - rect.width}px`; - } - if (rect.bottom > viewportHeight) { - menuRef.current.style.top = `${y - rect.height}px`; - } - } - }, [x, y]); - - const menuItemClass = - "w-full px-3 py-1.5 text-left text-xs font-mono text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.1)] flex items-center gap-2"; - const dividerClass = "border-t border-[rgba(117,170,252,0.2)] my-1"; - - const showStart = directive.status === "draft" || directive.status === "paused" || directive.status === "idle"; - const showPause = directive.status === "active"; - const showArchive = directive.status !== "archived"; - const showGoToPR = !!directive.prUrl; - // "New draft" appears once the contract is inactive (its iteration has - // shipped) — that's the explicit affordance for starting the next cycle - // on a clean slate while keeping prior revisions as history. - const showNewDraft = !!onNewDraft && directive.status === "inactive"; - - return ( - <div - ref={menuRef} - className="fixed z-50 bg-[#0a1628] border border-[rgba(117,170,252,0.3)] shadow-lg min-w-[180px]" - style={{ left: x, top: y }} - > - {/* Header showing directive title */} - <div className="px-3 py-1.5 text-[10px] font-mono text-[#555] uppercase border-b border-[rgba(117,170,252,0.2)] truncate max-w-[200px]"> - {directive.title} - </div> - - {/* New draft — the canonical action on an inactive (shipped) contract. */} - {showNewDraft && ( - <> - <button - className={menuItemClass} - onClick={() => { - onNewDraft?.(); - onClose(); - }} - > - <span className="text-emerald-300">＋</span> - New draft - </button> - <div className={dividerClass} /> - </> - )} - - {/* Status actions */} - {showStart && ( - <button - className={menuItemClass} - onClick={() => { - onStart(); - onClose(); - }} - > - <span className="text-[#75aafc]">▶</span> - Start - </button> - )} - - {showPause && ( - <button - className={menuItemClass} - onClick={() => { - onPause(); - onClose(); - }} - > - <span className="text-[#75aafc]">❚❚</span> - Pause - </button> - )} - - {showArchive && ( - <button - className={menuItemClass} - onClick={() => { - onArchive(); - onClose(); - }} - > - <span className="text-[#75aafc]">▣</span> - Archive - </button> - )} - - {/* Orchestration actions — Advance / Pick up orders / Cleanup. */} - {(onAdvance || onPickUpOrders || onCleanup) && ( - <div className={dividerClass} /> - )} - {onAdvance && ( - <button - className={menuItemClass} - onClick={() => { - onAdvance(); - onClose(); - }} - > - <span className="text-[#75aafc]">»</span> - Advance DAG - </button> - )} - {onPickUpOrders && ( - <button - className={menuItemClass} - onClick={() => { - onPickUpOrders(); - onClose(); - }} - > - <span className="text-[#c084fc]">◆</span> - Plan orders - </button> - )} - {onCleanup && ( - <button - className={menuItemClass} - onClick={() => { - onCleanup(); - onClose(); - }} - > - <span className="text-[#75aafc]">⎚</span> - Clean up - </button> - )} - - {/* PR actions — Create / Update / Go to PR. */} - {(onCreatePR || showGoToPR) && <div className={dividerClass} />} - {onCreatePR && ( - <button - className={menuItemClass} - onClick={() => { - onCreatePR(); - onClose(); - }} - > - <span className="text-emerald-300">↗</span> - {directive.prUrl ? "Update PR" : "Create PR"} - </button> - )} - {showGoToPR && ( - <button - className={menuItemClass} - onClick={() => { - onGoToPR(); - onClose(); - }} - > - <span className="text-[#75aafc]">↗</span> - Go to PR - </button> - )} - - <div className={dividerClass} /> - - {/* Delete action */} - <button - className={`${menuItemClass} text-red-400 hover:bg-red-400/10`} - onClick={() => { - onDelete(); - onClose(); - }} - > - <span className="text-red-400">✕</span> - Delete - </button> - </div> - ); -} diff --git a/makima/frontend/src/components/directives/DocumentTaskStream.tsx b/makima/frontend/src/components/directives/DocumentTaskStream.tsx deleted file mode 100644 index b718ae4..0000000 --- a/makima/frontend/src/components/directives/DocumentTaskStream.tsx +++ /dev/null @@ -1,516 +0,0 @@ -/** - * DocumentTaskStream — renders a running task's output as a flowing document - * (assistant prose, tool blocks) instead of the boxy log style of TaskOutput. - * - * Key differences from TaskOutput: - * - Document typography (serif-ish paragraphs, not monospace logs). - * - Interleaved with subtle marginalia for tool calls and results. - * - Sticky comment composer at the bottom that's always in view. - * - Header strip with explicit Stop / Send / Open-in-task-page buttons so - * primary task controls don't require a right-click discovery step. - * - Module-level cache of historical entries per taskId so re-selecting a - * task you've already viewed renders instantly while a fresh fetch - * refreshes in the background. - */ -import { useCallback, useEffect, useRef, useState } from "react"; -import { useNavigate } from "react-router"; -import { SimpleMarkdown } from "../SimpleMarkdown"; -import { - useTaskSubscription, - type TaskOutputEvent, -} from "../../hooks/useTaskSubscription"; -import { getTaskOutput, sendTaskMessage, stopTask } from "../../lib/api"; - -interface DocumentTaskStreamProps { - taskId: string; - /** Human label used as the document header (e.g. "orchestrator", step name) */ - label: string; - /** - * When this task is ephemeral (spawned via the directive's "+ New task" - * action) AND has reached a terminal state, surface a "Merge to base" - * affordance that navigates the user to the standalone task page where - * the existing merge UI handles the actual merge / conflict flow. - * - * Step-spawned tasks have their own merge path (the directive's PR), so - * this affordance is intentionally off by default. - */ - ephemeral?: boolean; - /** Current status of the task; drives whether merge button is enabled. */ - status?: string; -} - -// ============================================================================= -// Module-level cache for historical task entries. -// -// Switching between tasks you've already viewed used to re-fire -// getTaskOutput and show "Loading transcript…" for the duration of the -// network round-trip. We now keep the entries cached per taskId; on -// re-selection we render the cache immediately and refetch in the -// background. The WS subscription continues to handle live deltas. -// ============================================================================= -const entriesCache = new Map<string, TaskOutputEvent[]>(); - -export function DocumentTaskStream({ - taskId, - label, - ephemeral, - status, -}: DocumentTaskStreamProps) { - const navigate = useNavigate(); - const [entries, setEntries] = useState<TaskOutputEvent[]>( - () => entriesCache.get(taskId) ?? [], - ); - const [loading, setLoading] = useState(!entriesCache.has(taskId)); - const [isStreaming, setIsStreaming] = useState(false); - const [comment, setComment] = useState(""); - const [sending, setSending] = useState(false); - const [sendError, setSendError] = useState<string | null>(null); - const [stopping, setStopping] = useState(false); - const containerRef = useRef<HTMLDivElement>(null); - const composerRef = useRef<HTMLDivElement>(null); - // autoScroll lives in a ref so the scroll handler reads the latest value - // synchronously without re-creating the effect. - const autoScrollRef = useRef(true); - const [showResumeScroll, setShowResumeScroll] = useState(false); - - // Load historical output when the selected task changes. Render the cache - // immediately if we have it; refetch in the background regardless. - useEffect(() => { - let cancelled = false; - const cached = entriesCache.get(taskId); - if (cached) { - setEntries(cached); - setLoading(false); - } else { - setEntries([]); - setLoading(true); - } - setIsStreaming(false); - - getTaskOutput(taskId) - .then((res) => { - if (cancelled) return; - 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, - })); - entriesCache.set(taskId, mapped); - setEntries(mapped); - }) - .catch((err) => { - if (cancelled) return; - // eslint-disable-next-line no-console - console.error("Failed to load task output history:", err); - }) - .finally(() => { - if (!cancelled) setLoading(false); - }); - return () => { - cancelled = true; - }; - }, [taskId]); - - const handleOutput = useCallback( - (event: TaskOutputEvent) => { - if (event.isPartial) return; - setEntries((prev) => { - const next = [...prev, event]; - entriesCache.set(taskId, next); - return next; - }); - setIsStreaming(true); - }, - [taskId], - ); - - const handleUpdate = useCallback((event: { status: string }) => { - if ( - event.status === "completed" || - event.status === "failed" || - event.status === "cancelled" || - event.status === "interrupted" || - event.status === "merged" || - event.status === "done" - ) { - setIsStreaming(false); - } else if (event.status === "running") { - setIsStreaming(true); - } - }, []); - - useTaskSubscription({ - taskId, - subscribeOutput: true, - onOutput: handleOutput, - onUpdate: handleUpdate, - }); - - // Auto-scroll while at bottom. The previous version only flipped autoScroll - // off and never resumed; now a scroll back into the bottom 80px reactivates - // it so a brief read-up doesn't permanently freeze the stream at the top. - useEffect(() => { - if (autoScrollRef.current && containerRef.current) { - containerRef.current.scrollTop = containerRef.current.scrollHeight; - } - }, [entries]); - - // After loading the initial transcript, snap to the bottom unconditionally - // so users see the latest output, not the start. - useEffect(() => { - if (!loading && containerRef.current) { - containerRef.current.scrollTop = containerRef.current.scrollHeight; - autoScrollRef.current = true; - setShowResumeScroll(false); - } - }, [loading, taskId]); - - const handleScroll = useCallback(() => { - if (!containerRef.current) return; - const { scrollTop, scrollHeight, clientHeight } = containerRef.current; - const distanceFromBottom = scrollHeight - scrollTop - clientHeight; - const atBottom = distanceFromBottom < 80; - autoScrollRef.current = atBottom; - setShowResumeScroll(!atBottom); - }, []); - - const submitComment = useCallback( - async (e: React.FormEvent) => { - e.preventDefault(); - const trimmed = comment.trim(); - if (!trimmed || sending) return; - setSending(true); - setSendError(null); - // Show the comment immediately as a user-input entry. - setEntries((prev) => { - const next: TaskOutputEvent[] = [ - ...prev, - { - taskId, - messageType: "user_input", - content: trimmed, - isPartial: false, - }, - ]; - entriesCache.set(taskId, next); - return next; - }); - try { - await sendTaskMessage(taskId, trimmed); - setComment(""); - } catch (err) { - setSendError( - err instanceof Error ? err.message : "Failed to send comment", - ); - window.setTimeout(() => setSendError(null), 5000); - } finally { - setSending(false); - } - }, - [comment, sending, taskId], - ); - - const handleStop = useCallback(async () => { - if (stopping || !isStreaming) return; - if (!window.confirm("Stop this task? It will be marked failed.")) return; - setStopping(true); - try { - await stopTask(taskId); - } catch (err) { - // eslint-disable-next-line no-console - console.error("Failed to stop task", err); - } finally { - setStopping(false); - } - }, [taskId, stopping, isStreaming]); - - const focusComposer = useCallback(() => { - const input = composerRef.current?.querySelector("textarea"); - input?.focus(); - }, []); - - const resumeScroll = useCallback(() => { - if (!containerRef.current) return; - containerRef.current.scrollTop = containerRef.current.scrollHeight; - autoScrollRef.current = true; - setShowResumeScroll(false); - }, []); - - return ( - <div className="flex-1 flex flex-col h-full overflow-hidden bg-[#0a1628] relative"> - {/* Action header strip — explicit Stop / Send / Open-in-task-page so - users don't have to right-click to discover task controls. */} - <div className="shrink-0 flex items-center gap-2 px-6 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)] bg-[#091428]"> - <span className="text-[10px] font-mono text-[#556677] uppercase tracking-wide"> - Task actions - </span> - <button - type="button" - onClick={focusComposer} - className="ml-auto px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400" - > - Send (⌘↵) - </button> - <button - type="button" - onClick={handleStop} - disabled={!isStreaming || stopping} - className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-amber-300 border border-amber-600/60 hover:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed" - > - {stopping ? "Stopping…" : "Stop"} - </button> - - {/* Manual merge affordance — visible only on ephemeral tasks that - have reached a terminal state. Navigates to the standalone task - page where the existing mesh_merge UI drives the real merge / - conflict resolution flow. The user explicitly asked for this to - be a manual button press for safety. */} - {ephemeral && isTerminalStatus(status) && ( - <button - type="button" - onClick={() => { - const ok = window.confirm( - "Merge this ephemeral task into the base branch? You'll be taken to the task page where the merge runs and any conflicts are resolved.", - ); - if (!ok) return; - navigate(`/exec/${taskId}#merge`); - }} - title="Manual merge — opens the merge UI on the task page" - className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400" - > - Merge to base ↗ - </button> - )} - - <button - type="button" - onClick={() => navigate(`/exec/${taskId}`)} - className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-[#9bc3ff] border border-[rgba(117,170,252,0.35)] hover:border-[#75aafc]" - > - Open in task page - </button> - </div> - - {/* Document body */} - <div - ref={containerRef} - onScroll={handleScroll} - className="flex-1 overflow-y-auto" - > - <div className="max-w-3xl mx-auto px-8 py-10 pb-32 text-[#dbe7ff]"> - <div className="flex items-center gap-3 mb-1"> - <h1 className="text-[24px] font-medium text-white tracking-tight"> - {label} - </h1> - {isStreaming && ( - <span className="flex items-center gap-1.5 px-2 py-0.5 bg-green-400/10 border border-green-400/30 text-green-400 font-mono text-[10px] uppercase"> - <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" /> - Live - </span> - )} - </div> - <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide mb-8"> - Live transcript — comments below are sent to the task as input. - </p> - - {loading && entries.length === 0 ? ( - <p className="text-[#556677] font-mono text-xs italic"> - Loading transcript… - </p> - ) : entries.length === 0 ? ( - <p className="text-[#556677] font-mono text-xs italic"> - {isStreaming ? "Waiting for output…" : "No output yet."} - </p> - ) : ( - <div className="space-y-4"> - {entries.map((entry, idx) => ( - <DocumentEntry key={idx} entry={entry} /> - ))} - {isStreaming && ( - <span className="inline-block w-2 h-4 bg-[#9bc3ff] animate-pulse align-baseline" /> - )} - </div> - )} - </div> - </div> - - {/* "Resume auto-scroll" floating chip when the user has scrolled up. */} - {showResumeScroll && ( - <button - type="button" - onClick={resumeScroll} - className="absolute bottom-32 right-6 z-10 px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-[#9bc3ff] bg-[#091428] border border-[rgba(117,170,252,0.4)] hover:border-[#75aafc] shadow-lg" - > - ↓ Jump to latest - </button> - )} - - {/* Sticky comment composer — always pinned to the viewport bottom so - users can interact with the task no matter where they've scrolled. */} - <div - ref={composerRef} - className="absolute bottom-0 left-0 right-0 border-t border-dashed border-[rgba(117,170,252,0.25)] bg-[#091428]/95 backdrop-blur" - > - {sendError && ( - <div className="px-6 py-1 bg-red-900/20 text-red-400 text-xs font-mono"> - {sendError} - </div> - )} - <form - onSubmit={submitComment} - className="max-w-3xl mx-auto px-8 py-3 flex items-start gap-3" - > - <span className="text-[10px] font-mono text-[#556677] uppercase tracking-wide pt-2 shrink-0"> - Comment - </span> - <textarea - value={comment} - onChange={(e) => setComment(e.target.value)} - onKeyDown={(e) => { - // ⌘/Ctrl-Enter submits. - if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { - void submitComment(e as unknown as React.FormEvent); - } - }} - placeholder={ - isStreaming - ? "Add a comment to interrupt and redirect…" - : "Task is not streaming — comments will queue if accepted." - } - rows={2} - disabled={sending} - className="flex-1 bg-transparent border border-[rgba(117,170,252,0.2)] focus:border-[#75aafc] outline-none px-3 py-2 text-[13px] text-[#dbe7ff] placeholder-[#445566] resize-none" - /> - <button - type="submit" - disabled={sending || !comment.trim()} - className="px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400 disabled:opacity-40 disabled:cursor-not-allowed shrink-0" - > - {sending ? "Sending…" : "Send"} - </button> - </form> - </div> - </div> - ); -} - -// --------------------------------------------------------------------------- -// Entry rendering — document-style, not log-style. -// --------------------------------------------------------------------------- - -function DocumentEntry({ entry }: { entry: TaskOutputEvent }) { - switch (entry.messageType) { - case "user_input": - return ( - <blockquote className="border-l-2 border-cyan-400/60 pl-4 py-1 italic text-cyan-200"> - <span className="not-italic text-[10px] font-mono text-cyan-400 uppercase tracking-wide block mb-1"> - You - </span> - {entry.content} - </blockquote> - ); - - case "assistant": - return ( - <div className="leading-relaxed text-[14px]"> - <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" /> - </div> - ); - - case "system": - return ( - <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide"> - {entry.content} - </p> - ); - - case "tool_use": - return ( - <p className="text-[11px] font-mono text-[#7788aa] flex items-center gap-2"> - <span className="text-yellow-500">·</span> - <span className="text-[#75aafc]">{entry.toolName || "tool"}</span> - {firstLineOfInput(entry.toolInput) && ( - <span className="text-[#445566] truncate"> - {firstLineOfInput(entry.toolInput)} - </span> - )} - </p> - ); - - case "tool_result": - if (!entry.content) return null; - return ( - <p className="text-[11px] font-mono pl-4"> - <span className={entry.isError ? "text-red-400" : "text-emerald-400"}> - {entry.isError ? "✗" : "→"} - </span>{" "} - <span className="text-[#7788aa]"> - {entry.content.split("\n")[0]} - {entry.content.includes("\n") && "…"} - </span> - </p> - ); - - case "result": - return ( - <div className="border-t border-[rgba(117,170,252,0.15)] pt-3 mt-6"> - <p className="text-[10px] font-mono text-emerald-400 uppercase tracking-wide mb-2"> - Result - </p> - <div className="leading-relaxed text-[13px]"> - <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" /> - </div> - {(entry.costUsd !== undefined || entry.durationMs !== undefined) && ( - <p className="text-[10px] font-mono text-[#556677] mt-2"> - {entry.durationMs !== undefined && - `Duration: ${(entry.durationMs / 1000).toFixed(1)}s`} - {entry.costUsd !== undefined && entry.durationMs !== undefined && " · "} - {entry.costUsd !== undefined && - `Cost: $${entry.costUsd.toFixed(4)}`} - </p> - )} - </div> - ); - - case "error": - return ( - <p className="border-l-2 border-red-400/60 pl-4 py-1 text-red-300 text-[13px]"> - {entry.content} - </p> - ); - - default: - // Fall back to a quiet rendering for unknown message types so users - // still see the data, just inconspicuously. - if (!entry.content) return null; - return ( - <p className="text-[11px] font-mono text-[#556677]"> - {entry.content} - </p> - ); - } -} - -/** Terminal task statuses where the merge button is meaningful. */ -function isTerminalStatus(status?: string): boolean { - if (!status) return false; - return ["done", "completed", "merged"].includes(status); -} - -function firstLineOfInput(input?: Record<string, unknown>): string { - if (!input) return ""; - // Common shapes — show the most informative single value. - for (const key of ["command", "file_path", "path", "url", "pattern", "query"]) { - const v = input[key]; - if (typeof v === "string" && v.length > 0) { - return v.split("\n")[0].slice(0, 96); - } - } - return ""; -} diff --git a/makima/frontend/src/components/directives/TaskPage.tsx b/makima/frontend/src/components/directives/TaskPage.tsx new file mode 100644 index 0000000..41b4418 --- /dev/null +++ b/makima/frontend/src/components/directives/TaskPage.tsx @@ -0,0 +1,651 @@ +/** + * TaskPage — the right-pane view for a selected task in document mode. + * + * Layout (replaces the old single-column DocumentTaskStream): + * + * ┌───────────────────────────────────────────────────────────┐ + * │ Header: title · status · branch · Stop │ + * ├────────────────────────┬──────────────────────────────────┤ + * │ Changed files (~30%) │ Transcript feed (scrollable) │ + * │ src/foo.rs │ [user] do thing │ + * │ src/bar.rs │ [tool] Read foo.rs │ + * │ (selected file diff) │ │ + * │ + added │ │ + * │ - removed │ │ + * │ ├──────────────────────────────────┤ + * │ │ Composer (sticky bottom) │ + * └────────────────────────┴──────────────────────────────────┘ + * + * Diff data comes from getTaskDiff(); we parse it with parseDiff (reused + * from OverlayDiffViewer) so we don't duplicate the parser. The file + * list on the left is the parsed file paths; selecting one filters the + * diff render to that single file. Refresh button re-fetches on demand; + * by default the diff loads once on mount + after each task status + * change so the user sees fresh changes as soon as the daemon commits. + */ +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { SimpleMarkdown } from "../SimpleMarkdown"; +import { + useTaskSubscription, + type TaskOutputEvent, +} from "../../hooks/useTaskSubscription"; +import { getTaskOutput, getTaskDiff, sendTaskMessage, stopTask } from "../../lib/api"; +import { parseDiff, DiffFileView, type DiffFile } from "../mesh/OverlayDiffViewer"; + +interface TaskPageProps { + taskId: string; + /** Human label for the task header (e.g. "orchestrator", step name). */ + label: string; + /** True for tasks spawned via the directive's `+ New ephemeral task` + * action (no backing step). Drives the optional "Merge to base" + * affordance — step-spawned tasks merge via the directive's PR. */ + ephemeral?: boolean; + /** Current task status — drives whether merge button is enabled. */ + status?: string; +} + +// Module-level caches so navigation between tasks is instant on re-visit. +const entriesCache = new Map<string, TaskOutputEvent[]>(); +const diffCache = new Map<string, string>(); + +export function TaskPage({ taskId, label, ephemeral, status }: TaskPageProps) { + // ---- Transcript state (mirrors the old DocumentTaskStream) ---- + const [entries, setEntries] = useState<TaskOutputEvent[]>( + () => entriesCache.get(taskId) ?? [], + ); + const [loading, setLoading] = useState(!entriesCache.has(taskId)); + const [isStreaming, setIsStreaming] = useState(false); + const [comment, setComment] = useState(""); + const [sending, setSending] = useState(false); + const [sendError, setSendError] = useState<string | null>(null); + const [stopping, setStopping] = useState(false); + const transcriptRef = useRef<HTMLDivElement>(null); + const composerRef = useRef<HTMLDivElement>(null); + const autoScrollRef = useRef(true); + const [showResumeScroll, setShowResumeScroll] = useState(false); + + // ---- Diff state ---- + const [diffText, setDiffText] = useState<string>(() => diffCache.get(taskId) ?? ""); + const [diffLoading, setDiffLoading] = useState(false); + const [diffError, setDiffError] = useState<string | null>(null); + const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null); + const [collapsedFiles, setCollapsedFiles] = useState<Set<string>>(new Set()); + + // Reset both panes when the task id changes. + useEffect(() => { + setSelectedFilePath(null); + setCollapsedFiles(new Set()); + setDiffText(diffCache.get(taskId) ?? ""); + }, [taskId]); + + // ---- Load historical transcript on task change. ---- + useEffect(() => { + let cancelled = false; + const cached = entriesCache.get(taskId); + if (cached) { + setEntries(cached); + setLoading(false); + } else { + setEntries([]); + setLoading(true); + } + setIsStreaming(false); + + getTaskOutput(taskId) + .then((res) => { + if (cancelled) return; + 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, + })); + entriesCache.set(taskId, mapped); + setEntries(mapped); + }) + .catch((err) => { + if (cancelled) return; + // eslint-disable-next-line no-console + console.error("Failed to load task output history:", err); + }) + .finally(() => { + if (!cancelled) setLoading(false); + }); + return () => { + cancelled = true; + }; + }, [taskId]); + + // ---- Load diff on task change + after each task status update. ---- + const refreshDiff = useCallback(async () => { + setDiffLoading(true); + setDiffError(null); + try { + const res = await getTaskDiff(taskId); + if (res.success && res.diff !== null) { + setDiffText(res.diff); + diffCache.set(taskId, res.diff); + } else if (res.error) { + setDiffError(res.error); + } else { + setDiffText(""); + diffCache.set(taskId, ""); + } + } catch (e) { + setDiffError(e instanceof Error ? e.message : "Failed to load diff"); + } finally { + setDiffLoading(false); + } + }, [taskId]); + + useEffect(() => { + void refreshDiff(); + }, [refreshDiff]); + + // ---- Live subscription. ---- + const handleOutput = useCallback( + (event: TaskOutputEvent) => { + if (event.isPartial) return; + setEntries((prev) => { + const next = [...prev, event]; + entriesCache.set(taskId, next); + return next; + }); + setIsStreaming(true); + }, + [taskId], + ); + + const handleUpdate = useCallback( + (event: { status: string }) => { + const terminal = [ + "completed", + "failed", + "cancelled", + "interrupted", + "merged", + "done", + ]; + if (terminal.includes(event.status)) { + setIsStreaming(false); + // Daemon may have written final commits — refresh the diff. + void refreshDiff(); + } else if (event.status === "running") { + setIsStreaming(true); + } + }, + [refreshDiff], + ); + + useTaskSubscription({ + taskId, + subscribeOutput: true, + onOutput: handleOutput, + onUpdate: handleUpdate, + }); + + // ---- Auto-scroll (transcript pane). ---- + useEffect(() => { + if (autoScrollRef.current && transcriptRef.current) { + transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight; + } + }, [entries]); + + useEffect(() => { + if (!loading && transcriptRef.current) { + transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight; + autoScrollRef.current = true; + setShowResumeScroll(false); + } + }, [loading, taskId]); + + const handleScroll = useCallback(() => { + if (!transcriptRef.current) return; + const { scrollTop, scrollHeight, clientHeight } = transcriptRef.current; + const distanceFromBottom = scrollHeight - scrollTop - clientHeight; + const atBottom = distanceFromBottom < 80; + autoScrollRef.current = atBottom; + setShowResumeScroll(!atBottom); + }, []); + + const resumeScroll = useCallback(() => { + if (!transcriptRef.current) return; + transcriptRef.current.scrollTop = transcriptRef.current.scrollHeight; + autoScrollRef.current = true; + setShowResumeScroll(false); + }, []); + + // ---- Composer + stop. ---- + const submitComment = useCallback( + async (e: React.FormEvent) => { + e.preventDefault(); + const trimmed = comment.trim(); + if (!trimmed || sending) return; + setSending(true); + setSendError(null); + setEntries((prev) => { + const next: TaskOutputEvent[] = [ + ...prev, + { taskId, messageType: "user_input", content: trimmed, isPartial: false }, + ]; + entriesCache.set(taskId, next); + return next; + }); + try { + await sendTaskMessage(taskId, trimmed); + setComment(""); + } catch (err) { + setSendError(err instanceof Error ? err.message : "Failed to send comment"); + window.setTimeout(() => setSendError(null), 5000); + } finally { + setSending(false); + } + }, + [comment, sending, taskId], + ); + + const handleStop = useCallback(async () => { + if (stopping || !isStreaming) return; + if (!window.confirm("Stop this task? It will be marked failed.")) return; + setStopping(true); + try { + await stopTask(taskId); + } catch (err) { + // eslint-disable-next-line no-console + console.error("Failed to stop task", err); + } finally { + setStopping(false); + } + }, [taskId, stopping, isStreaming]); + + const focusComposer = useCallback(() => { + const input = composerRef.current?.querySelector("textarea"); + input?.focus(); + }, []); + + // ---- Parse diff once, derive file list. ---- + const parsedFiles = useMemo(() => parseDiff(diffText), [diffText]); + + // Default selection: first file in the parsed list. + useEffect(() => { + if (!selectedFilePath && parsedFiles.length > 0) { + setSelectedFilePath(parsedFiles[0].path); + } + }, [parsedFiles, selectedFilePath]); + + const visibleFiles: DiffFile[] = useMemo(() => { + if (!selectedFilePath) return parsedFiles; + const match = parsedFiles.find((f) => f.path === selectedFilePath); + return match ? [match] : parsedFiles; + }, [parsedFiles, selectedFilePath]); + + const toggleFile = (path: string) => { + setCollapsedFiles((prev) => { + const next = new Set(prev); + if (next.has(path)) next.delete(path); + else next.add(path); + return next; + }); + }; + + return ( + <div className="flex-1 flex flex-col h-full overflow-hidden bg-[#0a1628]"> + {/* Header strip — title + live indicator + actions. */} + <div className="shrink-0 flex items-center gap-3 px-6 py-2 border-b border-dashed border-[rgba(117,170,252,0.2)] bg-[#091428]"> + <h1 className="text-[14px] font-medium text-white tracking-tight"> + {label} + </h1> + {isStreaming && ( + <span className="flex items-center gap-1.5 px-2 py-0.5 bg-green-400/10 border border-green-400/30 text-green-400 font-mono text-[10px] uppercase"> + <span className="w-1.5 h-1.5 bg-green-400 rounded-full animate-pulse" /> + Live + </span> + )} + {status && ( + <span className="font-mono text-[10px] uppercase tracking-wide text-[#7788aa]"> + {status} + </span> + )} + <div className="ml-auto flex items-center gap-2"> + <button + type="button" + onClick={focusComposer} + className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400" + > + Send (⌘↵) + </button> + <button + type="button" + onClick={handleStop} + disabled={!isStreaming || stopping} + className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-amber-300 border border-amber-600/60 hover:border-amber-400 disabled:opacity-40 disabled:cursor-not-allowed" + > + {stopping ? "Stopping…" : "Stop"} + </button> + {ephemeral && isTerminalStatus(status) && ( + <button + type="button" + onClick={() => { + const ok = window.confirm( + "Merge this ephemeral task into the base branch? You'll be taken to the standalone task page where the merge runs.", + ); + if (!ok) return; + window.open(`/exec/${taskId}#merge`, "_blank"); + }} + title="Manual merge — opens the merge UI on the standalone task page" + className="px-2 py-1 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400" + > + Merge to base ↗ + </button> + )} + </div> + </div> + + {/* Two-column body. */} + <div className="flex-1 flex min-h-0 overflow-hidden"> + {/* Left: changed files + diff. */} + <div className="w-[40%] min-w-[320px] max-w-[640px] shrink-0 border-r border-dashed border-[rgba(117,170,252,0.2)] flex flex-col bg-[#0a1628] overflow-hidden"> + <div className="shrink-0 flex items-center gap-2 px-3 py-2 border-b border-dashed border-[rgba(117,170,252,0.15)]"> + <span className="text-[10px] font-mono uppercase tracking-wide text-[#7788aa]"> + Changed files + </span> + <span className="text-[10px] font-mono text-[#556677]"> + {parsedFiles.length} + </span> + <button + type="button" + onClick={() => void refreshDiff()} + className="ml-auto text-[10px] font-mono text-[#9bc3ff] hover:text-white" + title="Refresh diff" + > + ↻ + </button> + </div> + {/* File list (top half of left pane). */} + <div className="overflow-y-auto max-h-[40%] border-b border-dashed border-[rgba(117,170,252,0.15)]"> + {parsedFiles.length === 0 ? ( + <div className="px-3 py-3 font-mono text-[10px] italic text-[#556677]"> + {diffLoading + ? "Loading diff…" + : diffError + ? diffError + : "No changes yet"} + </div> + ) : ( + parsedFiles.map((f) => ( + <button + key={f.path} + type="button" + onClick={() => setSelectedFilePath(f.path)} + className={`w-full text-left flex items-center gap-2 px-3 py-1 font-mono text-[11px] ${ + selectedFilePath === f.path + ? "bg-[rgba(117,170,252,0.12)] text-white" + : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)]" + }`} + > + <span className={fileStatusClass(f.status)}> + {fileStatusInitial(f.status)} + </span> + <span className="truncate flex-1">{f.path}</span> + <span className="font-mono text-[9px]"> + {f.additions > 0 && ( + <span className="text-green-400 mr-1">+{f.additions}</span> + )} + {f.deletions > 0 && ( + <span className="text-red-400">-{f.deletions}</span> + )} + </span> + </button> + )) + )} + </div> + {/* Diff content (bottom of left pane). */} + <div className="flex-1 overflow-y-auto p-2"> + {visibleFiles.length === 0 ? ( + <div className="px-2 py-3 font-mono text-[10px] italic text-[#556677]"> + Select a file to view its diff. + </div> + ) : ( + visibleFiles.map((file) => ( + <DiffFileView + key={file.path} + file={file} + collapsed={collapsedFiles.has(file.path)} + onToggle={() => toggleFile(file.path)} + /> + )) + )} + </div> + </div> + + {/* Right: transcript + sticky composer. */} + <div className="flex-1 flex flex-col min-h-0 overflow-hidden relative"> + <div + ref={transcriptRef} + onScroll={handleScroll} + className="flex-1 overflow-y-auto" + > + <div className="max-w-3xl mx-auto px-6 py-6 pb-32 text-[#dbe7ff]"> + {loading && entries.length === 0 ? ( + <p className="text-[#556677] font-mono text-xs italic"> + Loading transcript… + </p> + ) : entries.length === 0 ? ( + <p className="text-[#556677] font-mono text-xs italic"> + {isStreaming ? "Waiting for output…" : "No output yet."} + </p> + ) : ( + <div className="space-y-4"> + {entries.map((entry, idx) => ( + <FeedEntry key={idx} entry={entry} /> + ))} + {isStreaming && ( + <span className="inline-block w-2 h-4 bg-[#9bc3ff] animate-pulse align-baseline" /> + )} + </div> + )} + </div> + </div> + + {showResumeScroll && ( + <button + type="button" + onClick={resumeScroll} + className="absolute bottom-32 right-6 z-10 px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-[#9bc3ff] bg-[#091428] border border-[rgba(117,170,252,0.4)] hover:border-[#75aafc] shadow-lg" + > + ↓ Jump to latest + </button> + )} + + <div + ref={composerRef} + className="absolute bottom-0 left-0 right-0 border-t border-dashed border-[rgba(117,170,252,0.25)] bg-[#091428]/95 backdrop-blur" + > + {sendError && ( + <div className="px-6 py-1 bg-red-900/20 text-red-400 text-xs font-mono"> + {sendError} + </div> + )} + <form + onSubmit={submitComment} + className="max-w-3xl mx-auto px-6 py-3 flex items-start gap-3" + > + <span className="text-[10px] font-mono text-[#556677] uppercase tracking-wide pt-2 shrink-0"> + Comment + </span> + <textarea + value={comment} + onChange={(e) => setComment(e.target.value)} + onKeyDown={(e) => { + if ((e.metaKey || e.ctrlKey) && e.key === "Enter") { + void submitComment(e as unknown as React.FormEvent); + } + }} + placeholder={ + isStreaming + ? "Add a comment to interrupt and redirect…" + : "Task is not streaming — comments will queue if accepted." + } + rows={2} + disabled={sending} + className="flex-1 bg-transparent border border-[rgba(117,170,252,0.2)] focus:border-[#75aafc] outline-none px-3 py-2 text-[13px] text-[#dbe7ff] placeholder-[#445566] resize-none" + /> + <button + type="submit" + disabled={sending || !comment.trim()} + className="px-3 py-1.5 font-mono text-[10px] uppercase tracking-wide text-emerald-300 border border-emerald-700/60 hover:border-emerald-400 disabled:opacity-40 disabled:cursor-not-allowed shrink-0" + > + {sending ? "Sending…" : "Send"} + </button> + </form> + </div> + </div> + </div> + </div> + ); +} + +// --------------------------------------------------------------------------- +// Feed entry rendering — document-style, not log-style. Mirrors the old +// DocumentTaskStream's DocumentEntry exactly (the user liked that part). +// --------------------------------------------------------------------------- + +function FeedEntry({ entry }: { entry: TaskOutputEvent }) { + switch (entry.messageType) { + case "user_input": + return ( + <blockquote className="border-l-2 border-cyan-400/60 pl-4 py-1 italic text-cyan-200"> + <span className="not-italic text-[10px] font-mono text-cyan-400 uppercase tracking-wide block mb-1"> + You + </span> + {entry.content} + </blockquote> + ); + + case "assistant": + return ( + <div className="leading-relaxed text-[14px]"> + <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" /> + </div> + ); + + case "system": + return ( + <p className="text-[10px] font-mono text-[#556677] uppercase tracking-wide"> + {entry.content} + </p> + ); + + case "tool_use": + return ( + <p className="text-[11px] font-mono text-[#7788aa] flex items-center gap-2"> + <span className="text-yellow-500">·</span> + <span className="text-[#75aafc]">{entry.toolName || "tool"}</span> + {firstLineOfInput(entry.toolInput) && ( + <span className="text-[#445566] truncate"> + {firstLineOfInput(entry.toolInput)} + </span> + )} + </p> + ); + + case "tool_result": + if (!entry.content) return null; + return ( + <p className="text-[11px] font-mono pl-4"> + <span className={entry.isError ? "text-red-400" : "text-emerald-400"}> + {entry.isError ? "✗" : "→"} + </span>{" "} + <span className="text-[#7788aa]"> + {entry.content.split("\n")[0]} + {entry.content.includes("\n") && "…"} + </span> + </p> + ); + + case "result": + return ( + <div className="border-t border-[rgba(117,170,252,0.15)] pt-3 mt-6"> + <p className="text-[10px] font-mono text-emerald-400 uppercase tracking-wide mb-2"> + Result + </p> + <div className="leading-relaxed text-[13px]"> + <SimpleMarkdown content={entry.content} className="text-[#e0eaf8]" /> + </div> + {(entry.costUsd !== undefined || entry.durationMs !== undefined) && ( + <p className="text-[10px] font-mono text-[#556677] mt-2"> + {entry.durationMs !== undefined && + `Duration: ${(entry.durationMs / 1000).toFixed(1)}s`} + {entry.costUsd !== undefined && entry.durationMs !== undefined && " · "} + {entry.costUsd !== undefined && + `Cost: $${entry.costUsd.toFixed(4)}`} + </p> + )} + </div> + ); + + case "error": + return ( + <p className="border-l-2 border-red-400/60 pl-4 py-1 text-red-300 text-[13px]"> + {entry.content} + </p> + ); + + default: + if (!entry.content) return null; + return ( + <p className="text-[11px] font-mono text-[#556677]"> + {entry.content} + </p> + ); + } +} + +function isTerminalStatus(status?: string): boolean { + if (!status) return false; + return ["done", "completed", "merged"].includes(status); +} + +function firstLineOfInput(input?: Record<string, unknown>): string { + if (!input) return ""; + for (const key of ["command", "file_path", "path", "url", "pattern", "query"]) { + const v = input[key]; + if (typeof v === "string" && v.length > 0) { + return v.split("\n")[0].slice(0, 96); + } + } + return ""; +} + +function fileStatusClass(status: DiffFile["status"]): string { + switch (status) { + case "added": + return "text-green-400 bg-green-400/10 px-1 py-0.5 text-[9px] font-bold"; + case "deleted": + return "text-red-400 bg-red-400/10 px-1 py-0.5 text-[9px] font-bold"; + case "renamed": + return "text-purple-400 bg-purple-400/10 px-1 py-0.5 text-[9px] font-bold"; + case "modified": + default: + return "text-yellow-400 bg-yellow-400/10 px-1 py-0.5 text-[9px] font-bold"; + } +} + +function fileStatusInitial(status: DiffFile["status"]): string { + switch (status) { + case "added": + return "A"; + case "deleted": + return "D"; + case "renamed": + return "R"; + case "modified": + default: + return "M"; + } +} |