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