/**
* 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";
}
}
