diff options
3 files changed, 939 insertions, 185 deletions
diff --git a/makima/frontend/src/components/directives/DocumentEditor.tsx b/makima/frontend/src/components/directives/DocumentEditor.tsx index 40fccf1..d953d45 100644 --- a/makima/frontend/src/components/directives/DocumentEditor.tsx +++ b/makima/frontend/src/components/directives/DocumentEditor.tsx @@ -49,8 +49,34 @@ import { // Constants // ============================================================================= -const SAVE_COUNTDOWN_MS = 3000; +/** + * Time between the user's last keystroke and the goal being persisted (which + * triggers the orchestrator to (re)plan). Longer when the directive is fresh + * so the user can think; shorter when the orchestrator is already running and + * we want changes to flow through quickly. + */ +const COUNTDOWN_FRESH_MS = 60_000; +const COUNTDOWN_RUNNING_MS = 10_000; +/** The countdown bar only appears once we're inside this many ms from firing. */ +const BAR_VISIBLE_MS = 10_000; const SAVED_TOAST_MS = 1200; +/** Debounce for writing the in-progress draft to localStorage (no backend hit). */ +const DRAFT_PERSIST_DEBOUNCE_MS = 250; +const DRAFT_KEY = (directiveId: string) => `makima:directive-goal-draft:${directiveId}`; +const LIVE_START_KEY = "makima:liveStartEnabled"; + +function isLiveStartEnabled(): boolean { + if (typeof window === "undefined") return true; + const raw = window.localStorage.getItem(LIVE_START_KEY); + // Default: live start ON — preserves existing behaviour for users who never + // touch the toggle. + return raw === null ? true : raw === "true"; +} + +function setLiveStartEnabled(value: boolean) { + if (typeof window === "undefined") return; + window.localStorage.setItem(LIVE_START_KEY, value ? "true" : "false"); +} // ============================================================================= // Editor theme — minimal, just enough so the rich-text plugin has something to @@ -85,8 +111,10 @@ const editorTheme = { */ function SeedContentPlugin({ directive, + onDraftRestored, }: { directive: DirectiveWithSteps; + onDraftRestored: (draft: string) => void; }) { const [editor] = useLexicalComposerContext(); const seededIdRef = useRef<string | null>(null); @@ -95,6 +123,22 @@ function SeedContentPlugin({ if (seededIdRef.current === directive.id) return; seededIdRef.current = directive.id; + // If a localStorage draft exists for this directive, prefer it over the + // persisted goal so the user does not lose unsaved work after navigating + // away. The parent is told about the restored draft so its state machine + // can transition to "dirty" or "pending". + let initialGoal = directive.goal; + let restoredDraft: string | null = null; + try { + const stored = window.localStorage.getItem(DRAFT_KEY(directive.id)); + if (stored !== null && stored !== directive.goal) { + initialGoal = stored; + restoredDraft = stored; + } + } catch { + /* localStorage may be unavailable; fall back to persisted goal */ + } + editor.update( () => { const root = $getRoot(); @@ -107,8 +151,8 @@ function SeedContentPlugin({ // Paragraph: goal (editable). const goalPara = $createParagraphNode(); - if (directive.goal.length > 0) { - goalPara.append($createTextNode(directive.goal)); + if (initialGoal.length > 0) { + goalPara.append($createTextNode(initialGoal)); } root.append(goalPara); @@ -121,7 +165,13 @@ function SeedContentPlugin({ }, { tag: "history-merge" }, ); - }, [editor, directive.id, directive.title, directive.goal]); + + if (restoredDraft !== null) { + // Defer so the parent's state update lands AFTER the editor's seeded + // content (avoids the GoalChangePlugin firing first and double-tracking). + queueMicrotask(() => onDraftRestored(restoredDraft!)); + } + }, [editor, directive.id, directive.title, directive.goal, onDraftRestored]); return null; } @@ -340,19 +390,36 @@ function EditorContextMenu({ // ============================================================================= interface SaveCountdownBarProps { - state: "idle" | "pending" | "saving" | "saved" | "error"; + state: "idle" | "dirty" | "pending" | "saving" | "saved" | "error"; remainingMs: number; - totalMs: number; + liveStart: boolean; + orchestratorRunning: boolean; + onSaveNow: () => void; onCancel: () => void; + onToggleLiveStart: (next: boolean) => void; } function SaveCountdownBar({ state, remainingMs, - totalMs, + liveStart, + orchestratorRunning, + onSaveNow, onCancel, + onToggleLiveStart, }: SaveCountdownBarProps) { - if (state === "idle") return null; + // Visibility rules: + // - Always show when actually saving / saved / error (transient feedback). + // - Show when "dirty" if live-start is OFF (user must trigger save). + // - Show when "pending" only inside the last BAR_VISIBLE_MS so the user + // does not feel rushed during the long fresh countdown. + const visible = + state === "saving" || + state === "saved" || + state === "error" || + (state === "dirty" && !liveStart) || + (state === "pending" && remainingMs <= BAR_VISIBLE_MS); + if (!visible) return null; let label: string; let progressPct = 0; @@ -360,8 +427,18 @@ function SaveCountdownBar({ if (state === "pending") { const seconds = Math.max(0, Math.ceil(remainingMs / 1000)); - label = `Saving goal in ${seconds}s — press Esc or Undo to cancel.`; - progressPct = Math.max(0, Math.min(100, (1 - remainingMs / totalMs) * 100)); + label = orchestratorRunning + ? `Replanning in ${seconds}s — Esc/Undo cancels.` + : `Saving goal in ${seconds}s — Esc/Undo cancels.`; + progressPct = Math.max( + 0, + Math.min(100, (1 - remainingMs / BAR_VISIBLE_MS) * 100), + ); + } else if (state === "dirty") { + label = orchestratorRunning + ? "Unsaved changes — saving will replan the directive." + : "Unsaved changes."; + progressPct = 0; } else if (state === "saving") { label = "Saving…"; progressPct = 100; @@ -387,15 +464,36 @@ function SaveCountdownBar({ style={{ width: `${progressPct}%` }} /> </div> - <div className="flex items-center justify-between px-4 py-1.5"> - <span className="text-[10px] font-mono">{label}</span> - {state === "pending" && ( + <div className="flex items-center gap-3 px-4 py-1.5"> + <span className="text-[10px] font-mono flex-1 truncate">{label}</span> + + {/* Live-start toggle is always shown so users can flip it from the bar. */} + <label className="flex items-center gap-1.5 text-[10px] font-mono text-[#7788aa] cursor-pointer select-none shrink-0"> + <input + type="checkbox" + checked={liveStart} + onChange={(e) => onToggleLiveStart(e.target.checked)} + className="accent-[#75aafc]" + /> + <span>Live start</span> + </label> + + {(state === "dirty" || state === "pending") && ( + <button + type="button" + onClick={onSaveNow} + className="text-[10px] font-mono text-emerald-300 hover:text-white border border-emerald-700/60 rounded px-2 py-0.5 shrink-0" + > + Save now + </button> + )} + {(state === "dirty" || state === "pending") && ( <button type="button" onClick={onCancel} - className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-0.5" + className="text-[10px] font-mono text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded px-2 py-0.5 shrink-0" > - Cancel + Discard </button> )} </div> @@ -415,7 +513,7 @@ export interface DocumentEditorProps { onPickUpOrders: () => Promise<unknown> | unknown; } -type SaveState = "idle" | "pending" | "saving" | "saved" | "error"; +type SaveState = "idle" | "dirty" | "pending" | "saving" | "saved" | "error"; export function DocumentEditor({ directive, @@ -442,45 +540,66 @@ export function DocumentEditor({ [directive.id], ); + // ---- Live-start setting (localStorage-backed) ------------------------- + const [liveStart, setLiveStartState] = useState<boolean>(isLiveStartEnabled); + const toggleLiveStart = useCallback((next: boolean) => { + setLiveStartEnabled(next); + setLiveStartState(next); + }, []); + // ---- Goal auto-save state machine -------------------------------------- + const orchestratorRunning = + !!directive.orchestratorTaskId || !!directive.completionTaskId; + // Pick the right countdown based on whether we'd be restarting work. + const countdownMs = orchestratorRunning ? COUNTDOWN_RUNNING_MS : COUNTDOWN_FRESH_MS; + const [saveState, setSaveState] = useState<SaveState>("idle"); - const [remainingMs, setRemainingMs] = useState(SAVE_COUNTDOWN_MS); + const [remainingMs, setRemainingMs] = useState(countdownMs); const pendingGoalRef = useRef<string>(directive.goal); const timerRef = useRef<number | null>(null); const tickRef = useRef<number | null>(null); const deadlineRef = useRef<number>(0); + const draftDebounceRef = useRef<number | null>(null); const editorRef = useRef<LexicalEditor | null>(null); + function cancelTimers() { + if (timerRef.current != null) { + window.clearTimeout(timerRef.current); + timerRef.current = null; + } + if (tickRef.current != null) { + window.clearInterval(tickRef.current); + tickRef.current = null; + } + } + // Reset state when switching directives. useEffect(() => { pendingGoalRef.current = directive.goal; cancelTimers(); setSaveState("idle"); - setRemainingMs(SAVE_COUNTDOWN_MS); + setRemainingMs(countdownMs); // eslint-disable-next-line react-hooks/exhaustive-deps }, [directive.id]); // If the persisted goal updated externally and matches the pending goal, // settle the bar. useEffect(() => { - if (saveState === "pending" && pendingGoalRef.current === directive.goal) { + if ( + (saveState === "pending" || saveState === "dirty") && + pendingGoalRef.current === directive.goal + ) { cancelTimers(); setSaveState("idle"); + try { + window.localStorage.removeItem(DRAFT_KEY(directive.id)); + } catch { + /* localStorage may be unavailable; ignore */ + } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [directive.goal]); - function cancelTimers() { - if (timerRef.current != null) { - window.clearTimeout(timerRef.current); - timerRef.current = null; - } - if (tickRef.current != null) { - window.clearInterval(tickRef.current); - tickRef.current = null; - } - } - const fireSave = useCallback(async () => { const next = pendingGoalRef.current; cancelTimers(); @@ -488,6 +607,11 @@ export function DocumentEditor({ try { await onUpdateGoal(next); setSaveState("saved"); + try { + window.localStorage.removeItem(DRAFT_KEY(directive.id)); + } catch { + /* ignore */ + } window.setTimeout(() => { // Only fade if no new edit has reopened a pending state in the meantime. setSaveState((s) => (s === "saved" ? "idle" : s)); @@ -500,13 +624,13 @@ export function DocumentEditor({ setSaveState((s) => (s === "error" ? "idle" : s)); }, 2500); } - }, [onUpdateGoal]); + }, [onUpdateGoal, directive.id]); const startOrExtendCountdown = useCallback(() => { cancelTimers(); - deadlineRef.current = Date.now() + SAVE_COUNTDOWN_MS; + deadlineRef.current = Date.now() + countdownMs; setSaveState("pending"); - setRemainingMs(SAVE_COUNTDOWN_MS); + setRemainingMs(countdownMs); tickRef.current = window.setInterval(() => { const remaining = Math.max(0, deadlineRef.current - Date.now()); setRemainingMs(remaining); @@ -514,18 +638,23 @@ export function DocumentEditor({ window.clearInterval(tickRef.current); tickRef.current = null; } - }, 100); + }, 200); timerRef.current = window.setTimeout(() => { void fireSave(); - }, SAVE_COUNTDOWN_MS); - }, [fireSave]); + }, countdownMs); + }, [fireSave, countdownMs]); const cancelCountdown = useCallback(() => { - if (saveState !== "pending") return; + if (saveState !== "pending" && saveState !== "dirty") return; cancelTimers(); pendingGoalRef.current = directive.goal; // reset pending edit setSaveState("idle"); - setRemainingMs(SAVE_COUNTDOWN_MS); + setRemainingMs(countdownMs); + try { + window.localStorage.removeItem(DRAFT_KEY(directive.id)); + } catch { + /* ignore */ + } // Also revert the editor's goal paragraph back to the persisted value, so // the user sees the rollback. const editor = editorRef.current; @@ -543,27 +672,61 @@ export function DocumentEditor({ { tag: "history-merge" }, ); } - }, [directive.goal, saveState]); + }, [directive.goal, directive.id, saveState, countdownMs]); // Cleanup on unmount. useEffect(() => { - return cancelTimers; + return () => { + cancelTimers(); + if (draftDebounceRef.current != null) { + window.clearTimeout(draftDebounceRef.current); + draftDebounceRef.current = null; + } + }; }, []); const handleGoalChange = useCallback( (goal: string) => { pendingGoalRef.current = goal; + + // 1. Always persist work-in-progress to localStorage (debounced) so + // leaving the page does not lose typing. This is independent of + // whether we will trigger a backend save. + if (draftDebounceRef.current != null) { + window.clearTimeout(draftDebounceRef.current); + } + draftDebounceRef.current = window.setTimeout(() => { + try { + if (goal === directive.goal) { + window.localStorage.removeItem(DRAFT_KEY(directive.id)); + } else { + window.localStorage.setItem(DRAFT_KEY(directive.id), goal); + } + } catch { + /* localStorage may be unavailable / full; ignore */ + } + draftDebounceRef.current = null; + }, DRAFT_PERSIST_DEBOUNCE_MS); + + // 2. State-machine. if (goal === directive.goal) { // Edit reverted — cancel the countdown (if any). - if (saveState === "pending") { + if (saveState === "pending" || saveState === "dirty") { cancelTimers(); setSaveState("idle"); } return; } - startOrExtendCountdown(); + + if (liveStart) { + startOrExtendCountdown(); + } else { + // Manual mode: stay "dirty" until the user clicks Save now. + cancelTimers(); + setSaveState("dirty"); + } }, - [directive.goal, saveState, startOrExtendCountdown], + [directive.goal, directive.id, liveStart, saveState, startOrExtendCountdown], ); // ---- Right-click context menu ----------------------------------------- @@ -581,7 +744,17 @@ export function DocumentEditor({ <LexicalComposer key={directive.id} initialConfig={initialConfig}> {/* Capture the editor ref via a tiny inline plugin */} <EditorRefCapture editorRef={editorRef} /> - <SeedContentPlugin directive={directive} /> + <SeedContentPlugin + directive={directive} + onDraftRestored={(draft) => { + pendingGoalRef.current = draft; + if (liveStart) { + startOrExtendCountdown(); + } else { + setSaveState("dirty"); + } + }} + /> <ReadOnlyTitlePlugin title={directive.title} /> <HistoryPlugin /> <GoalChangePlugin onGoalChange={handleGoalChange} /> @@ -614,8 +787,11 @@ export function DocumentEditor({ <SaveCountdownBar state={saveState} remainingMs={remainingMs} - totalMs={SAVE_COUNTDOWN_MS} + liveStart={liveStart} + orchestratorRunning={orchestratorRunning} + onSaveNow={() => void fireSave()} onCancel={cancelCountdown} + onToggleLiveStart={toggleLiveStart} /> {menu && ( diff --git a/makima/frontend/src/components/directives/DocumentTaskStream.tsx b/makima/frontend/src/components/directives/DocumentTaskStream.tsx new file mode 100644 index 0000000..62c1a52 --- /dev/null +++ b/makima/frontend/src/components/directives/DocumentTaskStream.tsx @@ -0,0 +1,338 @@ +/** + * 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. + * - "Comment" footer interrupts the running task via sendTaskMessage — + * same backend wire as the existing input bar, just framed as a comment. + */ +import { useCallback, useEffect, useRef, useState } from "react"; +import { SimpleMarkdown } from "../SimpleMarkdown"; +import { + useTaskSubscription, + type TaskOutputEvent, +} from "../../hooks/useTaskSubscription"; +import { getTaskOutput, sendTaskMessage } from "../../lib/api"; + +interface DocumentTaskStreamProps { + taskId: string; + /** Human label used as the document header (e.g. "orchestrator", step name) */ + label: string; +} + +export function DocumentTaskStream({ taskId, label }: DocumentTaskStreamProps) { + const [entries, setEntries] = useState<TaskOutputEvent[]>([]); + const [loading, setLoading] = useState(true); + const [isStreaming, setIsStreaming] = useState(false); + const [comment, setComment] = useState(""); + const [sending, setSending] = useState(false); + const [sendError, setSendError] = useState<string | null>(null); + const containerRef = useRef<HTMLDivElement>(null); + const [autoScroll, setAutoScroll] = useState(true); + + // Load historical output when the selected task changes. + useEffect(() => { + let cancelled = false; + setLoading(true); + setEntries([]); + 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, + })); + 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) => [...prev, event]); + setIsStreaming(true); + }, []); + + 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); + } + }, []); + + useTaskSubscription({ + taskId, + subscribeOutput: true, + onOutput: handleOutput, + onUpdate: handleUpdate, + }); + + // Auto-scroll while at bottom. + useEffect(() => { + if (autoScroll && containerRef.current) { + containerRef.current.scrollTop = containerRef.current.scrollHeight; + } + }, [entries, autoScroll]); + + const handleScroll = useCallback(() => { + if (!containerRef.current) return; + const { scrollTop, scrollHeight, clientHeight } = containerRef.current; + const atBottom = scrollHeight - scrollTop - clientHeight < 80; + setAutoScroll(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) => [ + ...prev, + { + taskId, + messageType: "user_input", + content: trimmed, + isPartial: false, + }, + ]); + 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], + ); + + return ( + <div className="flex-1 flex flex-col h-full overflow-hidden bg-[#0a1628]"> + {/* Document body */} + <div + ref={containerRef} + onScroll={handleScroll} + className="flex-1 overflow-y-auto" + > + <div className="max-w-3xl mx-auto px-8 py-10 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> + + {/* Comment / interrupt footer */} + <div className="shrink-0 border-t border-dashed border-[rgba(117,170,252,0.25)] bg-[#091428]"> + {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-4 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> + ); + } +} + +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/routes/document-directives.tsx b/makima/frontend/src/routes/document-directives.tsx index 42e6a69..687d86f 100644 --- a/makima/frontend/src/routes/document-directives.tsx +++ b/makima/frontend/src/routes/document-directives.tsx @@ -1,10 +1,15 @@ -import { useEffect, useMemo, useState } from "react"; -import { useNavigate, useParams } from "react-router"; +import { useCallback, useEffect, useMemo, useRef, useState } from "react"; +import { useNavigate, useParams, useSearchParams } from "react-router"; import { Masthead } from "../components/Masthead"; import { useDirective, useDirectives } from "../hooks/useDirectives"; import { useAuth } from "../contexts/AuthContext"; import { DocumentEditor } from "../components/directives/DocumentEditor"; -import type { DirectiveSummary, DirectiveStatus } from "../lib/api"; +import { DocumentTaskStream } from "../components/directives/DocumentTaskStream"; +import type { + DirectiveStatus, + DirectiveSummary, + DirectiveWithSteps, +} from "../lib/api"; // Status dot color, matching the existing tabular UI's badge palette so the // document mode feels like a sibling of the existing list, not a foreign UI. @@ -16,27 +21,17 @@ const STATUS_DOT: Record<DirectiveStatus, string> = { archived: "bg-[#3a4a6a]", }; -// ============================================================================= -// Sidebar grouping — group directives by lifecycle stage so the file tree -// reads like a folder per status. We collapse the noisy ones (Archived) by -// default and keep Active / Idle expanded. -// ============================================================================= - -type SidebarGroup = "active" | "idle" | "archived"; - -const GROUP_LABEL: Record<SidebarGroup, string> = { - active: "active", - idle: "idle", - archived: "archived", +// Per-task dot color for the sidebar entries inside a directive folder. +// Matches the StepsBlockNode palette. +const STEP_STATUS_DOT: Record<string, string> = { + pending: "bg-[#556677]", + ready: "bg-[#9bc3ff]", + running: "bg-yellow-400", + done: "bg-green-400", + failed: "bg-red-400", + skipped: "bg-[#3a4a6a]", }; -function bucketOf(status: DirectiveStatus): SidebarGroup { - if (status === "active" || status === "paused") return "active"; - if (status === "archived") return "archived"; - // draft + idle land in the idle bucket (i.e. "not currently running"). - return "idle"; -} - // ============================================================================= // Sidebar icons (inline SVG, no new deps) // ============================================================================= @@ -92,6 +87,24 @@ function FileIcon() { ); } +function PinIcon() { + return ( + <svg + viewBox="0 0 16 16" + width={10} + height={10} + className="shrink-0" + aria-hidden + > + <path + d="M8 1.5l1.6 3.6 3.9.4-2.95 2.7.85 3.9L8 10.2 4.6 12.1l.85-3.9L2.5 5.5l3.9-.4z" + fill="#75aafc" + opacity="0.7" + /> + </svg> + ); +} + function Caret({ open }: { open: boolean }) { return ( <svg @@ -110,42 +123,266 @@ function Caret({ open }: { open: boolean }) { // Sidebar // ============================================================================= +function slugify(title: string, fallback: string): string { + const slug = title + .trim() + .replace(/\s+/g, "-") + .replace(/[^a-zA-Z0-9._-]/g, "") + .toLowerCase(); + return slug.length > 0 ? slug : fallback; +} + +interface SidebarSelection { + directiveId: string; + /** null = the directive's document; otherwise a task id (orchestrator/step). */ + taskId: string | null; +} + interface SidebarProps { directives: DirectiveSummary[]; loading: boolean; - selectedId: string | null; - onSelect: (id: string) => void; + selection: SidebarSelection | null; + onSelect: (sel: SidebarSelection) => void; } -function DocumentSidebar({ directives, loading, selectedId, onSelect }: SidebarProps) { - const groups: Record<SidebarGroup, DirectiveSummary[]> = useMemo(() => { - const out: Record<SidebarGroup, DirectiveSummary[]> = { - active: [], - idle: [], - archived: [], - }; - for (const d of directives) { - out[bucketOf(d.status)].push(d); +/** + * Per-directive folder. Renders the directive as a collapsible folder whose + * children are the pinned document entry (always first) and the live task list + * — orchestrator, completion, and any step tasks. We fetch the directive's + * full step list lazily, only when the folder is expanded, to avoid a thundering + * herd of GETs at page load. + */ +function DirectiveFolder({ + directive, + open, + onToggle, + selection, + onSelect, +}: { + directive: DirectiveSummary; + open: boolean; + onToggle: () => void; + selection: SidebarSelection | null; + onSelect: (sel: SidebarSelection) => void; +}) { + const dotColor = STATUS_DOT[directive.status] ?? STATUS_DOT.draft; + const fileName = `${slugify(directive.title, directive.id.slice(0, 8))}.md`; + + // Lazy fetch full directive (with steps) only when folder is open. + const { directive: detailed } = useDirective(open ? directive.id : undefined); + + const docSelected = + selection?.directiveId === directive.id && selection.taskId === null; + + // Collect the tasks to surface in the folder body. + const tasks = useMemo(() => collectTasks(detailed, directive), [detailed, directive]); + + return ( + <div className="select-none"> + <button + type="button" + onClick={onToggle} + title={directive.title} + className="w-full flex items-center gap-1.5 pl-3 pr-3 py-1 font-mono text-[11px] text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.05)]" + > + <Caret open={open} /> + {/* Color icon LEFT — the user explicitly asked for an icon, not a /status text label. */} + <span + className={`inline-block w-2 h-2 rounded-full shrink-0 ${dotColor}`} + aria-label={`status: ${directive.status}`} + title={`status: ${directive.status}`} + /> + <FolderIcon open={open} /> + <span className="truncate flex-1 text-left">{directive.title}</span> + {/* And RIGHT — same dot, plus a pulsing one if the orchestrator is live. */} + {!!directive.orchestratorTaskId && ( + <span + className="inline-block w-1.5 h-1.5 rounded-full shrink-0 bg-yellow-400 animate-pulse" + title="Orchestrator running" + aria-label="Orchestrator running" + /> + )} + <span + className={`inline-block w-2 h-2 rounded-full shrink-0 ${dotColor}`} + aria-hidden + /> + </button> + + {open && ( + <ul className="py-0.5"> + {/* Pinned document entry — always at the top of the folder. */} + <li> + <button + type="button" + onClick={() => + onSelect({ directiveId: directive.id, taskId: null }) + } + className={`w-full text-left flex items-center gap-1.5 pl-8 pr-3 py-1 font-mono text-[11px] transition-colors ${ + docSelected + ? "bg-[rgba(117,170,252,0.12)] text-white border-l-2 border-[#75aafc]" + : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)] border-l-2 border-transparent" + }`} + > + <PinIcon /> + <FileIcon /> + <span className="truncate flex-1">{fileName}</span> + </button> + </li> + + {tasks.length === 0 ? ( + <li className="pl-10 pr-3 py-1 font-mono text-[10px] text-[#556677]"> + No tasks yet + </li> + ) : ( + tasks.map((t) => { + const isSelected = + selection?.directiveId === directive.id && + selection?.taskId === t.taskId; + const tdot = STEP_STATUS_DOT[t.status] ?? STEP_STATUS_DOT.pending; + const live = + t.status === "running" || t.kind === "orchestrator-active"; + return ( + <li key={t.taskId}> + <button + type="button" + onClick={() => + onSelect({ + directiveId: directive.id, + taskId: t.taskId, + }) + } + title={t.label} + className={`w-full text-left flex items-center gap-1.5 pl-10 pr-3 py-1 font-mono text-[11px] transition-colors ${ + isSelected + ? "bg-[rgba(117,170,252,0.12)] text-white border-l-2 border-[#75aafc]" + : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)] border-l-2 border-transparent" + }`} + > + <span + className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${tdot}`} + aria-hidden + /> + <span className="truncate flex-1">{t.label}</span> + {live && ( + <span + className="inline-block w-1.5 h-1.5 rounded-full shrink-0 bg-yellow-400 animate-pulse" + aria-hidden + /> + )} + </button> + </li> + ); + }) + )} + </ul> + )} + </div> + ); +} + +interface FolderTaskRow { + taskId: string; + label: string; + status: string; + kind: "orchestrator-active" | "completion" | "step"; +} + +function collectTasks( + detailed: DirectiveWithSteps | null, + summary: DirectiveSummary, +): FolderTaskRow[] { + const rows: FolderTaskRow[] = []; + + // Orchestrator (planner) — surfaces only while it's actively running so + // the folder is not flooded with stale orchestrator entries. + const orchestratorId = + detailed?.orchestratorTaskId ?? summary.orchestratorTaskId ?? null; + if (orchestratorId) { + rows.push({ + taskId: orchestratorId, + label: "orchestrator", + status: "running", + kind: "orchestrator-active", + }); + } + + // Completion (PR creation) task. + const completionId = + detailed?.completionTaskId ?? summary.completionTaskId ?? null; + if (completionId) { + rows.push({ + taskId: completionId, + label: "completion", + status: "running", + kind: "completion", + }); + } + + // Step tasks — only steps that have actually been started have a taskId. + if (detailed) { + for (const step of detailed.steps) { + if (!step.taskId) continue; + rows.push({ + taskId: step.taskId, + label: step.name, + status: step.status, + kind: "step", + }); } - // Sort each group alphabetically so it feels like a stable file tree. - (Object.keys(out) as SidebarGroup[]).forEach((k) => { - out[k].sort((a, b) => - a.title.localeCompare(b.title, undefined, { sensitivity: "base" }), - ); + } + + return rows; +} + +interface SidebarProps { + directives: DirectiveSummary[]; + loading: boolean; + selection: SidebarSelection | null; + onSelect: (sel: SidebarSelection) => void; +} + +function DocumentSidebar({ directives, loading, selection, onSelect }: SidebarProps) { + // Sort active first, then idle, then paused, then archived. + const sorted = useMemo(() => { + const order: Record<DirectiveStatus, number> = { + active: 0, + paused: 1, + idle: 2, + draft: 3, + archived: 4, + }; + return [...directives].sort((a, b) => { + const oa = order[a.status] ?? 99; + const ob = order[b.status] ?? 99; + if (oa !== ob) return oa - ob; + return a.title.localeCompare(b.title, undefined, { sensitivity: "base" }); }); - return out; }, [directives]); - // Default-collapsed state per folder. Archived is collapsed by default - // (it's history); the other two are open so users see their work. - const [openGroups, setOpenGroups] = useState<Record<SidebarGroup, boolean>>({ - active: true, - idle: true, - archived: false, - }); - - const toggleGroup = (g: SidebarGroup) => - setOpenGroups((prev) => ({ ...prev, [g]: !prev[g] })); + // Track which directive folders are open. The currently selected directive + // is forced open so deep links land on something visible. + const [openIds, setOpenIds] = useState<Set<string>>(new Set()); + const lastSelectedRef = useRef<string | null>(null); + useEffect(() => { + if (selection && selection.directiveId !== lastSelectedRef.current) { + lastSelectedRef.current = selection.directiveId; + setOpenIds((prev) => { + if (prev.has(selection.directiveId)) return prev; + const next = new Set(prev); + next.add(selection.directiveId); + return next; + }); + } + }, [selection]); + + const toggleOpen = useCallback((id: string) => { + setOpenIds((prev) => { + const next = new Set(prev); + if (next.has(id)) next.delete(id); + else next.add(id); + return next; + }); + }, []); return ( <div className="flex flex-col h-full"> @@ -159,7 +396,7 @@ function DocumentSidebar({ directives, loading, selectedId, onSelect }: SidebarP </span> </div> - {/* Top-level "directives/" folder */} + {/* Top-level "directives/" folder header (informational, non-interactive). */} <div className="flex items-center gap-1.5 px-3 py-1.5 text-[11px] font-mono text-[#9bc3ff]"> <FolderIcon open /> <span>directives/</span> @@ -176,74 +413,16 @@ function DocumentSidebar({ directives, loading, selectedId, onSelect }: SidebarP No directives yet </div> ) : ( - (Object.keys(groups) as SidebarGroup[]).map((group) => { - const list = groups[group]; - if (list.length === 0) return null; - const open = openGroups[group]; - return ( - <div key={group} className="select-none"> - {/* Group header (sub-folder) */} - <button - type="button" - onClick={() => toggleGroup(group)} - className="w-full flex items-center gap-1.5 pl-4 pr-3 py-1 font-mono text-[11px] text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.05)]" - > - <Caret open={open} /> - <FolderIcon open={open} /> - <span>{GROUP_LABEL[group]}/</span> - <span className="ml-auto text-[10px] text-[#556677]"> - {list.length} - </span> - </button> - - {/* Files inside the group */} - {open && ( - <ul className="py-0.5"> - {list.map((d) => { - const isSelected = d.id === selectedId; - const dot = STATUS_DOT[d.status] ?? STATUS_DOT.draft; - const slug = d.title - .trim() - .replace(/\s+/g, "-") - .replace(/[^a-zA-Z0-9._-]/g, "") - .toLowerCase(); - const fileName = - slug.length > 0 ? `${slug}.md` : `${d.id.slice(0, 8)}.md`; - const orchestratorRunning = !!d.orchestratorTaskId; - return ( - <li key={d.id}> - <button - type="button" - onClick={() => onSelect(d.id)} - title={d.title} - className={`w-full text-left flex items-center gap-1.5 pl-9 pr-3 py-1 font-mono text-[11px] transition-colors ${ - isSelected - ? "bg-[rgba(117,170,252,0.12)] text-white border-l-2 border-[#75aafc]" - : "text-[#9bc3ff] hover:bg-[rgba(117,170,252,0.06)] border-l-2 border-transparent" - }`} - > - <FileIcon /> - <span - className={`inline-block w-1.5 h-1.5 rounded-full shrink-0 ${dot}`} - aria-hidden - /> - <span className="truncate flex-1">{fileName}</span> - {orchestratorRunning && ( - <span - className="inline-block w-1.5 h-1.5 rounded-full shrink-0 bg-yellow-400 animate-pulse" - title="Orchestrator running" - aria-label="Orchestrator running" - /> - )} - </button> - </li> - ); - })} - </ul> - )} - </div> - ); - }) + sorted.map((d) => ( + <DirectiveFolder + key={d.id} + directive={d} + open={openIds.has(d.id)} + onToggle={() => toggleOpen(d.id)} + selection={selection} + onSelect={onSelect} + /> + )) )} </div> </div> @@ -257,11 +436,19 @@ function DocumentSidebar({ directives, loading, selectedId, onSelect }: SidebarP interface EditorShellProps { selectedId: string | undefined; + selectedTaskId: string | null; hasDirectives: boolean; listLoading: boolean; + onClearTask: () => void; } -function EditorShell({ selectedId, hasDirectives, listLoading }: EditorShellProps) { +function EditorShell({ + selectedId, + selectedTaskId, + hasDirectives, + listLoading, + onClearTask, +}: EditorShellProps) { const { directive, loading, @@ -301,6 +488,16 @@ function EditorShell({ selectedId, hasDirectives, listLoading }: EditorShellProp ); } + // Resolve the label for the breadcrumb when a task is selected. + const taskLabel = selectedTaskId + ? selectedTaskId === directive.orchestratorTaskId + ? "orchestrator" + : selectedTaskId === directive.completionTaskId + ? "completion" + : directive.steps.find((s) => s.taskId === selectedTaskId)?.name ?? + selectedTaskId.slice(0, 8) + : null; + return ( <div className="flex-1 flex flex-col h-full overflow-hidden"> {/* Document header — breadcrumb-like, mirrors a code editor's tab bar */} @@ -309,7 +506,20 @@ function EditorShell({ selectedId, hasDirectives, listLoading }: EditorShellProp <FileIcon /> <span>directives /</span> <span className="text-[#9bc3ff]">{directive.id.slice(0, 8)}</span> - {!!directive.orchestratorTaskId && ( + {selectedTaskId && ( + <> + <span>/</span> + <span className="text-[#9bc3ff]">{taskLabel}</span> + <button + type="button" + onClick={onClearTask} + className="ml-2 px-1.5 py-0.5 text-[#7788aa] hover:text-white border border-[#2a3a5a] rounded normal-case" + > + back to document + </button> + </> + )} + {!selectedTaskId && !!directive.orchestratorTaskId && ( <span className="ml-2 inline-flex items-center gap-1 text-yellow-400"> <span className="inline-block w-1.5 h-1.5 rounded-full bg-yellow-400 animate-pulse" /> orchestrator running @@ -318,22 +528,28 @@ function EditorShell({ selectedId, hasDirectives, listLoading }: EditorShellProp </div> </div> - {/* Lexical editor body */} - <DocumentEditor - directive={directive} - onUpdateGoal={async (goal) => { - await updateGoal(goal); - }} - onCleanup={async () => { - await cleanup(); - }} - onCreatePR={async () => { - await createPR(); - }} - onPickUpOrders={async () => { - await pickUpOrders(); - }} - /> + {selectedTaskId ? ( + <DocumentTaskStream + taskId={selectedTaskId} + label={taskLabel ?? selectedTaskId.slice(0, 8)} + /> + ) : ( + <DocumentEditor + directive={directive} + onUpdateGoal={async (goal) => { + await updateGoal(goal); + }} + onCleanup={async () => { + await cleanup(); + }} + onCreatePR={async () => { + await createPR(); + }} + onPickUpOrders={async () => { + await pickUpOrders(); + }} + /> + )} </div> ); } @@ -346,6 +562,8 @@ export default function DocumentDirectivesPage() { const { isAuthenticated, isAuthConfigured, isLoading: authLoading } = useAuth(); const navigate = useNavigate(); const { id: selectedId } = useParams<{ id: string }>(); + const [searchParams, setSearchParams] = useSearchParams(); + const selectedTaskId = searchParams.get("task"); const { directives, loading: listLoading } = useDirectives(); useEffect(() => { @@ -354,6 +572,22 @@ export default function DocumentDirectivesPage() { } }, [authLoading, isAuthConfigured, isAuthenticated, navigate]); + const onSelect = useCallback( + (sel: SidebarSelection) => { + const next = `/directives/${sel.directiveId}${ + sel.taskId ? `?task=${sel.taskId}` : "" + }`; + navigate(next); + }, + [navigate], + ); + + const onClearTask = useCallback(() => { + const next = new URLSearchParams(searchParams); + next.delete("task"); + setSearchParams(next, { replace: true }); + }, [searchParams, setSearchParams]); + if (authLoading) { return ( <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]"> @@ -365,6 +599,10 @@ export default function DocumentDirectivesPage() { ); } + const selection: SidebarSelection | null = selectedId + ? { directiveId: selectedId, taskId: selectedTaskId } + : null; + return ( <div className="relative z-10 min-h-screen flex flex-col bg-[#0a1628]"> <Masthead showNav /> @@ -373,20 +611,22 @@ export default function DocumentDirectivesPage() { style={{ height: "calc(100vh - 80px)" }} > {/* Left: file-tree sidebar */} - <div className="w-[240px] shrink-0 border-r border-dashed border-[rgba(117,170,252,0.2)] overflow-hidden flex flex-col bg-[#091428]"> + <div className="w-[260px] shrink-0 border-r border-dashed border-[rgba(117,170,252,0.2)] overflow-hidden flex flex-col bg-[#091428]"> <DocumentSidebar directives={directives} loading={listLoading} - selectedId={selectedId ?? null} - onSelect={(id) => navigate(`/directives/${id}`)} + selection={selection} + onSelect={onSelect} /> </div> - {/* Right: Lexical editor */} + {/* Right: Lexical editor / task stream */} <EditorShell selectedId={selectedId} + selectedTaskId={selectedTaskId} hasDirectives={directives.length > 0} listLoading={listLoading} + onClearTask={onClearTask} /> </main> </div> |